/* ==========================================================================
   TuitionsTeacher — design tokens + primitives
   --------------------------------------------------------------------------
   Loaded LAST, after bootstrap / main / preset1 / responsive.

   Why a separate file: css/main.css is 3,447 lines of inherited theme code.
   Refactoring it on a live, revenue-bearing site is not worth the risk, so new
   work layers on top instead.

   Why every new class is prefixed `tt-`: main.css already defines generic names
   (.section, .card, .btn-primary...). An unprefixed class here would silently
   inherit inherited styles and behave differently per page.

   Every colour pair below was contrast-checked by calculation against WCAG 2.1
   AA. Ratios are recorded inline so a future change can be re-verified rather
   than eyeballed. See .claude/skills/design/SKILL.md.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  /* ---- navy: headings, footer ------------------------------------------ */
  --navy-900:#0B2545;        /* 15.39:1 on white */
  --navy-800:#12315F;        /* 11.64:1 on blue-50 */

  /* ---- blue: trust, links, primary action ------------------------------ */
  --blue-700:#0F53B3;        /* link on white 7.22:1 · on tint 6.53:1 */
  --blue-600:#1565D8;        /* primary fill · white on it 5.41:1 */
  --blue-100:#DBE9FC;
  --blue-50 :#EEF4FC;        /* section tint */

  /* ---- green: conversion + verified state ------------------------------ *
   * NOTE: the legacy brand green #00a651 is 3.19:1 and FAILS AA as text and
   * as a button fill. It is kept only where it is a non-text element.      */
  --green-700:#0C7A48;       /* CTA fill · white on it 5.39:1 */
  --green-600:#0E8C52;
  --green-50 :#E7F6EE;       /* verified chip bg · green-700 on it 4.83:1 */

  --amber-600:#B45309;       /* ratings 5.02:1 */

  /* ---- ink -------------------------------------------------------------- */
  --ink-900:#0F172A;         /* body 17.85:1 */
  --ink-700:#334155;         /* secondary 10.35:1 */
  --ink-500:#5B6B84;         /* muted FLOOR — 5.41 white / 4.89 tint. Never lighter. */

  /* ---- surfaces + lines -------------------------------------------------- */
  --white:#FFFFFF;
  --surface:#F7FAFD;
  --line:#E3EAF3;            /* decorative dividers ONLY — 1.23:1, not a control border */
  --line-control:#78818E;    /* input/select/checkbox borders — 3.94:1 */

  /* ---- subject accents: decorative only, never the sole indicator -------- */
  --s-maths:#3C9DEA; --s-science:#31B777; --s-english:#8433D0;
  --s-hindi:#F68E06; --s-commerce:#FD3E7C; --s-spoken:#10BAC9;

  /* ---- spacing: 8pt scale. Nothing outside this list. -------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* ---- radius: commit, never hedge. Inner < outer, always. --------------- */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* ---- elevation: fixed set, tinted navy. Black reads muddy over a blue
         page, so every shadow carries the navy hue. ---------------------- */
  --shadow-sm   :0 1px 2px rgba(11,37,69,.05);
  --shadow-card :0 1px 3px rgba(11,37,69,.06), 0 4px 12px rgba(11,37,69,.05);
  --shadow-lift :0 6px 18px rgba(11,37,69,.09);
  --shadow-float:0 12px 34px rgba(11,37,69,.12);

  /* ---- type -------------------------------------------------------------- */
  --font-display:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
  /* Noto Sans Devanagari is listed because neither Inter nor Plus Jakarta Sans
     covers Devanagari; without it Hindi text falls back to a mismatched face. */
  --font-body:'Inter','Noto Sans Devanagari','Segoe UI',Arial,sans-serif;

  /* ---- motion ------------------------------------------------------------ */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms; --t:200ms; --t-slow:300ms;

  /* ---- layout ------------------------------------------------------------ */
  --maxw:1180px;
  --gutter:24px;
}

@media (max-width:767px){
  :root{ --gutter:16px; }
}

/* ==========================================================================
   Primitives
   ========================================================================== */

/* Boxed container. Backgrounds go full-width; content never does.
   One width everywhere — mixing 1140/1180/1240 makes the page visibly wobble. */
.tt-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* Section rhythm. Never place two .tt-sec--white next to each other — they
   merge into one undifferentiated block. */
.tt-sec{ padding-top:var(--sp-9); padding-bottom:var(--sp-9); }
.tt-sec--white{ background:var(--white); }
.tt-sec--tint { background:var(--blue-50); }
.tt-sec--green{ background:var(--green-50); }
.tt-sec--navy { background:var(--navy-900); color:var(--white); }

@media (max-width:767px){
  .tt-sec{ padding-top:56px; padding-bottom:56px; }
}

/* ---- section header: identical rhythm on every section ------------------ */
.tt-eyebrow{
  font-family:var(--font-body);
  font-size:12px; font-weight:700; line-height:1.2;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--blue-700);
  margin:0 0 var(--sp-3);
}
.tt-h2{
  font-family:var(--font-display);
  font-size:36px; font-weight:800; line-height:1.2; letter-spacing:-.02em;
  color:var(--navy-900);
  margin:0 0 var(--sp-3);
  position:relative;
}
/* index.php's inline <style> declares `section h2:before` as a decorative grey
   bar and applies it to every h2 inside a <section>. A class outranks those
   element selectors for normal properties, but a pseudo-element it generates
   has to be switched off by name or it paints under every heading here. */
.tt-h2:before,.tt-h2:after{ content:none; }
.tt-lede{
  font-family:var(--font-body);
  font-size:16px; font-weight:400; line-height:1.65;
  color:var(--ink-700);
  max-width:60ch; margin:0 auto;
}
.tt-sec-head{ text-align:center; margin-bottom:var(--sp-7); }

@media (max-width:767px){
  .tt-h2{ font-size:26px; }
}

/* ==========================================================================
   Buttons
   One primary per section. Two competing CTAs halve both.
   ========================================================================== */
.tt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:0 var(--sp-5);
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1;
  text-decoration:none;
  cursor:pointer;                      /* Bootstrap 3 omits this on <a class="btn"> */
  /* colour + shadow only. transform:scale() shifts surrounding layout. */
  transition:background-color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             color var(--t) var(--ease);
}
.tt-btn:focus,.tt-btn:hover{ text-decoration:none; }

/* navigate */
.tt-btn--primary{ background:var(--blue-600); color:var(--white); }
.tt-btn--primary:hover,
.tt-btn--primary:focus{ background:#124FAF; color:var(--white); box-shadow:var(--shadow-lift); }

/* commit / convert */
.tt-btn--convert{ background:var(--green-700); color:var(--white); }
.tt-btn--convert:hover,
.tt-btn--convert:focus{ background:#0A6239; color:var(--white); box-shadow:var(--shadow-lift); }

/* paired with a primary */
.tt-btn--secondary{ background:var(--white); color:var(--blue-700); border-color:var(--blue-600); }
.tt-btn--secondary:hover,
.tt-btn--secondary:focus{ background:var(--blue-50); color:var(--blue-700); }

.tt-btn--block{ display:flex; width:100%; }

.tt-btn[disabled],.tt-btn.is-loading{ opacity:.6; pointer-events:none; }

@media (max-width:767px){
  .tt-btn{ min-height:44px; }        /* still clears the 44px touch target */
}

/* ghost: tertiary only */
.tt-btn--ghost{ background:transparent; color:var(--ink-700); }
.tt-btn--ghost:hover,
.tt-btn--ghost:focus{ background:var(--blue-50); color:var(--blue-700); }

/* compact variant for the header bar, still clearing the 44px touch target */
.tt-btn--sm{ min-height:44px; padding:0 var(--sp-4); font-size:15px; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.tt-nav{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t) var(--ease);
}
.tt-nav.is-scrolled{ box-shadow:var(--shadow-card); }

.tt-nav__inner{
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:76px;
}

.tt-nav__brand{ flex:none; display:flex; align-items:center; line-height:0; }
.tt-nav__brand img{ display:block; width:185px; height:auto; }

.tt-nav__menu{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  min-width:0;
}

.tt-nav__list{
  display:flex; align-items:center; gap:var(--sp-1);
  list-style:none; margin:0; padding:0;
}

.tt-nav__link{
  display:block; padding:10px var(--sp-3);
  border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:15px; font-weight:600; line-height:1.2;
  /* the legacy theme sets a global a{color:#fdcc52}; a class outranks it */
  color:var(--ink-700);
  text-decoration:none; white-space:nowrap;
  transition:color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.tt-nav__link:hover,
.tt-nav__link:focus{ color:var(--blue-700); background:var(--blue-50); text-decoration:none; }

/* current page: underline is drawn, not a border, so it can sit clear of the text */
.tt-nav__link.is-current{ color:var(--blue-700); position:relative; }
.tt-nav__link.is-current:after{
  content:""; position:absolute; left:var(--sp-3); right:var(--sp-3); bottom:2px;
  height:2px; border-radius:2px; background:var(--blue-600);
}

.tt-nav__actions{ display:flex; align-items:center; gap:var(--sp-2); flex:none; }

/* hamburger */
.tt-nav__toggle{
  display:none;
  width:44px; height:44px; margin-left:auto;
  padding:0 10px;
  /* The panel is a descendant of .tt-nav, so it shares this stacking context
     and its z-index:58 would paint over the button that closes it. Lifting the
     toggle above the panel keeps the close affordance visible and clickable. */
  position:relative; z-index:59;
  background:var(--white);
  border:1px solid var(--line-control);
  border-radius:var(--r-sm);
  cursor:pointer;
}
.tt-nav__toggle span{
  display:block; height:2px; border-radius:2px; background:var(--navy-900);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.tt-nav__toggle span + span{ margin-top:5px; }
.tt-nav.is-open .tt-nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.tt-nav.is-open .tt-nav__toggle span:nth-child(2){ opacity:0; }
.tt-nav.is-open .tt-nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.tt-nav__scrim{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:55;
  background:rgba(11,37,69,.45);
}

@media (max-width:1199px){
  .tt-nav__link{ padding:10px 10px; font-size:14px; }
  .tt-nav__brand img{ width:158px; }
}

@media (max-width:991px){
  .tt-nav__toggle{ display:block; }

  /* Only hide the panel once the script has confirmed it can reopen it.
     Without .tt-nav--js the menu stays in the flow and remains reachable. */
  .tt-nav--js .tt-nav__menu{
    position:fixed; top:0; right:0; bottom:0; z-index:58;
    width:min(86vw,360px);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:var(--sp-4);
    padding:var(--sp-8) var(--sp-5) var(--sp-5);
    background:var(--white);
    box-shadow:var(--shadow-float);
    transform:translateX(100%);
    visibility:hidden;
    overflow-y:auto;
    transition:transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
  }
  .tt-nav--js.is-open .tt-nav__menu{
    transform:translateX(0); visibility:visible;
    transition:transform var(--t-slow) var(--ease), visibility 0s;
  }

  .tt-nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .tt-nav__link{ padding:14px var(--sp-3); font-size:16px; }
  .tt-nav__link.is-current:after{ left:var(--sp-3); right:auto; width:22px; }

  .tt-nav__actions{ flex-direction:column; align-items:stretch; gap:var(--sp-2); }
  .tt-nav__actions .tt-btn{ width:100%; }
}

@media (max-width:767px){
  .tt-nav__inner{ min-height:64px; gap:var(--sp-3); }
  .tt-nav__brand img{ width:150px; }
}

/* ==========================================================================
   Chips
   ========================================================================== */
.tt-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:6px var(--sp-3);
  border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:14px; font-weight:600; line-height:1.2;
}
/* verified: the competitive advantage, not decoration.
   Deliberately a TINT + dark text, never the same solid fill as a buy button —
   users read colour as meaning before they read the label. */
.tt-chip--verified{ background:var(--green-50); color:var(--green-700); }
.tt-chip--trust   { background:var(--blue-50);  color:var(--blue-700);  }

/* ==========================================================================
   Cards
   ========================================================================== */
.tt-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
/* whole-card link */
.tt-card--link{ cursor:pointer; }
.tt-card--link:hover{ box-shadow:var(--shadow-lift); border-color:var(--blue-100); }

/* Reserve image space or the grid jumps as photos load. */
.tt-ratio{ position:relative; width:100%; overflow:hidden; border-radius:var(--r); background:var(--blue-50); }
.tt-ratio::before{ content:""; display:block; padding-top:100%; }
/* Longhand rather than `inset:0` — inset needs Chrome 87+, and a meaningful
   share of this audience is on older Android WebViews where it is ignored and
   the image would fall out of its box. */
.tt-ratio > img{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Forms
   ========================================================================== */
.tt-label{
  display:block; margin-bottom:var(--sp-2);
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink-700);
}
/* Screen-reader-only: a field may hide its label visually, but never omit it —
   a placeholder disappears on focus, exactly when the user needs it. */
.tt-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;
}
.tt-input,.tt-select{
  width:100%; min-height:48px;
  padding:0 var(--sp-3);
  border:1px solid var(--line-control);   /* --line is 1.23:1 and fails 3:1 for a control */
  border-radius:var(--r);
  background:var(--white);
  font-family:var(--font-body);
  font-size:16px;                          /* below 16px iOS zooms the field on focus */
  color:var(--ink-900);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tt-input::placeholder{ color:var(--ink-500); }
.tt-input:focus,.tt-select:focus{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(21,101,216,.15); }

.tt-error{ margin-top:var(--sp-2); font-size:14px; color:#B3261E; }

/* ==========================================================================
   Focus — outline-offset paints OUTSIDE the element, so the ring's contrast is
   measured against the page, not the button. Verified 5.41:1 on white and
   4.89:1 on --blue-50.
   ========================================================================== */
/* :focus-visible needs Chrome 86+ / Safari 15.4+. Older browsers would show no
   ring at all, so :focus supplies the baseline first and is then withdrawn only
   where :focus-visible is actually understood. */
.tt-btn:focus,.tt-nav__link:focus,.tt-sel__btn:focus,
.tt-input:focus,.tt-select:focus,.tt-nav__toggle:focus{
  outline:2px solid var(--blue-600);
  outline-offset:2px;
}
@supports selector(:focus-visible){
  .tt-btn:focus:not(:focus-visible),
  .tt-nav__link:focus:not(:focus-visible),
  .tt-sel__btn:focus:not(:focus-visible),
  .tt-nav__toggle:focus:not(:focus-visible){ outline:none; }
}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,
.tt-btn:focus-visible,.tt-card--link:focus-visible{
  outline:2px solid var(--blue-600);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ==========================================================================
   Icons — inline SVG, sized by the text around them.
   New sections use inline SVG rather than Font Awesome: the trust marks need
   two-tone treatment and exact colour, which an icon font cannot do. Legacy
   markup keeps FA; the rule is one set per section, not one per site.
   ========================================================================== */
.tt-ico{ width:1.25em; height:1.25em; flex:none; display:inline-block; vertical-align:-.22em; }

/* ==========================================================================
   HERO
   ========================================================================== */
.tt-hero{
  position:relative;
  /* ends in white so the search card reads as floating on the boundary,
     matching the client design without fragile negative-margin overlap
     against the legacy markup that follows. */
  background:linear-gradient(176deg,#EAF2FC 0%,#F2F7FD 46%,var(--white) 100%);
  padding:var(--sp-7) 0 var(--sp-8);
  /* No overflow:hidden here. The search panel's dropdown is absolutely
     positioned and extends past the section's bottom edge; clipping the
     section would cut the option list in half. Nothing inside overflows
     horizontally - the art is width:100% - so there is nothing to contain. */
}
.tt-hero__grid{
  display:flex; align-items:center; gap:var(--sp-7);
}
.tt-hero__copy{ flex:1 1 54%; min-width:0; }
.tt-hero__art { flex:1 1 46%; min-width:0; }

.tt-hero__art img{
  display:block; width:100%; height:auto;
  /* width/height are on the tag too, so the box is reserved before load and
     the hero does not jump. */
}

.tt-hero__badge{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-4);
  padding:7px 14px 7px 10px;
  background:var(--white);
  border:1px solid var(--blue-100);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-body);
  font-size:14px; font-weight:600; line-height:1;
  color:var(--blue-700);
}
/* "Trusted" is set as a solid pill, as in the client design. The shield sits
   inside it so the mark reads as one unit rather than an icon plus a word. */
.tt-hero__badge .tt-ico{ color:var(--white); margin-left:2px; }
.tt-hero__badge strong{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px 4px 8px;
  margin:0 2px;
  background:var(--green-700);
  color:var(--white);
  border-radius:var(--r-pill);
  font-weight:700;
}

.tt-hero__title{
  font-family:var(--font-display);
  font-size:56px; font-weight:800; line-height:1.08; letter-spacing:-.03em;
  color:var(--navy-900);
  margin:0 0 var(--sp-4);
}
.tt-hero__title span{ color:var(--blue-600); }

.tt-hero__sub{
  font-family:var(--font-body);
  font-size:17px; line-height:1.65; color:var(--ink-700);
  max-width:56ch;                      /* 65-75 char line length target */
  margin:0 0 var(--sp-5);
}

.tt-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-6); }

.tt-hero__trust{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-5);
  list-style:none; margin:0; padding:0;
}
.tt-hero__trust li{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-body);
  font-size:15px; font-weight:700; line-height:1.25;
  color:var(--blue-700);
}
.tt-hero__trust li .tt-ico{ width:26px; height:26px; color:var(--green-700); }
/* separators between trust marks, drawn rather than typed */
.tt-hero__trust li + li{
  padding-left:var(--sp-5);
  border-left:1px solid var(--blue-100);
}

/* ==========================================================================
   SEARCH PANEL — the hero's call to action
   ========================================================================== */
.tt-search{
  position:relative; z-index:2;
  margin-top:var(--sp-7);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-float);
  padding:var(--sp-5) var(--sp-5) var(--sp-5);
}
.tt-search__head{ margin-bottom:var(--sp-4); }
.tt-search__title{
  font-family:var(--font-display);
  font-size:22px; font-weight:700; line-height:1.3; letter-spacing:-.01em;
  color:var(--navy-900);
  margin:0 0 6px;
}
/* The page's inline <style> sets `section h2:before` to a decorative bar and
   `section h2` to 40px/centred. A class selector outranks those element
   selectors, but the pseudo-element has to be cancelled explicitly. */
.tt-search__title:before{ content:none; }
.tt-search__hint{
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  color:var(--ink-500); margin:0;
}

.tt-search__row{ display:flex; align-items:flex-end; gap:var(--sp-3); }
.tt-search__field{ flex:1 1 0; min-width:0; }
.tt-search__action{ flex:0 0 172px; }

.tt-search__control{ position:relative; }
.tt-search__lead{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--blue-600); pointer-events:none;
}
.tt-search__control .tt-input,
.tt-search__control .tt-select{ padding-left:40px; }

/* native select arrow room + consistent look across browsers */
.tt-search__control .tt-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:18px 18px;
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.tt-why__grid{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  list-style:none; margin:0; padding:0;
}
/* display:flex on the item, rather than height:100% on the card. A percentage
   height against an auto-height flex item resolves inconsistently, which left
   the four cards ragged whenever one title wrapped to two lines. */
.tt-why__grid > li{ display:flex; flex:1 1 calc(25% - var(--sp-5)); min-width:0; }

.tt-why__card{
  display:flex; flex-direction:column; align-items:flex-start;
  flex:1 1 auto;
  padding:var(--sp-5);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.tt-why__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:var(--r);
  margin-bottom:var(--sp-4);
}
.tt-why__ico svg{ width:26px; height:26px; }

.tt-why__title{
  font-family:var(--font-display);
  font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.01em;
  color:var(--navy-900);
  margin:0 0 var(--sp-2);
}
/* the legacy theme styles bare h3 too */
.tt-why__title:before,.tt-why__title:after,
.tt-how__title:before,.tt-how__title:after{ content:none; }

.tt-why__text{
  font-family:var(--font-body);
  font-size:15px; line-height:1.6; color:var(--ink-700);
  margin:0;
}

@media (max-width:991px){ .tt-why__grid > li{ flex:1 1 calc(50% - var(--sp-5)); } }
@media (max-width:575px){ .tt-why__grid > li{ flex:1 1 100%; } }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.tt-how__steps{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  list-style:none; margin:0 0 var(--sp-6); padding:0;
  counter-reset:none;
}
.tt-how__step{
  position:relative;
  flex:1 1 calc(33.333% - var(--sp-5)); min-width:0;
  padding:var(--sp-5);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
/* Connector between steps, drawn rather than the three line-*.png images this
   replaces - it scales with the layout and simply is not painted once the
   steps stack. */
.tt-how__step + .tt-how__step:before{
  content:"";
  position:absolute; top:46px; left:calc(var(--sp-5) * -1 - 1px);
  width:var(--sp-5); height:2px;
  background:var(--blue-100);
}
.tt-how__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  margin-bottom:var(--sp-4);
  border-radius:var(--r-pill);
  background:var(--blue-600); color:var(--white);
  font-family:var(--font-display); font-size:19px; font-weight:800; line-height:1;
}
.tt-how__title{
  font-family:var(--font-display);
  font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.01em;
  color:var(--navy-900);
  margin:0 0 var(--sp-2);
}
.tt-how__text{
  font-family:var(--font-body);
  font-size:15px; line-height:1.6; color:var(--ink-700);
  margin:0;
}
.tt-how__cta{ text-align:center; margin:0; }

@media (max-width:991px){
  .tt-how__step{ flex:1 1 100%; }
  .tt-how__step + .tt-how__step:before{ display:none; }
}
@media (max-width:767px){
  .tt-how__cta .tt-btn{ width:100%; }
}

/* ==========================================================================
   POPULAR SUBJECTS
   ========================================================================== */
.tt-subjects__grid{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  list-style:none; margin:0 0 var(--sp-6); padding:0;
}
/* 4 per row on desktop. Written as a basis + gap calculation rather than a
   percentage so the gap does not push the fourth card onto its own line. */
.tt-subjects__grid > li{ display:flex; flex:1 1 calc(25% - var(--sp-5)); min-width:0; }

.tt-subject{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-2);
  flex:1 1 auto;
  padding:var(--sp-5) var(--sp-3);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.tt-subject:hover,.tt-subject:focus{
  box-shadow:var(--shadow-lift); border-color:var(--blue-100); text-decoration:none;
}

.tt-subject__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:var(--r);      /* inner radius under the card's --r-lg */
  margin-bottom:var(--sp-1);
}
.tt-subject__ico svg{ width:28px; height:28px; }

.tt-subject__name{
  font-family:var(--font-display);
  font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.01em;
  color:var(--navy-900);
}
.tt-subject__meta{
  font-family:var(--font-body);
  font-size:14px; line-height:1.4; color:var(--ink-500);
}

.tt-subjects__more{ text-align:center; margin:0; }

/* Subject tones. The tint carries the colour and the glyph stays full strength,
   so the icon keeps contrast; colour is never the only signal because every
   card also carries its name. */
.tt-tone--maths   { background:rgba(60,157,234,.14);  color:#1B6FB5; }
.tt-tone--science { background:rgba(49,183,119,.16);  color:#127A4C; }
.tt-tone--english { background:rgba(132,51,208,.13);  color:#6B27AC; }
.tt-tone--hindi   { background:rgba(246,142,6,.16);   color:#9A5602; }
.tt-tone--commerce{ background:rgba(253,62,124,.13);  color:#BE1E51; }
.tt-tone--spoken  { background:rgba(16,186,201,.16);  color:#0A7480; }

@media (max-width:991px){
  .tt-subjects__grid > li{ flex:1 1 calc(33.333% - var(--sp-5)); }
}
@media (max-width:767px){
  .tt-subjects__grid{ gap:var(--sp-3); }
  .tt-subjects__grid > li{ flex:1 1 calc(50% - var(--sp-3)); }
  .tt-subject{ padding:var(--sp-4) var(--sp-2); }
  .tt-subject__ico{ width:48px; height:48px; }
  .tt-subject__ico svg{ width:24px; height:24px; }
  .tt-subject__name{ font-size:15px; }
  .tt-subjects__more .tt-btn{ width:100%; }
}

/* ==========================================================================
   STATS BAND
   Sits on the tint so it separates the hero from the sections below without a
   divider line. Deliberately shorter than a normal section - it is a band, not
   a section, and padding it to 96px would read as an empty gap.
   ========================================================================== */
.tt-stats{
  background:var(--blue-50);
  padding-top:var(--sp-6); padding-bottom:var(--sp-6);
}
.tt-stats__list{
  display:flex; align-items:center;
  list-style:none; margin:0; padding:0;
}
.tt-stats__item{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
}
/* Rules between, drawn rather than typed, so they never appear beside a
   wrapped item on small screens. */
.tt-stats__item + .tt-stats__item{ border-left:1px solid var(--blue-100); }

.tt-stats__ico{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:var(--r);
  background:var(--white);
  color:var(--blue-600);
  box-shadow:var(--shadow-sm);
}
.tt-stats__ico svg{ width:28px; height:28px; }

.tt-stats__text{ display:block; min-width:0; }
.tt-stats__num{
  display:block;
  font-family:var(--font-display);
  font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-.02em;
  color:var(--navy-900);
}
.tt-stats__label{
  display:block;
  font-family:var(--font-body);
  font-size:15px; line-height:1.4; color:var(--ink-700);
}

@media (max-width:767px){
  /* Three across at 375px would give each item ~110px and break the numbers
     onto two lines. Stack instead, and swap the vertical rules for horizontal
     ones so the separators still read. */
  .tt-stats{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
  .tt-stats__list{ flex-direction:column; align-items:stretch; }
  .tt-stats__item{
    justify-content:flex-start;
    padding:var(--sp-3) 0;
  }
  .tt-stats__item + .tt-stats__item{
    border-left:0;
    border-top:1px solid var(--blue-100);
  }
  .tt-stats__num{ font-size:26px; }
}

/* ==========================================================================
   tt-select — styled dropdown (see js/tt-select.js)

   The native <select> stays in the DOM and stays the thing that submits. It is
   hidden visually but NOT with display:none, because a hidden-but-present
   control keeps form behaviour and validation intact. On touch devices the
   script does not run at all, so the rules below simply never apply and the
   native picker shows through.
   ========================================================================== */
.tt-sel{ position:relative; }

.tt-sel__native{
  position:absolute; opacity:0; pointer-events:none;
  width:100%; height:100%; left:0; top:0; margin:0; border:0;
}

.tt-sel__btn{
  display:flex; align-items:center; gap:var(--sp-2);
  width:100%; min-height:48px;
  padding:0 34px 0 40px;              /* room for the lead icon and the chevron */
  background:var(--white);
  border:1px solid var(--line-control);
  border-radius:var(--r);
  font-family:var(--font-body); font-size:16px; line-height:1.2;
  color:var(--ink-900);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tt-sel.is-empty .tt-sel__btn{ color:var(--ink-500); }
.tt-sel__btn:hover{ border-color:var(--blue-600); }
.tt-sel.is-open .tt-sel__btn{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(21,101,216,.15); }

.tt-sel__value{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* chevron, drawn on the button so it can rotate when open */
.tt-sel__btn:after{
  content:""; position:absolute; right:12px; top:50%;
  width:18px; height:18px; margin-top:-9px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px 18px;
  transition:transform var(--t) var(--ease);
}
.tt-sel.is-open .tt-sel__btn:after{ transform:rotate(180deg); }

.tt-sel__list{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px;
  list-style:none;
  max-height:296px; overflow-y:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);          /* inner radius stays under the panel's --r-xl */
  box-shadow:var(--shadow-float);
}

.tt-sel__opt{
  padding:10px var(--sp-3);
  border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:15px; line-height:1.4;
  color:var(--ink-900);
  cursor:pointer;
  /* colour only — a transform here would nudge neighbours as the pointer moves */
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tt-sel__opt.is-placeholder{ color:var(--ink-500); }
.tt-sel__opt.is-active{ background:var(--blue-50); color:var(--blue-700); }
.tt-sel__opt[aria-selected="true"]{
  background:var(--blue-600); color:var(--white); font-weight:600;
}
.tt-sel__opt[aria-selected="true"].is-active{ background:var(--blue-700); }

/* The prompt row ("Select Subject") is selected by default but is not a
   choice, so it must not be painted like one - otherwise the list opens
   looking as though a subject is already picked. */
.tt-sel__opt.is-placeholder[aria-selected="true"]{
  background:transparent; color:var(--ink-500); font-weight:400;
}
.tt-sel__opt.is-placeholder.is-active{ background:var(--blue-50); color:var(--ink-700); }

/* scrollbar, so a long subject list does not show an OS-grey bar inside a
   rounded white card */
.tt-sel__list::-webkit-scrollbar{ width:10px; }
.tt-sel__list::-webkit-scrollbar-track{ background:transparent; box-shadow:none; border-radius:0; }
.tt-sel__list::-webkit-scrollbar-thumb{ background:#C6D2E4; border-radius:999px; border:3px solid var(--white); }
.tt-sel__list::-webkit-scrollbar-thumb:hover{ background:#A9BBD4; }

/* ---- hero responsive ---------------------------------------------------- */
@media (max-width:1199px){
  .tt-hero__title{ font-size:48px; }
}
@media (max-width:991px){
  .tt-hero{ padding:var(--sp-6) 0 var(--sp-7); }
  .tt-hero__grid{ flex-direction:column; gap:var(--sp-5); text-align:center; }
  .tt-hero__copy{ order:1; }
  .tt-hero__art { order:2; max-width:560px; }
  .tt-hero__title{ font-size:40px; }
  .tt-hero__sub{ margin-left:auto; margin-right:auto; }
  .tt-hero__cta,
  .tt-hero__trust{ justify-content:center; }

  .tt-search__row{ flex-wrap:wrap; }
  .tt-search__field{ flex:1 1 calc(50% - var(--sp-3)); }
  .tt-search__action{ flex:1 1 100%; }
}
@media (max-width:767px){
  .tt-hero__title{ font-size:34px; }
  .tt-hero__sub{ font-size:16px; }
  .tt-hero__cta{ flex-direction:column; align-items:stretch; }
  .tt-hero__cta .tt-btn{ width:100%; }

  /* trust marks: 3 across is too tight under 375px, so stack the rule away */
  .tt-hero__trust{ gap:var(--sp-3); justify-content:center; }
  .tt-hero__trust li{ font-size:14px; }
  .tt-hero__trust li + li{ padding-left:var(--sp-3); }

  .tt-search{ padding:var(--sp-4); border-radius:var(--r-lg); }
  .tt-search__field{ flex:1 1 100%; }
}

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