/* ============================================================
   LITALK — Global Design System
   Style: Apple-inspired — minimal, premium, monochrome.
   Light & dark palettes share one token set; dark mode follows
   the OS automatically via prefers-color-scheme.
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light;

  /* Colors — Apple-ish neutrals */
  --clr-black:      #1D1D1F;   /* ink: text + strong fills */
  --clr-bg:         #FFFFFF;   /* page base (also contrast color on ink fills) */
  --clr-secondary:  #424245;
  --clr-border:     #E8E8ED;
  --clr-muted:      #6E6E73;
  --clr-light-bg:   #F5F5F7;   /* alternate sections */

  /* Surfaces that stay dark in BOTH modes (footer, featured card) */
  --clr-dark-surface: #0D0D0F;
  --clr-dark-ink:     #F5F5F7;

  /* Subtle helpers */
  --clr-tint:         rgba(0,0,0,0.03);
  --clr-ghost-stroke: rgba(0,0,0,0.06);

  /* Frosted navigation */
  --nav-bg:     rgba(255,255,255,0.72);
  --nav-border: rgba(0,0,0,0.08);

  /* Typography */
  --font-en: 'Montserrat', 'Noto Sans Thai', sans-serif;
  --font-th: 'Montserrat', 'Noto Sans Thai', sans-serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --section-py:    100px;
  /* Heading block to the content under it. Named because it is the one
     measurement that has drifted twice — it was 64px in one section and 48px
     in another against 56px everywhere else. */
  --section-head-gap: 56px;
  --container-max: 1200px;
  --container-px:  24px;
  --radius:        14px;
  --radius-sm:     10px;
  --radius-lg:     20px;
  --radius-pill:   980px;

  /* Transitions */
  /* The quick one, for a control reacting to a press or hover. It was the
     most-used duration in this file — eleven declarations — and the only one
     with no token, so it was the easiest to drift. */
  --transition-fast: 150ms ease-out;
  --transition-dur: 250ms;
  --transition:    250ms ease;
  --transition-md: 300ms ease;

  /* The curve for surface motion — anything that opens, closes, slides,
     resizes or changes position. --panel-ease, --tabs-ease and --acc-ease are
     all this same curve under component-specific names; they predate this
     token and can fold into it. */
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Per-item offset for a staggered reveal. Kept as one number because the
     thing that goes wrong is the TOTAL: offset x item count wants to stay
     under ~300ms, or the last card lands after the reader has already
     looked at it. */
  --stagger-step: 80ms;

  /* Stacking order, lowest to highest. Pick the rung that describes what the
     thing IS, rather than a number big enough to win today — that is how a
     file ends up with twelve unrelated z-index values and a 4000 someone
     picked to be safe.
     Existing rules still carry raw numbers that map onto this ladder; they
     are documented here but not rewritten, because reordering a stacking
     context wants its own pass with something to look at. New code uses the
     tokens. */
  --z-raised:   10;   /* lifts within a component */
  --z-sticky:  900;   /* sticky headers, in-page bars */
  --z-nav:    1000;   /* the site header */
  --z-drawer: 1200;   /* mobile menu */
  --z-overlay:1300;   /* dimmers behind a dialog */
  --z-modal:  2000;   /* dialogs, the chat panel */
  --z-notice: 4000;   /* service notices: above everything, including a modal,
                         because they can close the page under it */

  /* Shadows — minimal */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.09);

  /* ── Motion tokens — shared scale ────────────────────────────── */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;

  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);

  /* Accordion expand */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Tabs sliding */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: #6B7280;
  --tabs-text-active: #000000;
  --tabs-bar-bg: #F3F4F6;
  --tabs-pill-bg: #FFFFFF;

  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 12px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Card hover tilt */
  --tilt-perspective: 1000px;
  --tilt-return: 800ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 300ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.16;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Automatic Dark Mode ----------
   The whole palette flips by re-mapping the same tokens, so every
   component below inherits dark mode for free. Follows the OS
   setting (prefers-color-scheme) — no manual switch needed. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --clr-black:      #F5F5F7;
    --clr-bg:         #000000;
    --clr-secondary:  #D2D2D7;
    --clr-border:     #2D2D30;
    --clr-muted:      #86868B;
    --clr-light-bg:   #161617;

    --clr-dark-surface: #1D1D1F;
    --clr-dark-ink:     #F5F5F7;

    --clr-tint:         rgba(255,255,255,0.05);
    --clr-ghost-stroke: rgba(255,255,255,0.08);

    --nav-bg:     rgba(18,18,20,0.72);
    --nav-border: rgba(255,255,255,0.12);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 28px rgba(0,0,0,0.55);

    --tabs-text-muted:  #86868B;
    --tabs-text-active: #F5F5F7;
    --tabs-bar-bg:      #1D1D1F;
    --tabs-pill-bg:     #000000;
  }

  /* The wordmark is a black PNG — invert it to white on dark surfaces. */
  .theme-invertable { filter: invert(1); }
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* WebKit: stop iOS Safari from inflating text in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-en);
  background: var(--clr-bg);
  color: var(--clr-black);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* WebKit: no grey flash when tapping buttons/links on iOS */
  -webkit-tap-highlight-color: transparent;
}

[lang="th"] body,
html[data-lang="th"] body {
  font-family: var(--font-th);
}

/* ---------- Accessibility baseline (Admin-Page/docs/UX-REDESIGN.md §7) ---------- */
/* Keyboard focus ring — :focus-visible only, so mouse/touch users never see
   it but keyboard users always do (WCAG 2.4.7). Monochrome ink outline works
   on both light and dark surfaces since the palette flips with the tokens. */
:focus-visible {
  outline: 2px solid var(--clr-black);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link for keyboard/screen-reader users (WCAG 2.4.1): visually hidden
   until focused, then drops in above the frosted nav. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 2000;
  background: var(--clr-black);
  color: var(--clr-bg);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top var(--duration-quick) var(--ease-out);
}

.skip-link:focus-visible {
  top: 16px;
}

/* Fitts's Law: icon-only controls get a >=44px hit area on touch devices
   without changing desktop density (pointer: coarse only). */
@media (pointer: coarse) {
  .nav__hamburger {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }

  /* Keep the drawn icon at its original 28px while the tap target grows —
     the spans are width-less blocks, so centering alone would collapse them. */
  .nav__hamburger span {
    width: 28px;
  }

  .ai-chat-panel__icon-btn {
    width: 44px;
    height: 44px;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
  /* WebKit: strip the iOS system button style (blue text, rounded chrome)
     so a button never renders with UA styling, even before/without its
     component styles. */
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font-size: inherit;
  text-align: inherit;
  touch-action: manipulation;
}

input,
textarea,
select {
  /* WebKit: form controls don't inherit fonts by default */
  font-family: inherit;
}

/* WebKit: strip iOS's inner shadows/rounded chrome from text fields —
   :where() keeps specificity at zero so component styles still win
   (checkboxes/radios keep their native appearance). */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- Prefers Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Container ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ---------- Section Base ---------- */
.section {
  padding: var(--section-py) 0;
}

.section--alt {
  background: var(--clr-light-bg);
}

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 16px;
}

.section-heading {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--clr-black);
  margin-bottom: 20px;
}

.section-sub {
  font-size: 17px;
  color: var(--clr-muted);
  max-width: 560px;
  line-height: 1.75;
}

.text-center {
  text-align: center;
}

.text-center .section-sub {
  margin: 0 auto;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background var(--transition-md), border-color var(--transition-md), box-shadow var(--transition-md);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  border-bottom-color: var(--nav-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 32px;
}

.nav__logo {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Logo image is 28px tall; extend the tap area to 44px without moving it. */
.nav__logo::after {
  content: '';
  position: absolute;
  inset: -11px -4px;
}

.nav__logo img {
  height: 28px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  /* 36px with five short labels; six phrase-length ones overflowed the
     container by 6px, and nowrap means the list cannot shrink to absorb it. */
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-secondary);
  transition: color var(--transition);
  position: relative;
  /* Labels are phrases now — "Online Learning", "1-on-1 Tutoring" — and
     without this they break at the space, putting the bar on two lines and
     the underline indicator under half a word. */
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--clr-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-dur) var(--ease-smooth-out);
}

.nav__link:hover { color: var(--clr-black); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Language Toggle — ONE switch that flips EN ⇄ TH.
   The sliding thumb sits under the active label. */
.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  padding: 2px;
  background: var(--clr-bg);
  cursor: pointer;
  transition: border-color var(--transition);
}

.lang-toggle:hover { border-color: var(--clr-muted); }

.lang-toggle__opt {
  position: relative;
  z-index: 1;
  min-width: 46px;
  text-align: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-muted);
  transition: color var(--tabs-dur) var(--tabs-ease);
  line-height: 1.4;
}

.lang-toggle__opt.active { color: var(--clr-bg); }

.lang-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  width: calc(50% - 2px);
  background: var(--clr-black);
  border-radius: var(--radius-pill);
  transition: transform var(--tabs-dur) var(--tabs-ease);
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

.lang-toggle[data-active="th"] .lang-toggle__thumb {
  transform: translateX(100%);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px 0;
}

.nav__hamburger span {
  display: block;
  height: 2px;
  background: var(--clr-black);
  border-radius: 2px;
  transition: transform var(--transition-dur) var(--ease-smooth-out), opacity var(--transition-dur) var(--ease-smooth-out);
}

.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Drawer with Panel Reveal */
.nav__drawer {
  display: flex;
  visibility: hidden;
  flex-direction: column;
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-border);
  padding: 24px var(--container-px) 32px;
  gap: 4px;
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  box-shadow: var(--shadow-md);
  
  /* Panel Reveal Closed State */
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease),
    visibility var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
  z-index: 99;
}

.nav__drawer.open {
  visibility: visible;
  /* Panel Reveal Open State */
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease),
    visibility 0s linear;
}

.nav__drawer .nav__link {
  padding: 12px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--clr-border);
}

.nav__drawer .nav__link::after { display: none; }

.nav__drawer .nav__actions {
  margin-top: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.btn--primary {
  background: var(--clr-black);
  color: var(--clr-bg);
  border: 2px solid var(--clr-black);
}

.btn--primary:hover {
  background: var(--clr-secondary);
  border-color: var(--clr-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--clr-black);
  border: 2px solid var(--clr-black);
}

.btn--outline:hover {
  background: var(--clr-black);
  color: var(--clr-bg);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--clr-black);
  border: 2px solid var(--clr-border);
  font-weight: 600;
}

.btn--ghost:hover {
  border-color: var(--clr-black);
  transform: translateY(-1px);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 13px;
}

.btn--lg {
  padding: 18px 36px;
  font-size: 15px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  /* WebKit: small-viewport unit tracks Safari's collapsing toolbar,
     so the hero never jumps while scrolling on iPhone/iPad */
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--clr-border);
  padding-top: 68px;
}

.hero__bg-text {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(160px, 22vw, 320px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-ghost-stroke);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  width: 100%;
}

.hero__content {
  animation: fadeInUp 0.8s ease both;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 28px;
}

.hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--clr-muted);
}

.hero__headline {
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--clr-black);
  margin-bottom: 28px;
}

.hero__headline em {
  font-style: normal;
  position: relative;
}

.hero__sub {
  font-size: 18px;
  color: var(--clr-muted);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 44px;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__visual {
  position: relative;
  animation: fadeIn 1s ease 0.3s both;
}

.hero__img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  aspect-ratio: 4/3;
  background: var(--clr-light-bg);
}

.hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}

.hero__img-wrap:hover img {
  transform: scale(1.04);
}

.hero__badge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeInUp 0.8s ease 0.6s both;
}

.hero__badge-icon {
  width: 40px;
  height: 40px;
  background: var(--clr-black);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__badge-icon svg,
.hero__badge-icon i {
  width: 20px;
  height: 20px;
  stroke: var(--clr-bg);
  color: var(--clr-bg);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__badge-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.3;
}

.hero__badge-text span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--clr-muted);
  margin-top: 2px;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about__visual {
  position: relative;
}

.about__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  aspect-ratio: 4/5;
}

.about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__accent {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 120px;
  height: 120px;
  border: 2px solid var(--clr-black);
  border-radius: var(--radius);
  z-index: -1;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  padding: 24px 20px;
  text-align: center;
  border-right: 1px solid var(--clr-border);
}

.stat:last-child { border-right: none; }

.stat__num {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--clr-black);
  line-height: 1;
  margin-bottom: 6px;
}

.stat__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-muted);
  letter-spacing: 0.04em;
}

.about__text .section-sub {
  margin-bottom: 32px;
}

.about__body {
  font-size: 16px;
  color: var(--clr-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ============================================================
   PROGRAMS
   ============================================================ */
.programs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: var(--section-head-gap);
}

.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  touch-action: none;
}

/* Move styles to inner t-tilt-card */
.t-tilt-card {
  position: relative;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  background: var(--clr-bg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}

.t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}

.t-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
  z-index: 2;
}

.t-tilt.is-hover .t-tilt-glare {
  opacity: var(--tilt-glare-opacity);
}

/* The featured card stays a dark panel in BOTH color modes, so its
   white-alpha accents below keep working under automatic dark mode. */
.program-card--featured .t-tilt-card {
  border-color: var(--clr-dark-surface);
  background: var(--clr-dark-surface);
  color: var(--clr-dark-ink);
}

.program-card--featured:hover .t-tilt-card {
  border-color: rgba(255,255,255,0.28);
}

@media (prefers-reduced-motion: reduce) {
  .t-tilt-card { transform: none !important; transition: none !important; }
}

.program-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  color: var(--clr-muted);
  margin-bottom: 24px;
  width: fit-content;
}

.program-card--featured .program-card__tag {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
}

.program-card__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.program-card__desc {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.program-card--featured .program-card__desc {
  color: rgba(255,255,255,0.65);
}

.program-card__price {
  margin-bottom: 28px;
}

.program-card__price-num {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.program-card__price-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-muted);
  margin-left: 4px;
}

.program-card--featured .program-card__price-unit { color: rgba(255,255,255,0.6); }

.program-card__features {
  flex: 1;
  margin-bottom: 32px;
}

.program-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--clr-muted);
  border-bottom: 1px solid var(--clr-border);
}

.program-card--featured .program-card__feature {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.12);
}

.program-card__feature:last-child { border-bottom: none; }

.feature-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-black);
}

.program-card--featured .feature-check {
  color: #FFFFFF;
}

.program-card--featured .btn--primary {
  background: #FFFFFF;
  color: #0D0D0F;
  border-color: #FFFFFF;
}

.program-card--featured .btn--primary:hover {
  background: #E5E5E5;
  border-color: #E5E5E5;
}

/* ============================================================
   WHY CHOOSE
   ============================================================ */
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--section-head-gap);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.why-item {
  padding: 36px 28px;
  border-right: 1px solid var(--clr-border);
  transition: background var(--transition);
}

.why-item:last-child { border-right: none; }

.why-item:hover { background: var(--clr-light-bg); }

.why-item__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  margin-bottom: 20px;
  transition: border-color var(--transition), background var(--transition);
}

.why-item:hover .why-item__icon {
  border-color: var(--clr-black);
  background: var(--clr-black);
}

.why-item:hover .why-item__icon svg {
  stroke: var(--clr-bg);
}
.why-item:hover .why-item__icon i {
  color: var(--clr-bg);
}

.why-item__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--clr-black);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--transition);
}
.why-item__icon i {
  font-size: 20px;
  color: var(--clr-black);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.why-item__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--clr-black);
}

.why-item__desc {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.7;
}

/* ============================================================
   STUDENT JOURNEY (Timeline)
   ============================================================ */
.journey {
  padding: var(--section-py) 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.journey__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  /* 56px is what every other section puts between its heading and its
     content; this was the one at 64. */
  margin-top: var(--section-head-gap);
}

.journey__track::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--clr-border);
  z-index: 0;
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.journey-step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  background: var(--clr-bg);
  color: var(--clr-black);
  margin-bottom: 20px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  letter-spacing: -0.02em;
}

.journey-step.active .journey-step__num,
.journey-step:hover .journey-step__num {
  background: var(--clr-black);
  border-color: var(--clr-black);
  color: var(--clr-bg);
}

.journey-step__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-black);
  margin-bottom: 8px;
}

.journey-step__desc {
  font-size: 13px;
  color: var(--clr-muted);
  line-height: 1.6;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { overflow: hidden; }

.testimonials__carousel-wrap {
  position: relative;
  margin-top: var(--section-head-gap);
  /* Clip the off-screen slides so the cards (and their text) stay inside the
     slider instead of spilling past its edges as the track translates. */
  overflow: hidden;
  /* Room so the cards' hover lift (translateY(-3px)) isn't clipped at the top.
     Vertical only — horizontal padding would skew the JS card-width calc,
     which reads this element's offsetWidth. */
  padding-top: 4px;
}

.testimonials__track {
  display: flex;
  gap: 24px;
  transition: transform var(--transition-md);
}

.testimonial-card {
  flex: 0 0 calc(33.333% - 16px);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: border-color var(--transition), transform var(--transition-md);
  background: var(--clr-bg);
}

.testimonial-card:hover {
  border-color: var(--clr-black);
  transform: translateY(-3px);
}

.testimonial-card__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
}

.star {
  width: 14px;
  height: 14px;
  background: var(--clr-black);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.testimonial-card__quote {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-secondary);
  margin-bottom: 28px;
  font-style: italic;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-light-bg);
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-black);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-black);
  margin-bottom: 2px;
}

.testimonial-card__course {
  font-size: 12px;
  color: var(--clr-muted);
}

.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}

.carousel-btn:hover {
  background: var(--clr-black);
  border-color: var(--clr-black);
}

.carousel-btn:hover svg { stroke: var(--clr-bg); }
.carousel-btn:hover i { color: var(--clr-bg); }

.carousel-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--clr-black);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--transition);
}
.carousel-btn i {
  font-size: 16px;
  color: var(--clr-black);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.carousel-dots {
  display: flex;
  gap: 14px;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-border);
  transition: background var(--transition), transform var(--transition-dur) var(--ease-smooth-out);
  cursor: pointer;
  position: relative;
}

/* The dot stays 6px; the invisible hit area reaches 44px tall, and 20px wide
   (the dot-to-dot pitch) so neighbours never overlap. */
.carousel-dot::after {
  content: '';
  position: absolute;
  inset: -19px -7px;
}

.carousel-dot.active {
  background: var(--clr-black);
  transform: scale(1.5);
}

/* ============================================================
   BLOG / RESOURCES
   ============================================================ */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: var(--section-head-gap);
}

.blog-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition-md), box-shadow var(--transition-md);
  background: var(--clr-bg);
}

.blog-card:hover {
  border-color: var(--clr-black);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.blog-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--clr-light-bg);
}

.blog-card__img img,
.blog-card__img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-md);
  pointer-events: none; /* card video is a silent looping preview, not a player */
}

.blog-card:hover .blog-card__img img,
.blog-card:hover .blog-card__img video { transform: scale(1.04); }

.blog-card__body {
  padding: 24px 24px 28px;
}

.blog-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: 4px 10px;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  margin-bottom: 14px;
}

.blog-card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--clr-black);
  margin-bottom: 10px;
}

.blog-card__excerpt {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.6;
  /* Clamp to 2 lines so cards with a long คำโปรย keep the same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.blog-card__date {
  font-size: 12px;
  color: var(--clr-muted);
}

.blog-card__link {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-black);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}

.blog-card__link:hover { gap: 8px; }
.blog-card__link::after {
  content: '';
  position: absolute;
  inset: -11px 0;
}

/* ============================================================
   HOME: on-demand course promo + LITALK+ teaser
   The course cards reuse .blog-card; these rules add the price / sale /
   subscription bits so the home page matches the /courses catalogue (whose
   own copy lives inline in courses.html).
   ============================================================ */
.course-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.course-card__link { display: block; color: inherit; text-decoration: none; }
.course-card__desc {
  font-size: 14px; color: var(--clr-muted); line-height: 1.6; margin: 10px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card__meta { margin-top: 14px; color: var(--clr-muted); font-size: 13px; }
.course-card__meta i { margin-right: 5px; }
.course-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 24px 22px; border-top: 1px solid var(--clr-border);
}
.course-price { font-weight: 700; font-size: 1.05rem; color: var(--clr-black); font-variant-numeric: tabular-nums; }
.course-price--free { color: #16a34a; }
.course-price-wrap { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.course-price--was { font-weight: 500; font-size: .95em; color: var(--clr-muted); text-decoration: line-through; }
.course-sale-badge {
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: #e0245e; padding: 3px 8px; border-radius: 999px; line-height: 1;
}
.course-card__sale {
  position: absolute; top: 12px; left: 12px; z-index: 2; font-size: .78rem; font-weight: 800;
  color: #fff; background: #e0245e; padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(224,36,94,.35);
}
.course-plus-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800;
  color: #8a5a00; background: linear-gradient(120deg,#ffe9a8,#ffd564);
  padding: 3px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
/* Coming soon (home promo cards) */
.course-card__soon {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 800; color: #fff; background: #2563eb; padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.course-countdown-lbl { font-size: .84rem; font-weight: 700; color: #2563eb; display: inline-flex; align-items: center; gap: 6px; }
.btn--soon { opacity: .75; pointer-events: none; }
/* Inline status badge — used at the top of the body on cover-less cards so the
   flag doesn't overlap the title/category. */
.course-card__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.course-soon-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800;
  color: #fff; background: #2563eb; padding: 3px 10px; border-radius: 999px; line-height: 1; }

/* LITALK+ subscription — standalone showcase card */
.plus-card {
  position: relative; overflow: hidden; border-radius: 28px;
  background: linear-gradient(135deg, #14142a 0%, #2c2050 48%, #4a2f8f 100%);
  color: #fff; padding: 2px; isolation: isolate;
}
/* Soft moving glow behind the content */
.plus-card__glow {
  position: absolute; z-index: 0; width: 60%; aspect-ratio: 1; border-radius: 50%;
  top: -20%; right: -10%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,92,224,.55), transparent 62%);
  filter: blur(20px);
}
.plus-card__inner { position: relative; z-index: 1; padding: clamp(30px, 5vw, 56px); }
.plus-card__lead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.plus-badge {
  display: inline-flex; align-items: center; font-size: 15px; font-weight: 800; letter-spacing: .02em;
  color: #2a1c50; background: linear-gradient(120deg, #ffe9a8, #ffcf4d);
  padding: 7px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(255,193,63,.28);
}
.plus-soon {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: 6px 14px;
}
.plus-card__title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 14px; }
.plus-card__sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.7; color: rgba(255,255,255,.82); max-width: 640px; margin: 0 0 34px; }

.plus-benefits {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px;
}
.plus-benefit { display: flex; align-items: flex-start; gap: 14px; }
.plus-benefit__ic {
  flex: 0 0 44px; height: 44px; width: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
}
.plus-benefit__txt { display: flex; flex-direction: column; gap: 3px; }
.plus-benefit__txt strong { font-size: 15.5px; font-weight: 700; color: #fff; }
.plus-benefit__txt span { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.68); }

.plus-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14);
}
.plus-card__note { font-size: 14px; color: rgba(255,255,255,.72); max-width: 420px; }
.plus-card__foot .btn--primary { background: #fff; color: #2a1c50; border-color: #fff; }
.plus-card__foot .btn--primary:hover { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); }

/* Plan cards on the LITALK+ page (litalk-plus.html). Filled by js/plus.js from
   the live Stripe prices — nothing here assumes how many plans there are, so
   launching one at a time still lays out correctly. */
.plus-plans {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plus-plans[hidden] { display: none; }

.plus-plan {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); padding: var(--space-5);
  border: 1px solid var(--clr-border); border-radius: var(--radius-lg);
  background: var(--clr-light-bg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.plus-plan:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plus-plan--best { border-color: var(--clr-black); }

.plus-plan__flag {
  position: absolute; top: calc(var(--space-3) * -1); left: var(--space-5);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #2a1c50; background: linear-gradient(120deg, #ffe9a8, #ffcf4d);
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.plus-plan__name { font-size: 15px; font-weight: 700; color: var(--clr-muted); }
.plus-plan__price { font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.plus-plan__period { font-size: 14px; color: var(--clr-muted); }
/* Always present, empty on the monthly plan, so the CTAs line up across cards
   whether or not a card has a per-month figure. */
.plus-plan__note { font-size: 13px; color: var(--clr-muted); min-height: 1.2em; }
.plus-plan__cta { margin-top: var(--space-2); align-self: stretch; text-align: center; }

.plus-plans__foot { margin-top: var(--space-4); font-size: 14px; color: var(--clr-muted); }

@media (max-width: 600px) {
  .plus-benefits { grid-template-columns: 1fr; gap: 16px; }
  .plus-card__foot { flex-direction: column; align-items: flex-start; }
  .plus-card__foot .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq__list {
  margin-top: var(--section-head-gap);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--clr-border);
}

.faq-item:last-child { border-bottom: none; }

.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  text-align: left;
  background: var(--clr-bg);
  transition: background var(--transition);
}

.faq-item__btn:hover { background: var(--clr-light-bg); }
.faq-item.open .faq-item__btn { background: var(--clr-light-bg); }

.faq-item__q {
  font-size: 15px;
  font-weight: 600;
  color: var(--clr-black);
  line-height: 1.5;
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  transform: scaleY(1);
  transform-origin: center;
  transition: background var(--transition), transform var(--acc-chevron) var(--acc-ease), border-color var(--transition);
}

.faq-item.open .faq-item__icon {
  background: var(--clr-black);
  border-color: var(--clr-black);
  transform: scaleY(-1);
}

.faq-item__icon svg {
  width: 12px;
  height: 12px;
  stroke: var(--clr-black);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke var(--transition);
}
.faq-item__icon i {
  font-size: 10px;
  color: var(--clr-black);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

.faq-item.open .faq-item__icon svg { stroke: var(--clr-bg); }
.faq-item.open .faq-item__icon i { color: var(--clr-bg); }

.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
  overflow: hidden;
}

/* The HTML hidden attribute must win over the component's grid display.
   Without this rule, WebKit still lays out every closed answer (the text is
   transparent, but its height remains), leaving large empty bands between
   questions on phones. */
.faq-item__body[hidden] { display: none; }

.faq-item__body > * { min-height: 0; }

.faq-item.open .faq-item__body {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}

.faq-item__a {
  padding: 0 28px 24px;
  font-size: 15px;
  color: var(--clr-muted);
  line-height: 1.8;
  opacity: 0;
  filter: blur(var(--panel-blur));
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}

.faq-item.open .faq-item__a {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__body, .faq-item__a, .faq-item__icon {
    transition: none !important;
  }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-black);
}

.form-input,
.form-textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--clr-black);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--clr-border);
  padding: 12px 0;
  outline: none;
  width: 100%;
  transition: border-color var(--transition);
  resize: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--clr-muted); }

.form-input:focus,
.form-textarea:focus { border-bottom-color: var(--clr-black); }

.form-textarea { min-height: 120px; }

.contact__info-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.contact__info-sub {
  font-size: 15px;
  color: var(--clr-muted);
  line-height: 1.75;
  margin-bottom: 36px;
}

/* Newsletter */
.newsletter {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 32px;
}

.newsletter__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.newsletter__sub {
  font-size: 13px;
  color: var(--clr-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.newsletter__form {
  display: flex;
  gap: 8px;
}

.newsletter__input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 11px 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition);
  background: var(--clr-bg);
  color: var(--clr-black);
}

.newsletter__input:focus { border-color: var(--clr-black); }

.contact__socials {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 44px;
  height: 44px;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}

.social-link:hover {
  background: var(--clr-black);
  border-color: var(--clr-black);
}

.social-link:hover svg { stroke: var(--clr-bg); }
.social-link:hover i { color: var(--clr-bg); }

.social-link svg {
  width: 18px;
  height: 18px;
  stroke: var(--clr-black);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--transition);
}
.social-link i {
  font-size: 16px;
  color: var(--clr-black);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* The footer is a fixed dark panel in both color modes; a top border
   separates it from the pure-black page background in dark mode. */
.footer {
  background: var(--clr-dark-surface);
  color: var(--clr-dark-ink);
  border-top: 1px solid var(--clr-border);
  padding: 72px 0 0;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer__brand img {
  height: 26px;
  /* Without this the width="170" attribute wins and the wordmark is
     stretched to fit — the nav copy escaped it only because .nav__logo img
     already sets width:auto. */
  width: auto;
  filter: invert(1);
  margin-bottom: 16px;
}

.footer__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  max-width: 240px;
}

.footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition);
}

.footer__link:hover { color: #FFFFFF; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.footer__bottom .lang-toggle {
  border-color: rgba(255,255,255,0.15);
  background: transparent;
}

.footer__bottom .lang-toggle__opt { color: rgba(255,255,255,0.5); }
.footer__bottom .lang-toggle__opt.active { color: #0D0D0F; }
.footer__bottom .lang-toggle__thumb { background: rgba(255,255,255,0.92); }

/* Footer social icons (in brand column) */
.footer__socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.footer__social-icon:hover {
  border-color: rgba(255,255,255,0.6);
  color: #FFFFFF;
  background: rgba(255,255,255,0.08);
}

.footer__social-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer__social-icon i {
  font-size: 15px;
  color: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}

/* Footer bottom right group (social pills + lang switcher) */
.footer__bottom-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer__bottom-social {
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer__bottom-social a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  padding: 4px 8px;
  border-radius: 5px;
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}

.footer__bottom-social a:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
}

/* Line OA pill in contact section */
.contact__line-oa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-black);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
  margin-top: 12px;
  width: 100%;
}

.contact__line-oa:hover {
  border-color: var(--clr-black);
  background: var(--clr-light-bg);
}

.contact__line-oa svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.contact__line-oa i {
  font-size: 20px;
  color: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animate--delay-1 { transition-delay: calc(var(--stagger-step) * 1); }
.animate--delay-2 { transition-delay: calc(var(--stagger-step) * 2); }
.animate--delay-3 { transition-delay: calc(var(--stagger-step) * 3); }
.animate--delay-4 { transition-delay: calc(var(--stagger-step) * 4); }

/* Page load */
.page-enter { animation: fadeIn 0.6s ease both; }

/* ============================================================
   DIVIDER
   ============================================================ */
.divider {
  height: 1px;
  background: var(--clr-border);
  border: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-py: 80px; }

  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { display: none; }
  .hero__headline { font-size: clamp(44px, 10vw, 72px); }

  .about__inner { grid-template-columns: 1fr; }
  .about__visual { display: none; }

  .programs__grid { grid-template-columns: 1fr 1fr; }
  .programs__grid .program-card:last-child { grid-column: 1 / -1; }

  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why-item:nth-child(2) { border-right: none; }
  .why-item:nth-child(1), .why-item:nth-child(2) { border-bottom: 1px solid var(--clr-border); }

  .journey__track { grid-template-columns: 1fr; gap: 24px; }
  .journey__track::before { display: none; }
  .journey-step { flex-direction: row; text-align: left; gap: 20px; align-items: flex-start; }
  .journey-step__num { flex-shrink: 0; margin-bottom: 0; }

  .testimonials__track .testimonial-card { flex: 0 0 calc(50% - 12px); }

  .blog__grid { grid-template-columns: 1fr 1fr; }
  .blog__grid .blog-card:last-child { grid-column: 1 / -1; }

  .contact__inner { grid-template-columns: 1fr; gap: 48px; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* The nav collapses earlier than everything else. Six items with labels like
   "1-on-1 Tutoring" fill the 1152px container exactly at the widest; one pixel
   narrower and the bar overflows, because nowrap labels cannot shrink to
   absorb it. So the bar shows only at the container's full width and the
   hamburger takes over below. The rest of the mobile layout still switches at
   768px. */
@media (max-width: 1199px) {
  .nav__links { display: none; }
  .nav__actions .btn,
  .nav__actions .login-menu { display: none; }
  /* The language switch lives in the drawer once the hamburger is showing —
     two controls competing for the same corner otherwise. */
  .nav__inner > .nav__actions .lang-toggle { display: none; }
  .nav__drawer .nav__actions .lang-toggle { display: inline-flex; }
  .nav__drawer .nav__actions .btn { display: inline-flex; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 768px) {
  :root { --section-py: 64px; --container-px: 20px; }

  /* WebKit: iOS Safari auto-zooms into any focused field whose font is
     under 16px — keep every text field at 16px on phones. */
  .form-input,
  .form-textarea,
  .newsletter__input {
    font-size: 16px;
  }

  .hero__headline { font-size: clamp(38px, 12vw, 60px); }
  .hero__bg-text { display: none; }
  .hero__inner { padding: 48px 0; }

  .programs__grid { grid-template-columns: 1fr; }
  .programs__grid .program-card:last-child { grid-column: auto; }

  .why__grid { grid-template-columns: 1fr; }
  .why-item { border-right: none; border-bottom: 1px solid var(--clr-border); }
  .why-item:last-child { border-bottom: none; }

  .about__stats { grid-template-columns: 1fr 1fr 1fr; }
  .stat__num { font-size: 28px; }

  .testimonials__track .testimonial-card { flex: 0 0 calc(100% - 24px); }

  .blog__grid { grid-template-columns: 1fr; }
  .blog__grid .blog-card:last-child { grid-column: auto; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }

  .newsletter__form { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .about__stats { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 16px 10px; }
  .stat__num { font-size: 22px; }
  .footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE HERO — about.html / programs.html
   ============================================================ */
.page-hero {
  padding-top: calc(68px + 88px);
  padding-bottom: 96px;
  border-bottom: 1px solid var(--clr-border);
}

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--clr-muted);
  margin-bottom: 36px;
}

.page-hero__breadcrumb a {
  color: var(--clr-muted);
  transition: color var(--transition);
}

.page-hero__breadcrumb a:hover { color: var(--clr-black); }
.page-hero__breadcrumb .sep { color: var(--clr-border); }

.page-hero__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 20px;
}

.page-hero__title {
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--clr-black);
  max-width: 820px;
  margin-bottom: 24px;
}

.page-hero__sub {
  font-size: 18px;
  color: var(--clr-muted);
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 40px;
}

.page-hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   ABOUT PAGE COMPONENTS
   ============================================================ */
.about-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-intro__body p {
  font-size: 16px;
  color: var(--clr-muted);
  line-height: 1.9;
  margin-bottom: 24px;
}

.about-intro__body p:last-child { margin-bottom: 0; }

.about-intro__body strong {
  color: var(--clr-black);
  font-weight: 700;
}

.about-intro__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  aspect-ratio: 4/5;
}

.about-intro__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Story */
.story__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: flex-start;
}

.story__label-col .section-label {
  position: sticky;
  top: 100px;
  display: block;
}

.story__question {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-style: italic;
  color: var(--clr-black);
  margin-bottom: 32px;
  line-height: 1.25;
  border-left: 3px solid var(--clr-black);
  padding-left: 24px;
}

.story__body p {
  font-size: 16px;
  color: var(--clr-muted);
  line-height: 1.9;
  margin-bottom: 24px;
}

.story__body p:last-child { margin-bottom: 0; }

.story__body strong {
  color: var(--clr-black);
  font-weight: 700;
}

/* Vision & Mission */
.vision-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: var(--section-head-gap);
}

.vm-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  transition: border-color var(--transition);
}

.vm-card:hover { border-color: var(--clr-black); }

.vm-card--dark {
  background: var(--clr-dark-surface);
  color: var(--clr-dark-ink);
  border-color: var(--clr-dark-surface);
}

.vm-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 16px;
  display: block;
}

.vm-card--dark .vm-card__label { color: rgba(255,255,255,0.4); }

.vm-card__title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.25;
}

.vm-card__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--clr-muted);
}

.vm-card--dark .vm-card__text { color: rgba(255,255,255,0.6); }

/* Mission list */
.mission__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.mission__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition);
}

.mission__item:hover {
  border-color: var(--clr-black);
  background: var(--clr-light-bg);
}

.mission__num {
  font-size: 11px;
  font-weight: 800;
  color: var(--clr-muted);
  letter-spacing: 0.1em;
  min-width: 24px;
  padding-top: 2px;
}

.mission__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-black);
  line-height: 1.5;
}

/* Values grid */
.values__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--section-head-gap);
}

.value-card {
  padding: 36px 24px;
  border-right: 1px solid var(--clr-border);
  transition: background var(--transition);
}

.value-card:last-child { border-right: none; }
.value-card:hover { background: var(--clr-light-bg); }

.value-card__word {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--clr-black);
  margin-bottom: 12px;
  line-height: 1;
}

.value-card__desc {
  font-size: 13px;
  color: var(--clr-muted);
  line-height: 1.65;
}

/* Why checklist */
.why-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* Was 48px — the other section on this page uses 56px. */
  margin-top: var(--section-head-gap);
}

.why-check-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}

.why-check-item:hover {
  border-color: var(--clr-black);
  background: var(--clr-light-bg);
}

.why-check-item__icon {
  width: 28px;
  height: 28px;
  background: var(--clr-black);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.why-check-item__icon svg {
  width: 13px;
  height: 13px;
  stroke: var(--clr-bg);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-check-item__icon i {
  font-size: 11px;
  color: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
}

.why-check-item__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-black);
  line-height: 1.55;
}

/* CTA strip */
.cta-strip {
  text-align: center;
}

.cta-strip__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  line-height: 1.1;
}

.cta-strip__sub {
  font-size: 17px;
  color: var(--clr-muted);
  margin-bottom: 36px;
  line-height: 1.7;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-strip__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   CUSTOM PROGRAM CARD (wide horizontal)
   ============================================================ */
.program-card__price-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 6px;
}

.program-card--wide {
  grid-column: 1 / -1;
  flex-direction: unset;
}

.program-card--wide.t-tilt .t-tilt-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 44px 48px;
  border-style: dashed;
}

.program-card--wide.t-tilt:hover .t-tilt-card {
  border-style: solid;
}

.program-card--wide .program-card__features { margin-bottom: 28px; }

/* Active nav link */
.nav__link--active {
  color: var(--clr-black) !important;
  font-weight: 700;
}

.nav__link--active::after { transform: scaleX(1) !important; }

/* ============================================================
   COMPARISON TABLE (programs.html)
   ============================================================ */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  margin-top: var(--section-head-gap);
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.compare__table th,
.compare__table td {
  padding: 15px 20px;
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
  font-size: 14px;
}

.compare__table th:first-child,
.compare__table td:first-child {
  text-align: left;
  width: 38%;
  padding-left: 28px;
}

.compare__table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  background: var(--clr-light-bg);
}

.compare__table td:first-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-black);
}

.compare__table tr:last-child td { border-bottom: none; }
.compare__table tbody tr:hover td { background: var(--clr-light-bg); }

.compare__featured-col { background: var(--clr-tint); }

.compare__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--clr-black);
  border-radius: 50%;
}

.compare__check svg {
  width: 10px;
  height: 10px;
  stroke: var(--clr-bg);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compare__check i {
  font-size: 8px;
  color: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
}

.compare__dash {
  color: var(--clr-border);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   RESPONSIVE — NEW PAGE COMPONENTS
   ============================================================ */
@media (max-width: 1024px) {
  .about-intro__inner { grid-template-columns: 1fr; }
  .about-intro__visual { display: none; }
  .story__inner { grid-template-columns: 1fr; gap: 24px; }
  .story__label-col .section-label { position: static; margin-bottom: 0; }
  .vision-mission__grid { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: repeat(3, 1fr); }
  .value-card:nth-child(3) { border-right: none; }
  .value-card:nth-child(n+4) { border-top: 1px solid var(--clr-border); }
  .program-card--wide.t-tilt .t-tilt-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 32px; }
  .why-checklist { grid-template-columns: 1fr; }
  .page-hero { padding-top: calc(68px + 64px); padding-bottom: 72px; }
}

@media (max-width: 768px) {
  .page-hero { padding-top: calc(68px + 48px); padding-bottom: 56px; }
  .values__grid { grid-template-columns: 1fr 1fr; }
  .value-card:nth-child(n+3) { border-top: 1px solid var(--clr-border); }
  .value-card:nth-child(2n) { border-right: none; }
  .page-hero__cta { flex-direction: column; align-items: flex-start; }
  .cta-strip__actions { flex-direction: column; align-items: center; }
}

/* ============================================================
   LEGAL PAGES (Terms of Service, Privacy Policy)
   ============================================================ */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-content__updated {
  font-size: 13px;
  color: var(--clr-muted);
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--clr-border);
}

/* Pointer from the general Terms / Privacy Policy to the AI-specific
   documents that supplement them. Set apart from body copy so a reader
   scanning the AI section doesn't miss that a fuller document exists. */
.legal-content__note {
  padding: 14px 16px;
  border-left: 3px solid var(--clr-black);
  border-radius: 0 10px 10px 0;
  background-color: var(--clr-light-bg);
}

.legal-content__note a { color: var(--clr-black); text-decoration: underline; }

.legal-content h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--clr-black);
  margin-top: 48px;
  margin-bottom: 16px;
}

.legal-content h2:first-of-type { margin-top: 0; }

.legal-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-black);
  margin-top: 28px;
  margin-bottom: 10px;
}

.legal-content p {
  font-size: 15px;
  color: var(--clr-muted);
  line-height: 1.85;
  margin-bottom: 16px;
}

.legal-content ul {
  margin: 0 0 16px;
  padding-left: 0;
}

.legal-content .dash-list li::before {
  content: '\2013';
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  top: 0;
  font-weight: 700;
  color: var(--clr-black);
}

.legal-content li {
  position: relative;
  font-size: 15px;
  color: var(--clr-muted);
  line-height: 1.8;
  margin-bottom: 10px;
  padding-left: 22px;
}

.legal-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-black);
}

.legal-content strong {
  color: var(--clr-black);
  font-weight: 700;
}

.legal-content a {
  color: var(--clr-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover { color: var(--clr-muted); }

/* ============================================================
   LOGIN MENU (nav dropdown)
   ============================================================ */
.login-menu {
  position: relative;
}

.login-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  color: var(--clr-black);
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--transition), background var(--transition);
}

.login-menu__btn:hover { border-color: var(--clr-muted); }

.login-menu__btn .fa-chevron-down {
  font-size: 10px;
  transition: transform var(--transition-dur) var(--ease-smooth-out);
}

.login-menu.open .login-menu__btn .fa-chevron-down { transform: rotate(180deg); }

.login-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 300px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 1200;

  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--panel-translate-y));
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease),
    visibility var(--panel-close-dur) var(--panel-ease);
}

.login-menu.open .login-menu__panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease),
    visibility 0s linear;
}

.login-menu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  transition: background var(--transition);
}

.login-menu__item:hover { background: var(--clr-light-bg); }

.login-menu__item-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--clr-black);
  color: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.login-menu__item-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.35;
}

.login-menu__item-sub {
  display: block;
  font-size: 12px;
  color: var(--clr-muted);
  line-height: 1.45;
  margin-top: 1px;
}

/* Login entries inside the mobile drawer */
.nav__drawer-login-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-top: 20px;
  margin-bottom: 4px;
}

.nav__drawer .login-menu__item {
  padding: 12px 4px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   BLOG PAGES (blog.html / blog-post.html)
   ============================================================ */
.blog-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.blog-filter__chip {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  color: var(--clr-muted);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.blog-filter__chip:hover { border-color: var(--clr-muted); color: var(--clr-black); }

.blog-filter__chip.active {
  background: var(--clr-black);
  border-color: var(--clr-black);
  color: var(--clr-bg);
}

/* Typographic cover placeholder for posts without an image */
.blog-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--clr-ghost-stroke);
  user-select: none;
}

.blog-empty,
.blog-loading {
  text-align: center;
  padding: 72px 0;
  color: var(--clr-muted);
  font-size: 15px;
}

.blog-empty i {
  display: block;
  font-size: 28px;
  margin-bottom: 16px;
  color: var(--clr-border);
}

/* Loading skeletons */
@keyframes blog-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg,
    var(--clr-light-bg) 25%, var(--clr-border) 50%, var(--clr-light-bg) 75%);
  background-size: 200% 100%;
  animation: blog-shimmer 1.4s linear infinite;
  color: transparent;
  user-select: none;
}

/* Single post article */
.post-hero {
  padding-top: calc(68px + 72px);
  padding-bottom: 48px;
}

.post-hero__category {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: 5px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}

.post-hero__title {
  font-size: clamp(34px, 5.5vw, 60px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--clr-black);
  max-width: 840px;
  margin-bottom: 20px;
}

.post-hero__excerpt {
  font-size: 18px;
  color: var(--clr-muted);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 24px;
}

.post-hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--clr-muted);
}

.post-hero__meta .dot { font-size: 8px; }

.post-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  margin-bottom: 56px;
  max-height: 480px;
}

.post-cover img,
.post-cover video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
}

.post-content {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: var(--section-py);
  font-size: 17px;
  line-height: 1.85;
  color: var(--clr-secondary);
}

.post-content h1 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--clr-black);
  margin: 48px 0 18px;
}

.post-content h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--clr-black);
  margin: 44px 0 16px;
}

.post-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clr-black);
  margin: 32px 0 12px;
}

.post-content h4, .post-content h5, .post-content h6 {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-black);
  margin: 28px 0 10px;
}

.post-content p { margin-bottom: 20px; }

.post-content ul,
.post-content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: 8px; }

/* Nested lists sit inside a <li>, so drop the extra bottom margin */
.post-content li > ul,
.post-content li > ol {
  margin: 8px 0 0;
}

/* "Loose" lists (blank line between items) wrap each item's text in <p> */
.post-content li > p { margin-bottom: 8px; }
.post-content li > p:last-child { margin-bottom: 0; }

/* GFM task list checkboxes ([ ] / [x]) */
.post-content li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -24px;
  padding-left: 24px;
}
.post-content input[type="checkbox"] {
  margin-right: 8px;
  accent-color: var(--clr-black);
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 40px 0;
}

.post-content s,
.post-content del {
  color: var(--clr-muted);
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 15px;
}

.post-content th,
.post-content td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--clr-border);
}

.post-content th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
  background: var(--clr-light-bg);
}

.post-content td { color: var(--clr-secondary); }

.post-content a {
  color: var(--clr-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-content blockquote {
  border-left: 3px solid var(--clr-black);
  padding-left: 20px;
  margin: 28px 0;
  font-style: italic;
  color: var(--clr-muted);
}

.post-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--clr-light-bg);
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  padding: 2px 6px;
}

.post-content pre {
  background: var(--clr-light-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  margin-bottom: 20px;
}

.post-content pre code {
  background: none;
  border: none;
  padding: 0;
}

.post-content img {
  border-radius: var(--radius);
  margin: 8px 0 20px;
}

/* ============================================================
   FOOTNOTES (blog-post.html) — [^ref] links in the body and the
   collected notes list appended after the article by blog.js
   ============================================================ */
/* In-text reference: a small, faded superscript number that jumps to the
   note — Apple-style, no brackets */
.post-content .footnote-ref {
  font-size: 0.6em;
  line-height: 0;
  font-weight: 500;
  white-space: nowrap;
}

.post-content .footnote-ref a {
  color: var(--clr-muted);
  text-decoration: none;
  padding: 0 1px;
}

.post-content .footnote-ref a:hover,
.post-content .footnote-ref a:focus { color: var(--clr-black); }

/* Briefly highlight the note (or the reference) jumped to via the anchor */
.post-content .footnotes__item:target,
.post-content .footnote-ref:target {
  background: var(--clr-light-bg);
  border-radius: 6px;
  box-shadow: 0 0 0 4px var(--clr-light-bg);
}

/* The collected notes, rendered at the end of the article — small and
   light, no heading, no back-links (Apple-style) */
.post-content .footnotes {
  max-width: 720px;
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--clr-border);
}

.post-content .footnotes__list {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--clr-muted);
  list-style: decimal;
}

.post-content .footnotes__item {
  margin-bottom: 8px;
  padding-left: 3px;
}

.post-content .footnotes__item:last-child { margin-bottom: 0; }

.post-content .footnotes__content p { margin: 0; }
.post-content .footnotes__content p + p { margin-top: 6px; }
.post-content .footnotes__content a {
  color: inherit;
  text-underline-offset: 2px;
}

/* ============================================================
   END-OF-ARTICLE MARK (blog-post.html) — closes the reading
   experience before the recommended-articles section
   ============================================================ */
.post-end-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 720px;
  margin: 8px auto 0;
  padding-bottom: 56px;
}

.post-end-mark::before,
.post-end-mark::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 100px;
  background: var(--clr-border);
}

.post-end-mark img {
  height: 20px;
  width: auto;
  opacity: 0.55;
}

/* ============================================================
   RECOMMENDED ARTICLES (blog-post.html) — latest posts to read next
   ============================================================ */
.post-recommend {
  padding: 56px 0 var(--section-py);
  border-top: 1px solid var(--clr-border);
}

.post-recommend__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 40px;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-muted);
  margin-bottom: 28px;
  transition: color var(--transition), gap var(--transition);
}

.post-back:hover { color: var(--clr-black); gap: 12px; }

/* ============================================================
   POST SHARE BAR (blog-post.html) — copy / attach the article link
   ============================================================ */
.post-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.post-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  background: var(--clr-bg);
  color: var(--clr-muted);
  font-size: 13px;
  font-weight: 600;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.post-share__btn:hover {
  color: var(--clr-black);
  border-color: var(--clr-muted);
}

.post-share__btn--icon {
  padding: 9px 13px;
}

.post-share__btn i {
  font-size: 14px;
}

/* ============================================================
   POST READING TOOLS (blog-post.html) — font picker + print/PDF
   ============================================================ */
.post-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.reading-font { position: relative; }

.reading-font__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 1200;

  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--panel-translate-y));
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease),
    visibility var(--panel-close-dur) var(--panel-ease);
}

.reading-font.open .reading-font__panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease),
    visibility 0s linear;
}

.reading-font__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--clr-secondary);
  transition: background var(--transition);
  text-align: left;
}

.reading-font__opt:hover { background: var(--clr-light-bg); }

.reading-font__opt.active { color: var(--clr-black); font-weight: 700; }

.reading-font__opt .fa-check { font-size: 11px; opacity: 0; color: var(--clr-black); }
.reading-font__opt.active .fa-check { opacity: 1; }

/* Preview each option set in its own typeface */
.reading-font__opt[data-font="system"] { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.reading-font__opt[data-font="sarabun"] { font-family: 'Sarabun', var(--font-th); }
.reading-font__opt[data-font="looped"] { font-family: 'Noto Sans Thai Looped', var(--font-th); }
.reading-font__opt[data-font="times"] { font-family: 'Times New Roman', Times, serif; }

/* Applied choice — font-family is inherited, so setting it on <article>
   covers the title, excerpt and body together. */
article.reading-font-system { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
article.reading-font-sarabun { font-family: 'Sarabun', var(--font-th); }
article.reading-font-looped { font-family: 'Noto Sans Thai Looped', var(--font-th); }
article.reading-font-times { font-family: 'Times New Roman', Times, serif; }

/* ============================================================
   PRINT — clean article output for browser Print / Save as PDF
   ============================================================ */
@media print {
  :root {
    /* Force a light, high-contrast palette on paper regardless of the
       reader's OS dark-mode setting (placed last so it wins the cascade
       over the prefers-color-scheme:dark block above). */
    color-scheme: light;
    --clr-black: #000000;
    --clr-bg: #FFFFFF;
    --clr-secondary: #1A1A1A;
    --clr-border: #CCCCCC;
    --clr-muted: #444444;
    --clr-light-bg: #F3F3F3;
  }

  .nav, .footer, .post-share, .post-tools, .post-back,
  .blog-filter, .login-menu, .post-end-mark, .post-recommend {
    display: none !important;
  }

  /* The notes list is reference material — keep each note intact on paper */
  .footnotes__item { break-inside: avoid; }

  body { padding-top: 0 !important; }
  .post-hero { padding-top: 0; }

  .post-content { max-width: none; }

  /* Print keeps the URL visible for external links since the underline
     alone is meaningless on paper/PDF. */
  .post-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: 400;
    color: var(--clr-muted);
    word-break: break-all;
  }

  h1, h2, h3, h4, h5, h6 { break-after: avoid; }
  img, table, pre, blockquote { break-inside: avoid; }

  .post-cover { box-shadow: none; }
}

/* ============================================================
   AI Chat Widget (general site assistant — home/programs/about)
   Same interaction pattern as the student portal's assistant, but
   answers general questions and isn't grounded in any account data.
   ============================================================ */
.ai-chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clr-black);
  color: var(--clr-bg);
  border: none;
  font-size: 22px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  cursor: pointer;
  transition: transform var(--transition-dur) var(--ease-smooth-out);
}
.ai-chat-fab:hover { transform: scale(1.05); }

.ai-chat-panel {
  position: fixed;
  right: 24px;
  bottom: 88px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 901;
}
.ai-chat-panel.open { display: flex; }
.ai-chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--clr-border);
}
.ai-chat-panel__title { display: flex; align-items: center; gap: 8px; }
.ai-chat-panel__avatar { width: 30px; height: 30px; border-radius: 50%; background-color: var(--clr-light-bg); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.ai-chat-panel__name { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--clr-black); }
.ai-chat-panel__status { font-size: 11.5px; color: var(--clr-muted); display: flex; align-items: center; gap: 4px; }
.ai-chat-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; display: inline-block; }
.ai-chat-panel__actions { display: flex; align-items: center; gap: 2px; }
.ai-chat-panel__icon-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--clr-muted); width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.ai-chat-panel__icon-btn:hover { background-color: var(--clr-light-bg); }
.ai-chat-panel__messages { position: relative; flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-chat-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.ai-chat-msg--user { align-self: flex-end; background: var(--clr-black); color: var(--clr-bg); border-bottom-right-radius: 4px; }
.ai-chat-msg--assistant { background: var(--clr-light-bg); color: var(--clr-black); border-bottom-left-radius: 4px; }
.ai-chat-msg--pending { background: var(--clr-light-bg); color: var(--clr-muted); font-style: italic; }
.ai-chat-msg--error { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.ai-chat-msg-row { display: flex; align-items: flex-end; gap: 6px; }
.ai-chat-msg-avatar { font-size: 16px; flex-shrink: 0; }
.ai-chat-msg p { margin: 0 0 6px; }
.ai-chat-msg p:last-child { margin-bottom: 0; }
.ai-chat-scroll-btn {
  position: sticky;
  bottom: 8px;
  left: 100%;
  transform: translateX(-8px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  color: var(--clr-black);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.ai-chat-scroll-btn.show { display: flex; }
.ai-chat-panel__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--clr-border); }
.ai-chat-panel__input { flex: 1; resize: none; border: 1px solid var(--clr-border); border-radius: 10px; padding: 8px 10px; font: inherit; max-height: 80px; background-color: var(--clr-bg); color: var(--clr-black); }
.ai-chat-panel__send { border: none; background: var(--clr-black); color: var(--clr-bg); border-radius: 10px; padding: 0 14px; cursor: pointer; }
.ai-chat-panel__send:disabled { opacity: .5; cursor: default; }

/* Terms-of-use gate — covers the panel until the visitor accepts. Built by
   js/main.js (initGeneralAIChat) rather than written into each page, since
   the widget markup is duplicated across several pages. It covers the
   header too, so the chat can't be worked around it — which is why the gate
   carries its own "Not now" button to close the panel. */
.ai-chat-consent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--clr-bg);
  overflow-y: auto;
}

.ai-chat-consent.show { display: flex; }
.ai-chat-consent__inner { max-width: 300px; text-align: center; }

.ai-chat-consent__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-light-bg);
  color: var(--clr-black);
  font-size: 17px;
}

.ai-chat-consent__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--clr-black); }
.ai-chat-consent__body { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--clr-muted); }

.ai-chat-consent__note {
  display: flex;
  gap: 7px;
  text-align: left;
  margin: 0 0 14px;
  padding: 9px 11px;
  border-radius: 10px;
  background-color: var(--clr-light-bg);
  font-size: 12px;
  line-height: 1.55;
  color: var(--clr-muted);
}

.ai-chat-consent__note i { margin-top: 3px; flex-shrink: 0; }
.ai-chat-consent__links { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: var(--clr-muted); }
.ai-chat-consent__links a { color: var(--clr-black); text-decoration: underline; }

/* 44px min height on both: this is the one thing standing between a phone
   visitor and the chat, so neither button may be a small tap target. */
.ai-chat-consent__accept,
.ai-chat-consent__decline {
  display: block;
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ai-chat-consent__accept {
  border: 1px solid var(--clr-black);
  background-color: var(--clr-black);
  color: var(--clr-bg);
  margin-bottom: 8px;
  transition: opacity var(--transition-fast);
}

.ai-chat-consent__accept:hover { opacity: .85; }

.ai-chat-consent__decline {
  border: 1px solid var(--clr-border);
  background-color: transparent;
  color: var(--clr-muted);
  font-weight: 500;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ai-chat-consent__decline:hover { border-color: var(--clr-muted); color: var(--clr-black); }

@media (prefers-reduced-motion: reduce) {
  .ai-chat-consent__accept,
  .ai-chat-consent__decline { transition: none; }
}

@media (max-width: 480px) {
  .ai-chat-panel__input { font-size: 16px; }
  .ai-chat-panel {
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: none;
    z-index: 1300;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   /ask — English vocabulary tutor page
   Composer modelled on the shadcn @blocks-so/ai-01 block: a single
   centred pill that holds the input and its controls in one grid,
   and restructures from [leading | input | trailing] into stacked
   [input / footer] once the text outgrows a single line.
   Reimplemented in plain CSS because this site has no React or
   Tailwind — pulling in a build pipeline for one page would cost
   far more than the block is worth.
   ============================================================ */
.ask-hero { padding: 120px 0 0; }
.ask-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.ask-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.ask-hero__title {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  color: var(--clr-black);
}
.ask-hero__sub { margin: 0; font-size: 15px; line-height: 1.7; color: var(--clr-muted); }

.ask-section {
  padding: 32px 0 96px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--clr-black) 4%, transparent), transparent 28%),
    radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--clr-black) 3%, transparent), transparent 30%);
}
.ask-stage {
  position: relative;
  max-width: 760px;
  min-height: 560px;
  margin: 0 auto;
  padding: 0 28px 24px;
  overflow: visible;
  border: 1px solid var(--clr-border);
  border-radius: 28px;
  background-color: var(--clr-bg);
  box-shadow: 0 30px 70px -42px rgba(16, 24, 40, .4);
}

.ask-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  margin: 0 -28px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--clr-border);
}
.ask-chat-head__identity { display: flex; align-items: center; gap: 12px; }
.ask-chat-head__identity strong { display: block; font-size: 15px; color: var(--clr-black); }
.ask-chat-head__identity small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--clr-muted); }
.ask-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 15px;
  background-color: var(--clr-black);
  color: var(--clr-bg);
  box-shadow: 0 8px 20px -10px rgba(16, 24, 40, .55);
}
.ask-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .12); }
.ask-chat-head__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--clr-border); border-radius: 999px; color: var(--clr-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }

.ask-welcome { max-width: 560px; margin: 68px auto 36px; text-align: center; }
.ask-avatar--large { width: 58px; height: 58px; margin-bottom: 18px; border-radius: 19px; font-size: 18px; }
.ask-welcome h2 { margin: 0 0 8px; color: var(--clr-black); font-size: clamp(21px, 3vw, 27px); line-height: 1.3; }
.ask-welcome > p { max-width: 470px; margin: 0 auto; color: var(--clr-muted); font-size: 14px; line-height: 1.65; }
.ask-starters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.ask-starter {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  background: var(--clr-bg);
  color: var(--clr-black);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.ask-starter:hover { transform: translateY(-2px); border-color: var(--clr-black); background-color: var(--clr-light-bg); }
.ask-starter i { color: var(--clr-muted); }
.ask-stage.has-thread .ask-welcome { display: none; }

/* --- thread ------------------------------------------------------------ */
/* Hidden until the first message so the page opens on the composer alone,
   the way the block presents it. */
.ask-thread { display: none; margin: 28px 0 24px; }
.ask-stage.has-thread .ask-thread { display: flex; min-height: 290px; flex-direction: column; gap: 20px; }

.ask-msg { display: flex; flex-direction: column; gap: 5px; max-width: 88%; }
.ask-msg--user { align-self: flex-end; align-items: flex-end; }
.ask-msg__who { padding-left: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--clr-muted); }
.ask-msg__body { padding: 12px 15px; border-radius: 16px; font-size: 15px; line-height: 1.65; word-break: break-word; }
.ask-msg--user .ask-msg__body { background-color: var(--clr-black); color: var(--clr-bg); border-bottom-right-radius: 5px; }
.ask-msg--assistant .ask-msg__body { background-color: var(--clr-light-bg); color: var(--clr-black); border: 1px solid var(--clr-border); border-bottom-left-radius: 5px; }
.ask-msg--pending .ask-msg__body { background-color: var(--clr-light-bg); color: var(--clr-muted); font-style: italic; }
.ask-msg--error .ask-msg__body { background-color: rgba(239, 68, 68, .1); color: #dc2626; }

.ask-msg__body p { margin: 0 0 8px; }
.ask-msg__body p:last-child { margin-bottom: 0; }
.ask-msg__body ul, .ask-msg__body ol { margin: 0 0 8px; padding-left: 20px; }
.ask-msg__body ul:last-child, .ask-msg__body ol:last-child { margin-bottom: 0; }
/* The global reset strips list markers (line ~237), and blog post bodies
   restore them the same way — an AI reply listing word senses needs them
   back or the items read as loose indented lines. */
.ask-msg__body ul { list-style: disc; }
.ask-msg__body ol { list-style: decimal; }
.ask-msg__body li { margin-bottom: 4px; }
.ask-msg__body code {
  padding: 1px 5px;
  border-radius: 5px;
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);
  font-size: .9em;
}

/* --- composer (ai-01) --------------------------------------------------- */
.ask-composer__box {
  display: grid;
  grid-template-areas:
    'header  header   header'
    'leading primary  trailing'
    '.       footer   .';
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-radius: 26px;
  background-color: var(--clr-bg);
  box-shadow: 0 12px 28px -12px rgba(16, 24, 40, .18), 0 4px 8px -5px rgba(16, 24, 40, .08);
  cursor: text;
  transition: border-color var(--transition-fast);
}

/* Once the text needs more than one line the controls drop below it, so a
   long question gets the full width instead of a narrow middle column. */
.ask-composer__box.is-expanded {
  grid-template-areas: 'header' 'primary' 'footer';
  grid-template-columns: 1fr;
}

.ask-composer__box:focus-within { border-color: var(--clr-black); }

.ask-composer__primary {
  grid-area: primary;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  overflow-x: hidden;
}
.ask-composer__box.is-expanded .ask-composer__primary { padding: 4px 8px 8px; }

.ask-composer__input {
  flex: 1;
  max-height: 208px;
  overflow-y: auto;
  resize: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--clr-black);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.ask-composer__input:focus { outline: none; }
.ask-composer__input::placeholder { color: var(--clr-muted); }

.ask-composer__leading { grid-area: leading; display: flex; position: relative; }
.ask-composer__box.is-expanded .ask-composer__leading { display: none; }

.ask-composer__trailing { grid-area: trailing; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ask-composer__box.is-expanded .ask-composer__trailing { grid-area: footer; padding-top: 6px; }

/* 40px keeps the round controls close to the block's proportions while
   staying a comfortable touch target inside the pill. */
.ask-icon-btn,
.ask-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.ask-icon-btn { border: 0; background: transparent; color: var(--clr-muted); }
.ask-icon-btn:hover, .ask-icon-btn[aria-expanded="true"] { background-color: var(--clr-light-bg); color: var(--clr-black); }

.ask-send { border: 0; background-color: var(--clr-black); color: var(--clr-bg); }
.ask-send:hover { opacity: .85; }
.ask-send:disabled { opacity: .45; cursor: default; }
/* Mirrors the block: the send button only exists once there is something
   to send. */
.ask-send[hidden] { display: none; }

/* --- suggestion menu ---------------------------------------------------- */
/* Stands in for the block's attachment dropdown. This page has nothing to
   attach, and a menu of buttons that do nothing would be worse than no
   menu — so the slot holds starter questions instead, which is the one
   thing a first-time visitor actually needs. */
.ask-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(320px, calc(100vw - 48px));
  padding: 6px;
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  background-color: var(--clr-bg);
  box-shadow: 0 12px 24px -8px rgba(16, 24, 40, .18);
}
.ask-menu[hidden] { display: none; }

.ask-menu__label {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.ask-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--clr-black);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.ask-menu__item:hover { background-color: var(--clr-light-bg); }
.ask-menu__item i { color: var(--clr-muted); font-size: 13px; flex-shrink: 0; }

.ask-disclaimer {
  max-width: 672px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--clr-muted);
}

/* --- terms gate --------------------------------------------------------- */
/* Covers the composer only — the heading above stays readable, so someone
   who declines still knows what the page is for. */
.ask-consent {
  position: absolute;
  inset: auto 0 0;
  z-index: 6;
  padding: 24px 20px;
  border: 1px solid var(--clr-border);
  border-radius: 26px;
  background-color: var(--clr-bg);
  box-shadow: 0 10px 15px -3px rgba(16, 24, 40, .08);
}
.ask-consent[hidden] { display: none; }
.ask-consent__inner { max-width: 420px; margin: 0 auto; text-align: center; }
.ask-consent__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-light-bg);
  color: var(--clr-black);
  font-size: 17px;
}
.ask-consent__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--clr-black); }
.ask-consent__body { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--clr-muted); }
.ask-consent__note {
  display: flex;
  gap: 8px;
  text-align: left;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: var(--clr-light-bg);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--clr-muted);
}
.ask-consent__note i { margin-top: 3px; flex-shrink: 0; }
.ask-consent__links { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--clr-muted); }
.ask-consent__links a { color: var(--clr-black); text-decoration: underline; }

@media (max-width: 640px) {
  .ask-hero { padding: 100px 0 0; }
  .ask-section { padding: 24px 0 72px; }
  .ask-msg { max-width: 94%; }
  .ask-stage { min-height: 500px; padding: 0 16px 18px; border-radius: 22px; }
  .ask-chat-head { min-height: 68px; margin: 0 -16px; padding: 12px 16px; }
  .ask-chat-head__identity small { font-size: 11px; }
  .ask-chat-head__badge { display: none; }
  .ask-welcome { margin: 42px auto 28px; }
  .ask-starters { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .ask-starter { justify-content: center; text-align: center; }

  /* A real dialog on a phone.
     This used to be `position: static`, which dropped the gate out of the
     overlay and left it sitting in the page flow BELOW the composer — so the
     composer looked usable while being inert, and the gate read as a page
     section rather than something to answer. */
  .ask-consent {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: color-mix(in srgb, var(--clr-bg) 82%, transparent);
    backdrop-filter: blur(8px);
    overscroll-behavior: contain;
  }

  .ask-consent__inner {
    width: 100%;
    max-width: 400px;
    /* Lifted off the scrim: --clr-bg is pure black in dark mode, so a card
       painted in it against a backdrop made of it is invisible. */
    background-color: var(--clr-light-bg);
    border: 1px solid var(--clr-border);
    border-radius: 22px;
    padding: 26px 22px;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .5);
    /* The gate is long in Thai; scroll inside it rather than off the screen. */
    max-height: 100%;
    overflow-y: auto;
  }

  /* Tighter rhythm than the desktop panel — the phone has less room and the
     card carries seven stacked blocks. */
  /* The card is --clr-light-bg here, and so was the note — same colour on
     same colour, so the note's box disappeared. Tint it from the ink instead,
     which stays a step away from whatever the card is in either theme. */
  .ask-consent__note {
    background-color: color-mix(in srgb, var(--clr-black) 9%, transparent);
  }

  /* Same reason as the note above — the circle was --clr-light-bg too. */
  .ask-consent__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    background-color: color-mix(in srgb, var(--clr-black) 12%, transparent);
  }
  .ask-consent__title { font-size: 17px; margin-bottom: 8px; }
  .ask-consent__body { font-size: 13.5px; margin-bottom: 12px; }
  .ask-consent__note { margin-bottom: 12px; }
  .ask-consent__links { margin-bottom: 14px; }
  .ask-consent .btn { width: 100%; }

  /* Only here: the gate covers the viewport on a phone, so the page behind it
     must not scroll. On desktop it is an inline panel and locking the page
     would strand the reader. showConsent() sets the class either way. */
  body.ask-gated { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ask-composer__box,
  .ask-icon-btn,
  .ask-send,
  .ask-menu__item { transition: none; }
  .ask-starter { transition: none; }
}

/* ============================================================
   AI reply Markdown
   Shared by the /ask thread and the floating assistant's bubbles.
   js/markdown.js now renders headings, blockquotes, fenced code,
   tables, rules and strikethrough, which previously arrived as
   literal text and so had never needed styling.
   ============================================================ */
.ask-msg__body h3, .ai-chat-msg h3 { margin: 12px 0 6px; font-size: 15px; font-weight: 700; }
.ask-msg__body h4, .ai-chat-msg h4 { margin: 10px 0 5px; font-size: 14px; font-weight: 700; }
.ask-msg__body h5, .ai-chat-msg h5 { margin: 10px 0 5px; font-size: 13px; font-weight: 700; }
.ask-msg__body h3:first-child, .ask-msg__body h4:first-child, .ask-msg__body h5:first-child,
.ai-chat-msg h3:first-child, .ai-chat-msg h4:first-child, .ai-chat-msg h5:first-child { margin-top: 0; }

.ask-msg__body blockquote, .ai-chat-msg blockquote {
  margin: 8px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--clr-border);
  color: var(--clr-muted);
}

.ask-msg__body pre, .ai-chat-msg pre {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  background-color: var(--clr-bg);
  overflow-x: auto;
}
.ask-msg__body pre code, .ai-chat-msg pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
}

.ask-msg__body hr, .ai-chat-msg hr { margin: 12px 0; border: 0; border-top: 1px solid var(--clr-border); }
.ask-msg__body del, .ai-chat-msg del { opacity: .7; }

/* A comparison table is the one thing a vocabulary reply reliably produces
   that can outgrow the bubble, so it scrolls inside its own box rather than
   stretching the message past the layout. */
.md-table-wrap { margin: 8px 0; overflow-x: auto; }
.md-table-wrap table { border-collapse: collapse; width: 100%; font-size: 13px; }
.md-table-wrap th, .md-table-wrap td {
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  text-align: left;
  vertical-align: top;
}
.md-table-wrap th { background-color: var(--clr-bg); font-weight: 700; }

/* Nested lists sit inside their parent <li>, so the extra top margin a
   sibling list would need is wrong here. */
.ask-msg__body li > ul, .ask-msg__body li > ol,
.ai-chat-msg li > ul, .ai-chat-msg li > ol { margin: 4px 0 0; }

/* Typewriter reveal (js/markdown.js). A block waiting its turn is hidden
   rather than left empty, so a table or code block doesn't sit there as an
   empty skeleton while the text ahead of it types out. */
.md-pending { display: none !important; }

.md-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background-color: currentColor;
  opacity: .7;
  animation: md-caret-blink 1s steps(1, end) infinite;
}

@keyframes md-caret-blink { 0%, 50% { opacity: .7; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .md-caret { animation: none; }
}

/* --- /ask account strip + saved questions -------------------------------- */
.ask-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px 0 16px;
  font-size: 13px;
  color: var(--clr-muted);
}
.ask-account[hidden] { display: none; }

.ask-account__btn {
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  background-color: var(--clr-bg);
  color: var(--clr-black);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ask-account__btn:hover { border-color: var(--clr-black); background-color: var(--clr-light-bg); }
.ask-account__btn[hidden] { display: none; }

.ask-history {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--clr-border);
  border-radius: 18px;
  background-color: var(--clr-bg);
}
.ask-history[hidden] { display: none; }

.ask-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-black);
}

.ask-history__list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }

.ask-history__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.ask-history__item:hover { background-color: var(--clr-light-bg); }
.ask-history__q {
  font-size: 13.5px;
  color: var(--clr-black);
  /* One line: the list is for choosing a conversation, not reading it. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-history__meta { font-size: 11.5px; color: var(--clr-muted); }
.ask-history__note { margin: 10px 0 0; font-size: 11.5px; color: var(--clr-muted); }

@media (prefers-reduced-motion: reduce) {
  .ask-account__btn,
  .ask-history__item { transition: none; }
}

/* Sign-in offered inside the terms gate: for a LITALK student it is the
   alternative to accepting anonymously, not something to do afterwards —
   and the gate covers the account strip, so the offer has to live here. */
.ask-consent__signin { margin: 12px 0 0; font-size: 12.5px; color: var(--clr-muted); }
.ask-consent__signin[hidden] { display: none; }
.ask-consent__signin button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--clr-black);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   Service notices (js/service-notice.js)
   The scheduled popup that announces, and then enforces, planned
   downtime. Two looks: a dismissible card for the heads-up, and a
   full overlay for the block.
   ============================================================ */
.svc-layer {
  position: fixed;
  z-index: var(--z-notice);
  inset: auto 20px 20px auto;
  max-width: min(380px, calc(100vw - 40px));
}

.svc-layer--blocking {
  inset: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Opaque, not a tint. This is a closed door, not a modal over content you
     are coming back to — a page still ghosting through behind it reads as a
     banner the visitor might be able to get past. */
  background-color: var(--clr-bg);
  overscroll-behavior: contain;
}

/* Only the blocking layer takes the page over. Both elements are needed —
   on iOS, overflow on <body> alone does not always stop the page moving. */
html:has(body.svc-locked),
body.svc-locked { overflow: hidden; }

.svc-card {
  padding: 22px;
  border: 1px solid var(--clr-border);
  border-radius: 18px;
  background-color: var(--clr-bg);
  box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .22);
}

/* Lifted off the backdrop rather than sharing its colour: --clr-bg is pure
   black in dark mode, so a card painted in it against a backdrop made of it
   showed as nothing but a hairline border. */
.svc-card--blocking {
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 32px 28px;
  background-color: var(--clr-light-bg);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .5);
  /* An admin can write a long message. Scroll inside the card rather than
     letting it grow off the top and bottom of a small phone. */
  max-height: 100%;
  overflow-y: auto;
}

.svc-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-light-bg);
  color: var(--clr-black);
  font-size: 17px;
}
/* The card is already --clr-light-bg here, so the circle needs its own tone. */
.svc-card--blocking .svc-card__icon {
  margin-left: auto;
  margin-right: auto;
  background-color: color-mix(in srgb, var(--clr-black) 12%, transparent);
}

.svc-card__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--clr-black); }
.svc-card--blocking .svc-card__title { font-size: 20px; line-height: 1.4; }
.svc-card__body { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--clr-muted); }
.svc-card__meta { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--clr-black); }

.svc-card__btn {
  display: block;
  /* Centred by its own margins, so it does not inherit whatever text-align
     the card happens to use — and the label centred explicitly, because a
     display:block button drops the centring a button normally gets and picks
     up the card's left alignment instead. */
  margin: 18px auto 0;
  text-align: center;
  width: 100%;
  max-width: 280px;
  min-height: 44px;
  border: 1px solid var(--clr-black);
  border-radius: 10px;
  background-color: var(--clr-black);
  color: var(--clr-bg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.svc-card__btn:hover { opacity: .85; }

@media (max-width: 640px) {
  /* The announcement becomes a bottom sheet on a phone. The blocking layer
     must NOT follow it: it is the only thing standing between the visitor and
     a page that is meant to be closed, so it stays full-screen. */
  .svc-layer:not(.svc-layer--blocking) { inset: auto 12px 12px 12px; max-width: none; }
  .svc-layer--blocking { padding: 20px; }
  .svc-card--blocking { padding: 28px 22px; }
  .svc-card--blocking .svc-card__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card__btn { transition: none; }
}

/* ============================================================
   2026 HOME — MONOCHROME LIQUID GLASS
   Homepage-only art direction. The restrained grayscale palette keeps
   learning content central while translucent layers add spatial depth.
   ============================================================ */
.home-page {
  --home-glass: rgba(255,255,255,0.58);
  --home-glass-strong: rgba(255,255,255,0.78);
  --home-glass-line: rgba(255,255,255,0.88);
  --home-glass-shadow: 0 24px 80px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.92);
  --home-soft-shadow: 0 16px 50px rgba(0,0,0,0.06);
  background:
    radial-gradient(circle at 82% 7%, rgba(0,0,0,0.075), transparent 24rem),
    radial-gradient(circle at 10% 30%, rgba(0,0,0,0.04), transparent 28rem),
    var(--clr-bg);
}

.home-page .nav {
  top: 12px;
  left: max(12px, calc((100vw - var(--container-max)) / 2));
  right: max(12px, calc((100vw - var(--container-max)) / 2));
  border: 1px solid var(--home-glass-line);
  border-radius: var(--radius-pill);
  background: var(--home-glass);
  box-shadow: 0 10px 40px rgba(0,0,0,0.04);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}

.home-page .nav.scrolled {
  background: var(--home-glass-strong);
  border-color: var(--home-glass-line);
  box-shadow: var(--home-soft-shadow);
}

.home-page .nav > .container { padding-inline: 22px; }
.home-page .nav__inner { height: 60px; }
.home-page .nav__logo img { height: 23px; }
.home-page .nav__link { font-size: 12px; font-weight: 600; }
.home-page .nav__actions { gap: 10px; }
.home-page .nav .btn--sm { padding: 10px 17px; }

.home-page .hero {
  min-height: 94svh;
  padding-top: 84px;
  border: 0;
  isolation: isolate;
}

.home-page .hero::before,
.home-page .hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.home-page .hero::before {
  width: clamp(280px, 42vw, 620px);
  aspect-ratio: 1;
  right: -8%;
  top: 8%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.92), rgba(0,0,0,0.075) 65%, transparent 66%);
  opacity: .72;
}

.home-page .hero::after {
  width: 240px;
  aspect-ratio: 1;
  left: -110px;
  bottom: 0;
  border: 1px solid var(--clr-border);
  background: rgba(255,255,255,0.16);
}

.home-page .hero__inner { gap: clamp(48px, 7vw, 96px); padding: 90px 0 70px; }
.home-page .hero__bg-text { opacity: .42; right: -8%; }
.home-page .hero__eyebrow {
  width: fit-content;
  padding: 8px 13px;
  border: 1px solid var(--home-glass-line);
  border-radius: var(--radius-pill);
  background: var(--home-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--home-soft-shadow);
}
.home-page .hero__eyebrow::before { width: 5px; height: 5px; border-radius: 50%; }
.home-page .hero__headline { font-size: clamp(54px, 7.2vw, 94px); line-height: .95; letter-spacing: -.07em; }
.home-page .hero__sub { max-width: 510px; font-size: 16px; line-height: 1.75; }
.home-page .btn { border-radius: var(--radius-pill); }

.home-page .hero__visual { min-height: 550px; display: grid; place-items: center; }
.home-page .hero__img-wrap {
  width: 86%;
  padding: 12px;
  border: 1px solid var(--home-glass-line);
  border-radius: 42px;
  background: var(--home-glass);
  box-shadow: var(--home-glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  transform: rotate(2deg);
}
.home-page .hero__img-wrap img { border-radius: 32px; filter: grayscale(1) contrast(1.05); }
.home-page .hero__img-wrap:hover img { transform: none; }
.home-page .hero__lesson-card,
.home-page .hero__badge,
.home-page .hero__word-chip {
  position: absolute;
  border: 1px solid var(--home-glass-line);
  background: var(--home-glass-strong);
  box-shadow: var(--home-glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
.home-page .hero__lesson-card { left: -3%; bottom: 8%; width: 225px; padding: 20px; border-radius: 24px; }
.home-page .hero__lesson-label { display: block; color: var(--clr-muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.home-page .hero__lesson-card strong { display: block; margin: 6px 0 16px; font-size: 18px; letter-spacing: -.03em; }
.home-page .hero__lesson-card small { color: var(--clr-muted); font-size: 10px; }
.home-page .hero__lesson-progress { height: 3px; margin-bottom: 10px; overflow: hidden; border-radius: 5px; background: var(--clr-border); }
.home-page .hero__lesson-progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--clr-black); }
.home-page .hero__word-chip { padding: 8px 14px; border-radius: var(--radius-pill); color: var(--clr-secondary); font-size: 11px; font-weight: 600; }
.home-page .hero__word-chip--one { right: -2%; top: 16%; }
.home-page .hero__word-chip--two { right: 2%; bottom: 18%; }
.home-page .hero__badge { top: 7%; left: 0; right: auto; bottom: auto; border-radius: 22px; }

.home-page .section { position: relative; padding-block: clamp(88px, 10vw, 140px); }
.home-page .section--alt { background: rgba(0,0,0,0.025); }
.home-page .section-label { padding: 7px 11px; border: 1px solid var(--clr-border); border-radius: var(--radius-pill); letter-spacing: .14em; }
.home-page .section-heading { font-size: clamp(38px, 5vw, 64px); letter-spacing: -.055em; }
.home-page .about__img { border-radius: 36px; box-shadow: var(--home-soft-shadow); }
.home-page .about__img img { filter: grayscale(1); }
.home-page .about__accent { border-radius: 32px; background: var(--home-glass); border: 1px solid var(--home-glass-line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.home-page .about__stats { padding: 8px; border: 1px solid var(--home-glass-line); border-radius: 24px; background: var(--home-glass); box-shadow: var(--home-soft-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

.home-page .program-card,
.home-page .testimonial-card,
.home-page .contact__form,
.home-page .newsletter,
.home-page .faq__list {
  border: 1px solid var(--home-glass-line);
  background: var(--home-glass);
  box-shadow: var(--home-soft-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.home-page .program-card { border-radius: 30px; }
.home-page .program-card--featured { background: var(--clr-dark-surface); border-color: rgba(255,255,255,.18); }
.home-page .why__grid { gap: 12px; border: 0; }
.home-page .why-item { border: 1px solid var(--home-glass-line) !important; border-radius: 24px; background: var(--home-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.home-page .why-item:hover { background: var(--home-glass-strong); transform: translateY(-4px); box-shadow: var(--home-soft-shadow); }
.home-page .why-item__icon { border-radius: 16px; }
.home-page .testimonial-card { border-radius: 28px; }
.home-page .contact__form, .home-page .newsletter { border-radius: 28px; }
.home-page .faq__list { padding-inline: 24px; border-radius: 30px; overflow: hidden; }
.home-page .form-input, .home-page .form-textarea, .home-page .newsletter__input { border-radius: 16px; background: rgba(255,255,255,.42); }

/* The glass treatment turns the form itself into a card, so it also needs
   card insets. Previously the border wrapped the fields while their labels
   and inputs sat directly against it, which was especially obvious on iOS. */
.home-page .contact__form {
  margin-top: 32px;
  padding: 32px;
}

@media (prefers-color-scheme: dark) {
  .home-page {
    --home-glass: rgba(24,24,26,0.54);
    --home-glass-strong: rgba(28,28,30,0.76);
    --home-glass-line: rgba(255,255,255,0.13);
    --home-glass-shadow: 0 24px 80px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.09);
    --home-soft-shadow: 0 16px 50px rgba(0,0,0,0.24);
  }
  .home-page .form-input, .home-page .form-textarea, .home-page .newsletter__input { background: rgba(0,0,0,.24); }
}

@media (max-width: 1199px) {
  .home-page .nav { left: 12px; right: 12px; }
}

@media (max-width: 768px) {
  .home-page .nav { top: 8px; border-radius: 26px; }
  .home-page .nav__inner { height: 54px; }
  .home-page .nav__drawer { top: 62px; margin-inline: -1px; border: 1px solid var(--home-glass-line); border-radius: 24px; background: var(--home-glass-strong); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
  .home-page .hero { min-height: auto; padding-top: 78px; }
  .home-page .hero__inner { padding-top: 60px; }
  .home-page .hero__headline { font-size: clamp(50px, 16vw, 72px); }
  .home-page .hero__visual { min-height: 440px; }
  .home-page .hero__img-wrap { width: 82%; border-radius: 32px; }
  .home-page .hero__img-wrap img { border-radius: 23px; }
  .home-page .hero__lesson-card { left: 0; bottom: 4%; width: 190px; padding: 16px; }
  .home-page .hero__badge { left: 2%; top: 3%; }
  .home-page .hero__word-chip--one { right: 0; top: 17%; }
  .home-page .hero__word-chip--two { display: none; }
  .home-page .contact__form { margin-top: 24px; padding: 24px 20px; gap: 24px; }
  .home-page .faq__list { padding-inline: 12px; }
}

@media (max-width: 420px) {
  .home-page .hero__visual { min-height: 390px; }
  .home-page .hero__lesson-card { bottom: 0; width: 176px; }
  .home-page .hero__badge { top: 0; transform: scale(.9); transform-origin: left top; }
  .home-page .hero__word-chip--one { top: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .why-item:hover { transform: none; }
}