/* ==========================================================================
   Achievers Home Tuitions — hometutorsindia.com
   Design system + shared stylesheet
   --------------------------------------------------------------------------
   Palette : deep indigo "chalkboard" + exercise-book paper + marigold accent
   Type    : Fraunces (display) / Plus Jakarta Sans (body) / IBM Plex Mono (data)
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------- */
  --ink:        #10233f;
  --ink-2:      #274268;
  --ink-3:      #5a739b;
  --paper:      #f4f7fb;
  --paper-2:    #e9eff7;
  --white:      #ffffff;
  --marigold:   #e8912d;
  --marigold-d: #c9740f;
  --marigold-l: #fdf1e0;
  --jade:       #0f7b6c;
  --jade-l:     #e4f2ef;
  --wa:         #25d366;
  --wa-d:       #128c7e;
  --line:       #d7e0ec;
  --line-2:     #c2cfe0;

  /* --- type --------------------------------------------------------- */
  /* Metric-compatible fallbacks keep layout stable before webfonts arrive. */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* --- layout ------------------------------------------------------- */
  --wrap:   1180px;
  --wrap-n: 900px;
  --r-sm:   8px;
  --r:      14px;
  --r-lg:   22px;
  --shadow:    0 1px 2px rgba(16, 35, 63, .06), 0 8px 24px rgba(16, 35, 63, .07);
  --shadow-lg: 0 2px 4px rgba(16, 35, 63, .06), 0 24px 60px rgba(16, 35, 63, .13);
  --hdr-h: 74px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

/* The browser's own [hidden] rule loses to any class that sets display
   (e.g. .btn), so a "hidden" button could still appear. Make hidden mean hidden. */
[hidden] { display: none !important; }

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

html { font-size: 100%; }          /* 16px base — the text-size control scales this */

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;             /* 17px at default, and scales with the control */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--marigold); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.65rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

strong { font-weight: 700; }

::selection { background: var(--marigold); color: var(--white); }

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

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

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap-n { width: 100%; max-width: var(--wrap-n); margin-inline: auto; padding-inline: 22px; }

.section { padding-block: clamp(56px, 8vw, 100px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }

/* Eyebrow — a small typed label. Used only where it names a real category. */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marigold-d);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--marigold);
  flex: none;
}
.section--ink .eyebrow { color: var(--marigold); }

.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  color: var(--ink-2);
  max-width: 62ch;
}
.section--ink .lede { color: #b9c8de; }

.section-head { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body);
  font-size: .97rem; font-weight: 700;
  padding: 15px 26px;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg:last-child:not(:only-child) { transition: transform .18s ease; }
.btn:hover svg:last-child:not(:only-child) { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary  { background: var(--ink); color: var(--white); box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--ink-2); color: var(--white); }

.btn--gold     { background: var(--marigold); color: #3b2100; box-shadow: 0 6px 18px rgba(232,145,45,.34); }
.btn--gold:hover { background: var(--marigold-d); color: var(--white); }

.btn--wa       { background: var(--wa); color: #04321c; box-shadow: 0 6px 18px rgba(37,211,102,.32); }
.btn--wa:hover { background: var(--wa-d); color: var(--white); }

/* Ghost buttons read their colour from the container, so a dark section can
   never leave dark text on a dark background. Set --on-dark on any dark box. */
.btn--ghost {
  background: transparent;
  color: var(--ghost-fg, var(--ink));
  border-color: var(--ghost-bd, var(--line-2));
}
.btn--ghost:hover {
  color: var(--ghost-fg-h, var(--ink));
  border-color: var(--ghost-fg, var(--ink));
  background: var(--ghost-bg-h, var(--white));
}

/* Every dark surface in the site declares itself here. */
.hero,
.section--ink,
.legal__hero,
.split__side--tutors,
.formcard__hd {
  --ghost-fg:   #ffffff;
  --ghost-fg-h: #ffffff;
  --ghost-bd:   rgba(255,255,255,.34);
  --ghost-bg-h: rgba(255,255,255,.10);
}

.btn--sm { padding: 11px 18px; font-size: .88rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 13px; }

/* ==========================================================================
   Header
   ========================================================================== */

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(244,247,251,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr__in {
  height: var(--hdr-h);
  display: flex; align-items: center; gap: 26px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 20, "WONK" 1;
  font-weight: 700; font-size: 1.09rem;
  color: var(--ink); letter-spacing: -.01em;
}
.brand__sub {
  font-family: var(--mono);
  font-size: .58rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3);
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-size: .93rem; font-weight: 600;
  padding: 9px 13px; border-radius: 100px;
  text-decoration: none; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 2px; background: var(--marigold);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }

.hdr__cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: var(--white); border: 1px solid var(--line-2);
  border-radius: 11px; cursor: pointer;
  align-items: center; justify-content: center;
  margin-left: auto;
}
.burger span {
  display: block; width: 19px; height: 2px; background: var(--ink);
  position: relative; transition: transform .2s, background .2s;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink);
  transition: transform .2s, top .2s;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.mnav {
  display: none;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 14px 22px 22px;
}
.mnav.is-open { display: block; }
.mnav a {
  display: block; padding: 13px 4px;
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--paper-2);
}
.mnav .btn-row { margin-top: 18px; }
.mnav .btn { flex: 1; }

/* ==========================================================================
   Hero — dual-track (Tricity home tuition / worldwide online)
   ========================================================================== */

.hero {
  position: relative;
  background:
    radial-gradient(900px 460px at 88% -6%, rgba(232,145,45,.16), transparent 62%),
    radial-gradient(760px 420px at 4% 8%, rgba(15,123,108,.13), transparent 60%),
    var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding-block: clamp(46px, 6vw, 78px) clamp(56px, 7vw, 90px);
}
/* faint ruled-page texture — the exercise-book reference, kept quiet */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 34px);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: var(--white); }
.hero h1 em {
  font-style: normal;
  color: var(--marigold);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60;
}

/* Track switch — encodes the real split in the business */
.track {
  display: inline-flex;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px;
  padding: 5px;
  gap: 4px;
  margin-bottom: 30px;
  max-width: 100%;
  flex-wrap: nowrap;
}
.track__btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: #c4d2e6;
  font-family: var(--body); font-size: .88rem; font-weight: 700;
  padding: 11px 19px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.track__btn svg { width: 16px; height: 16px; }
.track__btn[aria-selected="true"] { background: var(--white); color: var(--ink); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}

.hero__panel { display: none; }
.hero__panel.is-active { display: block; animation: fade .32s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.hero .lede { color: #bccbe0; margin-bottom: 26px; }

.hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.pill {
  font-family: var(--mono); font-size: .73rem; letter-spacing: .04em;
  padding: 7px 13px; border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #d3dded;
}

/* ==========================================================================
   Signature element — the time-bridge card
   ========================================================================== */

.bridge {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  backdrop-filter: blur(6px);
}
.bridge__ttl {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--marigold);
  margin: 0 0 20px;
}
.bridge__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.bridge__side { text-align: center; }
.bridge__place {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: #92a6c2; margin-bottom: 5px;
}
.bridge__time {
  font-family: var(--mono); font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 600;
  color: var(--white); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bridge__day { font-size: .7rem; color: #7f93b0; margin-top: 5px; font-family: var(--mono); }
.bridge__arc { color: var(--marigold); opacity: .85; }
.bridge__arc svg { width: 42px; height: 22px; }
.bridge__note {
  margin-top: 20px; padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: .87rem; color: #bccbe0; text-align: center;
}
.bridge__note b { color: var(--white); }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--white); padding: 26px 20px; text-align: center; }
.stat__n {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "WONK" 1;
  font-size: clamp(1.75rem, 3.4vw, 2.45rem); font-weight: 700;
  color: var(--ink); line-height: 1;
}
.stat__l {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 9px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link { position: relative; overflow: hidden; }
.card--link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--marigold);
  transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
.card--link:hover::before { transform: scaleY(1); }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card__ico { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.card:hover .card__ico { transform: translateY(-2px) rotate(-4deg); }
.card h3 { margin-bottom: .35em; }
.card p { font-size: .95rem; color: var(--ink-2); }

.card__ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--marigold-l); color: var(--marigold-d);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 17px;
}
.card__ico svg { width: 23px; height: 23px; }
.card__ico--jade { background: var(--jade-l); color: var(--jade); }
.card__ico--ink  { background: var(--paper-2); color: var(--ink); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding: 0; list-style: none; }
.tags li {
  margin: 0;
  font-size: .77rem; font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--line);
}

/* Country card row (online tuition) */
.flagcard { display: flex; gap: 14px; align-items: flex-start; }
.flagcard__flag { font-size: 1.9rem; line-height: 1; flex: none; }
.flagcard h3, .flagcard h4 { margin-bottom: .2em; font-size: 1.02rem; }
.flagcard p { font-size: .87rem; margin: 0; color: var(--ink-3); }

/* ==========================================================================
   Steps — genuinely sequential, so numbering carries meaning
   ========================================================================== */

.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  counter-increment: s;
  display: grid; grid-template-columns: 62px 1fr; gap: 22px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 1.05rem; font-weight: 500;
  color: var(--marigold-d);
  padding-top: 2px;
}
.step h3 { margin-bottom: .25em; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.section--ink .step { border-color: rgba(255,255,255,.14); }
.section--ink .step p { color: #b9c8de; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--marigold);
  border-radius: var(--r);
  padding: 26px;
  display: flex; flex-direction: column;
}
.quote__stars { color: var(--marigold); letter-spacing: 2px; margin-bottom: 13px; font-size: .95rem; }
.quote__body { font-size: .97rem; color: var(--ink-2); flex: 1; }
.quote__who { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--paper-2); }
.quote__name { font-weight: 700; font-size: .93rem; }
.quote__meta { font-family: var(--mono); font-size: .71rem; color: var(--ink-3); letter-spacing: .05em; margin-top: 3px; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 21px 44px 21px 0;
  font-weight: 700; font-size: 1.02rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.4rem; font-weight: 400;
  color: var(--marigold-d);
  transition: transform .2s;
}
.faq details[open] summary::after { content: "\2013"; }
.faq__a { padding: 0 0 22px; color: var(--ink-2); font-size: .96rem; max-width: 72ch; }

/* ==========================================================================
   Forms (multi-step → WhatsApp)
   ========================================================================== */

.formcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.formcard__hd {
  padding: 24px 28px;
  background: var(--ink);
  color: var(--white);
}
.formcard__hd h3 { color: var(--white); margin-bottom: .2em; }
.formcard__hd p { font-size: .88rem; color: #b3c4dc; margin: 0; }
.formcard__hd--jade { background: var(--jade); }
.formcard__bd { padding: 28px; }

.prog { display: flex; gap: 7px; margin-bottom: 26px; }
.prog__seg { height: 4px; flex: 1; background: var(--paper-2); border-radius: 100px; transition: background .3s; }
.prog__seg.is-done { background: var(--marigold); }

.fstep { display: none; }
.fstep.is-active { display: block; animation: fade .28s ease; }
.fstep__ttl {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
}

.field { margin-bottom: 17px; }
.field label {
  display: block; font-size: .82rem; font-weight: 700;
  margin-bottom: 7px; color: var(--ink-2);
}
.field .req { color: var(--marigold-d); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--body); font-size: .97rem;
  padding: 13px 15px;
  border: 1.5px solid var(--line-2);
  border-radius: 11px;
  background: var(--white);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--marigold);
  box-shadow: 0 0 0 3px rgba(232,145,45,.17);
}
.field textarea { min-height: 92px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a739b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; padding-right: 40px; }
.field small { display: block; font-size: .78rem; color: var(--ink-3); margin-top: 6px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #d4342b; }
.field__err { display: none; font-size: .79rem; color: #d4342b; margin-top: 6px; font-weight: 600; }
.field.has-error .field__err { display: block; }

.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

/* chip multi-select */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; cursor: pointer;
  font-size: .85rem; font-weight: 600;
  padding: 9px 15px; border-radius: 100px;
  border: 1.5px solid var(--line-2); background: var(--white); color: var(--ink-2);
  transition: all .15s;
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--marigold); outline-offset: 2px; }

.consent {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .81rem; color: var(--ink-3); line-height: 1.55;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 15px; margin-bottom: 18px;
}
.consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--marigold-d); }

.fnav { display: flex; gap: 11px; margin-top: 22px; }
.fnav .btn { flex: 1; }

.review-box {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; padding: 17px 19px; margin-bottom: 18px;
  font-family: var(--mono); font-size: .81rem; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto; color: var(--ink-2);
}

.form-note {
  font-size: .8rem; color: var(--ink-3); text-align: center; margin-top: 14px;
}

/* ==========================================================================
   Floating actions
   ========================================================================== */

.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(37,211,102,.44);
  text-decoration: none;
  transition: transform .18s;
}
.fab:hover { transform: scale(1.07); }
.fab svg { width: 30px; height: 30px; }
.fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa); animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 70%,100% { transform: scale(1.5); opacity: 0; } }

.mobar { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr { background: var(--ink); color: #a9bcd6; padding-block: clamp(48px, 6vw, 72px) 0; }
.ftr a { color: #a9bcd6; text-decoration: none; }
.ftr a:hover { color: var(--white); }
.ftr__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 34px; }
.ftr h4 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--marigold);
  margin-bottom: 16px; font-weight: 500;
}
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 10px; font-size: .92rem; }
.ftr__brand .brand__name { color: var(--white); }
.ftr__brand .brand__sub { color: #7d92b1; }
.ftr__blurb { font-size: .9rem; margin: 16px 0 20px; max-width: 34ch; }
.ftr__num {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .88rem; color: var(--white);
  margin-bottom: 5px;
}
.ftr__num svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.ftr__numlbl { font-size: .74rem; color: #7d92b1; font-family: var(--body); margin-bottom: 13px; }
.ftr__social { display: flex; gap: 9px; margin-top: 4px; }
.ftr__social a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  display: flex; align-items: center; justify-content: center;
}
.ftr__social a:hover { background: rgba(255,255,255,.14); }
.ftr__social svg { width: 17px; height: 17px; }
.ftr__bot {
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.13);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .84rem;
}
.ftr__legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ==========================================================================
   Legal pages (privacy / terms) — text preserved verbatim
   ========================================================================== */

.legal { background: var(--white); }
.legal__hero {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(44px, 6vw, 72px);
}
.legal__hero h1 { color: var(--white); }
.legal__hero p { color: #b9c8de; margin: 0; }
.legal__body { padding-block: clamp(40px, 5vw, 66px); }
.legal__body h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  margin-top: 2.2em; padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 { font-size: 1.12rem; margin-top: 1.9em; }
.legal__body ul { padding-left: 1.25em; }
.legal__body li { color: var(--ink-2); }
.legal__updated {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-3);
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
}
.legal__contact {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.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;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.hide { display: none !important; }

/* Call-out band */
.band {
  background: var(--marigold-l);
  border: 1px solid #f3d9b4;
  border-radius: var(--r);
  padding: 24px 26px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.band__txt { flex: 1; min-width: 240px; }
.band__txt h3 { margin-bottom: .2em; }
.band__txt p { margin: 0; font-size: .93rem; color: var(--ink-2); }

/* Split CTA (parents | tutors) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split__side {
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 42px);
  display: flex; flex-direction: column;
}
.split__side--parents { background: var(--white); border: 1px solid var(--line); }
.split__side--tutors  { background: var(--ink); color: #b9c8de; }
.split__side--tutors h3 { color: var(--white); }
.split__side p { flex: 1; font-size: .96rem; }
.split__side .btn-row { margin-top: 22px; }
.split__num {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .05em;
  margin-top: 14px; color: var(--ink-3);
}
.split__side--tutors .split__num { color: #7d92b1; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .fab { bottom: 78px; }

  /* sticky mobile action bar */
  .mobar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(16,35,63,.09);
  }
  .mobar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 8px; font-size: .9rem; font-weight: 700;
    text-decoration: none; color: var(--ink);
  }
  .mobar a + a { border-left: 1px solid var(--line); }
  .mobar svg { width: 17px; height: 17px; }
  .mobar a.is-wa { color: var(--wa-d); }
  body { padding-bottom: 56px; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .field-2 { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 100%; }
  .track { width: 100%; }
  .track__btn { flex: 1; justify-content: center; padding: 11px 10px; font-size: .8rem; }
  .step { grid-template-columns: 44px 1fr; gap: 14px; }
  .formcard__bd, .formcard__hd { padding: 22px 19px; }
  .bridge { padding: 22px 18px 18px; }
}

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

@media print {
  .hdr, .mobar, .fab, .ftr, .track { display: none !important; }
  body { background: #fff; }
}

/* fieldset group label (chip multi-selects) */
.fs-lbl {
  display: block; font-size: .82rem; font-weight: 700;
  margin-bottom: 9px; color: var(--ink-2);
}

/* ==========================================================================
   PRICING
   ========================================================================== */

.price-hero {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 26px;
  backdrop-filter: blur(6px);
}
.price-hero__lbl {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--marigold); margin: 0 0 14px;
}
.price-hero__fig { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.price-hero__cur { font-family: var(--display); font-size: 1.5rem; color: #b9c8de; }
.price-hero__amt {
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "WONK" 1;
  font-size: clamp(2.6rem, 6vw, 3.5rem); font-weight: 700;
  color: var(--white); line-height: 1; letter-spacing: -.03em;
}
.price-hero__per { font-size: .95rem; color: #92a6c2; }
.price-hero__sub { font-size: .87rem; color: #bccbe0; margin: 0; }

/* estimator */
.est { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.est__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.est__lbl { font-size: .85rem; color: #bccbe0; }
.est__ctl { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.09); border-radius: 100px; padding: 3px; }
.est__btn {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--white);
  font-family: var(--mono); font-size: 1.05rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.est__btn:hover { background: rgba(255,255,255,.16); }
.est__btn:disabled { opacity: .3; cursor: not-allowed; }
.est__val {
  min-width: 26px; text-align: center;
  font-family: var(--mono); font-size: .95rem; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.est__out {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: rgba(232,145,45,.14); border: 1px solid rgba(232,145,45,.3);
  border-radius: 12px; padding: 13px 16px; margin-top: 4px;
}
.est__out-lbl { font-size: .8rem; color: #e8c9a0; }
.est__out-val {
  font-family: var(--mono); font-size: 1.25rem; font-weight: 500;
  color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.est__note { font-size: .76rem; color: #8fa3c0; margin: 11px 0 0; line-height: 1.5; }

/* pricing cards in-page */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 26px;
  display: flex; flex-direction: column; position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan--feat { border-color: var(--marigold); border-width: 2px; }
.plan__tag {
  position: absolute; top: -12px; left: 26px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--marigold); color: #3b2100; font-weight: 700;
  padding: 5px 12px; border-radius: 100px;
}
.plan__name { font-family: var(--body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.plan__fig { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.plan__cur { font-family: var(--display); font-size: 1.25rem; color: var(--ink-3); }
.plan__amt {
  font-family: var(--display); font-variation-settings: "opsz" 100, "WONK" 1;
  font-size: 3rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.03em;
}
.plan__per { font-size: .9rem; color: var(--ink-3); }
.plan__from { font-size: .82rem; color: var(--marigold-d); font-weight: 700; margin-bottom: 18px; }
.plan__list { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .91rem; color: var(--ink-2); margin-bottom: 10px;
}
.plan__list svg { width: 17px; height: 17px; color: var(--jade); flex: none; margin-top: 3px; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.cmp { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem; }
.cmp thead th { background: var(--ink); color: var(--white); font-family: var(--body); font-weight: 700; font-size: .85rem; letter-spacing: .03em; }
.cmp thead th:first-child { background: var(--ink-2); }
.cmp tbody th { font-weight: 700; color: var(--ink); background: var(--paper); width: 30%; }
.cmp td { color: var(--ink-2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr { transition: background .15s; }
.cmp tbody tr:hover td { background: var(--marigold-l); }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   VERIFICATION LADDER
   ========================================================================== */

.ladder { counter-reset: v; display: grid; gap: 14px; }
.vstep {
  counter-increment: v;
  display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 22px;
  transition: border-color .2s, transform .2s;
}
.vstep:hover { border-color: var(--marigold); transform: translateX(4px); }
.vstep::before {
  content: counter(v);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-family: var(--mono); font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.vstep h3, .vstep h4 { margin-bottom: .25em; font-size: 1.05rem; }
.vstep p { margin: 0; font-size: .9rem; color: var(--ink-2); }

/* ==========================================================================
   AREA COVERAGE CHIPS
   ========================================================================== */

.areas { display: flex; flex-wrap: wrap; gap: 9px; }
.area {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 600;
  padding: 9px 15px; border-radius: 100px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-2);
  transition: all .16s;
}
.area:hover { border-color: var(--marigold); color: var(--ink); transform: translateY(-2px); }
.area::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); flex: none; }

/* ==========================================================================
   SUBJECT FILTER
   ========================================================================== */

.filter { position: relative; max-width: 460px; margin-bottom: 30px; }
.filter input {
  width: 100%; font-family: var(--body); font-size: 1rem;
  padding: 15px 18px 15px 48px;
  border: 1.5px solid var(--line-2); border-radius: 100px; background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.filter input:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 3px rgba(232,145,45,.17); }
.filter svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--ink-3); }
.filter__count { font-size: .84rem; color: var(--ink-3); margin-top: 10px; padding-left: 6px; }
.is-filtered-out { display: none !important; }
.tags li.is-hit { background: var(--marigold); border-color: var(--marigold); color: #3b2100; }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */

.sprog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--marigold), var(--jade));
  z-index: 100; transition: width .08s linear;
}

/* ==========================================================================
   ANIMATION — page load sequence
   ========================================================================== */

@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .btn-row,
.hero .hero__pills,
.hero .track { animation: riseIn .55s cubic-bezier(.22,.68,.35,1) backwards; }
.hero .track   { animation-delay: .02s; }
.hero .eyebrow { animation-delay: .04s; }
.hero h1       { animation-delay: .10s; }
.hero .lede    { animation-delay: .17s; }
.hero .btn-row { animation-delay: .24s; }
.hero .hero__pills { animation-delay: .30s; }

.hero__aside { animation: riseIn .6s cubic-bezier(.22,.68,.35,1) .34s backwards; }

/* counted numbers should not reflow while ticking */
.stat__n { font-variant-numeric: tabular-nums; }

/* FAQ smooth open */
.faq details { overflow: hidden; }
.faq__a { animation: riseIn .3s ease; }
.faq summary { transition: color .15s; }
.faq summary:hover { color: var(--marigold-d); }

/* ==========================================================================
   RESPONSIVE — new components
   ========================================================================== */

@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
@media (max-width: 620px)  { .cmp th, .cmp td { padding: 12px 13px; font-size: .87rem; } .plan { padding: 26px 22px; } }

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero .btn-row,
  .hero .hero__pills, .hero .track, .hero__aside, .faq__a { animation: none !important; }
  .sprog { transition: none; }
}

/* ==========================================================================
   CURRENCY BAR — always visible, never hidden behind a control
   ========================================================================== */

.curbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.curbar__lbl {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  flex: none;
}
.curbar__opts { display: flex; flex-wrap: wrap; gap: 7px; }

.curpill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 100px; padding: 8px 14px; cursor: pointer;
  font-family: var(--body); font-size: .84rem; font-weight: 700; color: var(--ink-2);
  transition: all .16s ease;
  white-space: nowrap;
}
.curpill:hover { border-color: var(--marigold); transform: translateY(-2px); color: var(--ink); }
.curpill[aria-checked="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--white);
  box-shadow: 0 4px 12px rgba(16,35,63,.22);
}
.curpill__flag { font-size: 1.05rem; line-height: 1; }
.curpill__amt {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  opacity: .72; padding-left: 6px; margin-left: 2px;
  border-left: 1px solid currentColor;
}
.curpill[aria-checked="true"] .curpill__amt { opacity: .9; }

/* centred variant under a section heading */
.curbar--center { justify-content: center; }
.curbar--center .curbar__opts { justify-content: center; }

/* on dark surfaces (hero, ink sections) */
.hero .curbar,
.section--ink .curbar {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.hero .curbar__lbl,
.section--ink .curbar__lbl { color: var(--marigold); }
.hero .curpill,
.section--ink .curpill {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: #d3dded;
}
.hero .curpill:hover,
.section--ink .curpill:hover { border-color: var(--marigold); color: var(--white); }
.hero .curpill[aria-checked="true"],
.section--ink .curpill[aria-checked="true"] {
  background: var(--marigold); border-color: var(--marigold); color: #3b2100;
  box-shadow: 0 4px 14px rgba(232,145,45,.34);
}

/* compact variant that sits inside the hero price card */
.curbar--tight {
  padding: 0; background: transparent !important; border: 0 !important;
  gap: 8px; margin-top: 16px;
}
.curbar--tight .curpill { padding: 6px 11px; font-size: .78rem; }
.curbar--tight .curpill__amt { display: none; }

@media (max-width: 620px) {
  .curbar { padding: 14px; gap: 10px; }
  .curbar__lbl { width: 100%; }
  .curpill { padding: 7px 12px; font-size: .79rem; }
  .curpill__amt { display: none; }
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */

[data-theme="dark"] {
  --ink:     #e8eef7;
  --ink-2:   #b3c3d8;
  --ink-3:   #8296b2;
  --paper:   #0d1826;
  --paper-2: #14243a;
  --white:   #101f33;
  --line:    #22374f;
  --line-2:  #2e4763;
  --marigold-l: #2a2013;
  --jade-l:  #102a26;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
}
[data-theme="dark"] .hdr { background: rgba(13,24,38,.9); }
[data-theme="dark"] .hero { background: radial-gradient(900px 460px at 88% -6%, rgba(232,145,45,.13), transparent 62%), #081221; }
[data-theme="dark"] .section--ink { background: #081221; }
[data-theme="dark"] .ftr { background: #081221; }
[data-theme="dark"] .cmp thead th { background: #081221; }
[data-theme="dark"] .cmp tbody th { background: var(--paper-2); }
[data-theme="dark"] .plan__tag { color: #241300; }
[data-theme="dark"] .btn--gold { color: #241300; }
[data-theme="dark"] .mobar { background: var(--white); }

.theme-btn {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--white); border: 1px solid var(--line-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink-2);
  transition: all .16s;
}
.theme-btn:hover { border-color: var(--marigold); color: var(--ink); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .ico-sun  { display: none; }
[data-theme="dark"] .theme-btn .ico-sun  { display: block; }
[data-theme="dark"] .theme-btn .ico-moon { display: none; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */

.totop {
  position: fixed; right: 18px; bottom: 86px; z-index: 79;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .24s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { border-color: var(--marigold); }
.totop svg { width: 19px; height: 19px; }
@media (max-width: 860px) { .totop { bottom: 146px; } }

/* ==========================================================================
   SITE SEARCH
   ========================================================================== */

.sitesearch { position: relative; flex: none; width: 210px; }
.sitesearch input {
  width: 100%; font-family: var(--body); font-size: .87rem;
  padding: 9px 13px 9px 36px;
  border: 1px solid var(--line-2); border-radius: 100px;
  background: var(--white); color: var(--ink);
}
.sitesearch input:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 3px rgba(232,145,45,.16); }
.sitesearch > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-3); }
.sitesearch__kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; pointer-events: none;
}
.sitesearch__res {
  position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 96;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px;
  display: none;
}
.sitesearch__res.is-on { display: block; }
.sitesearch__res a {
  display: block; padding: 9px 11px; border-radius: 8px;
  font-size: .88rem; text-decoration: none; color: var(--ink-2);
}
.sitesearch__res a:hover { background: var(--paper); color: var(--ink); }
.sr-none { display: block; padding: 10px 11px; font-size: .84rem; color: var(--ink-3); }
@media (max-width: 1100px) { .hdr .sitesearch { display: none; } }
.mnav .sitesearch { width: 100%; margin-top: 14px; }

/* ==========================================================================
   BOOKER / CHIP BUTTONS
   ========================================================================== */

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 68px; padding: 11px 13px; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 12px;
  font-family: var(--body); font-size: .84rem; color: var(--ink-2);
  transition: all .16s;
}
.chipbtn:hover { border-color: var(--marigold); transform: translateY(-2px); }
.chipbtn.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chipbtn strong { font-size: .88rem; font-weight: 700; }
.chipbtn span { font-family: var(--mono); font-size: .72rem; opacity: .75; }
.chipbtn--wide { min-width: 0; flex-direction: row; padding: 11px 16px; }

.tool {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow);
}
.tool__lbl {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px;
}
.tool + .tool { margin-top: 22px; }

/* ==========================================================================
   COUNTDOWNS
   ========================================================================== */

.cds { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.cd {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 16px; text-align: center;
  transition: transform .18s, border-color .18s;
}
.cd:hover { transform: translateY(-3px); border-color: var(--marigold); }
.cd__n {
  font-family: var(--display); font-variation-settings: "opsz" 100, "WONK" 1;
  font-size: 2.35rem; font-weight: 700; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd__u { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.cd__e { font-size: .88rem; font-weight: 700; margin-top: 12px; color: var(--ink); line-height: 1.3; }
.cd__r { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); margin-top: 5px; }
.cd.is-near { border-color: var(--marigold); background: var(--marigold-l); }
.cd.is-near .cd__n { color: var(--marigold-d); }

/* ==========================================================================
   STUDY PLANNER OUTPUT
   ========================================================================== */

.plan-sum {
  background: var(--marigold-l); border: 1px solid #f3d9b4;
  border-radius: 11px; padding: 13px 16px; font-size: .93rem; color: var(--ink-2);
  margin-bottom: 16px;
}
[data-theme="dark"] .plan-sum { border-color: #4a3a1c; }
.plan-split { list-style: none; padding: 0; margin: 0 0 14px; }
.plan-split li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 7px; border-radius: 9px;
  background: var(--paper); overflow: hidden; font-size: .9rem;
}
.plan-split__bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(232,145,45,.18); }
.plan-split__lbl { position: relative; flex: 1; font-weight: 600; color: var(--ink); }
.plan-split__val { position: relative; font-family: var(--mono); font-size: .85rem; color: var(--ink-2); }
.plan-note { font-size: .82rem; color: var(--ink-3); margin: 0; }

.tzc-out {
  background: var(--jade-l); border: 1px solid var(--jade);
  border-radius: 11px; padding: 14px 16px; margin-top: 14px;
  font-size: .95rem; color: var(--ink-2); text-align: center;
}

/* ==========================================================================
   ASK CHIPS
   ========================================================================== */

.askrow { display: flex; flex-wrap: wrap; gap: 8px; }
.askchip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 100px;
  padding: 10px 16px; font-family: var(--body); font-size: .86rem; font-weight: 600; color: var(--ink-2);
  transition: all .16s;
}
.askchip:hover { border-color: var(--wa); color: var(--wa-d); transform: translateY(-2px); }
.askchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wa); flex: none; }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.crumbs {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  font-size: .82rem; color: var(--ink-3); padding-block: 14px;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--marigold-d); }
.crumbs span[aria-current] { color: var(--ink-2); font-weight: 600; }
.crumbs .sep { opacity: .5; }
.hero .crumbs, .hero .crumbs a { color: #8fa3c0; }
.hero .crumbs span[aria-current] { color: #c9d6e6; }

/* ==========================================================================
   RELATED LINKS
   ========================================================================== */

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rel {
  display: block; padding: 20px 22px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  transition: all .18s;
}
.rel:hover { border-color: var(--marigold); transform: translateY(-3px); box-shadow: var(--shadow); }
.rel__k { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--marigold-d); }
.rel__t { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-top: 6px; }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* ==========================================================================
   404
   ========================================================================== */

.e404 { text-align: center; padding-block: clamp(60px, 10vw, 120px); }
.e404__n {
  font-family: var(--display); font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: clamp(5rem, 18vw, 10rem); font-weight: 700; line-height: 1;
  color: var(--marigold); letter-spacing: -.04em;
}

/* ==========================================================================
   ALTERNATE SEND CHANNELS
   WhatsApp reaches ~1 in 3 US adults. Overseas parents need another door.
   ========================================================================== */

.altsend {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--line-2);
}
.altsend__lbl {
  display: block; font-size: .8rem; color: var(--ink-3);
  margin-bottom: 10px; text-align: center;
}
.altsend__row { display: flex; gap: 9px; }
.altsend__row .btn { flex: 1; }

/* second hero headline, styled as h1 but semantically a paragraph */
.h1-alt {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
  font-weight: 600; line-height: 1.12; letter-spacing: -.015em;
  font-size: clamp(2.15rem, 5.2vw, 3.65rem);
  color: var(--white); margin: 0 0 .5em; text-wrap: balance;
}
.h1-alt em {
  font-style: normal; color: var(--marigold);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60;
}

/* ==========================================================================
   CONTRAST FIX — eyebrow text was 3.26:1, below AA for small text
   ========================================================================== */

:root { --marigold-text: #9a5800; }
[data-theme="dark"] { --marigold-text: #f0a94a; }
.eyebrow { color: var(--marigold-text); }
.rel__k, .plan__from { color: var(--marigold-text); }

/* ==========================================================================
   HOMEPAGE QUICK ENQUIRY
   Two steps, on the page. Every extra click before a form costs enquiries.
   ========================================================================== */

.quickform {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}
.quickform__copy .lede { color: #bccbe0; }
.quickform__pts { list-style: none; padding: 0; margin: 24px 0 0; }
.quickform__pts li {
  display: flex; align-items: center; gap: 11px;
  font-size: .93rem; color: #d3dded; margin-bottom: 11px;
}
.quickform__pts li::before {
  content: ""; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--marigold);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.quickform .formcard { box-shadow: 0 24px 70px rgba(0,0,0,.36); }

@media (max-width: 900px) {
  .quickform { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   MOBILE POLISH
   ========================================================================== */

@media (max-width: 620px) {
  /* long pages had too much air between blocks on a phone */
  .section       { padding-block: clamp(42px, 11vw, 60px); }
  .section--tight{ padding-block: 32px; }
  .section-head  { margin-bottom: 26px; }

  /* tables scroll instead of squashing */
  .cmp { min-width: 520px; }
  .cmp-wrap { margin-inline: -22px; padding-inline: 22px; }
  .cmp-wrap::after {
    content: "Scroll for more \\2192";
    display: block; font-family: var(--mono); font-size: .7rem;
    color: var(--ink-3); padding-top: 9px;
  }

  /* stop stat numbers wrapping */
  .stat__n { font-size: 1.6rem; }
  .stat    { padding: 20px 12px; }
  .stat__l { font-size: .62rem; letter-spacing: .07em; }

  /* the ask chips were cramped */
  .askchip, .curpill { font-size: .82rem; padding: 9px 13px; }

  /* keep the sticky bar clear of the last CTA */
  .split__side:last-child { margin-bottom: 8px; }
}

/* Tap targets: nothing interactive below 44px on touch devices */
@media (pointer: coarse) {
  .btn--sm  { padding: 13px 18px; }
  .curpill, .askchip, .area { min-height: 44px; }
  .est__btn { width: 40px; height: 40px; }
  .faq summary { padding-block: 24px; }
  .nav a { padding: 12px 13px; }
}

/* ==========================================================================
   DRAFT NOTICE
   ========================================================================== */

.draft-note {
  background: var(--jade-l); border: 1px solid var(--jade);
  border-radius: 10px; padding: 11px 14px; margin: 0 0 18px;
  font-size: .84rem; color: var(--ink-2);
}
.draft-clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--jade);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ==========================================================================
   TUTOR EARNINGS ESTIMATOR
   ========================================================================== */

.earn__out {
  background: var(--ink); color: var(--white);
  border-radius: var(--r); padding: 22px 24px; margin: 18px 0 6px;
  text-align: center;
}
.earn__fig {
  font-family: var(--display); font-variation-settings: "opsz" 100, "WONK" 1;
  font-size: clamp(1.7rem, 4.4vw, 2.35rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em;
}
.earn__sub { font-family: var(--mono); font-size: .76rem; color: #92a6c2; margin-top: 7px; }
.earn__note { font-size: .8rem; color: var(--ink-3); margin: 12px 0 0; line-height: 1.55; }

/* ==========================================================================
   TEXT SIZE + SHARE BUTTONS
   ========================================================================== */

.textsize {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--white); border: 1px solid var(--line-2); cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  color: var(--ink-2); transition: all .16s;
  display: flex; align-items: center; justify-content: center;
}
.textsize:hover { border-color: var(--marigold); color: var(--ink); }

.sharebtn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--line-2); border-radius: 100px;
  padding: 10px 17px; font-family: var(--body); font-size: .86rem; font-weight: 700;
  color: var(--ink-2); transition: all .16s;
}
.sharebtn:hover { border-color: var(--wa); color: var(--wa-d); transform: translateY(-2px); }
.sharebtn svg { width: 16px; height: 16px; }
.section--ink .sharebtn { color: #d3dded; border-color: rgba(255,255,255,.28); }
.section--ink .sharebtn:hover { border-color: var(--wa); color: var(--white); }

/* ==========================================================================
   PRINT — a parent forwarding fees to a spouse
   ========================================================================== */

@media print {
  .hdr, .mobar, .fab, .track, .totop, .sprog,
  .curbar, .altsend, .askrow, .quickform .formcard, .sitesearch,
  .ftr__grid, .ftr__social, .ftr__legal { display: none !important; }

  /* keep a contact line on the printed page */
  .ftr { background: #fff !important; color: #000 !important; padding: 0 !important;
         border-top: 1px solid #999; margin-top: 18pt; }
  .ftr__bot { border: 0 !important; padding-top: 8pt !important; font-size: 9pt; }
  .ftr::after {
    content: "Achievers Home Tuitions  ·  Tuition enquiries +91 86990 09555  ·  Tutor registration +91 92169 91555  ·  hometutorsindia@gmail.com";
    display: block; font-size: 9pt; padding-top: 8pt; color: #000;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 14pt; page-break-inside: avoid; }
  .hero { background: #fff !important; color: #000 !important; }
  .hero h1, .hero .lede, .h1-alt { color: #000 !important; }
  .plan, .card, .cmp { break-inside: avoid; border: 1px solid #999 !important; }
  .plan__amt, .stat__n { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .section--ink, .split__side--tutors { background: #fff !important; color: #000 !important; }
  .section--ink h2, .section--ink h3, .split__side--tutors h3 { color: #000 !important; }
}

/* ==========================================================================
   RESTORED — these were deleted in error by the twelfth revision's
   "dead CSS" cleanup, whose pattern spanned two non-adjacent blocks.
   ========================================================================== */

/* Disabled-until-chosen buttons (slot finder, curriculum matcher, planner) */
.btn.is-idle { opacity: .45; pointer-events: none; cursor: not-allowed; }

/* INR reference line under a converted price */
.price-ref { font-size: .8rem; color: var(--ink-3); margin-top: 6px; }
.price-hero .price-ref { color: #8fa3c0; }

/* Slot finder */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.slot {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 13px 10px; cursor: pointer; min-height: 60px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; text-align: center;
  transition: border-color .16s, transform .16s, background .16s; font-family: var(--body);
}
.slot:hover { border-color: var(--marigold); transform: translateY(-2px); }
.slot.is-on { border-color: var(--jade); background: var(--jade-l); }
.slot__local { font-family: var(--mono); font-size: .98rem; font-weight: 500; color: var(--ink); }
.slot__ist   { font-size: .7rem; color: var(--ink-3); }
.slot.is-on .slot__local { color: var(--jade); }

/* Curriculum matcher */
.matcher {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow);
}
.matcher__out { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.matcher__out li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); margin: 0; }
.matcher__out svg { color: var(--jade); flex: none; margin-top: 3px; width: 17px; height: 17px; }
.matcher__head { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin-top: 20px; }

/* Worldwide country strip */
.countries { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.country {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: 10px 18px;
  font-size: .89rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.country:hover { border-color: var(--marigold); transform: translateY(-2px); box-shadow: var(--shadow); }
.country__flag { font-size: 1.15rem; line-height: 1; }
.section--ink .country { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #d3dded; }
.section--ink .country:hover { background: rgba(255,255,255,.13); }

/* FAQ search */
.faq-search { position: relative; max-width: 440px; margin-bottom: 24px; }
.faq-search input {
  width: 100%; font-family: var(--body); font-size: .97rem; color: var(--ink);
  padding: 13px 17px 13px 45px;
  border: 1.5px solid var(--line-2); border-radius: 100px; background: var(--white);
}
.faq-search input:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 3px rgba(232,145,45,.17); }
.faq-search svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }
.faq-count { font-size: .83rem; color: var(--ink-3); margin: 9px 0 0; }
.section--ink .faq-search input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: var(--white); }
.section--ink .faq-search input::placeholder { color: #8fa3c0; }
.section--ink .faq-count { color: #8fa3c0; }

@media (max-width: 860px) { .matcher__out { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .slots { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .matcher { padding: 22px 19px; }
}


/* ==========================================================================
   HEADER FIT — measured in a real browser. At 1366px the right-hand group
   was 578px wide and pushed "Find a Tutor" 241px off-screen.
   ========================================================================== */

.nav a { white-space: nowrap; padding-inline: 11px; }
.hdr__in { gap: 18px; }
.hdr__cta { gap: 8px; }
.textsize, .theme-btn { width: 38px; height: 38px; }

/* the inline search is a nice-to-have; drop it before anything important */
@media (max-width: 1560px) { .hdr .sitesearch { display: none; } }

/* below this the full nav cannot fit beside both buttons — use the menu.
   Measured: header fits cleanly to 1220px, overflows at 1216px. */
@media (max-width: 1240px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: flex; }
  .mobar { display: grid; }
}

/* ==========================================================================
   GRID OVERFLOW — grid and flex children default to min-width:auto, so a
   long <select> option forced cards wider than a phone screen.
   ========================================================================== */

.grid > *, .field-2 > *, .split > *, .quickform > *, .hero__grid > * { min-width: 0; }
select, input, textarea { max-width: 100%; }

/* ==========================================================================
   TAP TARGETS — footer contact links were 23px tall on phones
   ========================================================================== */

@media (pointer: coarse) {
  .ftr__num { min-height: 44px; }
  .ftr li a { display: inline-block; padding-block: 6px; }
}

/* ==========================================================================
   COUNSELLOR STATUS, TOAST, COUNTDOWN EMPTY STATE
   ========================================================================== */

/* online dot on the floating WhatsApp button */
.fab::before {
  content: ""; position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 13px; height: 13px; border-radius: 50%;
  background: #7CFFB2; border: 2px solid #fff;
}
.fab.is-away::before { background: var(--marigold); }
.fab.is-away::after { animation: none; opacity: 0; }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: #92a6c2; margin-top: 4px;
}
.status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.18);
}
.status.is-away::before { background: var(--marigold); box-shadow: 0 0 0 3px rgba(232,145,45,.18); }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 120;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 100px;
  padding: 12px 20px; font-size: .88rem; font-weight: 600;
  box-shadow: var(--shadow-lg); transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
[data-theme="dark"] .toast { background: #e8eef7; color: #0d1826; }

.cd-empty {
  grid-column: 1 / -1; text-align: center;
  background: var(--white); border: 1px dashed var(--line-2);
  border-radius: var(--r); padding: 26px; color: var(--ink-2); font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media print { .toast, .status { display: none !important; } }

/* ==========================================================================
   COOKIE BANNER — appears only when analytics is configured
   ========================================================================== */

.cookies {
  position: fixed; left: 18px; bottom: 18px; z-index: 110;
  max-width: 420px; width: calc(100% - 36px);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 18px 18px 16px;
  transform: translateY(16px); opacity: 0; visibility: hidden;
  transition: opacity .22s, transform .22s, visibility .22s;
}
.cookies.is-on { transform: none; opacity: 1; visibility: visible; }
.cookies__txt { font-size: .86rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.cookies__btns { display: flex; gap: 9px; }
.cookies__btns .btn { flex: 1; }            /* equal weight: rejecting is as easy as accepting */
.ftr__legal button[data-cookie-settings] {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
}
.ftr__legal button[data-cookie-settings]:hover { color: var(--white); }
@media (max-width: 860px) { .cookies { bottom: 74px; } }
@media print { .cookies { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cookies { transition: none; } }

/* ==========================================================================
   DARK-MODE CONTRAST FIX
   --------------------------------------------------------------------------
   The bug: --white meant both "card background" and "text on dark sections";
   --ink meant both "text colour" and "dark section background". Dark mode
   flips both, so headlines went dark-on-dark and panels went light-behind-
   light-text — 229 failures, some at 1.00:1.

   The fix: always-dark surfaces get their own tokens, which stay dark (and
   their text stays light) in BOTH themes. Measured, not eyeballed:
     --on-dark    15.7:1 light  / 18.8:1 dark
     --on-dark-2  10.1:1        / 12.0:1
     --on-dark-3   7.2:1        /  8.6:1
   ========================================================================== */

:root {
  color-scheme: light;                 /* native selects, date pickers, autofill */
  --surface-dark:   #10233f;
  --surface-dark-2: #1b3354;
  --on-dark:        #ffffff;
  --on-dark-2:      #c3d0e3;
  --on-dark-3:      #9fb1cf;
  --jade-deep:      #0a6356;
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface-dark:   #081221;
  --surface-dark-2: #13233b;
}

/* Always-dark surfaces */
.hero            { background-color: var(--surface-dark); color: var(--on-dark-2); }
.section--ink    { background: var(--surface-dark); color: var(--on-dark-2); }
.legal__hero     { background: var(--surface-dark); color: var(--on-dark-2); }
.ftr             { background: var(--surface-dark); }
.formcard__hd    { background: var(--surface-dark); color: var(--on-dark); }
.formcard__hd--jade { background: var(--jade-deep); }
.split__side--tutors { background: var(--surface-dark); color: var(--on-dark-2); }
.earn__out       { background: var(--surface-dark); color: var(--on-dark); }
.cmp thead th    { background: var(--surface-dark); color: var(--on-dark); }
.cmp thead th:first-child { background: var(--surface-dark-2); }

/* Headings on those surfaces */
.hero h1, .h1-alt,
.section--ink h2, .section--ink h3, .section--ink h4,
.legal__hero h1,
.formcard__hd h2, .formcard__hd h3,
.split__side--tutors h3 { color: var(--on-dark); }

/* Body and muted text on those surfaces */
.hero .lede, .section--ink .lede, .legal__hero p,
.section--ink .step p, .quickform__copy .lede,
.split__side--tutors p       { color: var(--on-dark-2); }
.formcard__hd p              { color: var(--on-dark-2); }
.formcard__hd--jade p        { color: #d8ece7; }
.split__side--tutors .split__num,
.earn__sub, .bridge__place, .bridge__day, .price-hero__per,
.price-hero .price-ref       { color: var(--on-dark-3); }

/* Eyebrows on dark surfaces use full marigold in both themes */
.hero .eyebrow, .legal__hero .eyebrow, .section--ink .eyebrow,
.split__side--tutors .eyebrow { color: var(--marigold); }

/* FAQs placed inside dark sections (light mode had this bug too) */
.section--ink .faq, .section--ink .faq details { border-color: rgba(255,255,255,.14); }
.section--ink .faq summary { color: var(--on-dark); }
.section--ink .faq__a      { color: var(--on-dark-2); }

/* Live figures inside the hero and time bridge */
.bridge__time, .bridge__note b, .price-hero__amt,
.est__btn, .est__val, .est__out-val { color: var(--on-dark); }

/* Footer */
.ftr__brand .brand__name, .ftr a:hover, .ftr__num { color: var(--on-dark); }

/* Hero track: the selected pill stays white-on-navy in both themes */
.track__btn[aria-selected="true"] { background: #ffffff; color: #10233f; }

/* Hover states that failed AA in light mode */
.btn--gold:hover { color: #2a1600; }                    /* was 3.51:1, now 4.94:1 */
.btn--wa:hover   { background: #0d7266; color: #fff; }  /* was 4.14:1, now 5.81:1 */

/* Switching theme should be instant, not a slow smear of transitions */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: none !important;
}

/* Light-mode items found by the same audit */
:root:not([data-theme="dark"]) { --ink-3: #546c93; }   /* muted text: 4.48 -> 4.96:1 on paper */
.quote__stars { color: #a65c08; }              /* rating stars: 2.47 -> 5.05:1 */
[data-theme="dark"] .quote__stars { color: var(--marigold); }
.e404__n { color: #c9740f; }                   /* large numeral: 2.29 -> 3.26:1 */
[data-theme="dark"] .e404__n { color: var(--marigold); }