/* =========================================================================
   NovaMentra — Design System & Site Styles
   Editorial-confident direction: a serif display face (Fraunces) carries the
   brand's personality instead of decoration — gradients, icon-in-square
   cards, and blurred blob backgrounds are used sparingly and specifically,
   not as the default finish on every section.
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------------------- */
:root {
  /* Gold — the one deliberate color accent (a handful of highlight
     moments), not a brand hue applied everywhere. */
  --nova-gold-300:   #FDE68A;
  --nova-gold-400:   #FBBF24;
  --nova-gold-500:   #F59E0B;
  --nova-gold-700:   #92400E;

  /* Flat ink, not a saturated brand hue. Buttons, links, and active states
     are near-black — the same near-black already used for headline text
     and the footer/CTA surfaces — with gold reserved for one or two
     specific highlight moments (see .text-accent, .badge-gold). A single
     confident dark instead of "pick a brand color" avoids the whole
     category of complaint (blue = generic SaaS, purple = AI template,
     green = fintech cliché) and matches how most premium editorial sites
     (Brilliant.org included) actually work: black/cream + one accent. */
  --brand: var(--ink-900);
  --brand-hover: var(--ink-950);
  --brand-soft: var(--ink-100);
  --surface-dark: var(--ink-950);
  --gold: var(--nova-gold-500);
  --gold-deep: var(--nova-gold-700);
  --highlight: var(--nova-gold-400);

  /* Neutrals */
  --ink-950: #0D0F1A;
  --ink-900: #14172A;
  --ink-800: #1F2333;
  --ink-700: #2E3346;
  --ink-600: #4B4F63;
  --ink-500: #6B7086;
  --ink-400: #8B8FA3;
  --ink-300: #B0B3C4;
  --ink-200: #D7D9E5;
  --ink-100: #ECEDF5;
  --ink-50:  #F8F9FC;
  --white:   #FFFFFF;

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;

  /* Surface — a warm paper tone instead of stark white/cold gray. It's a
     small shift, but a default #FFFFFF-on-#F8F9FC canvas is exactly what
     every unstyled template ships with; a slightly warm off-white reads as
     a deliberate choice instead of a default. */
  --paper: #FFFDF9;
  --paper-alt: #F3F1EA;
  --bg-body: var(--paper);
  --bg-alt: var(--paper-alt);
  --text-body: var(--ink-800);
  --text-muted: #5F647A; /* was ink-500 (#6B7086): 4.3:1 on the warm section background — this is 5.2:1, comfortably AA */
  --border-color: var(--ink-100);
  --card-bg: var(--white);
  --card-shadow: 0 1px 2px rgba(20,23,42,0.04), 0 12px 32px -12px rgba(20,23,42,0.12);
  --card-shadow-hover: 0 4px 12px rgba(20,23,42,0.06), 0 24px 48px -16px rgba(20,23,42,0.18);

  /* Type — a serif display face gives the brand its own personality instead
     of reading as another geometric-sans SaaS template. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Radii & spacing — smaller, less "bubbly" than a template's default
     large-radius-everywhere; sharper corners read more editorial. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --container-w: 1200px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.28s var(--ease-out);
}

/* ---------------------------------------------------------------------
   2. Reset & Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-body);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

img, picture, svg { max-width: 100%; display: block; }

/* Icon sizing utilities (used via icon() in includes/icons.php) — this
   project has no Tailwind/build step, so these are hand-written to match
   the small fixed set of size classes actually used across the site. */
svg[class*="w-"] { flex-shrink: 0; }
.w-3 { width: 12px; }
.h-3 { height: 12px; }
.w-4 { width: 16px; }
.h-4 { height: 16px; }
.w-5 { width: 20px; }
.h-5 { height: 20px; }
.w-6 { width: 24px; }
.h-6 { height: 24px; }
.w-8 { width: 32px; }
.h-8 { height: 32px; }
.w-10 { width: 40px; }
.h-10 { height: 40px; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-body);
}
p { color: var(--text-muted); }

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 640px) { .container { padding-inline: 18px; } }

section { position: relative; }
/* The gap between two sections is the bottom padding of one plus the top padding of the next: it was 76 + 76 = 152px on a laptop, ~170px
   with a heading's own margin — a big empty band between every pair of sections (home, About, subject pages…). 52 + 52 = 104px is still
   airy next to the alternating cream / grey bands, and a phone gets 36 + 36 = 72px. */
.section-pad { padding-block: clamp(36px, 4.2vw, 52px); }
.section-alt { background: var(--bg-alt); }
/* Neighbouring sections on the same background share one gap instead of stacking two paddings, and the first block
   under a page banner sits close to it — otherwise padding piles up into big empty bands. */
.section-pad:not(.section-alt) + .section-pad:not(.section-alt),
.section-alt + .section-alt { padding-top: 0; }
.page-hero + .section-pad { padding-top: clamp(32px, 4vw, 48px); }
@media (max-width: 768px) { .page-hero + .section-pad { padding-top: 28px; } }
/* ---------------------------------------------------------------------
   3. Typography Utilities
   --------------------------------------------------------------------- */
/* A flat highlighter-mark behind a key word, instead of clipping a
   gradient into the text — the gradient-text trick is on every third
   landing page; a confident flat color block reads more like a real
   editorial choice (and it's the kind of thing you'd see on Brilliant.org
   or a well-made print-inspired site). */
.text-accent {
  position: relative;
  white-space: nowrap;
}
.text-accent::before {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: 3px;
  height: 0.34em;
  background: var(--highlight);
  z-index: -1;
  transform: rotate(-1.2deg);
  border-radius: 2px;
}
/* Editorial kicker — a short rule + letter-spaced label, not a badge/pill.
   The ".dot" element is a real DOM node reused across every page's markup
   (<span class="eyebrow"><span class="dot"></span> Label</span>), so it's
   restyled here into the rule mark rather than edited out of every file. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: 16px;
}
.eyebrow .dot { width: 22px; height: 2px; border-radius: 1px; background: var(--ink-900); flex-shrink: 0; }

.section-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 44px); }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); margin-bottom: 16px; text-wrap: balance; }
.section-head p { font-size: 1.08rem; text-wrap: pretty; }
/* a header with its action BESIDE it ("View all …"), not parked under the list where nobody looks: title block left, link right; stacks on a phone */
.section-head.is-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 34px); }
.section-head.is-row > div { min-width: 0; max-width: 880px; }   /* wide enough that a one-line title ("Pick the format that fits how you learn") is not broken in two */
.section-head.is-row h2 { margin-bottom: 0; }
.section-head.is-row p { margin: 12px 0 0; max-width: 58ch; }   /* …while the supporting line keeps a readable measure */
@media (max-width: 639px) { .section-head .sh-sub { display: none; } }   /* a phone gets the title and the action; the supporting line is for screens with room */
.sh-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-family: var(--font-display); font-weight: 600; color: var(--ink-900); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
.sh-link:hover { text-decoration-color: var(--ink-300); }
.sh-link svg { transition: transform 0.2s var(--ease-out); }
.sh-link:hover svg { transform: translateX(4px); }
.sh-link:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 8px 20px -6px rgba(20,23,42,0.35);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--brand-hover); box-shadow: 0 14px 28px -8px rgba(20,23,42,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--card-bg);
  color: var(--text-body);
  border-color: var(--border-color);
  box-shadow: var(--card-shadow);
}
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--ink-400); color: var(--ink-900); }
.btn-ghost { color: var(--text-body); padding: 14px 18px; }
.btn-ghost:hover { color: var(--ink-900); }
.btn-white { background: var(--white); color: var(--ink-900); box-shadow: 0 8px 20px -6px rgba(0,0,0,0.25); }
.btn-white:hover { transform: translateY(-2px); }
/* The quieter partner of .btn-white, for a second action on a dark band (e.g. the CTA band). */
.btn-outline-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.4); }
.btn-outline-light:hover { transform: translateY(-2px); border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.btn.is-busy { cursor: progress; }
.btn.is-busy::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before { animation-duration: 2s; } }

/* ---------------------------------------------------------------------
   5. Header / Navigation
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding-block: 18px;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition), backdrop-filter var(--transition);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg-body) 88%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 var(--border-color), 0 12px 24px -16px rgba(20,23,42,0.15);
  padding-block: 12px;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* Desktop header: logo | nav | actions on a 3-column grid whose two side
   columns are equal, so the nav sits in the exact centre of the page no
   matter how wide the logo or the buttons are. (With plain
   space-between the nav lands midway between the logo and the buttons,
   which drifts off-centre whenever those two differ in width.) The side
   columns never shrink below their content, so nothing can overlap; below
   1160px there isn't room for the full nav, so the menu button takes over. */
@media (min-width: 1160px) {
  .site-header .container { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .site-header .brand { justify-self: start; }
  .nav-desktop { justify-self: center; }
  .header-actions { justify-self: end; }
}

.brand { display: flex; align-items: center; gap: 10px; padding-block: 9px; margin-block: -9px; }   /* 26px logo -> 44px tap area, layout unchanged */

/* ---- Logo (logo_html() in functions.php) ---------------------------- */
.logo-img { height: 26px; width: auto; display: block; }
@media (min-width: 768px) { .logo-img { height: 30px; } }
.auth-logo { height: 34px; margin-inline: auto; }

/* The header floats transparently over a light hero from the very top of
   every page, so the logo and nav text are simply dark, always — no
   scroll- or theme-based swapping needed. logo_html() still emits both a
   'light-surface' and a 'white' image for the few contexts that stay dark
   (footer, admin), just not here. */
.logo-adaptive-dark { display: block; }
.logo-adaptive-white { display: none; }
.logo-mobile-white { display: none; }

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: 4px; }
.nav-desktop a.nav-link {
  display: inline-block;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition);
}
.nav-desktop a.nav-link:hover, .nav-desktop a.nav-link.active { color: var(--ink-900); background: var(--ink-100); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle, .circle-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;   /* 44 CSS px is the minimum comfortable touch target (Apple/Google/WCAG 2.5.5) */
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-body);
  transition: border-color var(--transition);
}
.nav-toggle svg, .circle-btn svg { width: 20px; height: 20px; }
.circle-btn:hover { border-color: var(--ink-400); }

.header-cta-desktop { display: none; }

@media (min-width: 1160px) {
  .nav-desktop { display: block; }
  .nav-toggle { display: none; }
  .header-cta-desktop { display: inline-flex; }
}
/* a little tighter between 1160 and 1279 so the centred nav still fits beside a logged-out visitor's two buttons */
@media (min-width: 1160px) and (max-width: 1279px) {
  .nav-desktop a.nav-link { padding-inline: 10px; }
}

/* Mobile nav drawer */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--bg-body);
  transform: translateX(100%);
  visibility: hidden;                 /* off-screen links must not be reachable by Tab or screen readers */
  transition: transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
  overflow-y: auto;
  padding: 24px;
}
.nav-mobile.is-open { transform: translateX(0); visibility: visible; transition: transform 0.35s var(--ease-out), visibility 0s; }
.nav-mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.nav-mobile ul { display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; }
.nav-mobile a.nav-link { display: block; padding: 16px 6px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; border-bottom: 1px solid var(--border-color); }
.nav-mobile .btn { width: 100%; }
@media (min-width: 1160px) { .nav-mobile { display: none; } }

body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   6. Hero — light, confident, brand color used as accent rather than
   backdrop (the treatment you'd see on Stripe/Linear/Webflow: white base,
   soft color washes for depth, bold dark type, gradient reserved for a
   handful of high-impact details).
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(100px, 9vw, 116px);
  padding-bottom: clamp(36px, 4vw, 44px);   /* shorter than the screen on a laptop, so the next strip peeks in under it (the cue that there is more) */
  background: var(--white);
}
.hero .container { position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: start; }
.hero-copy { min-width: 0; }   /* a grid item may shrink below its widest child (the swipeable chip row would otherwise stretch the whole phone layout) */
@media (max-width: 1023px) { .hero-grid { gap: 36px; } }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; } }

.hero-copy h1 {
  color: var(--text-body);
  font-size: clamp(2.5rem, 4.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: 18px;
  max-width: 14ch;
}
.hero-copy h1 em { font-style: italic; color: var(--gold-deep); font-weight: 500; }
.hero-copy p.lead { color: var(--text-muted); font-size: 1.15rem; max-width: 470px; margin-bottom: 26px; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
/* On a phone the two hero buttons sit side by side at equal width (short labels), not stacked into two full-width bars that push the live class off the screen */
@media (max-width: 519px) {
  .hero-copy p.lead { font-size: 1.05rem; margin-bottom: 20px; }
  .hero-cta { flex-wrap: nowrap; gap: 10px; margin-bottom: 0; }
  .hero-cta .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; justify-content: center; }
}
@media (max-width: 359px) { .hero-cta .btn svg { display: none; } }   /* the narrowest phones: the label alone fits, label + arrow would touch the edge */

.hero-proof { display: flex; align-items: center; gap: 14px; }
.hero-proof .avatar-stack { display: flex; }
.hero-proof .avatar-stack .avatar-initials { width: 38px; height: 38px; font-size: 0.75rem; border: 2px solid var(--white); margin-left: -8px; }   /* 38px + a smaller overlap keeps both initials fully visible */
.hero-proof .avatar-stack .avatar-initials:first-child { margin-left: 0; }
.hero-proof p { font-size: 0.88rem; margin: 0; }
.hero-proof strong { color: var(--text-body); }
.hero-proof a { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ink-200); text-underline-offset: 3px; }
@media (max-width: 519px) { .hero-proof { display: none; } }   /* a phone shows the live class instead; the mentors have their own section a little further down */

/* ---------------------------------------------------------------------
   Hero seat tickets — the right column of the home hero.
   A stack of real upcoming classes drawn as boarding-pass style tickets: ink header strip, live countdown,
   a perforated tear-off stub with a seat map (real seats taken / open) and a one-click reserve button.
   Flat colours only (ink, paper, one gold accent) to match the rest of the site.
   --------------------------------------------------------------------- */
.hero-visual { position: relative; min-width: 0; width: 100%; max-width: 520px; margin-inline: auto; }
@media (min-width: 1024px) { .hero-visual { align-self: center; justify-self: end; max-width: 470px; margin-inline: 0; } }
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: pulse-dot 2s infinite; flex-shrink: 0; }

.tk-stage { position: relative; display: grid; isolation: isolate; touch-action: pan-y; }
/* the next tickets, waiting behind the front one */
.tk-stage:not([data-count="1"])::before, .tk-stage:not([data-count="1"])::after {
  content: ""; position: absolute; z-index: -1; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-xl);
  box-shadow: 0 10px 24px -14px rgba(20,23,42,0.18);
}
.tk-stage:not([data-count="1"])::before { inset: 12px 16px -12px; transform: rotate(-1.6deg); }
.tk-stage:not([data-count="1"])::after { inset: 22px 32px -22px; transform: rotate(1.3deg); opacity: 0.75; }

.tk {
  grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0;
  filter: drop-shadow(0 1px 1px rgba(20,23,42,0.06)) drop-shadow(0 22px 26px rgba(20,23,42,0.10));
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(0.97) rotate(-1deg);
  transition: opacity 0.4s ease, transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.tk.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.4s ease 0.05s, transform 0.6s var(--ease-out), visibility 0s; }
.tk.is-leaving { opacity: 0; visibility: visible; transform: translateX(-44px) rotate(-3deg); transition: opacity 0.35s ease, transform 0.5s var(--ease-out), visibility 0s; }
.tk.is-leaving.to-right { transform: translateX(44px) rotate(3deg); }
@keyframes tk-print { from { opacity: 0; transform: translateY(22px) rotate(1.4deg); } }
@keyframes tk-nudge { 0%, 100% { transform: none; } 35% { transform: translateX(-26px) rotate(-1.6deg); } 68% { transform: translateX(7px) rotate(0.4deg); } }
.js .tk.is-active.tk-nudge { animation: tk-nudge 1.1s var(--ease-out); }
.js .tk.is-active { animation: tk-print 0.8s var(--ease-out) backwards; }

/* The two halves are punched with a semicircle at each end of the perforation (mask), then drop-shadowed together. */
.tk-main, .tk-stub { --notch: 11px; background: var(--white); border: 1px solid var(--ink-100); }
.tk-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.tk-stub {
  position: relative; background: var(--paper-alt); border-top: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); padding: 24px 26px 20px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
}
.tk-stub::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; border-top: 2px dashed var(--ink-300); }

.tk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px;
  background: var(--ink-950); color: var(--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.tk-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tk-short { display: none; }
.tk-type { color: var(--nova-gold-300); text-align: right; }
.tk-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px 24px 34px; }
.tk-subject { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; margin: 0 0 6px; }
.tk-title { font-size: clamp(1.4rem, 2vw, 1.65rem); line-height: 1.2; margin-bottom: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tk-mentor { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; margin: 0; color: var(--text-muted); }
.tk-mentor strong { color: var(--text-body); }
.tk-mentor .avatar-initials { width: 30px; height: 30px; font-size: 0.75rem; flex-shrink: 0; }
.tk-lead { margin: 0; font-size: 0.95rem; }

.tk-count { margin: 0; }
.tk-count-label { display: block; margin-bottom: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.tk-clock { display: flex; align-items: flex-start; gap: 6px; }
.tk-unit { flex: 1 1 0; max-width: 72px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tk-unit b { width: 100%; padding: 10px 0; text-align: center; border-radius: 8px; background: var(--paper-alt); color: var(--ink-900); font-family: var(--font-display); font-weight: 600; font-size: 1.65rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tk-unit i { font-style: normal; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tk-sep { padding-top: 9px; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--ink-300); }
.tk-unit-sec b { background: var(--ink-950); color: var(--nova-gold-300); }
@keyframes tk-tick { from { transform: translateY(-4px); opacity: 0.55; } }
.tk-unit-sec b.is-tick { animation: tk-tick 0.3s ease; }
.tk-when { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 0.9rem; color: var(--text-body); }
.tk-when svg { color: var(--ink-400); flex-shrink: 0; }
.tk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-steps li { font-size: 0.85rem; line-height: 1.4; color: var(--text-body); }
.tk-steps b { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: var(--ink-950); color: var(--nova-gold-300); font-size: 0.75rem; }

/* seat map: open seats first (the first one gold — "Yours?"), then the taken ones */
.tk-seatmap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 26px; }
.tk-seat { position: relative; width: 15px; height: 17px; border-radius: 6px 6px 3px 3px; background: var(--white); border: 1.5px solid var(--ink-300); }
.tk-seat.is-taken { background: var(--ink-200); border-color: var(--ink-200); }
@keyframes tk-seat-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.6); } 60% { box-shadow: 0 0 0 7px rgba(251,191,36,0); } }
.tk-seat.is-yours { background: var(--nova-gold-400); border-color: var(--ink-900); animation: tk-seat-pulse 2.2s ease-in-out infinite; }
.tk-seat.is-yours::after {
  content: "Yours?"; position: absolute; left: -3px; bottom: calc(100% + 8px); padding: 5px 8px; border-radius: 6px;
  background: var(--ink-950); color: var(--white); font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.tk-seat.is-yours::before { content: ""; position: absolute; left: 4px; bottom: calc(100% + 3px); border: 5px solid transparent; border-top-color: var(--ink-950); border-bottom: 0; }
.tk-seatline { margin: 12px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.tk-seatline strong { color: var(--text-body); }
.tk-seatline.is-low strong { color: var(--gold-deep); }
.tk-buy { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.tk-price { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; }
.tk-price small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.tk-buy .btn { white-space: nowrap; }
.tk-fine { margin: 12px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.tk-fine a { white-space: nowrap; color: var(--ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* hidden arrows: appear when a mouse is over the tickets (or on keyboard focus); on touch screens you swipe instead */
.tk-arrow {
  position: absolute; top: calc(50% - 22px); z-index: 4; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); color: var(--ink-900);
  border: 1px solid var(--border-color); box-shadow: var(--card-shadow-hover);
  opacity: 0; transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tk-prev { left: -22px; }
.tk-next { right: -22px; }
@media (max-width: 599px) { .tk-prev { left: 6px; } .tk-next { right: 6px; } }   /* stay inside the screen on narrow windows */
.tk-arrow:hover { background: var(--ink-900); color: var(--white); }
.tk-arrow:focus-visible { opacity: 1; outline: 2px solid var(--ink-900); outline-offset: 2px; }
@media (hover: hover) { .hero-visual:hover .tk-arrow { opacity: 1; } .tk-stage { cursor: grab; } .tk-stage a, .tk-stage button { cursor: pointer; } }
@media (hover: none) { .tk-arrow { display: none; } }
html:not(.js) .tk-arrow { display: none; }
.hero-visual.is-dragging { user-select: none; }
.hero-visual.is-dragging .tk-stage { cursor: grabbing; }
.hero-visual.is-dragging .tk-arrow { opacity: 0; }

/* under the tickets: just the rating (there is nothing to pause or click — swipe, drag, hover arrows) */
.tk-controls { display: flex; justify-content: center; margin-top: 34px; }
.tk-proof { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.tk-proof svg { color: var(--gold); fill: currentColor; }

@media (max-width: 519px) {
  .tk-bar { padding: 11px 18px; letter-spacing: 0.08em; }
  .tk-long { display: none; }
  .tk-short { display: inline; }
  .tk-body { padding: 18px 18px 26px; gap: 14px; }
  .tk-stub { padding: 20px 18px 16px; }
  .tk-seatmap { display: none; }   /* the seat line under it says the same in words — keeps the real class and its button on the first screens */
  .tk-seatline { margin-top: 0; }
  .tk-unit b { font-size: 1.4rem; padding: 9px 0; }
  .tk-buy { flex-direction: column; align-items: stretch; gap: 12px; }
  .tk-buy .btn { width: 100%; justify-content: center; }
  .tk-price { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tk, .tk.is-active, .tk.is-leaving { transition: none; }
  .js .tk.is-active { animation: none; }
  .tk-seat.is-yours, .tk-unit-sec b.is-tick, .pulse-dot, .js .tk.is-active.tk-nudge { animation: none; }
}

.hero-scroll-cue { display: flex; align-items: center; gap: 10px; margin-top: 56px; color: var(--text-muted); font-size: 0.82rem; }
.hero-scroll-cue .mouse { width: 22px; height: 34px; border: 2px solid var(--ink-300); border-radius: 12px; position: relative; }
.hero-scroll-cue .mouse::before { content:""; position:absolute; top:6px; left:50%; width:3px; height:6px; background:var(--ink-400); border-radius:2px; transform:translateX(-50%); animation: scroll-cue 1.8s infinite; }
@keyframes scroll-cue { 0% { opacity:1; transform: translate(-50%,0);} 100% { opacity:0; transform: translate(-50%,10px);} }

/* ---------------------------------------------------------------------
   7. Logo strip / trust bar
   --------------------------------------------------------------------- */
.trust-bar { padding-block: 20px; border-bottom: 1px solid var(--border-color); }
.trust-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 40px; }
@media (max-width: 639px) {   /* four short claims in a 2x2 block, not a tall centred list */
  .trust-bar { padding-block: 18px; }
  .trust-bar .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; justify-content: stretch; }
  .trust-badge { align-items: flex-start; font-size: 0.85rem; line-height: 1.25; }
  .trust-badge svg { margin-top: 1px; }
}
.trust-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--text-muted); font-size: 0.95rem; }
.trust-badge svg { width: 18px; height: 18px; color: var(--ink-400); }
a.trust-badge:hover { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 4px; }
a.trust-badge:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 3px; border-radius: 6px; }

/* Two-column page layouts that stack on narrower screens. (The class page and
   contact page used an inline `grid-template-columns:1.6fr 1fr`, which beats
   every media query — so on a phone they stayed two columns, squeezing the
   booking card to ~120px wide with its text breaking letter by letter.) */
.split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (max-width: 899px) { .split-first-on-mobile > :last-child { order: -1; } }   /* e.g. the booking card comes before the long description */
@media (min-width: 900px) {
  .split-16-10 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; }
  .split-13-10 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
}

/* ---------------------------------------------------------------------
   8. Feature / value cards
   --------------------------------------------------------------------- */
.grid-3 { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.grid-2 { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.grid-4 { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
/* minmax(0,1fr) + min-width:0: a card's own content (a long word, a nowrap row) may never stretch its column and push the page wider than the screen */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: transparent; }
.feature-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--brand-soft); display: grid; place-items: center; margin-bottom: 20px; }
.feature-icon svg { width: 26px; height: 26px; color: var(--ink-900); }
.feature-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.feature-card p { font-size: 0.95rem; margin: 0; }

/* Editorial numbered grid — used where four identical icon-cards would just
   repeat the same shape four times (e.g. the homepage's "why us" section).
   A bordered 2-up grid with quiet numerals reads as considered, not
   templated, and — unlike a single full-width row per item — actually
   fills the container instead of leaving half of it empty. */
.value-list {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}
@media (min-width: 700px) { .value-list { grid-template-columns: repeat(2, 1fr); } }
.value-item {
  display: flex; gap: 16px;
  padding: 30px 32px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.value-item .value-num { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--ink-300); flex-shrink: 0; width: 26px; padding-top: 2px; }
.value-item h3 { font-size: 1.12rem; margin-bottom: 8px; }
.value-item p { margin: 0; max-width: 40ch; }

/* ---------------------------------------------------------------------
   9. Class / course cards
   --------------------------------------------------------------------- */
/* A class card (includes/partials/class-card.php): Browse Classes, search, subject pages, related classes and the home
   page's featured row. Classes are text only (no cover picture), so the card is built to be read in the order a student weighs it:
   kind + where, calendar tile + title + WHO teaches it (a face and a rating), what it is, when + subject, price + seats (a small meter).
   The whole card is one link (the title's ::after is stretched over it); only the save-heart sits above that. */
.class-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color 0.2s;
}
.class-card:hover { transform: translateY(-3px); border-color: var(--ink-200); box-shadow: var(--card-shadow-hover); }
.class-card:hover .date-tile { translate: 0 -2px; }
.cc-flag { position: absolute; z-index: 3; top: -11px; left: 20px; box-shadow: 0 2px 8px -2px rgba(20,23,42,0.3); }   /* "Featured" straddles the card's top edge, so it costs no height */
.cc-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 20px 20px 18px; }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-kicker { min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cc-kicker svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-700); }
.cc-dot { width: 3px; height: 3px; margin: 0 3px; border-radius: 50%; background: var(--ink-300); }
.cc-top .save-form { position: relative; z-index: 2; margin: 0; flex-shrink: 0; line-height: 0; }
.cc-top > .save-btn { position: relative; z-index: 2; }
.cc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.cc-title { min-width: 0; }
.class-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.cc-link { color: var(--ink-900); }
.cc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-xl); }
.cc-link:focus-visible { outline: none; }
.cc-link:focus-visible::after { outline: 2px solid var(--ink-900); outline-offset: 3px; }
.class-card:hover .cc-link { text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 4px; }
/* who teaches it: a small round photo (or their initials) before the name, then the rating — the one human thing on a text-only card */
.cc-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 7px 0 0; font-size: 0.9rem; color: var(--text-muted); }
.cc-avatar { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ink-100); background: var(--ink-50); }
.cc-avatar.is-initials { display: grid; place-items: center; background: var(--ink-100); color: var(--ink-700); font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; }   /* neutral on purpose: only a real photo adds colour to a card */
.cc-by-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink-700); }
.cc-rate { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cc-rate svg { width: 14px; height: 14px; color: var(--nova-gold-400); fill: currentColor; }
.cc-rate b { color: var(--ink-900); font-weight: 700; }
.cc-desc { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink-600); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.cc-facts { list-style: none; display: grid; gap: 8px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--ink-100); font-size: 0.88rem; color: var(--text-muted); }
.cc-facts li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cc-facts svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; }
.cc-facts span { min-width: 0; overflow-wrap: anywhere; }
.cc-facts .cd-pill { margin-left: 4px; padding: 2px 9px; vertical-align: 1px; }
.cc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }   /* price + seats are pinned to the bottom, so they line up across a row of cards */
.class-card .cc-seats { font-size: 0.85rem; }
.class-card .cc-price small { font-family: var(--font-body); }
.cc-avail { display: grid; justify-items: end; gap: 6px; }
/* seats: the label says how many are left; the bar shows how full the class is (amber when nearly full, grey when full) */
.cc-meter { display: block; width: 84px; height: 5px; overflow: hidden; border-radius: 5px; background: var(--ink-100); }
.cc-meter i { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: var(--ink-900); }
.cc-avail.is-low .cc-meter i { background: var(--nova-gold-500); }
.cc-avail.is-full .cc-meter i { background: var(--ink-300); }
@media (max-width: 420px) { .cc-body { padding: 18px 16px 16px; } .cc-flag { left: 16px; } }

/* Browse Classes: on a wide screen the search and the filter pills share ONE row, so the first cards are on screen the moment the page opens;
   below that the search comes first and the pills follow. (The filter row and the results live in one swappable wrapper — `display: contents`
   makes them grid items of the page container without changing the markup the live-update script swaps.) */
@media (min-width: 1180px) {
  [data-class-app] > .container { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 16px; align-items: center; }
  [data-class-app] [data-class-dynamic] { display: contents; }
  [data-class-app] .lf { margin: 0; }
  [data-class-app] [data-class-results] { grid-column: 1 / -1; margin-top: 28px; }
}

/* a filter menu is as wide as its longest label ("Subject-Based Classes" must not wrap); on a phone it is the full-width bottom sheet instead */
@media (min-width: 641px) { [data-class-filters] .lf-menu { width: max-content; min-width: 240px; max-width: min(360px, calc(100vw - 32px)); } }

/* the grid of class cards: as many ~330px+ columns as fit (3 on a desktop, 2 on a tablet, 1 on a phone), never a card narrower than it can lay out in */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 24px; }
.cgrid > * { min-width: 0; }

.badge-row { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92); color: var(--ink-800);
  backdrop-filter: blur(6px);
}
.badge.badge-dark { background: rgba(13,15,26,0.55); color: var(--white); }
/* For badges sitting directly on a light background (e.g. the class detail
   page header) rather than over an image/gradient — needs its own border
   for definition instead of relying on a dark backdrop for contrast. */
.badge.badge-outline { background: var(--white); border: 1px solid var(--border-color); color: var(--ink-700); backdrop-filter: none; }
.badge.badge-gold { background: var(--gold); color: var(--ink-900); }
.badge.badge-pro { background: var(--ink-950); color: var(--white); }
/* Opaque, like the type/featured badges next to them — not a translucent
   tint. A translucent badge lets whatever's underneath (a saturated card
   color, or a real photo) show through and wash out its own contrast;
   opaque stays legible no matter what it's sitting on. */
.badge.badge-mode-online { background: rgba(255,255,255,0.92); color: #1D4ED8; }
.badge.badge-mode-onsite { background: rgba(255,255,255,0.92); color: #92400E; }
.badge.badge-mode-hybrid { background: rgba(255,255,255,0.92); color: #047857; }

/* A quiet outline heart that fills in solid once saved — the state change
   itself is the confirmation, no extra banner needed for something this
   small and reversible. */
.save-btn { flex-shrink: 0; color: var(--ink-300); transition: color var(--transition), transform 0.2s var(--ease-out); }
.save-btn:hover { color: var(--ink-500); transform: scale(1.12); }
.save-btn svg { width: 19px; height: 19px; }
/* the heart is only 19px — pad the hit area to ~39px and pull it back with a negative margin so the card layout doesn't move */
.save-btn:not(.btn) { padding: 10px; margin: -10px; }
.save-btn.is-saved { color: #E11D48; }
.save-btn.is-saved svg { fill: currentColor; }
/* The same button/state also appears as a full-width icon+label button on
   the class detail page — there it should read as a normal ghost button,
   not the quiet card icon, until it's actually saved. */
.btn.save-btn { color: inherit; }
.btn.save-btn:hover { color: var(--ink-900); transform: none; }
.btn.save-btn svg { width: 18px; height: 18px; }
.btn.save-btn.is-saved { color: #E11D48; }
.cc-price { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text-body); }
.cc-price small { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.cc-seats { font-size: 0.78rem; color: #047857; font-weight: 600; }   /* text-safe greens/ambers/reds (5+:1) — the bright semantic colours are only ~2.5:1 as text on white */
.cc-seats.low { color: #B45309; }
.cc-seats.full { color: #B91C1C; }
.cc-seats.is-private { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--ink-50); border: 1px solid var(--ink-100); color: var(--ink-700); font-weight: 700; }
.cc-seats.is-private svg { width: 14px; height: 14px; }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-color);
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted); background: var(--bg-alt);
  transition: all var(--transition); cursor: pointer;
}
.chip.active, .chip:hover { background: var(--brand); color: var(--white); border-color: transparent; }

/* ---------------------------------------------------------------------
   10. Steps / How it works
   --------------------------------------------------------------------- */
.steps { position: relative; display: grid; gap: 40px 32px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4,1fr); } }
.step { position: relative; padding-top: 8px; padding-left: 20px; border-left: 1px solid var(--border-color); }
.step .step-num {
  counter-increment: step;
  display: block;
  font-family: var(--font-display); font-weight: 500; font-size: 2.2rem; line-height: 1;
  color: var(--ink-200);
  margin-bottom: 16px;
}
.step h4 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: 0.9rem; margin: 0; }

/* ---------------------------------------------------------------------
   11. Stats — real, database-derived counts in a quiet bordered strip.
   A vivid gradient card wrapped around fabricated numbers ("1,200+
   students") is exactly the kind of thing that makes a site feel
   templated — and dishonest the moment a visitor does the math. This
   reads more like a printed fact sheet: plain numerals, thin rules.
   A section wrapping nothing but this strip doesn't need the same
   breathing room as a section full of cards or a heading + paragraph —
   .section-pad's usual padding left it looking like its own oversized
   section rather than a slim band, so it gets a shorter one here. Its
   neighbours' padding stacks with its own at the shared border between
   them (they're different backgrounds, so the same-background merge
   rule above doesn't apply), which left an even bigger gap above and
   below than the band's own padding alone — so the touching side of
   each neighbour is trimmed to match. */
.section-pad:has(.stats-band) { padding-block: clamp(28px, 3vw, 40px); }
.section-pad:has(+ .section-pad .stats-band) { padding-bottom: clamp(28px, 3vw, 40px); }
.section-pad:has(.stats-band) + .section-pad { padding-top: clamp(28px, 3vw, 40px); }
.stats-band {
  display: grid; grid-template-columns: repeat(2,1fr);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 768px) { .stats-band:not(.is-compact) { grid-template-columns: repeat(4,1fr); } }
.stats-band .stat { padding: 18px 24px; border-left: 1px solid var(--border-color); }
.stats-band .stat:nth-child(2n+1) { border-left: none; }
.stats-band .stat:nth-child(n+3) { border-top: 1px solid var(--border-color); }
@media (min-width: 768px) {
  .stats-band:not(.is-compact) .stat:nth-child(2n+1) { border-left: 1px solid var(--border-color); }
  .stats-band:not(.is-compact) .stat:first-child { border-left: none; }
  .stats-band:not(.is-compact) .stat:nth-child(n+3) { border-top: none; }
}
.stats-band .stat b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem,2.4vw,2rem); color: var(--ink-900); }
.stats-band .stat span { color: var(--text-muted); font-size: 0.85rem; }
.stats-band.is-compact .stat { padding: 18px; }
.stats-band.is-compact .stat b { font-size: 1.8rem; }

/* ---------------------------------------------------------------------
   12. Avatars (the round initials/photo used on review rows, the class page's instructor box and the tutor portal)
   --------------------------------------------------------------------- */
.avatar-initials {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: var(--white);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.avatar-initials.avatar-photo { object-fit: cover; display: block; }

/* ---------------------------------------------------------------------
   13. "Your Instructor" box (class.php)
   The directory's tutor cards are the photo-led .tcard (see "Marketplace UI" at the end of this file); this is only the
   small hand-built box on a class page, which reuses the old card's look with its own markup (a round avatar by text).
   --------------------------------------------------------------------- */
.instructor-card {
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow); transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.instructor-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); }
.instructor-card .avatar-initials { width: 84px; height: 84px; font-size: 1.6rem; margin: 0 auto 18px; flex-shrink: 0; }
.instructor-card p.bio {
  font-size: 0.88rem; line-height: 1.6; margin-bottom: 14px; color: var(--text-muted);
  overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.instructor-card .specialties { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.instructor-card .specialties span { font-size: 0.75rem; padding: 4px 10px; background: var(--bg-alt); border-radius: var(--radius-pill); color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Individual tutor profile page (instructor.php): see the "Tutor profile" block further down. What stays here are the
   shared pieces: the tag pills, the sub-rating bars, the reply bubble and the show-more disclosure. */
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list span { padding: 8px 16px; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 500; color: var(--ink-900); }
.pill-list.is-counted span b { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--ink-200); font-size: 0.82rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rb-bar { flex: 1; height: 7px; border-radius: var(--radius-pill); background: var(--paper-alt); overflow: hidden; }
.rb-bar > span { display: block; width: var(--w, 0%); height: 100%; background: var(--nova-gold-400); border-radius: var(--radius-pill); }
.tutor-reply { margin-top: 16px; padding: 14px 18px; background: var(--paper-alt); border-radius: 14px; font-size: 0.95rem; }
.tutor-reply b { display: block; margin-bottom: 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-600); }
.tutor-reply p { margin: 0; }
.rv-more, .tp-more { margin-top: 16px; }
.rv-more > summary, .tp-more > summary { list-style: none; cursor: pointer; }
.rv-more > summary::-webkit-details-marker, .tp-more > summary::-webkit-details-marker { display: none; }
.rv-more > summary svg, .tp-more > summary svg { transition: transform 0.2s; }
.rv-more[open] > summary svg, .tp-more[open] > summary svg { transform: rotate(180deg); }
.rv-more .when-open, .rv-more[open] .when-closed, .tp-more .when-open, .tp-more[open] .when-closed { display: none; }
.rv-more[open] .when-open, .tp-more[open] .when-open { display: inline; }
.rv-more > .rv-rows, .tp-more > .cr-list { margin-top: 8px; }

/* Peek carousel — a row that shows N whole cards plus half of the next one, so it is obvious there is more. A finger swipes it,
   a mouse drags it (or use the hover arrows). data-peek="4" = four across on a desktop (mentors), "3" = three across (classes,
   posts). When everything fits (data-count) it is a plain, centred row with no arrows. */
.peek-carousel { position: relative; --pc-gap: 24px; --pc-visible: 1.3; --pc-gaps: 1; }
.pc-track {
  display: flex; gap: var(--pc-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* room for the cards' shadow and hover lift, without adding page height */
  padding: 14px 4px 34px; margin: -14px -4px -34px; scroll-padding-inline: 4px;
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.pc-track::-webkit-scrollbar { display: none; }
html:not(.js) .pc-track { scrollbar-width: thin; }   /* without JS there are no arrows, so keep the scrollbar */
.pc-track:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; border-radius: var(--radius-lg); }
.peek-carousel.can-next .pc-track { --fade-r: 56px; }
.peek-carousel.can-prev .pc-track { --fade-l: 56px; }
.pc-item { flex: 0 0 calc((100% - var(--pc-gaps) * var(--pc-gap)) / var(--pc-visible)); scroll-snap-align: start; display: flex; min-width: 0; }
.pc-item:last-child { scroll-snap-align: end; }
.pc-item:first-child { margin-left: auto; }    /* centres a short row; collapses to 0 when the row overflows */
.pc-item:last-child { margin-right: auto; }
.peek-carousel.is-start .pc-item:first-child { margin-left: 0; }   /* a short row under a left-aligned heading stays at the left edge */
.peek-carousel.is-start .pc-item:last-child { margin-right: 0; }
.pc-item > * { flex: 1; min-width: 0; }
/* mouse dragging: no snapping while the pointer is down (it snaps on release), grab cursors, no text selection */
@media (hover: hover) { .pc-track { cursor: grab; } }
.peek-carousel.is-dragging .pc-track { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.peek-carousel.is-dragging a { pointer-events: none; }

/* how many cards are in view: [phone] [600+] [900+] [1100+]; the "fit" rules turn the half-card off when every card already fits */
@media (max-width: 599px) {
  .peek-carousel { --pc-gap: 16px; }
  .peek-carousel[data-count="1"] { --pc-visible: 1; --pc-gaps: 0; }
}
@media (min-width: 600px) {
  .peek-carousel { --pc-visible: 2.5; --pc-gaps: 2; }
  .peek-carousel:is([data-count="1"], [data-count="2"]) { --pc-visible: 2; --pc-gaps: 1; }
}
@media (min-width: 900px) {
  .peek-carousel[data-peek="4"] { --pc-visible: 3.5; --pc-gaps: 3; }
  .peek-carousel[data-peek="4"]:is([data-count="1"], [data-count="2"], [data-count="3"]) { --pc-visible: 3; --pc-gaps: 2; }
}
@media (min-width: 1100px) {
  .peek-carousel[data-peek="4"] { --pc-visible: 4.5; --pc-gaps: 4; }
  .peek-carousel[data-peek="4"]:is([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"]) { --pc-visible: 4; --pc-gaps: 3; }
  .peek-carousel[data-peek="3"] { --pc-visible: 3.5; --pc-gaps: 3; }
  .peek-carousel[data-peek="3"]:is([data-count="1"], [data-count="2"], [data-count="3"]) { --pc-visible: 3; --pc-gaps: 2; }
}

/* Arrows: out of the way until you point at (or tab into) the row, and only offered in a direction you can still go. */
.pc-arrow {
  position: absolute; top: calc(50% - 22px); z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); color: var(--ink-900);
  border: 1px solid var(--border-color); box-shadow: var(--card-shadow-hover);
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.pc-prev { left: -10px; }
.pc-next { right: -10px; }
.peek-carousel:not(.can-prev) .pc-prev, .peek-carousel:not(.can-next) .pc-next { display: none; }
.pc-arrow:hover { background: var(--ink-900); color: var(--white); }
.pc-arrow:focus-visible { opacity: 1; outline: 2px solid var(--ink-900); outline-offset: 2px; }
@media (hover: hover) { .peek-carousel:hover .pc-arrow { opacity: 1; } }
@media (hover: none) { .pc-arrow { display: none !important; } }   /* touch: swipe — the half-visible card shows there is more */
@media (prefers-reduced-motion: reduce) { .pc-arrow { transition: none; } }

/* ---------------------------------------------------------------------
   14. CTA band
   --------------------------------------------------------------------- */
/* Same neutral dark used for the footer — one considered "close of section"
   tone reused deliberately, rather than another vivid gradient box. */
.cta-band {
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); font-size: clamp(1.6rem,3vw,2.4rem); margin-bottom: 16px; }
.cta-band p { color: rgba(255,255,255,0.7); max-width: 560px; margin-inline: auto; margin-bottom: 32px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band .cta-note { max-width: none; margin: 20px 0 0; font-size: 0.88rem; color: rgba(255,255,255,0.6); }
.cta-band .cta-note a { color: rgba(255,255,255,0.88); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------
   15. Forms
   --------------------------------------------------------------------- */
.form-card {
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: 40px; box-shadow: var(--card-shadow);
}
@media (max-width: 640px) { .form-card { padding: 26px 20px; } }
.form-row { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-bottom: 20px; }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 860px) { .form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 520px) { .form-actions .btn { flex: 1 1 100%; } }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-body); }
.form-group label .req { color: var(--color-danger); }
.form-control {
  padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color);
  background: var(--bg-alt); font-size: 0.95rem; color: var(--text-body);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline: none; border-color: var(--ink-800); box-shadow: 0 0 0 4px rgba(20,23,42,0.12); }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-group.has-error .form-control { border-color: var(--color-danger); }
.form-error { font-size: 0.8rem; color: var(--color-danger); display: none; }
.form-group.has-error .form-error { display: block; }
.form-hint { font-size: 0.78rem; color: var(--text-muted); }
.honeypot-wrap { position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; pointer-events: none; }   /* the spam-trap box: out of sight, out of the tab order, out of the layout (a flex form's gap included) */
.honeypot-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; padding: 0; border: 0; pointer-events: none; }

.radio-cards { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .radio-cards { grid-template-columns: 1fr; } }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card label {
  display: block; padding: 12px 16px; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; text-align: center; cursor: pointer; transition: all var(--transition); color: var(--text-muted);
}
.radio-card input:checked + label { border-color: var(--ink-900); background: var(--ink-900); color: var(--white); }

.form-alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 10px; }
.form-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.form-alert.success { background: rgba(16,185,129,0.1); color: #047857; }
.form-alert.error { background: rgba(239,68,68,0.1); color: #B91C1C; }
.form-alert.info { background: rgba(107,112,134,0.12); color: #4B4F63; }

.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--ink-900); color: var(--white); padding: 14px 18px; border-radius: var(--radius-md);
  font-size: 0.88rem; box-shadow: 0 12px 32px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 10px;
  min-width: 260px; animation: toast-in 0.3s var(--ease-out);
}
.toast.success { border-left: 4px solid var(--color-success); }
.toast.error { border-left: 4px solid var(--color-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------
   16. Page hero (interior pages)
   --------------------------------------------------------------------- */
/* A flat color bar, not a blurred gradient blob in the corner — the blob
   is the single most recognizable "AI landing page" tell there is, and it
   was still sitting here on every interior page even after the homepage
   hero dropped it. A solid top rule is a small, confident, deliberate
   graphic mark instead. */
.page-hero {
  padding-top: 132px; padding-bottom: 48px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-color);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--brand);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--text-body); font-size: clamp(2rem,4vw,3rem); margin-bottom: 14px; }
.page-hero p { color: var(--text-muted); font-size: 1.05rem; max-width: 620px; }
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; }
.breadcrumbs a:hover { color: var(--ink-900); }

/* ---------------------------------------------------------------------
   17. FAQ accordion
   --------------------------------------------------------------------- */
.accordion-item { border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; background: var(--card-bg); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
}
.accordion-trigger .chev { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition); color: var(--ink-400); }
.accordion-item.is-open .accordion-trigger .chev { transform: rotate(180deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); }
.accordion-panel .inner { padding: 0 22px 20px; font-size: 0.92rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   18. Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--surface-dark); color: rgba(255,255,255,0.7); padding-top: 80px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand .brand { color: var(--white); margin-bottom: 14px; }
.footer-brand .brand .logo-img { height: 32px; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.9rem; max-width: 320px; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); display: grid; place-items: center; transition: all var(--transition); }
.footer-social a:hover { background: var(--gold); border-color: transparent; }
.footer-social svg { width: 17px; height: 17px; }
/* the footer's column titles are <h2> (always a valid step down from any page's last heading — they used to be <h5>, which skipped levels),
   drawn as the same small caps label as before */
.footer-col .footer-title { color: var(--white); font-size: 0.85rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 0; }
.footer-col a { display: inline-block; padding-block: 6px; font-size: 0.9rem; color: rgba(255,255,255,0.6); transition: color var(--transition); }   /* 23px link -> 35px row: easier to tap, same rhythm */
.footer-col a:hover { color: var(--white); }
.footer-col .contact-item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.footer-col .contact-item svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--ink-300); }

.newsletter-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 160px; padding: 12px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--white); font-size: 0.88rem; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form button { padding: 12px 20px; }

.footer-subjects { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 22px 0 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-subjects span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.footer-subjects a { display: inline-block; padding-block: 6px; font-size: 0.88rem; color: rgba(255,255,255,0.6); transition: color var(--transition); }
.footer-subjects a:hover { color: var(--white); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 0; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.footer-bottom p { color: inherit; }   /* the global muted <p> colour is too dim on the dark footer (3.9:1) */
.footer-bottom .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { display: inline-block; padding-block: 8px; }
.footer-bottom a:hover { color: rgba(255,255,255,0.8); }

/* ---------------------------------------------------------------------
   19. Misc components
   --------------------------------------------------------------------- */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: var(--white);
  display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(20,23,42,0.35);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: all var(--transition);
}
.back-to-top:hover { background: var(--brand-hover); }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; transform: rotate(-90deg); }

/* Hidden only when JS is running (the .js class is set in <head>) — without JS, or if the script fails, content simply shows. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

.divider-fade { height: 1px; background: linear-gradient(90deg, transparent, var(--border-color), transparent); border: none; margin-block: 0; }

.empty-state { text-align: center; padding: 80px 20px; }
.empty-state .icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: var(--ink-100); display: grid; place-items: center; margin: 0 auto 20px; }
.empty-state .icon-wrap svg { width: 32px; height: 32px; color: var(--ink-400); }
.empty-state h3 { margin-bottom: 8px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--ink-900); color: var(--white); padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.page-content { padding-block: 72px; }
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: 1.5rem; margin: 40px 0 16px; }
.prose h3 { font-size: 1.2rem; margin: 28px 0 12px; }
.prose h4 { font-size: 1.05rem; margin: 22px 0 10px; }
.prose p { margin-bottom: 16px; font-size: 1rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: 24px 0; display: block; }
.prose ul, .prose ol { margin: 0 0 16px 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 8px; color: var(--text-muted); }
.prose a { color: var(--ink-900); text-decoration: underline; }
.prose strong { color: var(--text-body); }
.prose blockquote { border-left: 3px solid var(--ink-300); padding-left: 18px; color: var(--text-muted); font-style: italic; margin: 20px 0; }

.progress-bar-top { position: fixed; top: 0; left: 0; height: 3px; background: var(--brand); z-index: 2000; width: 0%; }

/* An article as a card (the "More from the blog" row under an article): text first — no grey placeholder with an icon in it; a cover image
   on top only when the article has one. The whole card is one link (the title's ::after is stretched over it). */
.blog-card { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--card-shadow); transition: transform var(--transition), box-shadow var(--transition), border-color 0.2s; }
.blog-card:hover { transform: translateY(-3px); border-color: var(--ink-200); box-shadow: var(--card-shadow-hover); }
.blog-card .bc-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-alt); }
.blog-card .bc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card .bc-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px; }
.blog-card .bc-date { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.blog-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.bc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bc-link:focus-visible { outline: none; }
.bc-link:focus-visible::after { outline: 2px solid var(--ink-900); outline-offset: 3px; border-radius: var(--radius-xl); }
.blog-card:hover .bc-link { text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 4px; }
.blog-card .bc-excerpt { margin: 0; flex: 1; font-size: 0.95rem; line-height: 1.55; color: var(--ink-600); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.blog-card .bc-readmore { display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; font-size: 0.88rem; font-weight: 700; color: var(--ink-900); }
.blog-card .bc-readmore svg { transition: transform 0.2s var(--ease-out); }
.blog-card:hover .bc-readmore svg { transform: translateX(3px); }

.pagination { display:flex; justify-content:center; gap:8px; margin-top: 40px; }
.pagination a, .pagination span { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border-color); font-size:0.88rem; font-weight:600; }
.pagination a:hover { background: var(--brand); color:#fff; border-color:transparent; }
.pagination .current { background: var(--brand); color:#fff; border-color:transparent; }

.map-embed { border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-color); height: 340px; }
.map-embed iframe { width:100%; height:100%; border:0; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* 404 page */
.error-page { min-height: 70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-top: 120px; }
.error-page .code { font-family: var(--font-display); font-size: clamp(5rem,14vw,9rem); font-weight:600; color: var(--ink-400); line-height:1; }

/* ---------------------------------------------------------------------
   20. Account — sign-up / login / verification-code / dashboard
   --------------------------------------------------------------------- */
.otp-group { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; }
.otp-box {
  width: 52px; height: 60px; text-align: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  border: 1.5px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-alt); color: var(--text-body);
}
.otp-box:focus { outline: none; border-color: var(--ink-800); box-shadow: 0 0 0 4px rgba(20,23,42,0.12); background: var(--white); }
@media (max-width: 420px) { .otp-box { width: 42px; height: 52px; font-size: 1.3rem; } }

/* Registration status — same visual language as the admin panel's
   status-pill, so a returning visitor sees the same vocabulary the team
   uses internally ("paid", "enrolled", ...) rather than a different
   set of words on each side. */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.status-pill.status-pending_confirmation { background: rgba(107,112,134,0.14); color: #4B4F63; }
.status-pill.status-awaiting_tutor_proposal { background: rgba(107,112,134,0.14); color: #4B4F63; }
.status-pill.status-awaiting_student_response { background: rgba(59,130,246,0.12); color: #1D4ED8; }
.status-pill.status-awaiting_payment { background: rgba(245,158,11,0.16); color: #92400E; }
.status-pill.status-declined { background: rgba(239,68,68,0.12); color: #B91C1C; }
.status-pill.status-new { background: rgba(59,130,246,0.12); color: #1D4ED8; }
.status-pill.status-contacted { background: rgba(245,158,11,0.14); color: #B45309; }
.status-pill.status-paid, .status-pill.status-enrolled { background: rgba(16,185,129,0.14); color: #047857; }
.status-pill.status-cancelled { background: rgba(239,68,68,0.12); color: #B91C1C; }
.status-pill.status-waitlist { background: rgba(245,158,11,0.16); color: #92400E; }

/* a card's title with its action button on the same line (My Class Registrations, Saved Classes, Saved Tutors) */
.form-card > .admin-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.form-card > .admin-card-head h2 { margin: 0; }
.account-list { border-top: 1px solid var(--border-color); }
.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 4px; border-bottom: 1px solid var(--border-color);
}
.account-row .account-row-main h4, .account-row .account-row-main h3 { font-size: 1rem; margin-bottom: 4px; }
.account-row .account-row-main span { font-size: 0.85rem; color: var(--text-muted); }
/* Rows that link through to the class detail page get their own hover
   state and chevron on just the title/schedule area — a <form> (for the
   Cancel button) can't legally nest inside an <a>, so the clickable link
   and the action buttons are siblings, not one giant anchor. Rows with
   nothing to click through to (a deleted class, or "General Interest"
   with no class attached) render the same content as a plain <div>. */
.account-row-link {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px;
  margin: -6px -4px; padding: 6px 4px; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.account-row-link:hover { background: var(--bg-alt); }
.account-row-link .account-row-chevron { color: var(--ink-300); flex-shrink: 0; transition: transform var(--transition); }
.account-row-link:hover .account-row-chevron { transform: translateX(3px); color: var(--ink-600); }
.account-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; flex-shrink: 0; max-width: 100%; }   /* wraps: a finished row can carry a status, "Leave a review" and "Book Another Session" — more than a phone is wide */
.account-cancel-btn { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); padding: 10px 6px; margin: -6px -4px; }
.account-cancel-btn:hover { color: #B91C1C; text-decoration: underline; }

/* Saved Classes reuses the account-row list above it, plus a small thumbnail
   (class image, or an initial on its subject's accent color) so a saved
   class still reads as a class and not just another text row. */
.saved-row-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  background-size: cover; background-position: center;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.saved-row-thumb.is-round { border-radius: 50%; font-size: 0.95rem; }
.saved-row-rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-900); }
.saved-row-rating svg { color: var(--nova-gold-400); fill: currentColor; }
.saved-row-none { font-size: 0.85rem; color: var(--text-muted); }
.saved-row-subject { font-weight: 700; }
.saved-row .cc-price { font-size: 0.95rem; }
@media (max-width: 480px) { .saved-row .cc-seats { display: none; } .saved-row .account-row-link { min-width: 0; flex-basis: 150px; } .saved-row .account-row-chevron { display: none; } }

.account-subhead { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 24px 0 4px; }
.account-subhead:first-child { margin-top: 0; }

/* "Your Next Class" at the top of the account page — the one class you will attend next, as a small ink card (the booking card's language:
   ink top, paper foot with the price and the buttons). */
.spotlight-card { overflow: hidden; border: 1px solid var(--ink-100); border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--card-shadow); }
.spotlight-top { padding: 20px 22px 22px; background: var(--ink-950); color: rgba(255,255,255,0.82); }
.spotlight-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spotlight-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nova-gold-300); }
.spotlight-top .cd-pill { background: rgba(255,255,255,0.12); }
.spotlight-subject { margin: 14px 0 4px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.62); }
.spotlight-top h2, .spotlight-top h3 { margin: 0 0 14px; color: var(--white); font-size: 1.45rem; line-height: 1.2; }
.spotlight-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.92rem; }
.spotlight-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.spotlight-meta svg { flex-shrink: 0; width: 16px; height: 16px; color: rgba(255,255,255,0.55); }
.spotlight-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding: 16px 22px; background: var(--paper); }
.spotlight-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink-900); }
.spotlight-price small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }

/* Account page: what is still to come comes first; history (past, cancelled) waits behind a closed <details>, most recent first, and an
   older stretch of it behind a second one — so a long record never pushes "Upcoming" down. No JavaScript involved. */
.acct-history { margin-top: 24px; border-top: 1px solid var(--border-color); }
.acct-history > summary { display: flex; align-items: center; gap: 10px; padding: 16px 4px; cursor: pointer; list-style: none; user-select: none; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); transition: color 0.2s; }
.acct-history > summary::-webkit-details-marker, .acct-more > summary::-webkit-details-marker { display: none; }
.acct-history > summary:hover { color: var(--ink-900); }
.acct-history > summary:focus-visible, .acct-more > summary:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; border-radius: var(--radius-sm); }
.acct-n { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--paper-alt); color: var(--text-body); font-size: 0.75rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.acct-history > summary > svg { margin-left: auto; transition: transform 0.2s; }
.acct-history[open] > summary > svg { transform: rotate(180deg); }
.acct-history > .account-list, .acct-more > .account-list { border-top: 0; }
.acct-more > summary { display: block; padding: 14px 4px; text-align: center; cursor: pointer; list-style: none; font-size: 0.9rem; font-weight: 600; color: var(--ink-700); }
.acct-more > summary:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.acct-more[open] > summary { display: none; }
.acct-empty { padding: 18px 4px; border-top: 1px solid var(--border-color); font-size: 0.92rem; color: var(--text-muted); }
.acct-empty a { font-weight: 600; color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.acct-nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 6px; padding: 14px 16px; border: 1px solid var(--nova-gold-300); border-radius: var(--radius-lg); background: var(--paper-alt); }
.acct-nudge > svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--nova-gold-400); fill: currentColor; }
.acct-nudge > div { flex: 1 1 220px; min-width: 0; }
.acct-nudge b { display: block; font-size: 0.95rem; color: var(--ink-900); }
.acct-nudge span { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--text-muted); }
.row-reviewed { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: #047857; }

.account-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.account-header .avatar-initials { width: 56px; height: 56px; font-size: 1.3rem; flex-shrink: 0; }
.account-header h1 { font-size: 1.6rem; margin-bottom: 2px; }
.account-header p { font-size: 0.9rem; margin: 0; }

.danger-zone { border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius-lg); padding: 24px 28px; background: rgba(239,68,68,0.03); }
.danger-zone h3 { font-size: 1rem; color: #B91C1C; margin-bottom: 8px; }
.danger-zone > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 0.95rem; color: #B91C1C; }
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary::before { content: "+"; display: inline-block; width: 18px; font-weight: 700; }
.danger-zone[open] > summary::before { content: "\2013"; }
.danger-zone > summary:focus-visible { outline: 2px solid #B91C1C; outline-offset: 4px; border-radius: 4px; }
.danger-zone:not([open]) { padding-block: 16px; }
.ac-danger-text { margin: 14px 0 16px; font-size: 0.9rem; color: var(--text-muted); }
.ac-delete-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ac-delete-form .form-control { flex: 1 1 220px; max-width: 280px; }
.btn-danger { background: #B91C1C; color: #fff; }
.btn-danger:hover { background: #991B1B; transform: translateY(-2px); }

/* ---- My account: a left rail on a desktop (a swipeable row of pills on a phone), then one column of cards ---- */
.ac-head-hero { padding-bottom: 8px; }
.ac-head-hero .account-header { margin-bottom: 0; }
.ac-head-hero .lh-title { margin: 0 0 2px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ac-head-hero .lh-sub { margin: 0; font-size: 0.92rem; }
.ac-body { padding-top: 14px; }
.ac-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ac-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px; }
.ac-nav::-webkit-scrollbar { display: none; }
.ac-nav a { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--white); font-size: 0.92rem; font-weight: 600; color: var(--text-body); white-space: nowrap; }
.ac-nav a:hover { border-color: var(--ink-400); color: var(--ink-900); }
.ac-nav a:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.ac-nav .ac-logout { color: var(--text-muted); }
.ac-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ac-main > [id] { scroll-margin-top: 100px; }
@media (min-width: 1000px) {
  .ac-layout { grid-template-columns: 220px minmax(0, 820px); gap: 48px; align-items: start; }
  .ac-nav { position: sticky; top: 100px; flex-direction: column; overflow: visible; gap: 2px; margin: 0; padding: 0; }
  .ac-nav a { justify-content: space-between; border: 0; border-radius: var(--radius-md); background: transparent; }
  .ac-nav a:hover { background: var(--paper-alt); }
  .ac-nav .ac-logout { justify-content: flex-start; margin-top: 10px; border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-md) var(--radius-md); }
}
.ac-head { margin-bottom: 8px; }
.ac-head h2 { margin: 0; font-size: 1.15rem; }
.ac-head-sub { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-color); }
.ac-first { margin-top: 0; }
.ac-empty-state { padding: 28px 16px; }
.ac-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-weight: 600; cursor: pointer; }
.ac-check input { margin-top: 3px; accent-color: var(--ink-900); }
.ac-check .form-hint { display: block; margin-top: 2px; font-weight: 400; }
.form-control.is-readonly { opacity: 0.6; }
.spotlight-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Home: "Find your format"
   The four formats as four cards, ALL visible at once (the old tabs hid three of them behind a click), in the same ink-strip /
   paper-stub language as the hero tickets. Each carries a small animated picture of the format's rhythm (the .v-* rules below,
   played once as the card scrolls in). On a phone they become a 2x2 grid of compact tiles: name, one-line hook, live "N open now".
   --------------------------------------------------------------------- */
.fc-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .fc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fc { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--card-shadow); transition: transform var(--transition), box-shadow var(--transition), border-color 0.2s; }
.fc:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: var(--ink-200); }
.fc-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px 18px 12px; background: var(--ink-950); color: var(--white); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fc-name { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.fc-open { display: inline-flex; align-items: center; gap: 7px; color: var(--nova-gold-300); white-space: nowrap; }
.fc-open.is-soon { color: rgba(255,255,255,0.7); }
.fc-viz { margin: 16px 16px 0; padding: 14px 12px 10px; background: var(--paper-alt); border-radius: var(--radius-lg); }
.fc-viz svg { display: block; width: 100%; height: auto; max-height: 120px; overflow: visible; }   /* drawn at 320x120: never blown up in a wide 2x2 card (it was ~160px tall at 1024px) */
.fc-body { flex: 1; display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; }
.fc-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--text-body); }
.fc-hook { display: none; margin: 0; }
.fc-text { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--text-muted); }
.fc:hover .fc-title { text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 4px; }   /* the card is one link — the title says so on hover, like the class cards */
.fc-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the whole card is one link */
.fc-stretch:focus-visible { outline: 3px solid var(--ink-900); outline-offset: 3px; }
@media (max-width: 639px) {
  .fc-grid { gap: 12px; }
  .fc { display: grid; grid-template-areas: "name" "hook" "open"; align-content: start; gap: 4px; padding: 16px 14px 14px; border-radius: var(--radius-lg); }
  .fc-bar, .fc-body { display: contents; }   /* their children become the tile's own rows */
  .fc-name { grid-area: name; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--text-body); }
  .fc-hook { display: block; grid-area: hook; font-size: 0.85rem; line-height: 1.35; color: var(--text-muted); }
  .fc-open { grid-area: open; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--ink-700); }
  .fc-open.is-soon { color: var(--text-muted); }
  .fc-viz, .fc-title, .fc-text { display: none; }
}

/* the four pictures (drawn in SVG, animated once as their card scrolls into view) */
.v-base { stroke: var(--ink-200); stroke-width: 2; }
.v-pop, .v-bar, .v-dot { transform-box: fill-box; }
.v-fill { fill: var(--ink-900); }
.v-ghost { fill: none; stroke: var(--ink-300); stroke-width: 2; stroke-dasharray: 5 5; }
.v-tick { fill: none; stroke: var(--nova-gold-300); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-pop { transform-origin: 50% 100%; }
.v-bar { fill: var(--ink-900); fill-opacity: var(--o, 1); transform-origin: 50% 100%; }
.v-bar.v-gold { fill: var(--nova-gold-400); fill-opacity: 1; }
.v-area { fill: rgba(20,23,42,0.06); }
.v-line { fill: none; stroke: var(--ink-900); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.v-dot { fill: var(--white); stroke: var(--ink-900); stroke-width: 3; transform-origin: center; }
.v-dot.v-gold { fill: var(--nova-gold-400); }
.v-alt { fill: none; stroke: var(--ink-300); stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; }
.v-ghostnode { fill: none; stroke: var(--ink-300); stroke-width: 3; }
.v-path { fill: none; stroke: var(--ink-900); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; }
.v-node, .v-start { fill: var(--ink-900); }
.v-goal { fill: none; stroke: var(--nova-gold-500); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; }
.v-end { transform-box: fill-box; transform-origin: center; }
.v-end circle { fill: var(--nova-gold-400); }
.v-end path { fill: none; stroke: var(--ink-950); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes v-pop { from { opacity: 0; transform: scaleY(0.3); } }
@keyframes v-grow { from { transform: scaleY(0); } }
@keyframes v-draw { from { stroke-dashoffset: 1; } }
@keyframes v-dotpop { from { transform: scale(0); } }
@keyframes v-fade { from { opacity: 0; } }
.reveal.is-visible .v-pop { animation: v-pop 0.5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 80ms + 150ms); }
.reveal.is-visible .v-bar { animation: v-grow 0.6s var(--ease-out) backwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
.reveal.is-visible .v-line { animation: v-draw 1s var(--ease-out) 0.15s backwards; }
.reveal.is-visible .v-area { animation: v-fade 0.8s ease 0.5s backwards; }
.reveal.is-visible .v-dot { animation: v-dotpop 0.4s var(--ease-out) backwards; animation-delay: calc(var(--i) * 180ms + 250ms); }
.reveal.is-visible .v-path { animation: v-draw 0.7s var(--ease-out) 0.15s backwards; }
.reveal.is-visible .v-node { animation: v-fade 0.3s ease 0.7s backwards; }
.reveal.is-visible .v-goal { animation: v-draw 0.8s var(--ease-out) 0.8s backwards; }
.reveal.is-visible .v-end { animation: v-dotpop 0.5s var(--ease-out) 1.5s backwards; }

/* ---------------------------------------------------------------------
   Home: "Getting started" journey
   Four connected steps with a flat mock of each screen; the line draws and the mocks play as each step scrolls into view.
   --------------------------------------------------------------------- */
.jr { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr); }
.jr-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
.jr-node {
  grid-column: 1; grid-row: 1; position: relative; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-950); color: var(--nova-gold-300); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
}
.jr-copy { grid-column: 2; grid-row: 1; padding-top: 4px; }
.jr-copy h3 { font-size: 1.2rem; margin-bottom: 8px; }
.jr-copy p { margin: 0; font-size: 0.93rem; }
.jr-mock {
  grid-column: 2; grid-row: 2; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  padding: 16px; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); font-size: 0.85rem; color: var(--text-body);
}
.jr-line { position: absolute; z-index: 1; left: 21px; top: 48px; bottom: -44px; width: 2px; background: var(--ink-200); }
.jr-line::after { content: ""; position: absolute; inset: 0; background: var(--ink-900); transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--ease-out) 0.35s; }
.jr-step.is-in .jr-line::after { transform: none; }
@media (min-width: 900px) {
  .jr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .jr[data-steps="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .jr-step { display: flex; flex-direction: column; align-items: stretch; }
  .jr-copy { padding-top: 20px; }
  .jr-mock { margin-top: 22px; flex: 1; justify-content: center; }   /* the four mocks end on the same line */
  .jr-line { left: 56px; top: 21px; bottom: auto; width: calc(100% - 40px); height: 2px; }
  .jr-line::after { transform: scaleX(0); transform-origin: left; }
  .jr-step.is-in .jr-line::after { transform: none; transition-delay: calc(var(--i) * 0.3s + 0.35s); }
}
@media (max-width: 899px) {   /* below the three-across layout the steps are just words — the little screens would triple the section's length */
  .jr { gap: 26px; }
  .jr-mock { display: none; }
  .jr-line { bottom: -26px; }
}
/* entrance (only when JavaScript is running — otherwise everything is simply shown) */
.js .jr-node { opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.5s var(--ease-out); }
.js .jr-copy, .js .jr-mock { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .jr-step.is-in .jr-node { opacity: 1; transform: none; transition-delay: calc(var(--i) * 0.3s); }
.js .jr-step.is-in .jr-copy { opacity: 1; transform: none; transition-delay: calc(var(--i) * 0.3s + 0.1s); }
.js .jr-step.is-in .jr-mock { opacity: 1; transform: none; transition-delay: calc(var(--i) * 0.3s + 0.25s); }

/* the four mocks */
.mk-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-pill); color: var(--text-muted); background: var(--bg-body); }
.mk-search svg { color: var(--ink-400); flex-shrink: 0; }
.mk-caret { width: 1.5px; height: 14px; background: var(--ink-900); animation: mk-blink 1s steps(2) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chips span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--paper-alt); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; transition: background 0.4s, color 0.4s; }
.mk-chips .on { background: var(--paper-alt); }
.jr-step.is-in .mk-chips .on { background: var(--ink-900); color: var(--white); transition-delay: calc(var(--i) * 0.3s + 0.9s); }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--ink-100); border-radius: 10px; }
.mk-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mk-row i { font-style: normal; font-weight: 700; flex-shrink: 0; }
@keyframes mk-slide { from { opacity: 0; transform: translateY(8px); } }
.jr-step.is-in .mk-row { animation: mk-slide 0.5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 0.3s + 1.1s); }
.jr-step.is-in .mk-row + .mk-row { animation-delay: calc(var(--i) * 0.3s + 1.3s); }

.mk-label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-weight: 600; }
.mk-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mk-boxes span { display: grid; place-items: center; height: 42px; border: 1.5px solid var(--ink-900); border-radius: 8px; background: var(--bg-body); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
@keyframes mk-digit { from { opacity: 0; transform: scale(0.7); border-color: var(--ink-200); } }
.jr-step.is-in .mk-boxes span { animation: mk-digit 0.35s var(--ease-out) backwards; animation-delay: calc(var(--i) * 0.3s + 0.9s + var(--d) * 0.16s); }
.mk-ok { display: flex; align-items: center; gap: 6px; margin: 0; color: #047857; font-weight: 600; }
@keyframes mk-ok { from { opacity: 0; transform: translateY(6px); } }
.jr-step.is-in .mk-code .mk-ok { animation: mk-ok 0.5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 0.3s + 2s); }

.mk-seats { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-seats span { position: relative; width: 15px; height: 17px; border-radius: 6px 6px 3px 3px; background: var(--white); border: 1.5px solid var(--ink-300); }
.mk-seats .is-taken { background: var(--ink-200); border-color: var(--ink-200); }
.mk-seats .is-yours { background: var(--nova-gold-400); border-color: var(--ink-900); }
.jr-step.is-in .mk-seats .is-yours { animation: tk-seat-pulse 2.2s ease-in-out 1.2s infinite; }
.mk-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-buy b { font-family: var(--font-display); font-size: 1.3rem; }
.mk-buy small { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.mk-btn { padding: 9px 14px; border-radius: var(--radius-pill); background: var(--ink-950); color: var(--white); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
@keyframes mk-press { 40% { transform: scale(0.93); } }
.jr-step.is-in .mk-btn { animation: mk-press 0.5s ease 1.5s; }
.jr-step.is-in .mk-reserve .mk-ok { animation: mk-ok 0.5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 0.3s + 1.75s); }

.mk-live { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mk-tiles span { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--paper-alt); }
.mk-tiles i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-900); color: var(--white); font-style: normal; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; }
.mk-tiles .t2 i { background: #334155; }
.mk-tiles .t3 i { background: var(--nova-gold-700); }
.mk-tiles .t4 i { background: var(--nova-gold-400); color: var(--ink-950); }
@keyframes mk-speak { 0%, 24% { box-shadow: inset 0 0 0 2px var(--nova-gold-400); } 25%, 100% { box-shadow: none; } }
.jr-step.is-in .mk-tiles span { animation: mk-speak 4.8s linear infinite; }
.jr-step.is-in .mk-tiles .t2 { animation-delay: 1.2s; }
.jr-step.is-in .mk-tiles .t3 { animation-delay: 2.4s; }
.jr-step.is-in .mk-tiles .t4 { animation-delay: 3.6s; }
.mk-cap { margin: 0; text-align: center; font-size: 0.8rem; color: var(--text-muted); }

.jr-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 52px; text-align: center; }
.jr-cta p { margin: 0; font-weight: 600; color: var(--text-body); }

/* ---------------------------------------------------------------------
   Home: what students say (real, verified reviews in a peek row) and the quick answers
   --------------------------------------------------------------------- */
.hr-card { height: 100%; margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); }
.hr-card .rv-row-stars { flex: 0 0 auto; margin: 0; }   /* (the review row's own ≤480px rule sets flex-basis + margin-left on .rv-row-stars) */
.hr-card blockquote { flex: 1; margin: 0; }
.hr-card blockquote p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--text-body); overflow-wrap: anywhere; }
.hr-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ink-100); }
.hr-card .avatar-initials { flex-shrink: 0; width: 42px; height: 42px; font-size: 0.85rem; }
.hr-who { min-width: 0; display: grid; gap: 1px; font-size: 0.85rem; color: var(--text-muted); }
.hr-who b { font-size: 0.95rem; color: var(--ink-900); }
.hr-who a { font-weight: 600; color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }

.hq-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .hq-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; } .hq-intro { position: sticky; top: 100px; } }
.hq-intro h2 { margin-bottom: 14px; }
.hq-intro p { margin: 0 0 12px; max-width: 34ch; }
.hq-list { display: grid; gap: 12px; }
.hq-item { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--card-bg); overflow: hidden; }
.hq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--text-body); }
.hq-item > summary::-webkit-details-marker { display: none; }
.hq-item > summary svg { flex-shrink: 0; color: var(--ink-400); transition: transform 0.25s var(--ease-out); }
.hq-item[open] > summary svg { transform: rotate(180deg); }
.hq-item > summary:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -2px; border-radius: var(--radius-md); }
.hq-answer { padding: 0 22px 20px; font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); }
.hq-answer p { margin: 0; }
.hq-answer a { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .js .jr-node, .js .jr-copy, .js .jr-mock { opacity: 1; transform: none; transition: none; }
  .jr-line::after { transition: none; transform: none; }
  .fc-viz * { animation: none !important; }
  .jr-step *, .mk-caret { animation: none !important; }
}

/* =====================================================================
   Booking funnel — confirm → pay → done (class-register, checkout, thank-you)
   A compact header with a progress line, the ONE action on the left, and "Your booking" (the ink card, sticky) on the right —
   the pattern Eventbrite / Airbnb / Calendly checkouts use: the person always sees what they are buying, when, and for how much.
   ===================================================================== */
.fn-head .container > .fn-steps { margin-bottom: 18px; }
.fn-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; list-style: none; margin: 0; padding: 0; }
.fn-steps li { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.fn-steps li + li::before { content: ""; width: 30px; height: 2px; margin-inline: 10px; background: var(--ink-200); }
.fn-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink-200); background: var(--paper-alt); font-size: 0.8rem; color: var(--ink-600); }
.fn-n svg { width: 15px; height: 15px; }
.fn-steps .is-current { color: var(--ink-900); }
.fn-steps .is-current .fn-n { border-color: var(--ink-950); background: var(--ink-950); color: var(--nova-gold-300); }
.fn-steps .is-done { color: var(--ink-700); }
.fn-steps .is-done .fn-n { border-color: var(--ink-900); background: var(--ink-900); color: var(--white); }
.fn-steps .is-done + li::before, .fn-steps .is-current::before { background: var(--ink-900); }
@media (max-width: 480px) {   /* three steps and their connectors must fit one line on a small phone */
  .fn-steps li { gap: 8px; font-size: 0.84rem; }
  .fn-n { width: 26px; height: 26px; }
  .fn-steps li + li::before { width: 14px; margin-inline: 6px; }
}
@media (max-width: 360px) {
  .fn-steps li { gap: 6px; font-size: 0.8rem; }
  .fn-n { width: 24px; height: 24px; font-size: 0.74rem; }
  .fn-steps li + li::before { width: 10px; margin-inline: 4px; }
}

.fn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.fn-main, .fn-aside { min-width: 0; }
.fn-aside { order: -1; }                       /* a phone sees what it is booking first, then the one thing to do */
@media (min-width: 900px) {
  .fn-layout { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 40px; }
  .fn-aside { order: 0; position: sticky; top: 100px; }
}
.fn-body { padding-top: 24px; }
.fn-main .form-card { padding: 28px; }
@media (max-width: 640px) { .fn-main .form-card { padding: 22px 18px; } }
.fn-gap { margin-bottom: 18px; }
.fn-gap-top { margin-top: 16px; }
.fn-submit { margin-top: 20px; }
.fn-after { margin: 12px 0 0; }
.fn-picked { margin: 14px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--ink-900); }
.fn-picked[hidden] { display: none; }
.fn-main .rf-formats { margin-bottom: 8px; }
.form-alert.warn { background: rgba(245,158,11,0.14); color: #92400E; }
.fn-card-title { margin: 0 0 14px; font-size: 1.15rem; }
.fn-next { margin-bottom: 4px; }
.fn-pay-title { margin: 0 0 6px; font-size: 1.35rem; }
.fn-pay-sub { margin: 0 0 18px; font-size: 0.9rem; }
.fn-center { text-align: center; }
.fn-back { margin: 16px 4px 0; font-size: 0.9rem; }
.fn-back a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.fn-back a:hover { color: var(--ink-900); }
/* sign-up / log-in / code pages: a centred title, the class being reserved (if any), one card */
.page-hero.is-listing.is-center { text-align: center; }
.page-hero.is-listing.is-center .lh-sub { margin-inline: auto; max-width: 540px; }
.page-hero.is-listing.is-center .lh-sub b { overflow-wrap: anywhere; }
.auth-wrap { max-width: 480px; margin-inline: auto; }
.auth-field { margin-bottom: 20px; }
.auth-terms { margin-bottom: 20px; }
.auth-switch { margin: 22px 0 0; text-align: center; font-size: 0.92rem; color: var(--text-muted); }
.auth-switch a { color: var(--ink-900); font-weight: 600; }
.auth-tutor { margin-top: 8px; font-size: 0.86rem; }
.auth-tip { margin-top: 18px; font-size: 0.86rem; }
.auth-tip strong { color: var(--ink-900); }
.auth-code { text-align: center; }
.auth-resend { margin-top: 16px; }
.auth-code-fallback { text-align: center; margin-bottom: 16px; }
.fn-context { display: grid; gap: 4px; margin-bottom: 18px; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--paper-alt); border: 1px dashed var(--ink-200); }
.fn-context-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.fn-context-body { display: grid; gap: 2px; min-width: 0; }
.fn-context-body b { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.fn-context-body span { font-size: 0.88rem; color: var(--text-muted); }
.fn-layout.is-single { max-width: 760px; margin-inline: auto; }
@media (min-width: 900px) { .fn-layout.is-single { grid-template-columns: minmax(0, 1fr); } }
.fn-layout.is-single .fn-aside { order: 0; position: static; }

/* the confirmation card */
.ty-card { padding: 34px; }
@media (max-width: 640px) { .ty-card { padding: 24px 18px; } }
.ty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; }
.ty-icon.is-ok { background: rgba(16,185,129,0.12); color: var(--color-success); }
.ty-icon.is-wait { background: rgba(245,158,11,0.14); color: #B45309; }
.ty-icon.is-mail { background: rgba(245,158,11,0.14); color: #B45309; }
.ty-title { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; }
.ty-lead { margin: 0 0 22px; font-size: 1.02rem; color: var(--text-muted); }
.ty-lead strong { color: var(--ink-900); }
.ty-cal { margin: 0 0 26px; padding: 18px; border-radius: var(--radius-lg); background: var(--paper-alt); border: 1px dashed var(--ink-200); }
.ty-cal-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.ty-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ty-next-title { margin: 0 0 12px; font-size: 1.15rem; }
.ty-next { list-style: none; counter-reset: ty; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.ty-next li { counter-increment: ty; position: relative; padding-left: 42px; font-size: 0.94rem; line-height: 1.55; color: var(--text-muted); }
.ty-next li::before { content: counter(ty); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-950); color: var(--nova-gold-300); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; }
.ty-next b { display: block; margin-bottom: 1px; font-size: 1rem; color: var(--ink-900); }
@media (max-width: 520px) { .ty-actions .btn { flex: 1 1 100%; } }

/* "Your booking" */
.bs { box-shadow: var(--card-shadow); }
.bs .ic-bar .bs-type { color: var(--nova-gold-300); text-align: right; }
.bs-body { display: grid; gap: 14px; padding: 22px; }
.bs-title { margin: 0; font-size: 1.3rem; line-height: 1.25; overflow-wrap: anywhere; }
.bs-title a { color: inherit; }
.bs-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-300); }
.bs-tutor { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.bs-tutor .avatar-initials { width: 34px; height: 34px; font-size: 0.8rem; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.bs-tutor a { font-weight: 600; color: var(--ink-900); }
.bs-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bs-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--text-body); }
.bs-facts svg { flex-shrink: 0; margin-top: 3px; color: var(--ink-400); }
.bs-note { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(245,158,11,0.14); color: #92400E; font-size: 0.86rem; }
.bs-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.bs-price span { color: var(--text-muted); }
.bs-price b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.bs-price small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.bs-foot { list-style: none; margin: 0; display: grid; gap: 8px; }
.bs-foot li { display: flex; align-items: flex-start; gap: 8px; }
.bs-foot svg { flex-shrink: 0; margin-top: 2px; color: var(--ink-500); }
.bs-foot a { padding-block: 0; }

/* =====================================================================
   Inner pages — shared building blocks
   Same language as the home page: an ink strip on top, a paper "stub" underneath, one gold accent, live numbers.
   ===================================================================== */

/* Page hero with a visual card beside the headline */
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 1024px) { .ph-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; } }
.ph-visual { min-width: 0; width: 100%; max-width: 520px; }
@media (min-width: 1024px) { .ph-visual { justify-self: end; max-width: 480px; } }

/* Ink card */
.ic { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--card-shadow); }
.ic-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; background: var(--ink-950); color: var(--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ic-live { display: inline-flex; align-items: center; gap: 8px; color: var(--nova-gold-300); }
.ic-body { flex: 1; padding: 22px; }
.ic-foot { padding: 14px 22px; background: var(--paper-alt); border-top: 2px dashed var(--ink-200); font-size: 0.85rem; color: var(--text-muted); }
.ic-foot a:not(.btn) { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ic-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ic-stat { padding: 16px; background: var(--paper-alt); border-radius: var(--radius-md); }
.ic-stat b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.ic-stat span { display: block; margin-top: 8px; font-size: 0.8rem; line-height: 1.35; color: var(--text-muted); }

/* Filter chips (pills with an optional count) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--white); color: var(--text-body);
  font: 600 0.88rem/1.2 var(--font-body); transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.chip:hover { border-color: var(--ink-300); }
.chip .n { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--paper-alt); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.is-active { background: var(--ink-950); border-color: var(--ink-950); color: var(--white); }
.chip.is-active .n { background: rgba(255,255,255,0.16); color: var(--white); }
.chip.is-empty:not(.is-active) { color: var(--text-muted); }
.chip:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

/* Countdown pill ("in 2d 5h") — text is kept fresh by main.js */
.cd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--ink-950); color: var(--nova-gold-300); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Small "what this feels like" pictures used inside cards */
.pv-viz { padding: 18px 16px; border-radius: var(--radius-lg); background: var(--paper-alt); }

/* ---- About: practice loop + promise cards ---- */
.loop { max-width: 440px; margin-inline: auto; }
.loop svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.lp-track { fill: none; stroke: var(--ink-200); stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; }
.lp-progress { fill: none; stroke: var(--ink-900); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.js) .lp-progress { stroke-dashoffset: 0; }
.is-visible .lp-progress { animation: lp-draw 1.6s var(--ease-out) forwards; }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
.lp-arrow { fill: var(--ink-900); }
.lp-node circle { fill: var(--white); stroke: var(--ink-900); stroke-width: 3; }
.lp-node text { fill: var(--ink-900); font-size: 14px; font-weight: 700; }
.lp-centre { fill: var(--text-muted); font-size: 14px; font-weight: 600; }
.lp-dot { fill: var(--nova-gold-400); stroke: var(--ink-950); stroke-width: 2.5; }
@keyframes lp-glow { 0%, 24% { fill: var(--nova-gold-400); } 34%, 100% { fill: var(--white); } }
.lp-node circle { animation: lp-glow 7s linear infinite; }
.lp-n2 circle { animation-delay: 2.333s; }
.lp-n3 circle { animation-delay: 4.667s; }

.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .pv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv .ic-body { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; }
.pv h3 { font-size: 1.25rem; line-height: 1.25; margin: 0; }
.pv p { margin: 0; font-size: 0.95rem; }
.pv .pv-viz { margin-top: auto; }
.pv-loop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pv-loop span { padding: 7px 12px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--ink-200); font-size: 0.85rem; font-weight: 600; }
.pv-loop i { width: 8px; height: 8px; border-top: 2px solid var(--ink-400); border-right: 2px solid var(--ink-400); transform: rotate(45deg); }
@keyframes pv-hi { 0%, 28% { background: var(--ink-950); color: var(--white); border-color: var(--ink-950); } 34%, 100% { background: var(--white); color: var(--text-body); border-color: var(--ink-200); } }
.pv-loop span { animation: pv-hi 4.5s linear infinite; animation-delay: calc(var(--i) * 1.5s); }
.pv-seats { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 5px; }
.pv-seats span { width: 16px; height: 19px; border-radius: 6px 6px 3px 3px; background: var(--ink-900); }
.pv-seats span.is-ghost { background: none; border: 2px dashed var(--ink-300); }
@keyframes pv-pop { from { opacity: 0; transform: translateY(8px) scale(0.8); } }
.is-visible .pv-seats span:not(.is-ghost) { animation: pv-pop 0.4s var(--ease-out) backwards; animation-delay: calc(var(--i) * 90ms + 300ms); }
.pv-cap { align-self: stretch; position: relative; width: 0; margin: 0 6px; border-left: 2px dashed var(--nova-gold-500); }
.pv-cap em { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); padding: 2px 8px; border-radius: 6px; background: var(--ink-950); color: var(--white); font-style: normal; font-size: 0.75rem; font-weight: 700; }
.pv-cap-note { margin-top: 14px !important; text-align: center; font-size: 0.8rem !important; font-weight: 600; color: var(--text-muted); }
.pv-seats { padding-top: 24px; }
.pv-receipt { display: grid; gap: 10px; }
.pv-receipt p { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.pv-receipt i { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--ink-300); transform: translateY(3px); }
.pv-receipt b { font-weight: 700; }
.pv-receipt svg { color: #047857; flex-shrink: 0; }
@keyframes pv-line { from { opacity: 0; transform: translateX(-10px); } }
.is-visible .pv-receipt p { animation: pv-line 0.5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 260ms + 350ms); }
@media (prefers-reduced-motion: reduce) { .lp-node circle, .pv-loop span, .is-visible .pv-seats span, .is-visible .pv-receipt p, .is-visible .lp-progress { animation: none !important; } .lp-progress { stroke-dashoffset: 0; } }

/* ---- Classes: "Starting soon" card + filter panel ---- */
.ss-list { display: grid; }
.ss-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--ink-100); transition: background 0.2s; }
.ss-list .ss-row:first-child { border-top: 0; }
.ss-row:hover { background: var(--paper); }
.ss-main { min-width: 0; display: block; }
.ss-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text-body); }
.ss-main em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 0.82rem; color: var(--text-muted); }
.ss-seats { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-align: right; line-height: 1.1; }
.ss-seats small { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
@media (max-width: 519px) { .ss-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 18px; } .ss-row .cd-pill { grid-column: 1 / -1; justify-self: start; } }

.cf-search { position: relative; display: block; }
.cf-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; }
.cf-search input { width: 100%; height: 52px; padding: 0 20px 0 48px; border: 1.5px solid var(--border-color); border-radius: var(--radius-pill); background: var(--white); font-size: 1rem; color: var(--text-body); transition: border-color 0.2s, box-shadow 0.2s; }
.cf-search input:focus { outline: none; border-color: var(--ink-800); box-shadow: 0 0 0 4px rgba(20,23,42,0.1); }
.cf-label { flex: 0 0 64px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 519px) { .cf-label { flex-basis: 100%; } }
.cf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--paper-alt); color: var(--text-body); font-size: 0.85rem; font-weight: 600; transition: background 0.2s; }
.cf-tag:hover { background: var(--ink-100); }
.cf-clear { font-size: 0.85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: var(--text-muted); padding: 8px 4px; }

/* ---- Subject links (directory, subject and search pages) ---- */
.subject-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.subject-tile { display: inline-flex; align-items: baseline; gap: 9px; padding: 12px 18px; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 0.85rem; transition: border-color 0.2s, background 0.2s; }
.subject-tile:hover { border-color: var(--ink-800); background: var(--paper-alt); }
.subject-tile b { font-size: 1rem; font-weight: 600; color: var(--ink-900); }
.subject-tile svg { display: none; }

/* ---- Site search ("What would you like to learn?") with type-ahead suggestions ---- */
.site-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 560px; padding: 6px; background: var(--white); border: 1.5px solid var(--border-color); border-radius: var(--radius-pill); box-shadow: var(--card-shadow); transition: border-color 0.2s, box-shadow 0.2s; }
.site-search:focus-within { border-color: var(--ink-800); box-shadow: 0 0 0 4px rgba(20,23,42,0.1), var(--card-shadow); }
.ss-field { position: relative; display: block; flex: 1; min-width: 0; }
.ss-field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; }
.ss-field input { width: 100%; height: 48px; padding: 0 12px 0 46px; border: 0; background: transparent; font-size: 1rem; color: var(--text-body); }
.ss-field input:focus { outline: none; }
.ss-btn { flex-shrink: 0; height: 48px; }
/* NB: `.ss-list` is ALSO the plain list inside the class page's "More from…" card (class.php), so the floating dropdown rules MUST stay
   scoped to .site-search — unscoped they pulled that list out of the page flow and the next section covered it */
.site-search .ss-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 10px); max-height: 420px; overflow-y: auto; padding: 8px; text-align: left; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--card-shadow-hover); }
.site-search .ss-list[hidden] { display: none; }
.ss-group { padding: 10px 12px 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ss-item { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-body); }
.ss-item b { font-size: 0.95rem; font-weight: 600; color: var(--ink-900); }
.ss-item span { font-size: 0.8rem; color: var(--text-muted); }
.ss-item:hover, .ss-item.is-active { background: var(--paper-alt); }
.ss-all { flex-direction: row; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.ss-btn svg { display: none; }
@media (max-width: 520px) {
  .ss-btn { width: 48px; padding: 0; justify-content: center; }
  .ss-btn svg { display: block; }
  .ss-btn-text { display: none; }
  .ss-field input { padding-left: 42px; font-size: 0.95rem; }
}
.popular-subjects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 0; }
.popular-subjects > span { margin-right: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.popular-subjects a { padding: 5px 13px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--white); font-size: 0.85rem; font-weight: 600; color: var(--text-body); transition: border-color 0.2s, background 0.2s; }
.popular-subjects a:hover { border-color: var(--ink-400); background: var(--paper-alt); }
@media (max-width: 519px) {   /* a single line you can swipe, not two rows of chips pushing the buttons down */
  .popular-subjects { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scrollbar-width: none; }
  .popular-subjects::-webkit-scrollbar { display: none; }
  .popular-subjects > span, .popular-subjects a { flex-shrink: 0; white-space: nowrap; }
}
.hero-search { margin-bottom: 26px; }
[data-class-app].is-loading [data-class-results] { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; }
[data-tutor-app].is-loading [data-tutor-results] { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; }
[data-class-results] { transition: opacity 0.25s; }

.ic-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ic-stats-3 .ic-stat { padding: 14px 12px; }
.ic-stats-3 .ic-stat b { font-size: 1.7rem; }
.pc-item[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .fx svg * { animation: none !important; } }

/* ---- Resources & Blog (blog.php): the list, the latest article, the practice panel ---- */
.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; } .blog-aside { position: sticky; top: 100px; } }
.blog-main { min-width: 0; }
.blog-main :is(h2, h3, p), .blog-card :is(h3, p) { overflow-wrap: anywhere; }   /* a title with one very long word (a URL, a compound) wraps inside the column instead of pushing the page wider */
.blog-search { margin-bottom: 28px; }
[data-blog-app].is-loading [data-blog-results] { opacity: 0.45; transition: opacity 0.2s; }
.empty-state[hidden] { display: none; }

/* the latest article: the site's ink-card look (title bar, body, paper foot), a big serif headline, one link over the whole card */
.bf { position: relative; transition: transform var(--transition), box-shadow var(--transition); }
.bf:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.bf .ic-bar time { font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); }
.bf-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .bf.has-image .bf-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.bf-media { min-height: 200px; overflow: hidden; background: var(--paper-alt); }
.bf-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bf-body { display: grid; gap: 14px; align-content: center; padding: 30px 30px 26px; }
.bf h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; }
.bf-excerpt { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--ink-600); }
.bf-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bf-link:focus-visible { outline: none; }
.bf-link:focus-visible::after { outline: 3px solid var(--ink-900); outline-offset: 3px; border-radius: var(--radius-xl); }
.bf-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 16px 30px; }
.bf-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-900); }
.bf-go svg { transition: transform 0.2s var(--ease-out); }
.bf:hover .bf-go svg { transform: translateX(4px); }
@media (max-width: 560px) { .bf-body { padding: 24px 20px 20px; } .bf-foot { padding: 14px 20px; } }

/* the rest as a plain list: hairlines, a typographic hierarchy, a thumbnail only when there is a cover image */
.bl-head { margin: 44px 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-body); }
.bl { border-top: 1px solid var(--ink-100); }
.bl.is-first { border-top: 0; }
.br { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 22px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--ink-100); }
.br.has-thumb { grid-template-columns: minmax(0, 1fr) 168px auto; }
.br::before { content: ""; position: absolute; inset: 6px -16px; z-index: -1; border-radius: var(--radius-lg); background: transparent; transition: background 0.2s; }   /* the hover shape sits behind the text, rounded, wider than the hairlines */
.br:hover::before { background: var(--paper-alt); }
.br:hover, .br:hover + .br { border-bottom-color: transparent; }
.br-meta { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-muted); }
.br h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; letter-spacing: -0.005em; }
.br-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.br-link:focus-visible { outline: none; }
.br-link:focus-visible::after { outline: 2px solid var(--ink-900); outline-offset: 4px; border-radius: var(--radius-lg); }
.br:hover .br-link { text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 4px; }
.br-excerpt { margin: 0; max-width: 62ch; color: var(--ink-600); line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.br-by { margin: 8px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.br-thumb { width: 168px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--paper-alt); }
.br-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-go { color: var(--ink-300); transition: transform 0.2s var(--ease-out), color 0.2s; }
.br:hover .br-go { transform: translateX(4px); color: var(--ink-900); }
@media (max-width: 640px) {
  .br, .br.has-thumb { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .br::before { inset: 4px -12px; }
  .br-thumb { order: -1; width: 100%; max-width: 360px; }
  .br-go { display: none; }
}

/* The single article's own cover photo, above the prose (see post.php) — an article without one simply has no image. */
.post-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); margin-bottom: 32px; display: block; }

/* ---- Article page ---- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; } }
.post-main { min-width: 0; max-width: 780px; }
.post-aside { display: grid; gap: 20px; }
@media (min-width: 1024px) { .post-aside { position: sticky; top: 100px; } }
.post-main .prose h2, .post-main .prose h3 { scroll-margin-top: 100px; }
.toc[hidden] { display: none; }
.prose.is-full { max-width: none; }
/* a phone has no sidebar: the same "On this page" list sits folded above the text, so a 7-screen policy or article is navigable from the top */
.toc-m { margin: 0 0 22px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--white); }
.toc-m[hidden] { display: none; }
.toc-m > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.95rem; }
.toc-m > summary::-webkit-details-marker { display: none; }
.toc-m > summary svg { transition: transform 0.2s; color: var(--ink-400); }
.toc-m[open] > summary svg { transform: rotate(180deg); }
.toc-m > summary:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; border-radius: var(--radius-md); }
.toc-m .toc-nav { border-top: 1px solid var(--border-color); }
@media (min-width: 1024px) { .toc-m { display: none; } }
/* …and below 1024px the sidebar stacks UNDER the text, so its own "On this page" card would be a second, useless copy of that list */
@media (max-width: 1023px) { .post-aside .toc { display: none; } }
.toc-nav ol { list-style: none; margin: 0; padding: 12px 10px; display: grid; gap: 2px; }
.toc-nav a { display: block; padding: 9px 12px; border-radius: 8px; border-left: 3px solid transparent; font-size: 0.9rem; line-height: 1.35; color: var(--text-muted); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.toc-nav li.is-sub a { padding-left: 24px; font-size: 0.85rem; }
.toc-nav a:hover { background: var(--paper-alt); color: var(--text-body); }
.toc-nav a.is-active { background: var(--paper-alt); border-left-color: var(--nova-gold-500); color: var(--ink-950); font-weight: 600; }
.post-share .ic-body { display: grid; gap: 10px; padding: 18px; }

/* ---------------------------------------------------------------------
   Share — the "Share" button + menu and the inline row (includes/share.php, assets/js/share.js)
   A <details> disclosure, so it opens without JavaScript; neutral ink/paper like every other control (the networks' own colours are
   never used — one design); every target is 44px+ tall; the menu never leaves the screen (share.js flips it).
   --------------------------------------------------------------------- */
.share { position: relative; display: inline-block; }
.share > summary { list-style: none; }
.share > summary::-webkit-details-marker { display: none; }
.share-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink-200); border-radius: 50%; background: var(--white); color: var(--ink-900); line-height: 1; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s, background 0.2s; }   /* icon only: the word is a screen-reader label + tooltip */
.share-btn:hover { border-color: var(--ink-800); }
.share-btn:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.share[open] > .share-btn { border-color: var(--ink-900); background: var(--paper-alt); }
.share-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.share-panel { position: absolute; z-index: 70; top: calc(100% + 10px); left: 0; width: min(360px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--ink-100); border-radius: var(--radius-xl); background: var(--white); color: var(--text-body); box-shadow: var(--card-shadow-hover); text-align: left; }
.share[open] { z-index: 80; }   /* old browsers (no top layer): the open menu's own box above its neighbours */
.share-panel[popover] { inset: auto; top: 0; left: 0; margin: 0; max-width: none; overflow: visible; }   /* in the top layer share.js sets top/left (document coordinates): above every other box, never clipped */
.share-panel.is-right { left: auto; right: 0; }
.share-panel .share-title { max-width: none; margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }   /* specific enough to win over '.page-hero p' */
.share-copy { display: flex; gap: 8px; margin: 0 0 14px; }
.share-url { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--paper); color: var(--ink-700); font: inherit; font-size: 0.88rem; text-overflow: ellipsis; }
.share-url:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 1px; }
.share-copy-btn { flex-shrink: 0; min-height: 44px; padding: 0 18px; }
.share-copy-btn[hidden], .share-opt[hidden], .share-chip[hidden] { display: none; }
.share-copy-btn.is-copied { background: #047857; border-color: #047857; color: #fff; }
.share-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.share-list > li:has(> [hidden]) { display: none; }   /* the "More options" cell exists only where the browser has a share sheet */
.share-list > li:last-child { grid-column: 1 / -1; }   /* …and then it takes the whole row (its label stays on one line) */
.share-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px 6px 6px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-900); font: inherit; font-size: 0.95rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.2s; }
.share-opt:hover { background: var(--paper-alt); }
.share-opt:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -2px; }
.share-ic { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--paper-alt); color: var(--ink-900); transition: background 0.2s, color 0.2s; }
.share-opt:hover .share-ic, .share-chip:hover .share-ic { background: var(--ink-900); color: var(--white); }
.share-ic svg { width: 18px; height: 18px; }
.share-lbl { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .share[open] > .share-panel { animation: share-in 0.18s var(--ease-out); }
}
@keyframes share-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 340px) { .share-list { grid-template-columns: minmax(0, 1fr); } }

/* the inline row: no button, the same actions as chips (the article rail, the thank-you page, the tutor portal) */
.share-inline { display: block; }
.share .share-inline-title { max-width: none; margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; color: var(--ink-900); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row > span { display: contents; }
.share-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); background: var(--white); color: var(--ink-900); font: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.share-chip:hover { border-color: var(--ink-800); background: var(--paper-alt); }
.share-chip:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.share-chip svg { width: 18px; height: 18px; flex-shrink: 0; }
.share-chip.is-copied { border-color: #047857; color: #047857; }
.share-chip .share-ic { width: auto; height: auto; background: none; }
.share-chip:hover .share-ic { background: none; color: inherit; }
.share-sm .share-btn { width: 38px; height: 38px; }   /* beside .btn-sm buttons (the tutor's class page) */
.share-sm .share-btn svg { width: 17px; height: 17px; }
@media print { .share { display: none; } }

/* where it sits: the title row of the tutor profile and of the class page ([share][save], both round icons), the article byline, the thank-you page */
.title-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.title-actions .share-btn, .title-actions .tp-save-btn.save-btn { margin: 0; }
.cls-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cls-top .badge-row { position: static; margin: 0; min-width: 0; }
.cls-top .title-actions { margin-left: auto; }   /* stays at the right edge even when a long badge pushes it to a line of its own */
/* the header blocks stack above the sticky booking card beside them (and the profile's entrance animations, which make every block its own layer) —
   the menu itself lives in the top layer, this is the fallback for browsers without one */
.tp-head, .cls-head { position: relative; z-index: 6; }
.tp-title { position: relative; z-index: 6; }
.page-hero.is-article { overflow: visible; z-index: 2; }   /* the Share menu opens below the byline: the hero must not clip it */
/* …and since the hero no longer clips, a very long (or unbreakable) title / author / crumb must wrap instead of widening the page */
.page-hero.is-article h1, .page-hero.is-article .post-byline p, .page-hero.is-article .breadcrumbs span { min-width: 0; overflow-wrap: anywhere; }
.page-hero.is-article .breadcrumbs { flex-wrap: wrap; }
.share-inline.is-grid .share-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }   /* in a narrow card: two equal columns instead of ragged wrapping */
.share-inline.is-grid .share-chip { width: 100%; justify-content: flex-start; padding-right: 10px; }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.post-byline p { margin: 0; }
.ty-share { margin: 0 0 26px; padding: 18px; border-radius: var(--radius-lg); background: var(--paper-alt); border: 1px dashed var(--ink-200); }
.ty-share .share-inline-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.post-cta { margin-top: 48px; }
.post-cta-by::before { content: "\00b7"; margin-right: 8px; }
/* beside the article list the card is narrow: one line for the title bar (the class itself says "next live class"), the details stacked, full-width buttons */
.post-cta.is-aside { margin-top: 0; }
.post-cta.is-aside .ic-bar .ic-live { display: none; }
.post-cta.is-aside .post-cta-meta { display: grid; justify-items: start; gap: 8px; }
.post-cta.is-aside .post-cta-by::before { content: none; }
.post-cta.is-aside .post-cta-actions { display: grid; gap: 10px; }
.post-cta.is-aside .post-cta-actions .btn { width: 100%; justify-content: center; }
.post-cta .ic-body { display: grid; gap: 12px; padding: 24px; }
.post-cta h3 { margin: 0; font-size: 1.35rem; }
.post-cta-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.92rem; color: var(--text-muted); }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn[hidden], .chip[hidden] { display: none; }

/* ---- FAQ ---- */
.faq-tools { display: grid; gap: 14px; }
.faq-status { margin: 0; min-height: 1.4em; font-size: 0.85rem; color: var(--text-muted); }
.faq-bar { max-width: 760px; margin-top: 22px; }
.faq-bar .faq-status { margin-top: 2px; }
.lh-sub a { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.empty-lead { max-width: 420px; margin-inline: auto; }
.empty-cta { margin-top: 20px; }
.accordion-panel .inner p { margin: 0; }
.ab-split { align-items: center; gap: 56px; }
@media (max-width: 899px) { .ab-split { gap: 32px; } }
.ab-h2 { margin-bottom: 20px; }
.ab-p { margin-bottom: 16px; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; } .faq-nav { position: sticky; top: 100px; } .faq-nav .chips { flex-direction: column; align-items: stretch; } .faq-nav .chip { justify-content: space-between; border-radius: var(--radius-lg); } }
@media (max-width: 1023px) { .faq-nav .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .faq-nav .chips::-webkit-scrollbar { display: none; } .faq-nav .chip { flex-shrink: 0; } }
.faq-list { max-width: 820px; min-width: 0; }
.faq-group { margin-bottom: 40px; }
.faq-group[hidden], .accordion-item[hidden] { display: none; }
.faq-group h2 { font-size: 1.5rem; margin-bottom: 16px; }
mark { background: var(--nova-gold-300); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---- Contact ---- */
.ct-card { display: grid; gap: 12px; }
.ct-status { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.25; color: var(--text-body); }
.ct-sub { margin: 0; font-size: 0.9rem; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ic-bar .is-closed { color: rgba(255,255,255,0.7); }
.ic-bar .is-closed .pulse-dot { background: var(--ink-300); animation: none; box-shadow: none; }
.ct-topics { display: grid; gap: 10px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px dashed var(--ink-200); }
.ct-topics .cf-label { flex: none; }
.ct-side { display: grid; gap: 24px; align-content: start; }
.qa-body { padding: 6px 18px 12px; }
.qa-body .accordion-item { margin: 10px 0 0; }
.qa-groups { display: grid; gap: 14px; padding: 16px 4px 8px; }
.qa-groups p { margin: 0; font-size: 0.92rem; }
.qa-body [hidden] { display: none; }
.ct-reach .ct-card { padding-bottom: 6px; }
.ct-reach .ct-find-list { border-top: 1px dashed var(--ink-200); margin-top: 8px; }
.ct-find-list { list-style: none; margin: 0; padding: 20px 22px; display: grid; gap: 16px; }
.ct-find-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 0.95rem; }
.ct-find-list svg { flex-shrink: 0; margin-top: 2px; color: var(--ink-400); }
.ct-find-list a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ct-find-list small { font-size: 0.82rem; color: var(--text-muted); }
/* Become a tutor (become-a-tutor.php): the numbered steps and the short "once you are approved" list in its side cards */
.ta-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: ta; }
.ta-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; counter-increment: ta; }
.ta-steps li::before { content: counter(ta); grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-900); color: var(--white); font-weight: 700; font-size: 0.9rem; }
.ta-steps b { font-family: var(--font-display); font-weight: 600; color: var(--text-body); align-self: end; }
.ta-steps span { font-size: 0.92rem; color: var(--text-muted); }
.ta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ta-list li { position: relative; padding-left: 22px; font-size: 0.95rem; }
.ta-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-900); }

/* Photo upload with a square crop (includes/partials/photo-upload.php, assets/js/photo-upload.js). The preview has the SAME corners as the
   tutor cards and profile it will appear on; with scripts off only the plain file input and the guidelines show. */
.ta-edit { max-width: 760px; margin-inline: auto; }
.ta-ask-box { margin: 0 0 26px; padding: 18px 20px; border-radius: var(--radius-lg, 16px); background: var(--paper, #f6f5f1); border: 1px solid var(--ink-100); }
.ta-ask-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; color: var(--text-body); }
.ta-ask p { margin: 0 0 10px; font-size: 0.97rem; line-height: 1.6; }
.ta-ask p:last-child { margin: 0; }
.pu { margin-bottom: 22px; }
.pu-row { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 560px) { .pu-row { grid-template-columns: 200px minmax(0, 1fr); gap: 26px; } }
.pu-frame { position: relative; width: min(200px, 100%); aspect-ratio: 1 / 1; }
.pu-current, .pu-stage { position: absolute; inset: 0; border-radius: var(--tc-radius, 18px); overflow: hidden; background: var(--paper-alt); }
.pu-current { display: grid; place-items: center; border: 1.5px dashed var(--ink-200); }
.pu-current img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pu-empty { display: grid; justify-items: center; gap: 6px; color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 12px; }
.pu-empty svg { color: var(--ink-300); width: 36px; height: 36px; }
.pu-stage { cursor: grab; touch-action: none; box-shadow: var(--card-shadow); }
.pu-stage.is-dragging { cursor: grabbing; }
.pu-stage:focus-visible { outline: 3px solid var(--ink-900); outline-offset: 3px; }
.pu-stage canvas { display: block; width: 100%; height: 100%; }
/* the component's own display rules must not beat the hidden attribute (the placeholder would sit on top of the cropper, the button would show without scripts) */
.pu [hidden] { display: none !important; }
.pu-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pu-zoom { display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600; color: var(--text-body); }
.pu-zoom input { width: 140px; accent-color: var(--ink-900); }
.pu.is-enhanced .pu-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }   /* still there for the form, the keyboard and a screen reader; the button replaces it */
.pu-status { margin: 12px 0 0; }
.pu-status.is-error { color: var(--color-danger); font-weight: 600; }
.pu-tips { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.88rem; color: var(--text-muted); }
.pu-tips li { position: relative; padding-left: 20px; }
.pu-tips li::before { content: ""; position: absolute; left: 3px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); }

/* ---- Class page: booking ticket ---- */
.bk-body { display: grid; gap: 14px; padding: 22px; }
.bk-price { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1; }
.bk-price small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.bk-note { margin: -6px 0 0; font-size: 0.88rem; }
.bk-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bk-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; }
.bk-facts svg { flex-shrink: 0; margin-top: 3px; color: var(--ink-400); }
.bk-past { display: block; margin-top: 4px; font-style: normal; font-size: 0.82rem; color: var(--gold-deep); }
.bk-past a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.bk .tk-seatmap { margin-top: 22px; }
.bk-seats .tk-seatline { margin-top: 10px; }
.bk-foot { display: grid; gap: 6px; padding: 18px 22px 20px; }
.bk-foot .btn { margin: 0 !important; }
.mm .ss-row .cd-pill { min-width: 3.2em; justify-content: center; }

/* ---- Refund policy: "when are you cancelling?" ---- */
.rw { margin: 28px 0 32px; }
.rw .ic-body { display: grid; gap: 18px; padding: 22px; }
.rw-track { position: relative; display: flex; height: 16px; border-radius: var(--radius-pill); overflow: hidden; }
.rw-track span { display: block; height: 100%; }
.rw-s1 { flex: 7; background: var(--ink-900); }
.rw-s2 { flex: 4; background: var(--nova-gold-400); }
.rw-s3 { flex: 3; background: var(--ink-200); }
.rw-flag { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; letter-spacing: 0.04em; font-weight: 700; color: var(--ink-700); }
.rw-track span { opacity: 0.28; transition: opacity 0.3s; }
.rw[data-tone="1"] .rw-s1, .rw[data-tone="2"] .rw-s2, .rw[data-tone="3"] .rw-s3 { opacity: 1; }
.rw-result { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--paper-alt); border-left: 5px solid var(--ink-900); transition: border-color 0.3s; }
.rw-result[data-tone="2"] { border-left-color: var(--nova-gold-500); }
.rw-result[data-tone="3"] { border-left-color: var(--ink-300); }
.rw-result[data-tone="4"] { border-left-color: var(--ink-600); }
.rw-result strong { display: block; font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 4px; color: var(--text-body); }
.rw-result p { margin: 0; font-size: 0.95rem; }

.err-card { max-width: 560px; margin: 0 auto 72px; text-align: left; }

/* small fixes from the inner-page audit */
.ic-foot a:not(.btn), .ct-find-list a { display: inline-block; padding-block: 8px; }    /* inline links get a comfortable tap height */
html:not(.js) :is(.ct-topics, .faq-nav, .faq-suggest, .faq-tools .cf-search) { display: none; }   /* controls that need JavaScript */

/* ---- Newsletter preferences ---- */
.np-form { display: grid; gap: 22px; padding: 26px; }
.np-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.np-group legend { padding: 0; margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-body); }
.np-check { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--border-color); border-radius: var(--radius-lg); background: var(--white); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.np-check:hover { border-color: var(--ink-300); }
.np-check:has(input:checked) { border-color: var(--ink-900); background: var(--paper); }
.np-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink-900); flex-shrink: 0; }
.np-check b { display: block; font-size: 0.98rem; }
.np-check small { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--text-muted); }
.np-unsub { padding: 8px 4px; background: none; border: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: var(--ink-900); cursor: pointer; }

/* Tutor-scheduled classes: the 1:1 session card (registration page) and the price line in the booking ticket */
.rf-formats { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; min-width: 0; }
.rf-legend { margin: 0 0 -2px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text-body); }
.rf-format { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--ink-900); border-radius: var(--radius-md); background: var(--paper); }
.rf-body { flex: 1; min-width: 0; }
.rf-body b { display: block; font-size: 0.98rem; }
.rf-body small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
.rf-price { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.rf-price small { display: block; font-family: var(--font-body, inherit); font-weight: 500; font-size: 0.75rem; color: var(--text-muted); text-align: right; }
/* Instant slot picker (class-register.php) — same widget the tutor's own dashboard uses to suggest times, shown
   directly to the student instead: pick an open time and book it right away, no proposal or waiting. */
.book-slots { margin-top: 4px; }
.slot-days { display: grid; gap: 14px; }
.slot-day-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chip { padding: 7px 12px; min-height: 36px; border: 1.5px solid var(--border-color); border-radius: 999px; background: var(--card-bg); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.slot-chip:hover { border-color: var(--ink-300); }
.slot-chip.is-picked { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.slot-chip small { display: block; font-weight: 500; font-size: 0.75rem; opacity: 0.8; }
.bk-formats { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 0; }
.bk-formats li { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--border-color); }
.bk-formats li:last-child { border-bottom: 0; }
.bk-format-name b { display: block; font-size: 0.98rem; }
.bk-format-name small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
.bk-format-price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; white-space: nowrap; text-align: right; }
.bk-format-price small { display: block; font-family: var(--font-body, inherit); font-weight: 500; font-size: 0.72rem; color: var(--text-muted); }

/* Offers with a deadline (My Account) */
.fmt-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--bg-alt, #F3F0E8); color: var(--text-body); font-family: var(--font-body, inherit); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; }
.deadline-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(245, 158, 11, 0.14); color: #92400E; font-size: 0.88rem; line-height: 1.45; }
.deadline-note svg { flex: none; margin-top: 3px; }
.deadline-note.is-urgent { background: rgba(239, 68, 68, 0.12); color: #991B1B; }
.row-deadline { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: #92400E; }
.row-refund-note { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: #047857; }
.row-refund-note.is-pending { color: #92400E; }
.radio-card.is-gone { opacity: 0.55; }
.radio-card.is-gone label { text-decoration: line-through; cursor: not-allowed; }
.gone-note { font-style: normal; font-size: 0.78rem; color: var(--color-danger, #B91C1C); text-decoration: none; display: inline-block; margin-left: 6px; }
.status-pill.status-expired { background: rgba(107, 112, 134, 0.16); color: #4B4F63; }

/* =========================================================================
   Marketplace UI — tutor cards, listing pages, filters
   Superprof's pattern (a photo-led, borderless card; one quiet row of pill filters; almost no chrome) built from
   NovaMentra's own tokens: paper + ink, gold for stars, Fraunces for the tutor's name and the headings, Inter for
   everything you read. The photo is the card — no box, no shadow — so a wall of tutors reads like a wall of people.
   ========================================================================= */
:root { --tc-radius: 22px; }

/* ---- the tutor card ---- */
.tcard { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tcard-media { position: relative; }
.tcard-photo { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--tc-radius); background: var(--paper-alt); isolation: isolate; }
.tcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 0.6s var(--ease-out); }
.tcard:hover .tcard-photo img, .tcard-photo:focus-visible img { transform: scale(1.04); }
/* the scrim that keeps white text readable on any photo, light or busy */
.tcard-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8,10,20,0.70) 0%, rgba(8,10,20,0.34) 26%, rgba(8,10,20,0) 54%); }
.tcard-photo:focus-visible { outline: 3px solid var(--ink-900); outline-offset: 3px; }
.tcard-name { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; display: block; color: var(--white); }
.tcard-name h3 { margin: 0 0 3px; color: var(--white); font-size: 1.5rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 14px rgba(0,0,0,0.28); }
.tcard-role { display: block; font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* no photo yet: a deliberate gradient + a glass monogram, not an empty box */
.tcard-photo.is-placeholder { background: var(--ph, #334155); background: radial-gradient(120% 95% at 15% 10%, color-mix(in srgb, var(--ph) 66%, #fff) 0%, var(--ph) 58%, color-mix(in srgb, var(--ph) 58%, #000) 100%); }
.tcard-monogram { position: absolute; inset: 0 0 24% 0; display: grid; place-items: center; }
.tcard-monogram > span { display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.32), 0 16px 44px -14px rgba(0,0,0,0.4); color: var(--white); font-family: var(--font-display); font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: 0.02em; }
/* the heart: bare white icon on the photo, filled rose once saved */
.tcard-save { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.tcard .tcard-heart.save-btn { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; color: var(--white); }
.tcard .tcard-heart.save-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45)); transition: transform 0.2s var(--ease-out); }
.tcard .tcard-heart.save-btn:hover { color: var(--white); transform: none; }
.tcard .tcard-heart.save-btn:hover svg { transform: scale(1.14); }
.tcard .tcard-heart.save-btn.is-saved { color: #FB7185; }
.tcard .tcard-heart.save-btn.is-saved svg { fill: currentColor; }
.tcard .tcard-heart.save-btn:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.tcard-body { display: flex; flex-direction: column; gap: 7px; padding-inline: 2px; }
.tcard-rate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 28px; }
.tcard-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; }
.tcard-stars svg { width: 17px; height: 17px; color: var(--nova-gold-400); fill: currentColor; }
.tcard-stars b { font-weight: 700; color: var(--ink-900); }
.tcard-stars span { color: var(--text-muted); }
.tcard-new, .tcard-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.tcard-new { background: rgba(59,130,246,0.12); color: #1D4ED8; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; font-weight: 700; }
.tcard-pills { display: inline-flex; flex-wrap: nowrap; gap: 5px; max-width: 100%; }   /* Super Tutor + Professional always sit on ONE row, side by side */
.tcard-pill svg { width: 13px; height: 13px; flex: none; }
.tcard-pills .tcard-pill { height: 24px; padding: 0 9px; gap: 4px; font-size: 0.75rem; }   /* compact on cards so both fit even in the narrowest column (~235px); the profile's own badge row keeps the larger size */
.tcard-pills .tcard-pill svg { width: 12px; height: 12px; }
.tcard-pill.is-super { background: #FEF3C7; color: #92400E; }
.tcard-pill.is-pro { background: var(--ink-100); color: var(--ink-800); }
.tcard-desc { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-600); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.tcard-avail { margin: 0; font-size: 0.95rem; }
.tcard-open { font-weight: 600; color: #047857; }
.tcard-none { color: var(--text-muted); }

/* ---- the grid: three across like Superprof, generous space between people ---- */
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px 28px; }
@media (min-width: 640px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tgrid > .reveal { min-width: 0; }
/* The team on the home and About pages — a plain grid, never a sideways carousel: four across, at most three rows (12 tutors).
   Fewer columns show fewer cards so it is still three rows at most (3 across → 9, 2 → 6, 1 → 3); "Meet the Full Team" follows.
   With fewer than four tutors (.is-few) the single short row is centred instead of leaving the right half empty. */
.tgrid-team { --tg-cols: 4; --tg-gap: 24px; grid-template-columns: repeat(var(--tg-cols), minmax(0, 1fr)); gap: 40px var(--tg-gap); }
.tgrid-team > :nth-child(n+13) { display: none; }
.tgrid-team.is-compact > :nth-child(n+9) { display: none; }   /* the home page: two rows at most (8 / 6 / 4 / 2) — the directory has everyone */
.tgrid-team.is-few { display: flex; flex-wrap: wrap; justify-content: center; }
.tgrid-team.is-few > * { flex: 0 1 calc((100% - (var(--tg-cols) - 1) * var(--tg-gap)) / var(--tg-cols)); }
@media (max-width: 1099px) { .tgrid-team { --tg-cols: 3; } .tgrid-team > :nth-child(n+10) { display: none; } .tgrid-team.is-compact > :nth-child(n+7) { display: none; } }
@media (max-width: 799px) { .tgrid-team { --tg-cols: 2; --tg-gap: 20px; row-gap: 32px; } .tgrid-team > :nth-child(n+7) { display: none; } .tgrid-team.is-compact > :nth-child(n+5) { display: none; } }
@media (max-width: 559px) { .tgrid-team { --tg-cols: 1; } .tgrid-team > :nth-child(n+4) { display: none; } .tgrid-team.is-compact > :nth-child(n+3) { display: none; } .tgrid-team .tcard-photo { aspect-ratio: 4 / 3; } }
@media (max-width: 640px) { .tcard-name h3 { font-size: 1.35rem; } .tcard-name { left: 16px; right: 16px; bottom: 15px; } }

/* Home — "Upcoming classes you can join" (.home-cgrid — NOT .cgrid: that is the Browse Classes / search / subject-page results grid, which must show every card): the class cards as a plain grid, TWO rows at most — three across (6 cards), two across (4) or one
   across (2) — never a carousel: every card shown is on screen and the section header links to the rest. Three across, not four like the
   mentors below it: a class card carries a kicker line, a title, a tutor, two lines of text, the time and the price, and at four across its
   titles were cut to "Coding Interview Cra…" and the kicker wrapped; three across gives it the width it has on Browse Classes. The
   "Featured" flag straddles a card's top edge (-11px), so the row gap is wide enough to hold it. */
.home-cgrid { --cg-cols: 3; display: grid; grid-template-columns: repeat(var(--cg-cols), minmax(0, 1fr)); gap: 36px 28px; }
.home-cgrid > * { min-width: 0; }
.home-cgrid > :nth-child(n+7) { display: none; }
@media (max-width: 999px) { .home-cgrid { --cg-cols: 2; gap: 32px 24px; } .home-cgrid > :nth-child(n+5) { display: none; } }
@media (max-width: 599px) { .home-cgrid { --cg-cols: 1; } .home-cgrid > :nth-child(n+3) { display: none; } }

/* Home — "From the blog": the latest articles as a plain grid that FILLS the row (3 → three across, 2 → two wider cards, 1 → one), not a
   carousel: two narrow cards stuck to the left of a three-across row left a third of the section empty. A phone shows two, stacked. */
.bgrid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.bgrid > * { display: flex; min-width: 0; }
.bgrid > * > .blog-card { height: 100%; }
.bgrid.is-1 { max-width: 620px; }
@media (min-width: 600px) { .bgrid.is-2, .bgrid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 999px) { .bgrid.is-3 > :nth-child(3) { display: none; } }
@media (min-width: 1000px) { .bgrid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- the search pill: a quiet field with one round button, like the one in Superprof's header ---- */
.site-search { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 720px; height: 60px; padding: 6px 6px 6px 24px; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-pill); box-shadow: 0 1px 2px rgba(20,23,42,0.04), 0 10px 28px -14px rgba(20,23,42,0.16); transition: border-color 0.2s, box-shadow 0.2s; }
.site-search:focus-within { border-color: var(--ink-800); box-shadow: 0 0 0 4px rgba(20,23,42,0.08), 0 10px 28px -14px rgba(20,23,42,0.2); }
.site-search.is-hero { max-width: 560px; }
.ss-field { display: block; flex: 1; min-width: 0; }
.ss-field input { width: 100%; height: 48px; padding: 0; border: 0; background: transparent; font-size: 1.02rem; color: var(--text-body); }
.ss-field input:focus { outline: none; }
.ss-field input::placeholder { color: var(--ink-500); }
.site-search .ss-btn { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.site-search .ss-btn svg { display: block; width: 20px; height: 20px; }
.site-search .ss-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- listing pages: breadcrumb, big title, one line of fact, then the grid ---- */
.page-hero.is-listing { padding-top: 124px; padding-bottom: 6px; border-bottom: 0; }
.lh-title { margin: 0 0 14px; font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; }
.lh-sub { margin: 0 0 4px; font-size: 1.05rem; color: var(--text-muted); }
.page-hero.is-listing + .section-pad { padding-top: 22px; }
.lh-sub b { color: var(--ink-900); font-weight: 600; }
.listing-body { padding-top: 8px; }

/* ---- search results: a plain heading per kind of result, "see all" on the right ---- */
.lh-search { margin: 22px 0 0; }
.lh-search .site-search { max-width: 720px; }
.page-hero.is-listing .popular-subjects { margin-top: 16px; }
.lr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.lr-head h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.lr-head h2 span { margin-left: 6px; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.lr-head a, .text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 600; color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-300); transition: text-decoration-color 0.2s; }
.lr-head a:hover, .text-link:hover { text-decoration-color: var(--ink-900); }
.instructor-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.sr-block + .sr-block { margin-top: 64px; }
/* secondary section heads on listing pages are quieter than a marketing section's */
.section-head.is-quiet { margin-bottom: 22px; }
.section-head.is-quiet h2 { margin-bottom: 8px; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.section-head.is-quiet p { font-size: 1rem; color: var(--text-muted); }

/* ---- subject page facts: a hairline strip of three figures, not three grey boxes ---- */
.fact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; margin: 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.fact-strip.is-single { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.fact-strip > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 22px 12px 22px 0; }
.fact-strip > div + div { padding-left: 28px; border-left: 1px solid var(--ink-100); }
.fact-strip dt { font-size: 0.88rem; color: var(--text-muted); }
.fact-strip dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; line-height: 1; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fact-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fact-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); background: var(--white); font-size: 0.9rem; font-weight: 600; color: var(--ink-900); }
.fact-pill b { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .fact-strip > div { padding: 18px 8px 18px 0; } .fact-strip > div + div { padding-left: 16px; } }

/* the tutor portal's live preview shows one card at the width it has in the grid, not stretched across the column */
.card-preview .tcard { max-width: 340px; }

/* ---- one row of pill filters (the rest of the chrome is gone) ---- */
.lf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 26px; }
.lf-sep { flex: 1 1 0; }
.lf-dd { position: relative; }
.lf-dd > summary, .lf-toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); background: var(--white); color: var(--ink-900); font: 600 0.95rem/1 var(--font-body); white-space: nowrap; cursor: pointer; user-select: none; list-style: none; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.lf-dd > summary::-webkit-details-marker { display: none; }
.lf-dd > summary svg, .lf-toggle svg { width: 16px; height: 16px; }
.lf-dd > summary > svg:last-child { transition: transform 0.2s; }
.lf-dd[open] > summary > svg:last-child { transform: rotate(180deg); }
.lf-dd > summary:hover, .lf-toggle:hover { border-color: var(--ink-400); }
.lf-dd[open] > summary { border-color: var(--ink-900); }
.lf-dd.is-active > summary, .lf-toggle.is-active { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.lf-dd > summary:focus-visible, .lf-toggle:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.lf-toggle.is-empty:not(.is-active) { color: var(--text-muted); }
.lf-menu { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; display: grid; gap: 2px; min-width: 240px; max-height: 360px; overflow-y: auto; padding: 8px; background: var(--white); border: 1px solid var(--ink-100); border-radius: 16px; box-shadow: 0 24px 56px -16px rgba(20,23,42,0.28); }
.lf-menu.is-right { left: auto; right: 0; }
.lf-menu a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 14px; border-radius: 10px; font-size: 0.95rem; font-weight: 500; color: var(--text-body); }
.lf-menu a:hover { background: var(--paper-alt); }
.lf-menu a.is-active { background: var(--paper-alt); font-weight: 700; }
.lf-menu a.is-empty { color: var(--text-muted); }
.lf-menu .n { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
@media (max-width: 640px) {
  /* phones: one swipeable row, and each dropdown becomes a bottom sheet (a fixed sheet isn't clipped by the scrolling row) */
  .lf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding: 4px 18px 10px; }
  .lf::-webkit-scrollbar { display: none; }
  .lf > * { flex-shrink: 0; }
  .lf-sep { display: none; }
  .lf-dd[open]::before { content: ""; position: fixed; inset: 0; z-index: 1090; background: rgba(13,15,26,0.5); }   /* above the fixed site header (1000), below toasts (2000) */
  .lf-menu, .lf-menu.is-right { position: fixed; z-index: 1100; left: 0; right: 0; top: auto; bottom: 0; max-height: 72vh; padding: 12px 14px 28px; border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,0.28); }
  .lf-menu::before { content: ""; justify-self: center; width: 44px; height: 4px; margin-bottom: 8px; border-radius: 4px; background: var(--ink-200); }
  .lf-menu a { padding: 14px; font-size: 1rem; }
}

/* ---- results header ---- */
.lr-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 24px; }
.lr-meta p { margin: 0; font-size: 1rem; color: var(--text-muted); }
.lr-meta p b { color: var(--ink-900); font-weight: 700; }
.listing-body .pagination { margin-top: 56px; }
[data-tutor-app], [data-class-app] { scroll-margin-top: 84px; }   /* a new page of results scrolls into view under the fixed header, not behind it */

/* =========================================================================
   Tutor profile (instructor.php) — Superprof's layout in NovaMentra's own type and colour: a photo-led header, a
   sticky booking card beside it, quiet in-page tabs, then plain hairline-separated sections (no boxes) for About,
   Classes and Reviews, and a row of similar tutors. On a phone the booking card follows the header, and a slim bar
   with the price + one button pins to the bottom once the card has scrolled out of view.
   ========================================================================= */
.tp { position: relative; isolation: isolate; padding: 112px 0 40px; }
.tp::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--brand); }   /* the same solid top rule every interior page starts with (.page-hero::before) */
.tp .breadcrumbs { margin-bottom: 28px; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "aside" "body"; gap: 24px; }
.tp-head { grid-area: head; }
.tp-aside { grid-area: aside; }
.tp-body { grid-area: body; min-width: 0; }
@media (min-width: 1000px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; grid-template-areas: "head aside" "body aside"; gap: 0 64px; align-items: start; }
  .tp-aside { align-self: stretch; }
  .tp-book { position: sticky; top: 100px; }
}

/* ---- header: photo, name + save, role, rating + badges, record, subjects ---- */
.tp-head { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px 18px; align-items: start; padding-bottom: 28px; }
.tp-id { min-width: 0; }
@media (min-width: 720px) { .tp-head { grid-template-columns: 216px minmax(0, 1fr); gap: 36px; align-items: start; } }
@media (min-width: 1240px) { .tp-head { grid-template-columns: 232px minmax(0, 1fr); } }
.tp-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--tc-radius); background: var(--paper-alt); isolation: isolate; box-shadow: var(--card-shadow); }   /* the same photo as on the tutor cards: no ring, the same corners */
.tp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tp-photo.is-placeholder { background: var(--ph, #334155); background: radial-gradient(120% 95% at 15% 10%, color-mix(in srgb, var(--ph) 66%, #fff) 0%, var(--ph) 58%, color-mix(in srgb, var(--ph) 58%, #000) 100%); }
.tp-monogram { position: absolute; inset: 0; display: grid; place-items: center; }
.tp-monogram > span { display: grid; place-items: center; width: 52%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.32); color: var(--white); font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: 0.02em; }
.tp-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.tp-title h1 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: clamp(1.55rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: break-word; }
/* beside the booking card the main column is narrow (980–1239px): a smaller photo and name keep the header on one line */
@media (min-width: 1000px) and (max-width: 1239px) { .tp-head { grid-template-columns: 148px minmax(0, 1fr); gap: 24px; } .tp-title h1 { font-size: 2.3rem; } }
.tp-role { margin: 8px 0 0; font-size: 1.08rem; line-height: 1.4; color: var(--ink-600); }
.tp-rate { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
.tp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: inherit; }
.tp-stars { position: relative; display: inline-block; line-height: 0; }
.tp-stars-base, .tp-stars-fill { display: inline-flex; gap: 2px; }
.tp-stars-base svg { color: var(--ink-200); fill: currentColor; }
.tp-stars-fill { position: absolute; left: 0; top: 0; width: var(--p); overflow: hidden; }
.tp-stars-fill svg { flex-shrink: 0; color: var(--nova-gold-400); fill: currentColor; }
.tp-stars svg { width: 18px; height: 18px; }
.tp-rating b { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tp-rating-count { color: var(--text-muted); white-space: nowrap; }
.tp-rating:hover .tp-rating-count { text-decoration: underline; text-underline-offset: 3px; }
.tp-subjects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.tp-subjects > span { margin-right: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tp-subjects a { padding: 6px 14px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); background: var(--white); font-size: 0.88rem; font-weight: 600; color: var(--ink-900); transition: border-color 0.2s, background 0.2s; }
.tp-subjects a:hover { border-color: var(--ink-800); background: var(--paper-alt); }
/* "Save" — the same heart as on the cards, as a labelled pill here */
.tp-save { flex-shrink: 0; margin: 0; }
.tp-save-btn.save-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--ink-200); border-radius: 50%; background: var(--white); color: var(--ink-900); transition: border-color 0.2s, background 0.2s, color 0.2s; }   /* icon only — used by the tutor profile and the class page */
.tp-save-btn.save-btn:hover { transform: none; color: var(--ink-900); border-color: var(--ink-800); }
.tp-save-btn.save-btn svg { width: 19px; height: 19px; }
.tp-save-btn.save-btn.is-saved { color: #BE123C; border-color: #FECDD3; background: #FFF1F2; }
.tp-save-btn.save-btn.is-saved svg { fill: currentColor; }
.tp-save-btn.save-btn:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }


/* ---- in-page tabs: stick under the site header; the section being read is underlined (see main.js [data-spy]) ---- */
.tp-tabs { position: sticky; top: 66px; z-index: 30; display: flex; gap: 28px; padding: 0; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg-body) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ink-100); }
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-tabs a { flex-shrink: 0; margin-bottom: -1px; padding: 16px 2px 14px; border-bottom: 2px solid transparent; font-size: 0.98rem; font-weight: 600; white-space: nowrap; color: var(--text-muted); transition: color 0.2s, border-color 0.2s; }
.tp-tabs a:hover { color: var(--ink-900); }
.tp-tabs a.is-active { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.tp-tabs.has-ink a.is-active { border-bottom-color: transparent; }   /* the ink slides under it instead */
.tp-tabs a:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -2px; border-radius: 4px; }

/* ---- sections: hairlines, not boxes ---- */
.tp-section { padding: 40px 0; border-bottom: 1px solid var(--ink-100); scroll-margin-top: 132px; }
.tp-section:last-child { border-bottom: 0; }
.tp-section h2 { margin: 0 0 20px; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.tp-section h2 span { margin-left: 6px; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: var(--text-muted); }
.tp-section h3 { margin: 30px 0 12px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink-900); }
.tp-section h3 small { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.tp-section h2 + h3 { margin-top: 0; }   /* a tutor with no bio: the first block sits right under the section title */
.tp-bio { max-width: 68ch; margin: 0; font-size: 1.06rem; line-height: 1.75; overflow-wrap: anywhere; }
.tp-empty { margin: 0; color: var(--text-muted); }

/* ---- the booking card ---- */
.tp-book-facts { padding-top: 16px; border-top: 1px solid var(--ink-100); }   /* the shared .bk-facts list, set off from the times above it */
.tp-assure { list-style: none; display: grid; gap: 10px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--ink-100); font-size: 0.88rem; line-height: 1.45; color: var(--text-muted); }
.tp-assure li { display: flex; align-items: flex-start; gap: 10px; }
.tp-assure svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--color-success); }

/* ---- a class as a plain row (class-row.php) ---- */
.cr-list { display: grid; }
.cr { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 20px; gap: 6px 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--ink-100); color: inherit; }
.cr::before { content: ""; position: absolute; inset: 4px -14px; z-index: 0; border-radius: 18px; background: transparent; transition: background 0.2s; }
.cr > * { position: relative; z-index: 1; }
.cr-list > .cr:first-child { border-top-color: transparent; }
.cr:hover::before { background: var(--paper-alt); }
.cr:hover, .cr:hover + .cr { border-top-color: transparent; }
.cr:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -2px; }
.cr-main { display: grid; gap: 4px; min-width: 0; }
.cr-kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.cr-kicker > span { font-weight: 800; color: var(--ink-900); }
.cr-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--ink-900); overflow-wrap: anywhere; }
.cr-meta { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--text-muted); }
.cr-meta svg { flex-shrink: 0; width: 15px; height: 15px; }
.cr-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.cr-go { color: var(--ink-300); transition: transform 0.2s var(--ease-out), color 0.2s; }
.cr:hover .cr-go { transform: translateX(3px); color: var(--ink-900); }
@media (max-width: 560px) {
  .cr { grid-template-columns: 56px minmax(0, 1fr); padding: 16px 0; }
  .cr::before { inset: 4px -10px; }
  .cr-side { grid-column: 2; display: flex; align-items: baseline; justify-content: flex-start; gap: 12px; text-align: left; }
  .cr-go { display: none; }
}

/* ---- reviews: the ratings block (Class rating + the four questions, then the histogram), then plain rows ---- */
.rv-summary { margin: 0 0 6px; padding-bottom: 30px; border-bottom: 1px solid var(--ink-100); }
.rv-tiles { list-style: none; display: flex; flex-wrap: wrap; gap: 1px; margin: 0 0 28px; padding: 0; background: var(--ink-100); border: 1px solid var(--ink-100); border-radius: 18px; overflow: hidden; }
.rv-tiles li { flex: 1 1 88px; display: flex; flex-direction: column; gap: 5px; padding: 18px 10px 16px 14px; background: var(--white); }
.rv-tiles li.is-main { flex-basis: 112px; background: var(--paper-alt); }
.rv-tiles b .rv-num { font: inherit; }
.rv-tiles b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.rv-tiles b svg { width: 22px; height: 22px; color: var(--nova-gold-400); fill: currentColor; }
.rv-tiles li > span { font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--ink-900); white-space: nowrap; }   /* a label never breaks mid-word: the row wraps instead */
.rv-tiles small { font-size: 0.78rem; color: var(--text-muted); }
@media (max-width: 560px) { .rv-tiles li { flex-basis: calc(50% - 1px); } .rv-tiles li.is-main { flex-basis: 100%; } }
.rv-hist { display: grid; gap: 9px; max-width: 520px; margin-bottom: 24px; }
.rv-hist:last-child { margin-bottom: 0; }   /* no "how it's calculated" note under it (the public profile) — the summary's own padding is the gap */
.rv-hist-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-muted); }
.rv-star { flex: 0 0 30px; display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--text-body); }
.rv-star svg { width: 12px; height: 12px; color: var(--nova-gold-400); fill: currentColor; }
.rv-count { flex: 0 0 24px; text-align: right; font-variant-numeric: tabular-nums; }
.rv-how > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-300); }
.rv-how > summary::-webkit-details-marker { display: none; }
.rv-how > summary svg { transition: transform 0.2s; }
.rv-how[open] > summary svg { transform: rotate(180deg); }
.rv-how > ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 16px 18px 16px 34px; list-style: disc; background: var(--paper-alt); border-radius: 14px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-600); }
.rv-how b { color: var(--ink-900); }
.rv-rows { display: grid; }
.rv-row { padding: 28px 0; border-top: 1px solid var(--ink-100); }
.rv-rows > .rv-row:first-child { border-top: 0; }
.rv-summary + .rv-rows > .rv-row:first-child { padding-top: 26px; }
.rv-row-head { display: flex; align-items: center; gap: 14px; }
.rv-row-head .avatar-initials { flex-shrink: 0; width: 46px; height: 46px; font-size: 0.9rem; }
.rv-row-who { flex: 1; min-width: 0; }
.rv-row-who b { display: block; font-size: 1rem; color: var(--ink-900); }
.rv-row-who > span { font-size: 0.85rem; color: var(--text-muted); }
.rv-verified { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #047857; }
.rv-verified svg { width: 13px; height: 13px; }
.rv-row-stars { display: inline-flex; flex-shrink: 0; gap: 2px; color: var(--ink-200); }
.rv-row-stars .on { color: var(--nova-gold-400); }
.rv-row-stars svg { width: 16px; height: 16px; fill: currentColor; }
.rv-row-text { max-width: 68ch; margin: 14px 0 0; font-size: 1.02rem; line-height: 1.7; overflow-wrap: anywhere; }
.rv-row .tutor-reply { max-width: 68ch; }
@media (max-width: 480px) { .rv-row-head { flex-wrap: wrap; row-gap: 6px; } .rv-row-stars { flex-basis: calc(100% - 60px); margin-left: 60px; } }   /* 60px = avatar + gap; the margin must come OUT of the 100% or the row overflows the phone */

/* ---- similar tutors ---- */
.tp-similar { padding-top: 56px; border-top: 1px solid var(--ink-100); }

/* ---- phone: slim booking bar, shown by main.js once the card has scrolled away ---- */
.tp-bar, .bk-bar { display: none; }
@media (max-width: 999px) {
  .tp-bar, .bk-bar { position: fixed; z-index: 850; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-body) 95%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--ink-100); box-shadow: 0 -14px 34px -22px rgba(20,23,42,0.35); transform: translateY(110%); transition: transform 0.3s var(--ease-out); }
  .tp-bar.is-visible, .bk-bar.is-visible { transform: none; }
  .tp-bar-info b, .bk-bar-info b { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--ink-900); }
  .tp-bar-info span, .bk-bar-info span { font-size: 0.82rem; color: var(--text-muted); }
  body:has(.tp-bar, .bk-bar) .back-to-top { bottom: 92px; }
}

/* ---- the review form (review.php): one page — Class rating, four quick questions, teaching-style words, comment ---- */
.rf-block { margin: 0 0 26px; text-align: left; }
.rf-main { text-align: center; }
.rf-q { margin: 0 0 2px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink-900); }
.rf-opt { margin-left: 6px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rf-hint { margin: 0 0 12px; font-size: 0.9rem; color: var(--text-muted); }
.rf-sub { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--ink-100); }
.rf-sub:first-of-type { border-top: 0; }
.rf-sub-text { display: grid; gap: 1px; min-width: 0; }
.rf-sub-text b { font-size: 0.95rem; color: var(--ink-900); }
.rf-sub-text span { font-size: 0.82rem; line-height: 1.35; color: var(--text-muted); }
.rf-how { margin-top: 22px; text-align: left; }
@media (max-width: 420px) { .rf-sub { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* =========================================================================
   Tutor profile — the life layer
   A profile is a PERSON, so it should feel like one — but in the site's own look: the same ink + cream + gold as every
   other page, the same cards (the booking card IS the class page's .ic ink card) and chips. What makes it alive is real
   content, never a theme colour: a medal on the portrait, live signals (taking bookings, next open times, "in 4d 3h",
   seats left), real numbers that count up, one student's words up front, classes shown as events. Every number is
   computed from real data and every block simply isn't drawn when there is nothing true to say. Motion is gentle,
   purposeful and switched off for visitors who ask for reduced motion.
   ========================================================================= */

/* ---- no per-tutor theme: this page uses the same palette as every other page (ink, cream, gold) — a tutor is carried by their photo, real numbers and words, never by a colour wash or a glow ---- */

/* ---- portrait: a medal for Super Tutor ---- */
.tp-photo-wrap { position: relative; }
.tp-medal { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--white); border-radius: 50%; background: linear-gradient(145deg, #FDE68A, #F59E0B); color: #7C2D12; box-shadow: 0 10px 20px -8px rgba(180,83,9,0.6); cursor: help; }
.tp-medal svg { width: 21px; height: 21px; }
@media (max-width: 719px) { .tp-medal { width: 34px; height: 34px; right: -6px; bottom: -6px; border-width: 2px; } .tp-medal svg { width: 16px; height: 16px; } }

/* ---- taking bookings: the one live signal in the header ---- */
.tp-status { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 7px 14px 7px 12px; border-radius: var(--radius-pill); background: rgba(5,150,105,0.1); color: #047857; font-size: 0.9rem; font-weight: 600; }
.tp-status .schedule-time { font-weight: 700; }
.tp-status:not(.is-open) { background: var(--ink-100); color: var(--ink-600); }
.tp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); }
@media (max-width: 520px) { .tp-status-more { display: none; } }

/* ---- the record, as three counted tiles ---- */
.tp-kpis { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 540px; margin: 18px 0 0; padding: 0; }
.tp-kpis li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 12px 14px; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); }
.tp-kpis svg { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--ink-400); }
.tp-kpis b { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tp-kpis span { margin-top: 3px; font-size: 0.76rem; line-height: 1.2; color: var(--text-muted); }
@media (max-width: 520px) { .tp-kpis { gap: 8px; } .tp-kpis li { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 11px 12px; } .tp-kpis svg { display: none; } .tp-kpis b { font-size: 1.4rem; } }
/* phone: the photo shares the top with name, role and rating; the badges, status, numbers and subjects get the FULL width beneath it
   (the column beside a 104px photo is too narrow for two badges on one row, and squeezes the number tiles) */
@media (max-width: 719px) {
  .tp-head { row-gap: 0; }
  .tp-id, .tp-rate { display: contents; }
  .tp-photo-wrap { grid-row: 1 / span 3; }
  .tp-title, .tp-role, .tp-rating { grid-column: 2; }
  .tp-rating { justify-self: start; margin-top: 12px; }
  .tp-badges, .tp-status, .tp-kpis, .tp-subjects { grid-column: 1 / -1; }
  .tp-badges { margin-top: 16px; }
  .tp-status { justify-self: start; }
}

/* ---- one student's words, up front ---- */
.tp-quote { grid-column: 1 / -1; position: relative; margin: 10px 0 0; padding: 22px 26px 18px 66px; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); }
.tp-quote-mark { position: absolute; left: 22px; top: 20px; display: block; line-height: 0; color: var(--ink-300); }
.tp-quote-mark svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.tp-quote blockquote { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.22rem; font-weight: 500; line-height: 1.5; color: var(--ink-900); overflow-wrap: anywhere; }
.tp-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.9rem; color: var(--text-muted); }
.tp-quote figcaption b { color: var(--ink-900); }
.tp-quote figcaption a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 600; color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-300); }
.tp-quote figcaption a:hover { text-decoration-color: var(--ink-900); }
@media (max-width: 560px) { .tp-quote { padding: 18px 18px 16px 18px; } .tp-quote-mark { position: static; margin-bottom: 10px; } .tp-quote blockquote { font-size: 1.08rem; } .tp-quote figcaption a { margin-left: 0; } }

/* ---- About: a lead paragraph, "why students choose", teaching style as bars ---- */
.tp-bio { font-size: 1.16rem; line-height: 1.75; color: var(--ink-800); }
.tp-bio + .tp-bio { margin-top: 1.1em; }   /* a real About is several paragraphs: a gap between them, not a wall of text */
.tp-about { --rm-max: 17rem; }             /* the preview of a long About is about eight lines; Teaching style and the rest stay within reach below it */
.tp-why { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; padding: 0; }
.tp-why li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 14px; align-items: center; padding: 16px 18px; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); }
.tp-why-ico { grid-row: 1 / 3; display: grid; place-items: center; color: var(--ink-400); }
.tp-why b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--ink-900); overflow-wrap: anywhere; }
.tp-why li > span:not(.tp-why-ico) { font-size: 0.86rem; line-height: 1.35; color: var(--text-muted); }
@media (max-width: 560px) { .tp-why { grid-template-columns: minmax(0, 1fr); } }
.tp-why li.is-long b { font-size: 1.08rem; }
/* teaching style: at most four plain labels (the words students pick most) — soft cream pills, so they read apart from the white outlined specialty pills; no numbers, no bars */
.tp-traits { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.tp-traits li { display: inline-flex; align-items: center; padding: 9px 18px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--paper-alt); font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: var(--ink-900); }
@media (max-width: 640px) { .tp-traits { gap: 8px; } .tp-traits li { padding: 8px 15px; font-size: 0.92rem; } }
.tp-why li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd card out spans the row instead of leaving a hole */

/* ---- the booking card (an .ic ink card, like the class page's): next open times, honest urgency ---- */
/* on a short window only the body of the sticky card scrolls — the title bar and the buttons stay put */
@media (min-width: 1000px) { .tp-book { max-height: calc(100vh - 124px); } .tp-book > .ic-body { min-height: 0; overflow-y: auto; scrollbar-width: thin; } }
/* a short window: keep what decides a booking (times, the button) and drop the reassurance, so the sticky card never needs its own scrollbar */
@media (min-width: 1000px) and (max-height: 860px) { .tp-assure { display: none; } }
@media (min-width: 1000px) and (max-height: 720px) { .tp-time:nth-of-type(n+3) { display: none; } .tp-book-facts li:not(.is-urgent):nth-child(n+2) { display: none; } }
.tp-times { display: grid; gap: 6px; margin-top: 2px; }
.tp-times-label { margin: 0 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tp-time { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ink-100); border-radius: var(--radius-md); background: var(--white); font-size: 0.9rem; font-weight: 600; color: var(--ink-900); transition: border-color 0.2s, background 0.2s, translate 0.2s; }
.tp-time > span { flex: 1; min-width: 0; }
.tp-time svg { flex-shrink: 0; width: 16px; height: 16px; }
.tp-time svg:first-child { color: var(--ink-500); }
.tp-time svg:last-child { color: var(--ink-300); transition: translate 0.2s var(--ease-out), color 0.2s; }
.tp-time:hover { border-color: var(--ink-800); background: var(--paper-alt); translate: 0 -1px; }
.tp-time:hover svg:last-child { translate: 3px 0; color: var(--ink-900); }
.tp-book-facts li.is-urgent { padding: 9px 12px; margin-inline: -4px; border-radius: 12px; background: #FEF3C7; color: #92400E; }
.tp-book-facts li.is-urgent svg { color: #B45309; }
.tp-book-facts li.is-urgent a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.tp-book-facts .cd-pill { margin-left: 4px; }
.tp-cta { position: relative; overflow: hidden; }
.tp-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.2) 50%, transparent 65%); translate: -130% 0; transition: translate 0.8s var(--ease-out); pointer-events: none; }
.tp-cta:hover::after { translate: 130% 0; }
.tp-cta svg { transition: translate 0.25s var(--ease-out); }
.tp-cta:hover svg { translate: 4px 0; }

/* ---- classes as events: calendar tile, live countdown, how full ---- */
.cr { grid-template-columns: 64px minmax(0, 1fr) auto 20px; }
.date-tile { display: grid; grid-template-rows: auto 1fr; width: 64px; height: 68px; overflow: hidden; border: 1px solid var(--ink-100); border-radius: 16px; background: var(--white); box-shadow: 0 8px 16px -10px rgba(20,23,42,0.35); text-align: center; transition: translate 0.25s var(--ease-out); }
.cr:hover .date-tile { translate: 0 -2px; }
.date-tile i { display: block; padding: 4px 0 3px; background: var(--ink-950); color: #fff; font-size: 0.66rem; font-style: normal; font-weight: 800; letter-spacing: 0.14em; }
.date-tile b { display: grid; place-items: center; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.date-tile.is-flex b svg { width: 24px; height: 24px; color: var(--ink-900); }
.cr-meta .cd-pill { margin-left: 4px; }
.cr-side { display: grid; justify-items: end; gap: 7px; }
.cr-meter { display: block; width: 92px; height: 5px; overflow: hidden; border-radius: 5px; background: var(--ink-100); }
.cr-meter i { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: var(--ink-900); }
.cr.is-low .cr-meter i { background: var(--nova-gold-500); }
.cr.is-full .cr-meter i { background: var(--ink-300); }
@media (max-width: 560px) {
  .cr { grid-template-columns: 56px minmax(0, 1fr); }
  .date-tile { width: 56px; height: 62px; grid-row: span 2; }
  .date-tile b { font-size: 1.5rem; }
  .cr-side { grid-column: 2; display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
}

/* ---- the tutor's reply has a face ---- */
.rv-row .tutor-reply { margin-left: 22px; padding: 14px 18px 14px 20px; border-left: 3px solid var(--ink-300); border-radius: 6px 16px 16px 6px; }
.tutor-reply .tr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tutor-reply .tr-avatar { width: 28px; height: 28px; font-size: 0.68rem; flex-shrink: 0; }
.tutor-reply .tr-head b { display: inline; margin: 0; font-size: 0.86rem; letter-spacing: 0; text-transform: none; color: var(--ink-900); }
.tutor-reply .tr-when { font-size: 0.8rem; color: var(--text-muted); }

/* ---- a saved heart pops ---- */
@keyframes heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 62% { transform: scale(0.9); } 100% { transform: scale(1); } }
.save-btn.just-saved svg { animation: heart-pop 0.55s var(--ease-out); }

/* ---- the tab ink ---- */
.tp-tabs-ink { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; border-radius: 2px; background: var(--ink-900); pointer-events: none; transition: translate 0.4s var(--ease-out), width 0.4s var(--ease-out); }

/* ---- motion (scroll-reveal groups, growing bars, page-load rise, a slowly drifting glow) ---- */
.js .reveal.is-group { opacity: 1; transform: none; transition: none; }
.js .rv-hist:not(.is-visible) .rb-bar > span, .js .cr-list:not(.is-visible) .cr-meter i { width: 0; }
.js .rv-hist .rb-bar > span { transition: width 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.js .tp-traits:not(.is-visible) li { opacity: 0; translate: 0 8px; }
.js .tp-traits li { transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .cr-meter i { transition: width 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.js .cr-list:not(.is-visible) .cr { opacity: 0; translate: 0 14px; }
.js .cr { transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
@keyframes tp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .tp-photo-wrap, .tp-id > *, .tp-book, .tp-quote { animation: tp-rise 0.7s var(--ease-out) both; }
  .tp-id > :nth-child(2) { animation-delay: 0.05s; } .tp-id > :nth-child(3) { animation-delay: 0.1s; } .tp-id > :nth-child(4) { animation-delay: 0.15s; }
  .tp-id > :nth-child(5) { animation-delay: 0.2s; } .tp-id > :nth-child(6) { animation-delay: 0.25s; }
  .tp-book { animation-delay: 0.12s; } .tp-quote { animation-delay: 0.3s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 719px) { .tp-rate > * { animation: tp-rise 0.7s var(--ease-out) 0.1s both; } }   /* .tp-rate has no box on a phone, so its children rise on their own */
@media (prefers-reduced-motion: reduce) {
  .rv-hist .rb-bar > span, .cr-meter i { width: var(--w, var(--fill)) !important; transition: none !important; }
  .tp-traits li { opacity: 1 !important; translate: none !important; transition: none !important; }
  .cr { opacity: 1 !important; translate: none !important; transition: none !important; }
  .tp-tabs-ink, .tp-cta::after { transition: none; }
}


/* ---- a student's EARLIER reviews of the same tutor: folded under their newest one (shown, but not counted twice) ---- */
.rv-class { color: var(--ink-600); }
.rv-earlier { margin: -10px 0 0 22px; padding-bottom: 8px; }
.rv-earlier > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px dashed var(--ink-200); border-radius: 12px; list-style: none; cursor: pointer; font-size: 0.86rem; line-height: 1.4; color: var(--ink-700); transition: border-color 0.2s, background 0.2s; }
.rv-earlier > summary::-webkit-details-marker { display: none; }
.rv-earlier > summary:hover { border-color: var(--ink-400); background: var(--paper-alt); }
.rv-earlier > summary b { color: var(--ink-900); }
.rv-earlier > summary em { font-style: normal; color: var(--text-muted); }
.rv-earlier > summary svg { flex-shrink: 0; transition: transform 0.2s; }
.rv-earlier[open] > summary svg { transform: rotate(180deg); }
.rv-row.is-earlier { margin-left: 6px; padding: 20px 0 8px 20px; border-top: 0; border-left: 2px solid var(--ink-100); }
.rv-row.is-earlier + .rv-row.is-earlier { margin-top: 10px; }
.rv-row.is-earlier .rv-row-head .avatar-initials { width: 36px; height: 36px; font-size: 0.78rem; }
.rv-row.is-earlier .rv-row-text { margin-top: 10px; font-size: 0.96rem; line-height: 1.65; }
@media (max-width: 520px) { .rv-earlier { margin-left: 8px; } .rv-earlier > summary { align-items: flex-start; } }

/* =========================================================================
   Class page (class.php) — the tutor profile's layout, for a class: the title block and the booking card START AT THE SAME
   HEIGHT (what a visitor came to do is never pushed below a tall header), the card sticks beside the content, its primary
   button sits right under the price, and a long description is clamped behind a "Read more" so the instructor stays within
   reach — who teaches it is also named at the top. On a phone: title, booking card, content, and the slim bar (price + one
   button, shared with the tutor profile) once the card has scrolled away.
   ========================================================================= */
.cls { position: relative; padding: 112px 0 56px; }
.cls::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--brand); }   /* the same solid top rule every interior page starts with */
.cls .breadcrumbs { margin-bottom: 28px; }
.cls-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "aside" "body"; gap: 24px; }
.cls-head { grid-area: head; min-width: 0; }
.cls-aside { grid-area: aside; min-width: 0; }
.cls-body { grid-area: body; min-width: 0; }
.cls-head h1 { margin: 0 0 14px; max-width: 24ch; font-size: clamp(1.75rem, 5.5vw + 0.4rem, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-body); overflow-wrap: break-word; }
.cls-lead { margin: 0; max-width: 62ch; font-size: 1.08rem; line-height: 1.6; color: var(--text-muted); }
@media (min-width: 1000px) {
  .cls-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; grid-template-areas: "head aside" "body aside"; gap: 0 64px; align-items: start; }
  .cls-aside { align-self: stretch; }
  .cls-head { padding-bottom: 32px; }
  .cls .bk { position: sticky; top: 100px; max-height: calc(100vh - 124px); }
  .cls .bk > .ic-body { min-height: 0; overflow-y: auto; scrollbar-width: thin; }   /* on a short window only the body scrolls — the title bar and the buttons stay put */
}

/* "Taught by": the instructor is visible at the top, whatever the length of the description below */
.cls-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; }
.cls-by-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cls-by-photo { display: block; flex-shrink: 0; line-height: 0; }
.cls-by-photo .avatar-initials { width: 46px; height: 46px; margin: 0; font-size: 0.92rem; }
.cls-by-text { display: grid; gap: 1px; min-width: 0; }
.cls-by-text small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cls-by-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.cls-by-name { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
a.cls-by-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.cls-by-role { font-size: 0.95rem; color: var(--ink-600); }
.cls-by-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 0.92rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cls-by-rate svg { width: 15px; height: 15px; color: var(--nova-gold-400); fill: currentColor; align-self: center; }
.cls-by-rate span { font-weight: 500; color: var(--text-muted); }
.cls-by-rate:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* the content: hairline-separated sections (About, the instructor, more from them) */
.cls-section { padding: 36px 0; border-top: 1px solid var(--ink-100); scroll-margin-top: 100px; }
.cls-section:last-child { padding-bottom: 8px; }
.cls-section > h2 { margin: 0 0 18px; font-size: 1.4rem; }

/* Long text with a "Read more" (main.js [data-readmore]) — any long block: a class's description, a tutor's About. It shows a readable
   preview, faded out at the bottom (--rm-max is the preview's height), and expands in place; without JavaScript it is simply shown whole. */
.cls-about-text.prose { max-width: none; margin-inline: 0; }
.cls-about-text > :first-child { margin-top: 0; }
.cls-about-text > :last-child { margin-bottom: 0; }
[data-readmore-text] { position: relative; }
[data-readmore].is-clamped [data-readmore-text] { max-height: var(--rm-max, 16rem); }
[data-readmore].is-clamped [data-readmore-text], [data-readmore].is-moving [data-readmore-text] { overflow: hidden; }
[data-readmore].is-clamped [data-readmore-text]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.5rem; background: linear-gradient(to bottom, rgba(255,253,249,0), var(--paper) 88%); pointer-events: none; }
.js [data-readmore-text] { transition: max-height 0.4s var(--ease-out); }
[data-readmore-toggle] { margin-top: 14px; }
[data-readmore-toggle][hidden] { display: none; }
[data-readmore-toggle] svg { transition: transform 0.2s; }
[data-readmore-toggle][aria-expanded="true"] svg { transform: rotate(180deg); }
[data-readmore-toggle] [data-less], [data-readmore-toggle][aria-expanded="true"] [data-more] { display: none; }
[data-readmore-toggle][aria-expanded="true"] [data-less] { display: inline; }
@media (prefers-reduced-motion: reduce) { .js [data-readmore-text] { transition: none; } }

/* the booking card on this page: price, then the one button, then the details; Save and Ask sit side by side at the foot */
.cls .bk-body { padding: 20px 22px; }
.cls .bk-cta .btn { margin: 0; }
.cls .bk-cta + * { padding-top: 14px; border-top: 1px solid var(--ink-100); }
.bk-foot.is-links { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; }   /* one quiet button: "Ask a Question" (Save moved up beside Share) */
.bk-foot.is-links form { margin: 0; }
.bk-foot.is-links .btn { padding: 10px 12px; font-size: 0.92rem; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Phone: no zoom-on-focus. iPhone Safari zooms the whole page in when a field whose text is smaller than 16px gets focus (and
   leaves it zoomed) — so on a phone every text field is exactly 16px. Larger screens keep the finer 15px type.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="hidden"]),
  select, textarea, .form-control, .newsletter-form input, .ss-field input {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------
   Cookie bar (only when analytics is in use) + the "Your cookie choices" box on the Privacy Policy
   --------------------------------------------------------------------- */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 950; display: flex; gap: 14px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  max-width: 640px; padding: 16px 18px; border-radius: 16px; background: var(--ink-900); color: rgba(255,255,255,0.88); box-shadow: 0 18px 40px -12px rgba(8,10,20,0.55); }
.consent-bar[hidden] { display: none; }
.consent-bar .consent-text { flex: 1 1 280px; margin: 0; font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,0.82); }
.consent-bar .consent-text strong { color: var(--white); }
.consent-bar .consent-text a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.consent-bar .consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-bar .btn-primary { background: var(--white); color: var(--ink-900); border-color: var(--white); }
.consent-bar .btn-primary:hover { background: var(--ink-50); }
@media (max-width: 520px) { .consent-bar .consent-actions { width: 100%; } .consent-bar .consent-actions .btn { flex: 1 1 0; } }
.footer-link-btn { display: inline-block; padding: 8px 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.footer-link-btn:hover { color: rgba(255,255,255,0.8); }
.footer-link-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.cookie-choices { margin-top: 36px; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--ink-200); background: var(--ink-50); }
.cookie-choices h2 { margin-top: 0; }
.cookie-choices .cookie-choices-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Checkout: the "PayPal's buttons couldn't load" notice — hidden until the page's script finds PayPal blocked (a class, not an inline style) */
.fn-fallback { display: none; }
.fn-fallback.is-visible { display: flex; }

/* Promo code on the payment page (includes/partials/promo-code.php) and the discount rows of "Your booking" */
.fn-promo { margin: 0 0 18px; }
.fn-promo-box summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--text-body); padding: 6px 0; }
.fn-promo-form { display: flex; gap: 10px; margin-top: 10px; }
.fn-promo-form .form-control { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.fn-promo-form .form-control::placeholder { text-transform: none; }
.fn-promo-error { margin: 10px 0 0; color: #B91C1C; font-size: 0.9rem; display: flex; gap: 6px; align-items: center; }
.fn-promo-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: rgba(16,185,129,0.1); color: #065F46; font-size: 0.92rem; }
.fn-promo-applied form { margin: 0; }
.fn-promo-applied svg { vertical-align: -3px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; color: inherit; }
.bs-price.bs-discount { border-top: 0; margin-top: 0; padding-top: 6px; }
.bs-price.bs-discount b { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }

/* Reschedule page (reschedule.php) */
.rs-current { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; font-weight: 600; }
.rs-list { display: grid; gap: 10px; margin: 0 0 20px; }
.rs-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 14px; cursor: pointer; background: var(--white); }
.rs-option:has(input:checked) { border-color: var(--ink-900); box-shadow: 0 0 0 2px var(--ink-900) inset; }
.rs-option input { margin-top: 4px; }
.rs-option-body { display: grid; gap: 2px; }
.rs-option-body small { color: var(--text-muted); }

/* Messages (messages.php, tutor/messages.php, admin/conversations.php) */
.msg-wrap { max-width: 820px; }
.msg-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.msg-thread { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--white); color: inherit; text-decoration: none; }
.msg-thread:hover { border-color: var(--ink-400); }
.msg-thread.is-unread { border-color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-900) inset; }
.msg-thread-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.msg-thread-preview { color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread-meta { flex: 0 0 auto; color: var(--text-muted); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }
.msg-conv { display: grid; gap: 16px; }
.msg-conv-head { display: flex; align-items: center; gap: 14px; }
.msg-conv-head .muted { display: block; font-size: 0.9rem; }
.msg-list { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; padding: 6px 4px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.msg.is-mine { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--ink-50); border: 1px solid var(--border-color); line-height: 1.55; overflow-wrap: anywhere; }
.msg.is-mine .msg-bubble { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); border-radius: 16px 16px 4px 16px; }
.msg.is-mine .msg-bubble a { color: var(--white); text-decoration: underline; }
.msg-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.msg-empty { text-align: center; padding: 24px 0; }
.msg-form { display: grid; gap: 10px; }
.msg-form-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.msg-form-row select { max-width: 320px; }
.msg-about { font-size: 0.9rem; }
.msg-note { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; margin: 0; }
.msg-note form { margin: 0; }

/* A guarded form submitted a moment before its invisible check finished: it waits, then goes (assets/js/main.js, "Bot guard") */
form.is-verifying { opacity: 0.7; pointer-events: none; }

/* Cloudflare Turnstile (includes/turnstile.php): the slot is empty until a visitor touches the form, and Cloudflare's widget is normally
   invisible. When Cloudflare does need a tick it appears here; the frame is only given room once it is actually shown. While a submit waits
   for the answer the form stays clickable (unlike .is-verifying) so that tick can be made. */
.ts-slot { min-width: 0; }
.ts-slot iframe { display: block; max-width: 100%; margin: 0 0 16px; }
.newsletter-form .ts-slot { flex: 1 0 100%; }
form.is-checking button[type="submit"] { cursor: progress; opacity: 0.75; }

/* Sign-in backup codes (My Account, tutor Profile) and the "can't open this e-mail" disclosure on the code screens */
.bc-intro { margin: 0 0 12px; max-width: 62ch; }
.bc-help { margin-top: 12px; }
.backup-codes { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.backup-codes li { padding: 10px 12px; border: 1px dashed var(--ink-400); border-radius: 10px; background: var(--ink-50); text-align: center; }
.backup-codes code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.08em; font-weight: 700; }
.auth-lost { margin-top: 20px; font-size: 0.92rem; }
.auth-lost summary { cursor: pointer; font-weight: 600; }
.auth-lost form { display: grid; gap: 8px; margin-top: 12px; }
@media print { .backup-codes li { border-style: solid; } }