/* css/pages.css - the Part 10 public pages (legal, about, contact, stories), frame inc/page-ui.php.
   Loads without bootstrap / main.css, so it carries the base the shared header and footer need,
   like css/listing.css. Values come from tokens.css. Rhythm: hero tint, body white, band tint, footer navy. */

/* ---------------------------------------------------------------- base */
/* the sticky navbar's height: 76 + 1px border, 64 + 1 at <=767 (tokens.css .tt-nav__inner) */
:root{ --tt-pg-navh:77px; }
@media (max-width:767px){ :root{ --tt-pg-navh:65px; } }

html{ -webkit-text-size-adjust:100%; }
.tt-pg{ margin:0; background:var(--white); color:var(--ink-900);
  font:400 16px/1.65 var(--font-body); -webkit-font-smoothing:antialiased; }
.tt-pg *,.tt-pg *::before,.tt-pg *::after{ box-sizing:border-box; }
.tt-pg img{ max-width:100%; }
.tt-pg .tt-icon{ flex:none; }
.tt-pg-skip{ position:absolute; left:-9999px; top:var(--sp-2); z-index:100; padding:var(--sp-2) var(--sp-4);
  background:var(--white); color:var(--blue-700); border-radius:var(--r-sm); font-weight:600; }
.tt-pg-skip:focus{ left:var(--sp-4); }
.tt-pg a:focus-visible,.tt-pg button:focus-visible,.tt-pg summary:focus-visible{
  outline:2px solid var(--blue-600) !important; outline-offset:2px !important; }
/* blue-600 on the navy footer is 2.85:1; white is 15.39:1 */
.tt-pg .tt-foot a:focus-visible,.tt-pg .tt-foot button:focus-visible{ outline-color:var(--white) !important; }
.tt-pg-main:focus{ outline:none; }   /* focus target of the skip link, not a control */

/* ---------------------------------------------------------------- hero */
.tt-pg-hero{ background:var(--blue-50); }
.tt-pg-hero__in{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
.tt-pg-crumbs ol{ display:flex; flex-wrap:wrap; gap:0 var(--sp-2); list-style:none; margin:0 0 var(--sp-4); padding:0;
  font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-700); }
.tt-pg-crumbs li{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.tt-pg-crumbs li + li::before{ content:"/"; color:var(--ink-500); }
.tt-pg-crumbs a,.tt-pg-crumbs span{ display:inline-block; padding:var(--sp-1) 0; }   /* 29px tall: clears the 24px target */
.tt-pg-crumbs a{ color:var(--blue-700); text-decoration:none; }
.tt-pg-crumbs a:hover{ text-decoration:underline; }
.tt-pg-crumbs [aria-current]{ overflow-wrap:anywhere; }
.tt-pg-hero__title{ margin:0; font:800 36px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--navy-900); }
.tt-pg-hero__lede{ margin:var(--sp-3) 0 0; max-width:60ch; color:var(--ink-700); }
.tt-pg-hero__meta{ display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-4) 0 0;
  font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-700); }
.tt-pg-hero__meta .tt-icon{ color:var(--blue-700); }
@media (max-width:767px){
  .tt-pg-hero__in{ padding-top:var(--sp-5); padding-bottom:var(--sp-6); }
  .tt-pg-hero__title{ font-size:26px; }
}

/* ---------------------------------------------------------------- legal: layout + TOC */
.tt-legal{ background:var(--white); }
.tt-legal__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5);
  padding-top:var(--sp-5); padding-bottom:var(--sp-8); }
.tt-legal__tocbox{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.tt-legal__tocsum{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--sp-7); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-lg); list-style:none; cursor:pointer; font:700 16px/1.35 var(--font-display); color:var(--navy-900); }
.tt-legal__tocsum::-webkit-details-marker{ display:none; }
.tt-legal__tocsum .tt-icon:first-child{ color:var(--blue-700); }
.tt-legal__chev{ margin-left:auto; transition:transform var(--t) var(--ease); }
.tt-legal__tocbox[open] .tt-legal__chev{ transform:rotate(180deg); }
.tt-legal__tochead{ display:none; margin:0; padding:var(--sp-4) var(--sp-3) var(--sp-2);
  font:700 16px/1.35 var(--font-display); color:var(--navy-900); }
.tt-legal__toc{ padding:0 var(--sp-2) var(--sp-3); }
.tt-legal__toc ol{ margin:0; padding:0; list-style:none; }
.tt-legal__toc a{ display:block; padding:var(--sp-2) var(--sp-3); border-left:2px solid transparent;
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:14px; font-weight:500; line-height:1.4;
  color:var(--ink-700); text-decoration:none;
  transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tt-legal__toc a:hover{ background:var(--blue-50); color:var(--blue-700); }
.tt-legal__toc a[aria-current="true"]{ background:var(--blue-50); border-left-color:var(--blue-600); color:var(--blue-700); font-weight:600; }

@media (min-width:992px){
  .tt-legal__grid{ grid-template-columns:280px minmax(0,1fr); gap:var(--sp-8); align-items:start;
    padding-top:var(--sp-8); padding-bottom:var(--sp-9); }
  .tt-legal__aside{ position:sticky; top:calc(var(--tt-pg-navh) + var(--sp-4));
    max-height:calc(100vh - var(--tt-pg-navh) - var(--sp-6)); overflow-y:auto; }
  /* the site-wide scrollbar (tt-ui.css) is a dark inset bar; a slim one, shaped like .tt-sel__list's */
  .tt-legal__aside::-webkit-scrollbar{ width:8px; }
  .tt-legal__aside::-webkit-scrollbar-track{ background:transparent; box-shadow:none; border-radius:0; }
  .tt-legal__aside::-webkit-scrollbar-thumb{ background:var(--line-control); border-radius:var(--r-pill); border:2px solid var(--white); }
  /* The box ships closed (no phone layout shift). Desktop shows the list whatever [open] says where
     ::details-content exists; elsewhere a closed box keeps its summary as the toggle (JS opens it). */
  .tt-legal__tocbox[open] > .tt-legal__tocsum{ display:none; }
  .tt-legal__tocbox[open] .tt-legal__tochead{ display:block; }
  @supports selector(::details-content){
    .tt-legal__tocbox::details-content{ content-visibility:visible; display:block; height:auto; }
    .tt-legal__tocbox > .tt-legal__tocsum{ display:none; }
    .tt-legal__tocbox .tt-legal__tochead{ display:block; }
  }
}

/* ---------------------------------------------------------------- legal: prose */
.tt-legal__doc{ max-width:68ch; min-width:0; }
.tt-legal__sec + .tt-legal__sec{ margin-top:var(--sp-7); }
/* 26px = the type scale's section H2 on mobile, used at every width inside a document */
.tt-legal__h{ margin:0 0 var(--sp-3); font:700 26px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--navy-900);
  scroll-margin-top:calc(var(--tt-pg-navh) + var(--sp-4)); }
.tt-legal__h3{ margin:var(--sp-5) 0 var(--sp-2); font:600 18px/1.35 var(--font-display); color:var(--navy-900); }
.tt-legal__doc p{ margin:0 0 var(--sp-4); }
.tt-legal__list{ margin:0 0 var(--sp-4); padding-left:var(--sp-5); }
.tt-legal__list li{ padding-left:var(--sp-1); }
.tt-legal__list li + li{ margin-top:var(--sp-2); }
.tt-legal__list li::marker{ color:var(--blue-600); }
.tt-legal__doc p:last-child,.tt-legal__doc .tt-legal__list:last-child{ margin-bottom:0; }
.tt-legal__doc a{ color:var(--blue-700); text-underline-offset:2px; overflow-wrap:anywhere; }
@media (max-width:767px){
  .tt-legal__sec + .tt-legal__sec{ margin-top:var(--sp-6); }
}

/* ---------------------------------------------------------------- legal: related pages band (.tt-sec rhythm) */
.tt-legal-more__h{ margin:0 0 var(--sp-5); font:700 26px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--navy-900); }
.tt-legal-more__list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-4);
  margin:0; padding:0; list-style:none; }
.tt-legal-more__link{ display:flex; align-items:center; gap:var(--sp-3); min-height:var(--sp-8); padding:var(--sp-4) var(--sp-5);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  font-weight:600; color:var(--navy-900); text-decoration:none;
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.tt-legal-more__link:hover{ box-shadow:var(--shadow-lift); border-color:var(--blue-100); }
.tt-legal-more__link .tt-icon{ color:var(--blue-700); }
.tt-legal-more__go{ margin-left:auto; }
.tt-legal-more__note{ margin:var(--sp-5) 0 0; color:var(--ink-700); }
.tt-legal-more__note a{ color:var(--blue-700); overflow-wrap:anywhere; }

/* ---------------------------------------------------------------- about (about.php) */
/* Hero fades blue-50 -> white, so the first section after it is tint; about.php alternates the rest. */
.tt-about-page .tt-pg-hero{ background:linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%); }
.tt-about-page .tt-pg-hero__in{ padding-top:var(--sp-8); padding-bottom:var(--sp-8); }
.tt-about-page .tt-pg-hero__title{ max-width:16ch; font-size:56px; line-height:1.08; letter-spacing:-.03em; }

.tt-about-stats{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
.tt-about-stats__list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-5);
  margin:0; padding:0; list-style:none; }
.tt-about-stat{ display:flex; align-items:center; gap:var(--sp-4); height:100%; padding:var(--sp-5);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  color:var(--navy-900); text-decoration:none;
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.tt-about-stat:hover{ box-shadow:var(--shadow-lift); border-color:var(--blue-100); }
.tt-about-stat__ico,.tt-about-panel__ico{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:var(--sp-7); height:var(--sp-7); border-radius:var(--r); background:var(--blue-50); color:var(--blue-700); }
.tt-about-stat__txt{ display:flex; flex-direction:column; min-width:0; }
.tt-about-stat__num{ font:800 36px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--navy-900); }
.tt-about-stat__label{ font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-700); }
.tt-about-stat__go{ margin-left:auto; color:var(--blue-700); }
.tt-about-stats__note{ margin:var(--sp-4) 0 0; text-align:center; font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-700); }

.tt-about-who__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); }
.tt-about-who .tt-h2{ margin-bottom:0; }
.tt-about-who__body{ max-width:68ch; }
.tt-about-who__body p{ margin:0 0 var(--sp-4); }
.tt-about-who__body p:last-child{ margin-bottom:0; }

.tt-about-steps{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); margin:0; padding:0; list-style:none; }
.tt-about-step{ padding:var(--sp-5); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); }
.tt-about-step__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); color:var(--blue-700); }
.tt-about-step__num{ display:inline-flex; align-items:center; justify-content:center; width:var(--sp-7); height:var(--sp-7);
  border-radius:var(--r-pill); background:var(--blue-600); color:var(--white); font:800 18px/1 var(--font-display); }
.tt-about-step__title{ margin:0 0 var(--sp-2); font:600 18px/1.35 var(--font-display); letter-spacing:-.01em; color:var(--navy-900); }
.tt-about-step p{ margin:0; color:var(--ink-700); }

.tt-about-aud__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); }
.tt-about-panel{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-6);
  border-radius:var(--r-xl); background:var(--blue-50); }
.tt-sec--tint .tt-about-panel--parents{ background:var(--white); }   /* the audience band is tint when the stats band is hidden */
.tt-about-panel--tutors{ background:var(--green-50); }
.tt-about-panel__ico{ background:var(--white); }
.tt-about-panel--parents .tt-about-panel__ico{ background:var(--blue-100); }
.tt-about-panel--tutors .tt-about-panel__ico{ color:var(--green-700); }
.tt-about-panel__title{ margin:0; font:700 26px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--navy-900); }
.tt-about-panel p{ max-width:60ch; margin:0 0 var(--sp-3); color:var(--ink-700); }
.tt-about-panel .tt-about-panel__cta{ display:flex; flex-wrap:wrap; align-self:stretch; gap:var(--sp-3); margin:auto 0 0; }
.tt-about-panel .tt-btn--ghost:hover,.tt-about-panel .tt-btn--ghost:focus{ background:var(--blue-100); }   /* blue-50 would vanish on the panel */

.tt-about-contact{ padding-top:var(--sp-8); padding-bottom:var(--sp-8); }
.tt-about-contact__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.tt-about-contact__text{ max-width:60ch; margin:0; color:var(--ink-700); }

@media (min-width:768px){
  .tt-about-aud__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:992px){
  .tt-about-who__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sp-8); align-items:start; }
  .tt-about-steps{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:767px){
  .tt-about-page .tt-pg-hero__in{ padding-top:var(--sp-5); padding-bottom:var(--sp-7); }
  .tt-about-page .tt-pg-hero__title{ font-size:34px; }
  .tt-about-stats{ padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
  .tt-about-stat__num{ font-size:26px; }
  .tt-about-step__title{ font-size:17px; }
  .tt-about-panel{ padding:var(--sp-5); }
  .tt-about-panel .tt-btn,.tt-about-contact .tt-btn{ width:100%; }
  .tt-about-contact{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
}

/* ---------------------------------------------------------------- stories (success-stories.php; cards: .tt-quote in tokens.css) */
.tt-stories{ padding-top:var(--sp-8); }
.tt-stories__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:var(--sp-5);
  margin:0; padding:0; list-style:none; }
.tt-stories__grid > li{ display:flex; min-width:0; }
.tt-stories__empty{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); max-width:60ch; margin:0 auto;
  padding:var(--sp-7) var(--sp-5); text-align:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); color:var(--ink-700); }
.tt-stories__empty p{ margin:0; }
.tt-stories__empty-ico{ display:inline-flex; align-items:center; justify-content:center; width:var(--sp-7); height:var(--sp-7);
  margin-bottom:var(--sp-2); border-radius:var(--r); background:var(--blue-50); color:var(--blue-700); }
.tt-stories__empty .tt-stories__empty-title{ font:700 18px/1.35 var(--font-display); color:var(--navy-900); }

.tt-stories-cta__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.tt-stories-cta__text{ max-width:60ch; margin:0; color:var(--ink-700); }
.tt-stories-cta .tt-stories-cta__acts{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:0; }
@media (max-width:767px){
  .tt-stories{ padding-top:var(--sp-6); }
  .tt-stories-cta .tt-stories-cta__acts{ width:100%; }
  .tt-stories-cta .tt-btn{ width:100%; }
}

/* ---------------------------------------------------------------- contact (contact.php) */
/* tokens.css has no error colour token; these are its own values (.tt-error, .tt-auth-alert--err).
   #B3261E on white 6.54:1; #7A1F22 on #FDECEC 8.98:1. */
:root{ --tt-pg-err:#B3261E; --tt-pg-err-50:#FDECEC; --tt-pg-err-line:#F3C1C1; --tt-pg-err-ink:#7A1F22; }

.tt-cf-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); align-items:start; }
.tt-cf{ padding:var(--sp-6); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); scroll-margin-top:calc(var(--tt-pg-navh) + var(--sp-4)); }
.tt-cf__done:focus{ outline:none; }   /* focused by script after sending, so it is read out; not a control */
.tt-cf__title{ margin:0; font:700 26px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--navy-900); }
.tt-cf__sub{ margin:var(--sp-2) 0 var(--sp-5); color:var(--ink-700); }
.tt-cf__alert{ display:flex; align-items:flex-start; gap:var(--sp-2); margin:0 0 var(--sp-5); padding:var(--sp-3) var(--sp-4);
  background:var(--tt-pg-err-50); border:1px solid var(--tt-pg-err-line); border-radius:var(--r); color:var(--tt-pg-err-ink); font-weight:500; }
.tt-cf__alert .tt-icon{ margin-top:var(--sp-1); }   /* 20px icon on a 26px first line */
.tt-cf__alert p{ margin:0; }
.tt-cf__alert:focus{ outline:none; }   /* focused by script so it is read out; not a control */
.tt-cf__errlist{ margin:var(--sp-1) 0 0; padding-left:var(--sp-5); }
.tt-cf__errlist a{ color:var(--tt-pg-err-ink); font-weight:600; text-underline-offset:2px; }
.tt-cf__form{ position:relative; display:grid; gap:var(--sp-5); }
.tt-cf__row{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); align-items:start; }
.tt-cf__field{ min-width:0; }
.tt-cf__label{ display:block; margin:0 0 var(--sp-2); font-weight:600; line-height:1.5; color:var(--ink-900); }
.tt-cf__opt{ font-weight:400; color:var(--ink-700); }
.tt-pg .tt-cf__input{ display:block; padding:var(--sp-3); line-height:1.5; scroll-margin-top:calc(var(--tt-pg-navh) + var(--sp-7)); }
.tt-pg .tt-cf__input[aria-invalid="true"]{ border-color:var(--tt-pg-err); box-shadow:inset 0 0 0 1px var(--tt-pg-err); }
.tt-cf__textarea{ min-height:calc(var(--sp-9) + var(--sp-8)); resize:vertical; }
.tt-cf__selwrap{ position:relative; display:block; }
.tt-pg .tt-cf__select{ padding-right:var(--sp-7); -webkit-appearance:none; appearance:none; cursor:pointer; }
.tt-cf__chev{ position:absolute; top:50%; right:var(--sp-3); transform:translateY(-50%); pointer-events:none; color:var(--ink-700); }
/* Topic, enhanced by js/tt-select.js (not on touch: the native select + .tt-cf__chev above stay).
   Same box as .tt-cf__input: 12px padding, 1.5 line-height (50px), --r radius, 16px body font. */
.tt-cf .tt-sel + .tt-cf__chev{ display:none; }   /* the button draws its own, rotating chevron */
.tt-pg .tt-cf .tt-sel__btn{ padding:var(--sp-3) var(--sp-7) var(--sp-3) var(--sp-3); line-height:1.5;
  scroll-margin-top:calc(var(--tt-pg-navh) + var(--sp-7)); }
.tt-pg .tt-cf .tt-sel__btn:after{ right:var(--sp-3); }
.tt-pg .tt-cf .tt-sel__btn:focus{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(21,101,216,.15); }
.tt-pg .tt-cf .tt-sel__btn[aria-invalid="true"]{ border-color:var(--tt-pg-err); box-shadow:inset 0 0 0 1px var(--tt-pg-err); }
.tt-cf__hint{ margin:var(--sp-2) 0 0; font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-700); }
.tt-cf__count{ margin-left:var(--sp-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tt-cf__count.is-over{ color:var(--tt-pg-err); font-weight:600; }
.tt-cf__err{ display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0 0;
  font-size:14px; font-weight:600; line-height:1.5; color:var(--tt-pg-err); }
/* The bot trap: off-screen for people, still a real field to a script. aria-hidden on the wrapper. */
.tt-cf__hp{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }
.tt-cf__send{ justify-self:start; }
.tt-cf__small{ margin:0; font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-700); }

.tt-cf__done p{ margin:var(--sp-3) 0 0; }
.tt-cf__done strong{ color:var(--navy-900); }
.tt-cf__done-ico{ display:inline-flex; align-items:center; justify-content:center; width:var(--sp-8); height:var(--sp-8);
  margin-bottom:var(--sp-4); border-radius:var(--r-pill); background:var(--green-50); color:var(--green-700); }
.tt-cf__done .tt-cf__again{ margin-top:var(--sp-5); }

.tt-cf-info{ padding:var(--sp-6); background:var(--blue-50); border-radius:var(--r-lg); }
.tt-cf-info__title{ margin:0 0 var(--sp-5); font:600 18px/1.35 var(--font-display); letter-spacing:-.01em; color:var(--navy-900); }
.tt-cf-info__list{ display:grid; gap:var(--sp-5); margin:0; padding:0; list-style:none; }
.tt-cf-info__item{ display:flex; align-items:flex-start; gap:var(--sp-4); }
.tt-cf-info__ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--sp-7); height:var(--sp-7);
  border-radius:var(--r); background:var(--white); color:var(--blue-700); }
.tt-cf-info__txt{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; color:var(--ink-700); }
.tt-cf-info__label{ font-size:14px; font-weight:600; line-height:1.5; color:var(--navy-900); }
.tt-cf-info__txt a{ padding:var(--sp-1) 0; font-weight:600; color:var(--blue-700); text-underline-offset:2px; overflow-wrap:anywhere; }
.tt-cf-info__txt address{ font-style:normal; }

.tt-cf-routes__h{ margin:0 0 var(--sp-5); font:700 26px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--navy-900); }
.tt-cf-routes__list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:var(--sp-4);
  margin:0; padding:0; list-style:none; }
.tt-cf-routes__link{ display:flex; align-items:center; gap:var(--sp-3); height:100%; min-height:var(--sp-8); padding:var(--sp-4) var(--sp-5);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  font-weight:600; color:var(--navy-900); text-decoration:none;
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.tt-cf-routes__link:hover{ box-shadow:var(--shadow-lift); border-color:var(--blue-100); }
.tt-cf-routes__link .tt-icon{ color:var(--blue-700); }
.tt-cf-routes__go{ margin-left:auto; }

@media (min-width:768px){
  .tt-cf__row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* 400px keeps support@tuitionsteacher.com on one line in the card from 992 up */
@media (min-width:992px){
  .tt-cf-grid{ grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:var(--sp-7); }
}
@media (min-width:1200px){
  .tt-cf-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--sp-8); }
  .tt-cf,.tt-cf-info{ padding:var(--sp-7); }
}
@media (max-width:767px){
  .tt-cf,.tt-cf-info{ padding:var(--sp-5); }
  .tt-cf__send,.tt-cf__done .tt-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .tt-pg *,.tt-pg *::before,.tt-pg *::after{ animation:none !important; transition:none !important; }
}