/* =====================================================================
   NovaTutors bespoke redesign — shared design system
   Loaded once by profiles/raw_base.html for all marketing/blog pages.
   Does NOT touch profiles/styles.css, so app pages (base.html) are
   completely unaffected.
   ===================================================================== */

/* ============ Tokens ============ */
:root{
  --nt-navy:#00004a;
  --nt-navy-2:#0b0870;
  --nt-ink:#12102b;
  --nt-indigo:#4f40ff;
  --nt-indigo-2:#6f5dff;
  --nt-sky:#05d5ff;
  --nt-mint:#a6ffcb;
  --nt-surface:#f5f5fc;
  --nt-surface-2:#eeedfa;
  --nt-card:#ffffff;
  --nt-border:#e5e3f6;
  --nt-muted:#5c5f77;
  --nt-muted-dark:#b7b3e6;
  --nt-grad-brand: linear-gradient(150deg, #5533ff 10%, #05d5ff 68%, #a6ffcb 96%);
  --nt-shadow-soft: 0 20px 45px -20px rgba(18,16,43,0.25);
  --nt-shadow-card: 0 12px 30px -14px rgba(18,16,43,0.18);
  --nt-radius-lg: 28px;
  --nt-radius-md: 18px;
  --nt-radius-sm: 12px;
  --nt-container: 1180px;
}

/* Scope resets to the marketing pages only, via a body class raw_base.html sets */
body.nt-page{
  margin:0;
  background:var(--nt-surface);
  color:var(--nt-ink);
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nt-page *,body.nt-page *::before,body.nt-page *::after{ box-sizing:border-box; }
body.nt-page img{ max-width:100%; }
/* Deliberately no display:block here: the real site relies on plain
   .hide{display:none} (lower specificity than body.nt-page img would be)
   to toggle several img elements, most visibly the scroll-triggered
   logo swap. Forcing display:block on all images silently overrides that
   and shows every logo state at once. */
body.nt-page a{ color:inherit; }
.nt-container{ width:100%; max-width:var(--nt-container); margin-inline:auto; padding-inline:24px; }
body.nt-page h1,body.nt-page h2,body.nt-page h3{ font-weight:800; line-height:1.12; letter-spacing:-0.02em; margin:0 0 0.5em; text-wrap:balance; }
body.nt-page h1{ font-size:clamp(2.4rem, 5.4vw, 4.1rem); }
body.nt-page h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }
body.nt-page h3{ font-size:1.2rem; }
body.nt-page p{ margin:0 0 1em; }
.nt-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--nt-indigo); margin-bottom:14px;
}
.nt-eyebrow::before{ content:""; width:22px; height:2px; background:var(--nt-indigo); border-radius:2px; }
.nt-eyebrow--on-dark{ color:var(--nt-mint); }
.nt-eyebrow--on-dark::before{ background:var(--nt-mint); }
.nt-lede{ font-size:1.12rem; color:var(--nt-muted); max-width:46ch; }
.nt-lede--on-dark{ color:var(--nt-muted-dark); }
.nt-grad-text{ background:var(--nt-grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nt-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nt-skip-link{ position:absolute; left:-999px; top:0; background:var(--nt-ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:999; }
.nt-skip-link:focus{ left:16px; top:16px; }

/* ============ Buttons ============ */
.nt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-weight:700; font-size:0.98rem; text-decoration:none;
  padding:15px 28px; border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color .18s ease;
  white-space:nowrap;
}
.nt-btn-primary{ background:var(--nt-indigo); color:#fff; box-shadow:0 14px 30px -12px rgba(79,64,255,0.55); }
.nt-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(79,64,255,0.65); background:#4636ee; color:#fff; }
.nt-btn-ghost-dark{ background:transparent; border-color:rgba(255,255,255,0.35); color:#fff; }
.nt-btn-ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,0.08); transform:translateY(-2px); color:#fff; }
.nt-btn-ghost-light{ background:transparent; border-color:var(--nt-border); color:var(--nt-ink); }
.nt-btn-ghost-light:hover{ border-color:var(--nt-indigo); color:var(--nt-indigo); transform:translateY(-2px); }
.nt-btn-sm{ padding:10px 18px; font-size:0.88rem; }
.nt-btn-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--nt-indigo);
  text-decoration:none; position:relative; padding-bottom:2px;
}
.nt-btn-link::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:currentColor; transition:width 0.25s ease; }
.nt-btn-link:hover::after{ width:100%; }
.nt-btn-group{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============ Nav ============ */
.nt-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--nt-border);
}
.nt-nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:20px; }
.nt-nav-logo img{ height:34px; width:auto; }
.nt-nav-links{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.nt-nav-links a{ text-decoration:none; font-weight:600; font-size:0.94rem; color:var(--nt-ink); position:relative; padding-bottom:6px; }
.nt-nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--nt-indigo); transition:width 0.22s ease; }
.nt-nav-links a:hover::after{ width:100%; }
.nt-nav-actions{ display:flex; align-items:center; gap:12px; }
.nt-nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nt-nav-toggle span{ width:24px; height:2px; background:var(--nt-ink); border-radius:2px; }

/* Logged-in profile popup */
.nt-profile-btn{
  width:40px; height:40px; border-radius:50%; background:var(--nt-grad-brand); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; font-size:0.95rem; position:relative;
}
.nt-profile-btn .nt-unread-dot{
  position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:#ff4d6d; border:2px solid #fff;
}
.nt-profile-menu{
  position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--nt-border); border-radius:var(--nt-radius-md);
  box-shadow:var(--nt-shadow-soft); min-width:230px; padding:10px; display:none; z-index:220;
}
.nt-profile-menu.is-open{ display:block; }
.nt-profile-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none; color:var(--nt-ink);
  font-weight:600; font-size:0.92rem; padding:10px 12px; border-radius:10px;
}
.nt-profile-menu a:hover{ background:var(--nt-surface); color:var(--nt-indigo); }
.nt-profile-menu .nt-badge{ background:#ff4d6d; color:#fff; border-radius:999px; font-size:0.72rem; font-weight:800; padding:1px 7px; }
.nt-profile-wrap{ position:relative; }

@media (max-width: 860px){
  .nt-nav-links, .nt-nav-actions .nt-btn-ghost-light, .nt-nav-actions .nt-btn-primary{ display:none; }
  .nt-nav-toggle{ display:flex; }
}

/* ============ Blob field (hero + cta motion) ============ */
.nt-blob-field{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.nt-blob{ position:absolute; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; will-change:transform; }
.nt-blob-a{ width:46vw; height:46vw; max-width:640px; max-height:640px; left:-10%; top:-14%; background:radial-gradient(circle at 35% 35%, #6f5dff, #4f40ff 55%, transparent 75%); animation:ntDriftA 32s ease-in-out infinite alternate; }
.nt-blob-b{ width:34vw; height:34vw; max-width:480px; max-height:480px; right:-8%; top:6%; background:radial-gradient(circle at 40% 40%, #05d5ff, #1fa2ff 55%, transparent 75%); animation:ntDriftB 26s ease-in-out infinite alternate; }
.nt-blob-c{ width:30vw; height:30vw; max-width:420px; max-height:420px; left:22%; bottom:-16%; background:radial-gradient(circle at 45% 45%, #a6ffcb, #05d5ff 60%, transparent 78%); opacity:0.55; animation:ntDriftC 38s ease-in-out infinite alternate; }
.nt-blob-d{ width:20vw; height:20vw; max-width:300px; max-height:300px; right:16%; bottom:-10%; background:radial-gradient(circle, #4553ff, transparent 74%); animation:ntDriftA 22s ease-in-out infinite alternate-reverse; }
@keyframes ntDriftA{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(6%, 8%) scale(1.12); } }
@keyframes ntDriftB{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-8%, 10%) scale(0.92); } }
@keyframes ntDriftC{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(5%, -9%) scale(1.15); } }
@media (prefers-reduced-motion: reduce){
  .nt-blob, .nt-word-rotator__word, [data-nt-reveal]{ animation:none !important; transition:none !important; }
}

/* ============ Diagonal divider ============ */
.nt-divider{ position:relative; height:0; display:flow-root; }
.nt-divider svg{ display:block; width:100%; height:90px; margin-top:-89px; position:relative; z-index:3; }

/* ============ Sections ============ */
body.nt-page section{ padding-block:96px; }
.nt-section-light{ background:var(--nt-surface); }
.nt-section-white{ background:var(--nt-card); }
.nt-section-navy{ background:radial-gradient(120% 140% at 85% 10%, var(--nt-navy-2), var(--nt-navy) 62%); color:#fff; position:relative; overflow:hidden; }

.nt-stat-card{ background:var(--nt-card); border:1px solid var(--nt-border); border-radius:var(--nt-radius-md); padding:30px 26px; box-shadow:var(--nt-shadow-card); }
.nt-stat-card .nt-stat-value{ font-size:2.1rem; font-weight:900; margin-bottom:8px; }
.nt-stat-card .nt-stat-value.grad{ background:var(--nt-grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nt-stat-card p{ margin:0; color:var(--nt-muted); font-weight:600; font-size:0.95rem; }

.nt-step-card{ background:var(--nt-card); border-radius:var(--nt-radius-lg); overflow:hidden; box-shadow:var(--nt-shadow-card); border:1px solid var(--nt-border); display:flex; flex-direction:column; }
.nt-step-media{ aspect-ratio:3/2; overflow:hidden; }
.nt-step-media img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.nt-step-card:hover .nt-step-media img{ transform:scale(1.06); }
.nt-step-body{ padding:26px 24px 30px; }
.nt-step-num{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--nt-grad-brand); color:#fff; font-weight:800; font-size:0.9rem; margin-bottom:14px; }
.nt-step-body h3{ margin-bottom:8px; }
.nt-step-body p{ color:var(--nt-muted); font-size:0.95rem; margin:0; }

.nt-testi-card{ background:var(--nt-card); border-radius:var(--nt-radius-md); padding:30px 28px; border:1px solid var(--nt-border); box-shadow:var(--nt-shadow-card); display:flex; flex-direction:column; }
.nt-testi-stars{ display:flex; gap:3px; color:#ffb400; margin-bottom:16px; }
.nt-testi-stars svg{ width:16px; height:16px; }
.nt-testi-card blockquote{ margin:0 0 22px; font-size:1.02rem; font-weight:600; color:var(--nt-ink); flex:1; }
.nt-testi-foot{ display:flex; align-items:center; gap:12px; }
.nt-testi-foot img{ width:48px; height:48px; border-radius:50%; }
.nt-testi-foot strong{ display:block; font-size:0.95rem; }
.nt-testi-foot span{ font-size:0.82rem; color:var(--nt-muted); }

.nt-cta-section{ position:relative; overflow:hidden; text-align:center; padding-block:110px; }
.nt-cta-inner{ position:relative; z-index:2; max-width:640px; margin-inline:auto; }
.nt-cta-inner h2{ color:#fff; }
.nt-cta-glow{ position:relative; display:inline-block; border-radius:999px; padding:3px; margin-top:14px; background:linear-gradient(120deg,#5533ff,#05d5ff,#a6ffcb,#5533ff); background-size:300% 300%; animation:ntAnimatedGradient 4s ease infinite; }
.nt-cta-glow .nt-btn-primary{ box-shadow:none; }
@keyframes ntAnimatedGradient{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.nt-cta-group{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* ============ Scroll reveal ============ */
.nt-js-reveal [data-nt-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s ease; }
[data-nt-reveal].nt-is-visible{ opacity:1; transform:none; }
[data-nt-reveal-delay="1"]{ transition-delay:0.08s; }
[data-nt-reveal-delay="2"]{ transition-delay:0.16s; }

/* ============ Footer ============ */
.nt-footer{ background:var(--nt-card); border-top:1px solid var(--nt-border); padding-block:56px 0; }
.nt-footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; align-items:flex-start; padding-bottom:40px; }
.nt-footer-logo img{ height:30px; }
.nt-footer-col h4{ font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--nt-muted); margin:0 0 14px; }
.nt-footer-links{ display:flex; flex-direction:column; gap:11px; list-style:none; margin:0; padding:0; }
.nt-footer-links.nt-footer-links--row{ flex-direction:row; flex-wrap:wrap; gap:22px; }
.nt-footer-links a{ text-decoration:none; font-weight:600; font-size:0.92rem; color:var(--nt-ink); }
.nt-footer-links a:hover{ color:var(--nt-indigo); }
.nt-footer-social{ display:flex; gap:14px; }
.nt-footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--nt-border); display:flex; align-items:center; justify-content:center; color:var(--nt-ink); transition:all 0.2s ease; }
.nt-footer-social a:hover{ background:var(--nt-indigo); border-color:var(--nt-indigo); color:#fff; }
.nt-footer-social svg{ width:17px; height:17px; }
.nt-footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-block:22px; border-top:1px solid var(--nt-border); font-size:0.85rem; color:var(--nt-muted); }
.nt-footer-legal{ display:flex; gap:20px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nt-footer-legal a{ text-decoration:none; color:var(--nt-muted); }
.nt-footer-legal a:hover{ color:var(--nt-indigo); }
.nt-pm-credit{ text-align:center; padding:16px 0; font-size:12px; border-top:1px solid var(--nt-border); }
.nt-pm-credit a{ color:var(--nt-muted); text-decoration:none; }
.nt-pm-credit a:hover{ color:var(--nt-indigo); }

@media (max-width:900px){
  .nt-footer-top{ flex-direction:column; align-items:flex-start; }
}

/* =====================================================================
   Reskin of the REAL site's existing markup/classes (header, nav, footer,
   buttons, lp-section, background). Loaded only on raw_base.html pages -
   profiles/styles.css and base.html's app pages are untouched.
   Deliberately reuses the site's own --nova-purple / --nova-dark-purple /
   --nova-light-blue custom properties, which already sit almost exactly
   on the bespoke palette (#00004a / #5533ff / #05d5ff).
   ===================================================================== */

body.nt-page{ font-family:'Montserrat',Arial,sans-serif; }

/* ---- Header / nav ---- */
body.nt-page header{
  background:rgba(255,255,255,0.0);
  transition:background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
body.nt-page header.active{
  background-color:rgba(255,255,255,0.88) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 30px -16px rgba(18,16,43,0.25);
}
body.nt-page #navbar{ padding-block:8px; }
body.nt-page .nav-item.nav-link{
  font-weight:600;
  font-size:0.94rem;
  position:relative;
  padding-bottom:6px;
}
body.nt-page .navbar-lh .nav-item.nav-link{ padding-left:1.4em; }
body.nt-page .site-header .navbar-nav .nav-link:hover{ opacity:1; color:var(--nova-purple) !important; }

body.nt-page .navbar-rhside{
  background:rgba(255,255,255,0.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
header.active .navbar-rhside{ background:var(--nt-surface); }

body.nt-page .user-initials{
  background:var(--nt-grad-brand);
  font-weight:800;
  box-shadow:0 6px 16px -8px rgba(79,64,255,0.55);
}

body.nt-page .profile-nav-popup{
  border-radius:var(--nt-radius-md);
  box-shadow:var(--nt-shadow-soft) !important;
  border:1px solid var(--nt-border);
}
body.nt-page .profile-nav-popup .nav-item.nav-link{
  border-radius:12px;
  font-weight:600;
}
body.nt-page .profile-nav-popup .nav-item:hover{
  background-color:var(--nt-surface);
  color:var(--nova-purple);
}
body.nt-page .profile-nav-popup .nav-item.nav-link .icon{ fill:var(--nova-purple); }
body.nt-page .profile-nav-popup .line{ background-color:var(--nt-border); }

/* ---- Blob decorative background (replaces the old gradient-bar Stripe effect) ---- */
body.nt-page .section-wrapper{
  background:radial-gradient(120% 130% at 15% 0%, var(--nt-navy-2), var(--nt-navy) 60%);
  height:640px;
  overflow:hidden;
}
body.nt-page .section-wrapper .block{ display:none; }
body.nt-page .section-wrapper .background-blur{
  position:absolute; inset:0; backdrop-filter:none; -webkit-backdrop-filter:none; filter:none;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(111,93,255,0.55), transparent 42%),
    radial-gradient(circle at 82% 8%, rgba(5,213,255,0.45), transparent 38%),
    radial-gradient(circle at 45% 70%, rgba(166,255,203,0.28), transparent 45%);
  animation:ntDriftA 34s ease-in-out infinite alternate;
}

/* ---- Buttons (reskinned in place, semantic variants like .green/.red/.dull untouched) ---- */
body.nt-page .btn-nova{
  border-radius:999px;
  padding:0.85em 1.6em;
  background:var(--nova-purple);
  box-shadow:0 14px 30px -14px rgba(85,51,255,0.55);
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.01em;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
body.nt-page .btn-nova:hover, body.nt-page a.btn-nova:hover{
  background:#4636ee;
  transform:translateY(-2px);
  box-shadow:0 18px 36px -14px rgba(85,51,255,0.65);
}
body.nt-page .btn-pill{
  border-radius:999px;
  font-weight:700;
  transition:transform 0.18s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
body.nt-page .btn-pill:hover{
  background-color:#4636ee;
  transform:translateY(-2px);
}
body.nt-page .btn-pill.dark{ box-shadow:0 14px 30px -16px rgba(0,0,74,0.5); }

/* ---- lp-section content blocks ---- */
body.nt-page .lp-section h2, body.nt-page .section-carousel h2{
  font-weight:800;
  letter-spacing:-0.01em;
}
body.nt-page .lp-section.alt{ background-color:var(--nt-surface); }
body.nt-page .lp-section p{ color:var(--nt-muted); }
body.nt-page .section-wrapper-lp img{
  border-radius:var(--nt-radius-lg);
  box-shadow:var(--nt-shadow-card);
}

/* ---- Footer ---- */
body.nt-page footer{ background-color:var(--nt-card); }
body.nt-page .footer-secondary{ border-top-color:var(--nt-border); }
body.nt-page .footer-column strong{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--nt-muted);
}
body.nt-page .footer-column-items{ color:var(--nt-ink); font-weight:500; }
body.nt-page a.footer-column-items:hover{ color:var(--nova-purple); }
body.nt-page .waves path{ fill:var(--nt-surface); }
body.nt-page .waves use{ fill:var(--nt-card) !important; }

/* ---- New brand mark on the nav logo (keeps the same swap-on-scroll wiring) ---- */
body.nt-page #novatutors-logo-transparent,
body.nt-page #novatutors-logo-transparent-ultra-small{ filter:brightness(0) invert(1); }

/* =====================================================================
   Homepage reskin — targets the REAL lead-gen form / carousel / FAQ
   classes already in profiles/index.html. No template/markup rewrite:
   the form, its fields, recaptcha and JS state machine are untouched.
   ===================================================================== */

body.nt-page .landing-page-hero{
  position:relative;
  background:radial-gradient(120% 130% at 15% 0%, var(--nt-navy-2), var(--nt-navy) 60%);
  overflow:hidden;
  padding-top:90px;
}
body.nt-page .landing-page-hero .nt-hero-blobs{
  position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none;
}
body.nt-page #lp-hero-title{
  color:#fff;
  font-weight:800;
  letter-spacing:-0.02em;
}
body.nt-page .landing-page-hero .content-body,
body.nt-page .landing-page-hero p{ color:#dedcff; }

body.nt-page .lead-gen-form{
  position:relative;
  z-index:2;
  background:var(--nt-card);
  border-radius:var(--nt-radius-lg);
  box-shadow:0 40px 80px -30px rgba(0,0,20,0.55);
  padding:8px;
  color:var(--nt-ink);
}
body.nt-page .lead-gen-section-wrapper{
  color:var(--nt-ink);
}
body.nt-page .lead-gen-section-text{ color:var(--nt-muted); }
body.nt-page .login-form-label{ color:var(--nt-muted); font-weight:600; }
body.nt-page .date-select-btn{ border-radius:999px; }

body.nt-page .section-carousel{
  background:var(--nt-surface-2);
}
body.nt-page .swiper-slide{ border-radius:var(--nt-radius-md); }
body.nt-page .swiper-slide-content{
  background:var(--nt-card);
  border-radius:var(--nt-radius-md);
  box-shadow:var(--nt-shadow-card);
}
body.nt-page .lp-review .tutor-name{ color:var(--nt-ink); }
body.nt-page .swiper-button{ color:var(--nova-purple); }

/* FAQ accordion (Bootstrap defaults) */
body.nt-page .accordion-button{
  font-weight:700;
  color:var(--nt-ink);
}
body.nt-page .accordion-button:not(.collapsed){
  background-color:var(--nt-surface);
  color:var(--nova-purple);
  box-shadow:none;
}
body.nt-page .accordion-button:focus{ box-shadow:0 0 0 3px rgba(85,51,255,0.18); }
body.nt-page .accordion-item{
  border-color:var(--nt-border);
  border-radius:var(--nt-radius-sm) !important;
  overflow:hidden;
  margin-bottom:10px;
}

/* ---- Rotating hero word ("...tutoring in {word}...") ----
   Fix for the "animation moves the whole page up and down" bug: the word
   swap had no reserved width, so a short word ("Maths") vs a long one
   ("Geography") changed the heading's line-wrap and pushed every section
   below it up/down on every rotation. Reserving width on the word itself
   keeps the heading's line breaks constant regardless of which word is
   showing, and the fade/slide replaces the previous instant, jarring swap. */
#ntHeroWord{
  display:inline-block;
  min-width:11ch;
  text-align:left;
  white-space:nowrap;
  vertical-align:top;
}
#ntHeroWord.is-flipping{
  animation:ntHeroWordIn 0.5s ease both;
}
@keyframes ntHeroWordIn{
  from{ opacity:0; transform:translateY(0.35em); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  #ntHeroWord.is-flipping{ animation:none; }
}

/* =====================================================================
   Marketplace / "Find your tutor" reskin
   (marketplace/marketplace_search.html — already extends raw_base.html,
   so body.nt-page is present here already; this is purely additive CSS
   for classes profiles/styles.css defines but the redesign never reached.
   No template/markup changes, no JS-coupled classes touched (.hide,
   .is-active, option-item checkbox wiring all left alone).
   ===================================================================== */

/* ---- Hero + floating search card ---- */
body.nt-page .marketplace-header-container{
  background: radial-gradient(120% 160% at 15% 0%, var(--nt-navy-2), var(--nt-navy) 62%);
  padding-block:72px 46px;
  border-radius:0 0 var(--nt-radius-lg) var(--nt-radius-lg);
}
body.nt-page h1.marketplace-header{
  color:#fff;
  font-weight:800;
  letter-spacing:-0.02em;
}
body.nt-page .marketplace-header-para,
body.nt-page .header-p-container p{
  color:#dedcff;
  font-weight:500;
}

body.nt-page .search-filter-container{
  background:var(--nt-card);
  border-radius:var(--nt-radius-lg);
  box-shadow:var(--nt-shadow-soft);
  padding:14px 18px;
  margin-top:-18px;
  position:relative;
  z-index:3;
}
/* the divider rule under the search bar did the section-break job the
   floating card now does visually */
body.nt-page .search-filter-container + .line{ display:none; }

body.nt-page .marketplace-search-dropbtn{
  border-color:var(--nt-border);
  border-width:0.12em;
  border-radius:999px;
  background:var(--nt-surface);
  color:var(--nt-ink);
  transition:border-color .18s ease, background-color .18s ease;
}
body.nt-page .marketplace-search-dropbtn:hover{ border-color:var(--nt-indigo); }

body.nt-page .marketplace-dropdown-content{
  background:var(--nt-card);
  border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-md);
  box-shadow:var(--nt-shadow-soft);
  padding:10px;
}
body.nt-page .option-item input:checked + label{
  color:var(--nt-indigo);
  background:var(--nt-surface);
  border-radius:10px;
}
body.nt-page .select-all-btn{
  background:var(--nt-surface);
  color:var(--nt-indigo);
  border-radius:999px;
  font-weight:700;
}

body.nt-page .btn-marketplace-filter{
  border-radius:999px !important;
  background:var(--nt-indigo) !important;
  box-shadow:0 14px 30px -14px rgba(79,64,255,0.55);
  transition:transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
body.nt-page .btn-marketplace-filter:hover{
  background:#4636ee !important;
  transform:translateY(-2px);
  box-shadow:0 18px 36px -14px rgba(79,64,255,0.65);
}

/* ---- Tutor result cards ---- */
body.nt-page .marketplace-container.off-white-background{
  background:var(--nt-surface);
  padding-block:56px 30px;
}
body.nt-page .tutor-card{
  border-radius:var(--nt-radius-lg);
  box-shadow:var(--nt-shadow-card);
  border:1px solid var(--nt-border);
  transition:transform 0.22s ease, box-shadow 0.22s ease;
}
body.nt-page .tutor-card:hover{
  box-shadow:var(--nt-shadow-soft);
  transform:translateY(-3px);
}
body.nt-page .marketplace-img-container{
  border-radius:var(--nt-radius-md);
}
body.nt-page .tutor-card .tutor-name{
  color:var(--nt-ink);
  font-weight:800;
}
body.nt-page .tutor-card .tutor-university{
  color:var(--nt-indigo);
}
body.nt-page .tutor-card .tutor-university-course{
  color:var(--nt-muted);
}
body.nt-page .tutor-card .short-bio{
  color:var(--nt-muted);
}
body.nt-page .tutor-card .tutor-price{
  color:var(--nt-indigo);
}
body.nt-page .vertical-line{
  background-color:var(--nt-border);
}
body.nt-page .lessons-completed-container{
  color:var(--nt-muted);
  font-weight:600;
}

/* ---- Pagination ---- */
body.nt-page .pagination-btn{
  background:var(--nt-card);
  color:var(--nt-ink);
  border:1px solid var(--nt-border);
  font-weight:600;
  transition:all 0.18s ease;
}
body.nt-page .pagination-btn:hover{
  background:var(--nt-indigo);
  color:#fff;
  border-color:var(--nt-indigo);
}
body.nt-page .pagination .current.pagination-btn{
  background:var(--nt-surface);
  border-color:var(--nt-border);
  color:var(--nt-muted);
  font-weight:700;
}


/* =====================================================================
   Homepage (and how_it_works.html, which shares .lp-section) reskin
   Targets the real .lp-section / .section-wrapper-lp / .lp-section-img-wrapper
   markup — no template changes. Softens the site's own shadow-heavy glow,
   frames section images the way the hero/why-us media frames already are,
   and adds an eyebrow accent bar above each section heading.
   ===================================================================== */

/* Soften the harsh black glow the real site uses on section images —
   replace with the same soft shadow used everywhere else in the redesign */
body.nt-page .shadow-heavy{
  box-shadow: var(--nt-shadow-soft) !important;
  -webkit-box-shadow: var(--nt-shadow-soft) !important;
  -moz-box-shadow: var(--nt-shadow-soft) !important;
}

/* Frame every .lp-section image like the hero/why-us photography */
body.nt-page .lp-section-img-wrapper img{
  border-radius: var(--nt-radius-lg);
  box-shadow: var(--nt-shadow-soft);
  border: 1px solid var(--nt-border);
  background: var(--nt-card);
}
/* transparent-background icon/gif assets get a touch of padding so the
   shadow reads as a card rather than clinging to the artwork's edge */
body.nt-page .lp-section-img-wrapper div{
  padding: 6px;
}

body.nt-page .section-wrapper-lp{
  gap: 56px;
}
@media (max-width:961px){
  body.nt-page .section-wrapper-lp{ gap: 30px; }
}

/* Eyebrow accent bar above each section heading, matching the small
   coloured rule used everywhere else in the redesign (.nt-eyebrow::before) */
body.nt-page .text-wrapper h2{
  position: relative;
  padding-top: 26px;
}
body.nt-page .text-wrapper h2::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:36px; height:3px;
  border-radius:3px;
  background: var(--nt-grad-brand);
}

body.nt-page .lp-section.alt{
  background-color: var(--nt-surface);
}

/* Section-minor content paragraphs read a little tighter/lighter, matching
   the muted body copy used across the rest of the redesign */
body.nt-page .lp-section .content-body{
  color: var(--nt-muted);
}

/* =====================================================================
   Homepage structural sections — Stats, 3-step "How it works", the navy
   "Why NovaTutors" spine section, and the hero media frame/chip. Ports
   the layout classes from the redesign reference HTML (prefixed nt- to
   match this file's convention) onto the real index.html markup added
   for the 100%-match rebuild. The card/button/section-background pieces
   these rely on (.nt-stat-card, .nt-step-card, .nt-cta-section, blobs,
   etc.) already exist above — this block is just the missing grid glue.
   ===================================================================== */

/* ---- Hero media frame + floating "Free trial" chip ---- */
body.nt-page .nt-hero-media-frame{
  position:relative; border-radius:32px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,20,0.6);
  border:1px solid rgba(255,255,255,0.14);
}
body.nt-page .nt-hero-media-frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:6/5; display:block; }
body.nt-page .nt-hero-chip{
  position:absolute; left:-26px; bottom:-26px; background:#fff; color:var(--nt-ink); border-radius:20px;
  padding:16px 20px; box-shadow:var(--nt-shadow-soft); display:flex; align-items:center; gap:12px; max-width:230px; z-index:3;
}
body.nt-page .nt-hero-chip-dot{
  width:44px; height:44px; border-radius:50%; background:var(--nt-grad-brand); flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
}
body.nt-page .nt-hero-chip strong{ display:block; font-size:0.98rem; }
body.nt-page .nt-hero-chip span{ font-size:0.8rem; color:var(--nt-muted); }
@media (max-width:1200px){
  body.nt-page .nt-hero-chip{ left:6px; bottom:-20px; padding:12px 16px; }
}
@media (max-width:961px){
  body.nt-page .nt-hero-chip{ display:none; }
}

/* ---- Stats / why-choose-us grid ---- */
body.nt-page .nt-stats-top{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:56px; }
body.nt-page .nt-stats-top .nt-lede{ max-width:none; }
body.nt-page .nt-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
body.nt-page .nt-stat-card p:last-child{ margin:0; color:var(--nt-muted); font-weight:600; font-size:0.95rem; }
@media (max-width:860px){
  body.nt-page .nt-stats-top{ grid-template-columns:1fr; gap:22px; }
  body.nt-page .nt-stats-grid{ grid-template-columns:1fr; }
}

/* ---- How it works — 3-step cards ---- */
body.nt-page .nt-steps-head{ max-width:640px; margin-bottom:54px; }
body.nt-page .nt-steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:900px){
  body.nt-page .nt-steps-grid{ grid-template-columns:1fr; }
}

/* ---- Why NovaTutors — navy spine section ---- */
body.nt-page .nt-why-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
body.nt-page .nt-why-media-frame{
  border-radius:32px; overflow:hidden; aspect-ratio:4/5.1; box-shadow:0 30px 70px -25px rgba(0,0,20,0.55);
  border:1px solid rgba(255,255,255,0.12);
}
body.nt-page .nt-why-media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
body.nt-page .nt-why-list{ list-style:none; margin:26px 0 32px; padding:0; display:flex; flex-direction:column; gap:20px; }
body.nt-page .nt-why-list li{ display:flex; gap:16px; align-items:flex-start; }
body.nt-page .nt-why-list .nt-spark{
  flex:none; width:30px; height:30px; border-radius:9px; background:rgba(166,255,203,0.14);
  display:flex; align-items:center; justify-content:center; color:var(--nt-mint);
}
body.nt-page .nt-why-list span{ color:#dedcff; font-size:1rem; }
@media (max-width:900px){
  body.nt-page .nt-why-grid{ grid-template-columns:1fr; }
  body.nt-page .nt-why-media{ order:-1; max-width:420px; margin-inline:auto; }
}

/* Buttons rendered as <div onclick> instead of <a href> (matching the
   real page's own existing pattern for JS-triggered lead-gen actions,
   e.g. .btn-pill[onclick="startLeadForm()"]) still need pointer affordance */
body.nt-page .nt-btn[onclick]{ cursor:pointer; }

/* =====================================================================
   Nav + Hero "100% like-for-like" pass — matches the reference HTML's
   site-header (white/blurred sticky bar, pill CTA) and hero (full navy
   gradient background, two buttons, inline star-rating trust line).
   Targets the REAL #navbar / .landing-page-hero / .lead-gen-form markup
   already in raw_base.html + index.html — no functionality touched,
   only visual overrides plus two small additive template snippets
   (second "Find a tutor" button + trust line, added in index.html;
   Login/Register relabelled to Log in / Book a free trial in raw_base.html).
   ===================================================================== */

/* ---- Site header: swap from transparent-over-hero to a white, blurred,
   sticky bar like the reference nav ---- */
body.nt-page header,
body.nt-page .site-header{
  position:fixed; top:0; left:0; right:0;
  background:rgba(255,255,255,0.97);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--nt-border);
  transition:background-color 0.2s ease;
}
body.nt-page .site-header .navbar-nav .nav-link{
  color:var(--nt-ink) !important;
  font-weight:600;
}
body.nt-page .site-header .navbar-nav .nav-link:hover{
  color:var(--nt-indigo) !important;
}
body.nt-page .navbar-rhside{
  background:transparent;
}
body.nt-page .navbar-rhside .nav-item.nav-link{
  color:var(--nt-ink);
}
/* Login -> ghost pill, Book a free trial -> solid indigo pill, matching
   the reference nav's .btn-ghost-light / .btn-primary pair */
body.nt-page .nt-nav-login{
  border:2px solid var(--nt-border);
  border-radius:999px;
  padding:8px 20px !important;
  font-weight:700 !important;
  white-space:nowrap;
  transition:border-color .18s ease, color .18s ease;
}
body.nt-page .nt-nav-login:hover{
  border-color:var(--nt-indigo);
  color:var(--nt-indigo) !important;
}
body.nt-page .nt-nav-cta{
  background:var(--nt-indigo);
  color:#fff !important;
  border-radius:999px;
  padding:8px 20px !important;
  font-weight:700 !important;
  white-space:nowrap;
  box-shadow:0 12px 26px -12px rgba(79,64,255,0.55);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.nt-page .nt-nav-cta:hover{
  background:#4636ee;
  transform:translateY(-2px);
  color:#fff !important;
}
/* Mobile hamburger toggle: dark icon + subtle tinted pill, for legibility
   on the now-white header (was white-on-transparent before) */
body.nt-page #navbar-toggler-btn{
  background:var(--nt-surface-2);
}
body.nt-page .hamburger-menu-icon{
  fill:var(--nt-ink);
}
/* Logged-in state: hamburger/profile initials chip already reads fine on
   white (purple circle, white text) — no change needed there. */

/* Logo: which mark is visible (transparent vs coloured, at each of the
   two breakpoints) is now set directly in raw_base.html via the "hide"
   class, so the existing normal-screen / ultra-small-screen responsive
   toggle keeps working untouched -- no CSS override needed here. */

/* ---- Hero: checklist legibility on the navy gradient ---- */
body.nt-page .landing-page-hero .tickmark-text{
  color:#dedcff;
  font-weight:500;
}
body.nt-page .landing-page-hero .tickmark-svg{
  filter:brightness(0) saturate(100%) invert(85%) sepia(22%) saturate(573%) hue-rotate(83deg) brightness(101%) contrast(96%);
  /* tints the black check-solid.svg to the brand mint (#a6ffcb), matching
     the reference's on-dark accent colour */
}

/* ---- Hero: split the white "card" off the intro slide so the navy
   gradient shows through behind the headline/checklist/photo, while the
   real multi-step form fields (steps 2+) keep their white card look ---- */
body.nt-page .lead-gen-form{
  background:transparent;
  box-shadow:none;
  padding:0;
}
body.nt-page .lead-gen-form .lead-gen-slide{
  background:var(--nt-card);
  border-radius:var(--nt-radius-lg);
  box-shadow:0 40px 80px -30px rgba(0,0,20,0.55);
  padding:28px;
  color:var(--nt-ink);
  max-width:640px;
  margin-inline:auto;
}

/* ---- Hero: second "Find a tutor" button + inline star-rating trust line
   (new markup added in index.html, additive only) ---- */
body.nt-page .nt-hero-trust{
  display:flex; align-items:center; gap:12px; margin-top:22px;
}
body.nt-page .nt-hero-trust-stars{
  display:flex; gap:2px; color:#ffc94d; flex:none;
}
body.nt-page .nt-hero-trust-stars svg{ width:18px; height:18px; }
body.nt-page .nt-hero-trust p{
  margin:0; color:#dedcff; font-size:0.95rem;
}
body.nt-page .nt-hero-trust strong{ color:#fff; }

/* ---- Trust bar (real Google/Trustpilot logos): keep the genuine badges,
   just soften the hard edge so it reads as a continuation of the hero
   rather than a leftover grey strip ---- */
body.nt-page .review-row.parent{
  background:var(--nt-surface) !important;
  padding-block:28px;
  border-bottom:1px solid var(--nt-border);
}
body.nt-page .review-row.parent .absolute.review-row{
  background:var(--nt-surface) !important;
}

/* body.nt-page a{ color:inherit } has higher specificity than the bare
   .nt-btn-ghost-dark{ color:#fff } class rule (3 selector parts vs 1), so
   the hero's "Find a tutor" link was inheriting the page's dark ink
   instead of showing white. Scope the override under .landing-page-hero
   to win outright. */
body.nt-page .landing-page-hero .nt-btn-ghost-dark,
body.nt-page .landing-page-hero .nt-btn-ghost-dark:hover{
  color:#fff;
}

/* ---- Footer "100% like-for-like" pass: wire the .nt-footer-* component
   set (already built, never used) into the real footer via the new
   footer-top row + restyled bottom bar added in raw_base.html. Keeps all
   the real column links (subject/location SEO pages) untouched -- only
   adds the reference's logo+nav+social top row and matching bottom bar. ---- */
body.nt-page .nt-footer-top{
  padding-inline:24px;
  max-width:1180px;
  margin-inline:auto;
  width:100%;
}
body.nt-page .nt-footer-social-icon{
  width:17px; height:17px; opacity:0.85;
}
body.nt-page .nt-footer-social a:hover .nt-footer-social-icon{
  filter:brightness(0) invert(1);
  opacity:1;
}
body.nt-page .nt-footer-bottom,
body.nt-page .nt-pm-credit{
  padding-inline:24px;
  max-width:1180px;
  margin-inline:auto;
  width:100%;
}
body.nt-page .nt-pm-credit{
  text-align:center;
  padding-block:16px;
  font-size:12px;
  border-top:1px solid var(--nt-border);
  max-width:none;
}
body.nt-page .nt-pm-credit a{
  color:var(--nt-muted);
  text-decoration:none;
}
body.nt-page .nt-pm-credit a:hover{
  color:var(--nt-indigo);
}
body.nt-page .nt-footer-legal a{
  font-size:0.85rem;
}

/* ---- Logo visibility fix: the real site has a scroll listener
   (static_repo/base/base.js, shared across the whole app) that toggles
   which logo image is shown by adding/removing "hide"/"show" classes —
   built for the OLD transparent-over-hero header (light logo at top,
   dark logo once scrolled). Our header is now always solid white, so
   that swap just makes the logo disappear (it lands on the invisible
   white "transparent" mark) the moment you scroll. Force the coloured
   mark on regardless of which hide/show classes the scroll JS has
   applied; the ultra-small pair only ever matters below 330px so it's
   simplest to always show the one visible logo through the normal
   (non-ultra-small) mark. */
body.nt-page #novatutors-logo-transparent,
body.nt-page #novatutors-logo-transparent-ultra-small,
body.nt-page #novatutors-logo-coloured-ultra-small{
  display:none !important;
}
body.nt-page #novatutors-logo-coloured{
  display:block !important;
}

/* The same scroll listener also sets the hamburger icon's fill via
   inline style (white at top of page, dark once scrolled) -- inline
   styles beat a plain CSS rule, so pin ours with !important. */
body.nt-page .hamburger-menu-icon{
  fill:var(--nt-ink) !important;
}

/* =====================================================================
   Content-page components (How It Works, and reusable across any future
   pure-content page): page-hero, feature-list/feature-row, timeline,
   cta-simple. Ports the reference HTML's own component CSS verbatim,
   nt- prefixed and using this file's existing --nt- tokens.
   ===================================================================== */

/* ---- Page hero (light, subpages) ---- */
.nt-page-hero{ position:relative; overflow:hidden; padding-block:88px 84px; background:var(--nt-surface); }
.nt-page-hero .nt-blob{ opacity:0.35; }
.nt-page-hero-inner{ position:relative; z-index:2; max-width:760px; }
.nt-page-hero-inner .nt-lede{ max-width:56ch; }

/* ---- Feature list (How It Works) ---- */
.nt-feature-list{ display:flex; flex-direction:column; gap:86px; margin-top:20px; }
.nt-feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.nt-feature-row--rev .nt-feature-media{ order:2; }
.nt-feature-media-frame{ border-radius:var(--nt-radius-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--nt-shadow-card); border:1px solid var(--nt-border); }
.nt-feature-media-frame img{ width:100%; height:100%; object-fit:cover; }
.nt-feature-copy .nt-eyebrow{ margin-bottom:10px; }
.nt-feature-copy h3{ font-size:1.6rem; margin-bottom:14px; }
.nt-feature-copy p{ color:var(--nt-muted); }
@media (max-width:900px){
  .nt-feature-row, .nt-feature-row--rev{ grid-template-columns:1fr; }
  .nt-feature-row--rev .nt-feature-media{ order:-1; }
  .nt-feature-list{ gap:56px; }
}

/* ---- Timeline ---- */
.nt-timeline{ position:relative; margin-top:20px; }
.nt-timeline::before{
  content:""; position:absolute; left:23px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(var(--nt-indigo), var(--nt-sky)); opacity:0.35;
}
.nt-timeline-item{ position:relative; padding-left:66px; margin-bottom:44px; }
.nt-timeline-item:last-child{ margin-bottom:0; }
.nt-timeline-dot{
  position:absolute; left:0; top:2px; width:48px; height:48px; border-radius:50%; background:var(--nt-grad-brand);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1rem;
  box-shadow:0 10px 22px -8px rgba(79,64,255,0.5);
}
.nt-timeline-card{
  background:var(--nt-card); border:1px solid var(--nt-border); border-radius:var(--nt-radius-md); padding:26px 28px;
  box-shadow:var(--nt-shadow-card);
}
.nt-timeline-card h4{ margin:0 0 10px; font-size:1.15rem; font-weight:800; }
.nt-timeline-card p{ color:var(--nt-muted); margin:0 0 16px; }

/* ---- Simple CTA (light) ---- */
.nt-cta-simple{
  background:var(--nt-card); border:1px solid var(--nt-border); border-radius:var(--nt-radius-lg);
  padding:52px 48px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.nt-cta-simple h2{ margin-bottom:0; }
@media (max-width:760px){ .nt-cta-simple{ padding:36px 26px; } }

/* ---- Fix: "Parent Approved." reviews heading was permanently invisible.
   Legacy typewriter effect (index.js) writes into #parent_approved_id
   .not-opaque, but its initial nested .transparent span (opacity:0) was
   never being overridden once revealed, and the effect itself doesn't
   reliably fire. Force the overlay copy visible; the sibling spacer div
   (also .transparent, used only to reserve layout height) is untouched. ---- */
body.nt-page #parent_approved_id .not-opaque.transparent,
body.nt-page #parent_approved_id .not-opaque .transparent{
  opacity:1 !important;
}

/* ---- Fix: Membership page heading was dark navy text sitting directly on
   the sitewide navy hero backdrop (.section-wrapper, in raw_base.html),
   making it almost unreadable. Other pages either cover the backdrop with
   their own opaque hero or already set white text; this page's h1 didn't. ---- */
body.nt-page .membership-page .page-title{
  color:#fff;
}

/* ---- Fix: plain legal/text pages (privacy policy, terms) had dark ink
   text sitting directly on the sitewide navy hero backdrop for their first
   ~640px, same root cause as the membership page fix above. These pages
   have no hero of their own, so give them an opaque light background from
   the top instead of trying to recolour every element inside. ---- */
body.nt-page .nt-legal-page{
  position:relative;
  z-index:1;
  background:var(--nt-surface);
  /* Covers the full 640px .section-wrapper backdrop even when a page's own
     content is shorter than that (e.g. referral_page.html, logged-out-style
     short pages) so no navy band peeks out below short content. Long pages
     (privacy policy, terms) already exceed this and are unaffected. */
  min-height:640px;
}

/* ---- Fix: Logout page "You have been logged out." heading was dark navy
   text sitting directly on the sitewide navy hero backdrop (.section-wrapper,
   in raw_base.html), same root cause as the membership/legal-page fixes
   above. This page has no opaque hero either, so make its heading white. ---- */
body.nt-page .nt-logout-page h2{
  color:#fff;
}

/* =====================================================================
   Like-for-like pass (Sept 2026) — homepage hero rebuilt on the reference
   .hero-inner grid, diagonal divider, 3-card testimonials, compact footer,
   mobile header CTA. Reference: nova/index.html (.hero, .divider, .testi-*,
   .site-header, .site-footer).
   ===================================================================== */

/* ---- Hero grid (reference .hero / .hero-inner) ---- */
body.nt-page .landing-page-hero{
  padding-top:0;              /* spacer-below-header already offsets the fixed nav */
}
body.nt-page .lead-gen-form .lead-gen-slide-1{
  padding:96px 24px 150px;    /* reference: padding-block 110px 150px, minus nav spacer */
  max-width:var(--nt-container);
  margin-inline:auto;
  width:100%;
  box-sizing:border-box;
}
body.nt-page .nt-hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
}
body.nt-page .nt-hero-title{
  color:#fff; margin-bottom:22px; text-align:left;
  font-size:clamp(2.4rem, 5.4vw, 4.1rem); font-weight:800; line-height:1.12; letter-spacing:-0.02em;
}
body.nt-page .nt-word-rotator{
  display:inline-block; perspective:800px; min-width:6.6ch; text-align:left; vertical-align:bottom;
}
body.nt-page #ntHeroWord{ min-width:0; vertical-align:baseline; }
body.nt-page .nt-hero-copy .nt-lede{ color:var(--nt-muted-dark); }
body.nt-page .nt-hero-cta-label{ display:inline-flex; cursor:pointer; margin:0; }
body.nt-page .nt-hero-cta-label .nt-btn{ cursor:pointer; }
body.nt-page .nt-hero-trust{ margin-top:38px; gap:16px; flex-wrap:wrap; }
body.nt-page .nt-hero-trust-stars svg{ width:16px; height:16px; }
body.nt-page .nt-hero-trust p{ font-size:0.92rem; color:#cfcdf5; }
body.nt-page .nt-hero-media{ position:relative; }
@media (max-width:980px){
  body.nt-page .nt-hero-inner{ grid-template-columns:1fr; }
  body.nt-page .nt-hero-media{ order:-1; }
  body.nt-page .lead-gen-form .lead-gen-slide-1{ padding:60px 24px 190px; }
}
@media (max-width:961px){
  /* reference shows the "Free trial" chip on mobile too */
  body.nt-page .nt-hero-chip{ display:flex; left:0; bottom:-22px; }
}

/* ---- Diagonal divider between hero and first light section (reference .divider) ---- */
body.nt-page .nt-divider{ position:relative; height:0; display:flow-root; }
body.nt-page .nt-divider svg{ display:block; width:100%; height:90px; margin-top:-89px; position:relative; z-index:1; } /* below the lead form card (z-index 2) */

/* ---- Testimonials (reference .testi-head / .testi-grid) ---- */
body.nt-page .nt-testi-head{ max-width:640px; margin-bottom:54px; }
body.nt-page .nt-testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ body.nt-page .nt-testi-grid{ grid-template-columns:1fr; } }

/* ---- Mobile header: logo + "Book a free trial" + hamburger (reference nav at <=860px) ---- */
@media (max-width:961px){
  body.nt-page .nt-nav-cta--mobile{
    display:inline-block; margin-right:10px; padding:9px 16px !important; font-size:0.88rem;
    text-decoration:none; line-height:1.2;
  }
  body.nt-page #novatutors-logo-coloured{ width:120px !important; }
  body.nt-page #navbar-toggler-btn{ padding:6px 8px; }
}
@media (min-width:962px){
  body.nt-page .nt-nav-cta--mobile{ display:none; }
}

/* ---- Footer: no wave band, plain top border like the reference ---- */
body.nt-page .site-footer{ background:var(--nt-card); border-top:1px solid var(--nt-border); margin-top:0; }
body.nt-page .wave-content{ background:var(--nt-card); }
body.nt-page .nt-footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--nt-border); color:var(--nt-ink);
  display:inline-flex; align-items:center; justify-content:center; transition:background .18s, color .18s, border-color .18s;
}
body.nt-page .nt-footer-social a:hover{ background:var(--nt-indigo); border-color:var(--nt-indigo); color:#fff; }
body.nt-page .nt-footer-social svg{ width:17px; height:17px; }
body.nt-page .site-footer{ padding-block:56px 0; }
body.nt-page .nt-footer-top{ align-items:center; }

/* ---- Specificity fixes: these component rules were losing to the global
   body.nt-page h3 / body.nt-page p rules (0,1,2 beats 0,1,1) ---- */
body.nt-page .nt-feature-copy h3{ font-size:1.6rem; margin-bottom:14px; }
body.nt-page .nt-step-body h3{ margin-bottom:8px; }
body.nt-page .nt-step-body p{ margin:0; }
body.nt-page .nt-stat-card p{ margin:0; }
body.nt-page .nt-timeline-card p{ margin:0 0 16px; }
body.nt-page .nt-cta-simple h2{ margin-bottom:0; }

/* ---- Close the 14px gap between the fixed header (61px) and the content
   start (75px spacer) that let the navy backdrop show as a thin line ---- */
body.nt-page .spacer-below-header{ height:61px; }

/* ---- Reviews page masonry grid (reference .reviews-grid / .review-card) ---- */
body.nt-page .nt-reviews-grid{ column-count:3; column-gap:26px; margin-top:10px; }
body.nt-page .nt-review-card{
  break-inside:avoid; margin-bottom:26px; background:var(--nt-card); border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-md); padding:28px 26px; box-shadow:var(--nt-shadow-card);
}
body.nt-page .nt-review-card .nt-testi-stars{ margin-bottom:14px; }
body.nt-page .nt-review-card blockquote{ margin:0 0 20px; color:var(--nt-ink); font-size:0.98rem; }
body.nt-page .nt-review-card .nt-testi-foot img{ width:48px; height:48px; border-radius:50%; }
@media (max-width:900px){ body.nt-page .nt-reviews-grid{ column-count:2; } }
@media (max-width:620px){ body.nt-page .nt-reviews-grid{ column-count:1; } }

/* ---- Blog listing (reference .blog-filters / .blog-grid / .blog-card) ---- */
body.nt-page .nt-blog-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
body.nt-page .nt-blog-filter{
  padding:9px 18px; border-radius:999px; border:1px solid var(--nt-border); background:var(--nt-card);
  font-weight:700; font-size:0.85rem; color:var(--nt-muted); text-decoration:none; transition:color .18s, border-color .18s;
}
body.nt-page .nt-blog-filter:hover{ color:var(--nt-indigo); border-color:var(--nt-indigo); }
body.nt-page .nt-blog-filter.is-active{ background:var(--nt-indigo); border-color:var(--nt-indigo); color:#fff; }
body.nt-page .nt-blog-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; margin-top:44px; }
body.nt-page .nt-blog-card{
  background:var(--nt-card); border:1px solid var(--nt-border); border-radius:var(--nt-radius-lg); overflow:hidden;
  box-shadow:var(--nt-shadow-card); display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
body.nt-page .nt-blog-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -20px rgba(18,16,43,0.28); }
body.nt-page .nt-blog-card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--nt-surface-2); }
body.nt-page .nt-blog-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; display:block; }
body.nt-page .nt-blog-card:hover .nt-blog-card-media img{ transform:scale(1.06); }
body.nt-page .nt-blog-card-body{ padding:26px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
body.nt-page .nt-blog-card-tag{
  align-self:flex-start; font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--nt-indigo); background:rgba(79,64,255,0.10); padding:5px 12px; border-radius:999px;
}
body.nt-page .nt-blog-card-body h3{ font-size:1.18rem; margin:0; }
body.nt-page .nt-blog-card-body p{ color:var(--nt-muted); font-size:0.92rem; margin:0; flex:1; }
body.nt-page .nt-blog-card-meta{ font-size:0.8rem; color:var(--nt-muted); margin-top:4px; flex:0 0 auto; }
@media (max-width:820px){ body.nt-page .nt-blog-grid{ grid-template-columns:1fr; } }

/* ---- Blog single post (reference .post-*) ---- */
body.nt-page .nt-post-hero{ padding-block:70px 0; background:var(--nt-surface); }
body.nt-page .nt-post-hero-inner{ max-width:760px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
body.nt-page .nt-post-hero .nt-blog-card-tag{ margin-inline:auto; text-decoration:none; }
body.nt-page .nt-post-hero h1{ margin-top:14px; font-size:clamp(2rem, 4.2vw, 3.2rem); }
body.nt-page .nt-post-meta{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--nt-muted); font-size:0.92rem; margin-top:14px; flex-wrap:wrap; }
body.nt-page .nt-post-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--nt-muted); }
body.nt-page .nt-post-feature{ max-width:900px; margin:38px auto 0; border-radius:var(--nt-radius-lg); overflow:hidden; box-shadow:var(--nt-shadow-card); }
body.nt-page .nt-post-feature img{ width:100%; aspect-ratio:16/8; object-fit:cover; display:block; }
body.nt-page .nt-post-feature figcaption{ padding:12px 16px; background:var(--nt-card); color:var(--nt-muted); font-size:0.9rem; text-align:center; }
body.nt-page .nt-post-wrap{ max-width:720px; margin-inline:auto; padding-block:56px 20px; }
body.nt-page .nt-post-body{ font-size:1.06rem; color:var(--nt-ink); line-height:1.7; }
body.nt-page .nt-post-body h1{ font-size:1.7rem; margin:1.6em 0 0.6em; }
body.nt-page .nt-post-body h2{ font-size:1.5rem; margin:2em 0 0.6em; letter-spacing:-0.01em; }
body.nt-page .nt-post-body h3{ font-size:1.25rem; margin:1.6em 0 0.5em; }
body.nt-page .nt-post-body p{ color:var(--nt-ink); margin-bottom:1.3em; }
body.nt-page .nt-post-body ol, body.nt-page .nt-post-body ul{ padding-left:1.3em; margin-bottom:1.5em; display:flex; flex-direction:column; gap:12px; }
body.nt-page .nt-post-body li{ padding-left:0.3em; }
body.nt-page .nt-post-body li strong{ color:var(--nt-ink); }
body.nt-page .nt-post-body a{ color:var(--nt-indigo); text-decoration:underline; word-break:break-word; }
body.nt-page .nt-post-body img{ max-width:100%; height:auto; border-radius:var(--nt-radius-md); }
body.nt-page .nt-post-cta-inline{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--nt-surface); border:1px solid var(--nt-border); border-radius:var(--nt-radius-md); padding:26px 28px; margin:2.4em 0;
}
body.nt-page .nt-post-cta-inline p{ margin:0; font-weight:700; }
body.nt-page .nt-post-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:40px; padding-top:26px; border-top:1px solid var(--nt-border); flex-wrap:wrap; gap:16px; }
body.nt-page .nt-related-heading{ text-align:center; margin-bottom:10px; }

/* =====================================================================
   Contrast fixes (automated scan, Sept 2026). Root cause: the global
   `body.nt-page a{ color:inherit }` (0,1,1) out-ranks the single-class
   button rules (.nt-btn-primary etc, 0,1,0), and the header's
   `.site-header .navbar-nav .nav-link{color:ink !important}` out-ranks
   .nt-nav-cta — so button *links* rendered dark-navy-on-indigo.
   ===================================================================== */
body.nt-page a.nt-btn.nt-btn-primary,
body.nt-page .nt-btn.nt-btn-primary,
body.nt-page .nt-post-body a.nt-btn.nt-btn-primary,
body.nt-page .nt-cta-inner a.nt-btn.nt-btn-primary{ color:#fff; text-decoration:none; }
body.nt-page a.nt-btn.nt-btn-ghost-dark,
body.nt-page .nt-btn.nt-btn-ghost-dark{ color:#fff; text-decoration:none; }
body.nt-page a.nt-btn.nt-btn-ghost-light,
body.nt-page .nt-btn.nt-btn-ghost-light{ color:var(--nt-ink); text-decoration:none; }
body.nt-page a.nt-btn.nt-btn-ghost-light:hover{ color:var(--nt-indigo); }
body.nt-page .site-header .navbar-nav .nav-link.nt-nav-cta,
body.nt-page a.nt-nav-cta,
body.nt-page a.nt-nav-cta:hover{ color:#fff !important; }
body.nt-page .site-header .navbar-nav .nav-link.nt-nav-login{ color:var(--nt-ink) !important; }
/* legacy purple pill buttons rendered as links (logout, lead-gen complete, dashboards) */
body.nt-page a.btn-nova, body.nt-page a.btn-nova:hover,
body.nt-page a.btn-pill.dark, body.nt-page a.btn-pill.dark:hover{ color:#fff; text-decoration:none; }

/* =====================================================================
   Live mobile feedback pass (6 Sept 2026, Josh on Android ~360px)
   ===================================================================== */

/* 1. Mobile header: never wrap — logo + "Book a free trial" + hamburger on one row */
@media (max-width:961px){
  body.nt-page #navbar > .container-fluid{ flex-wrap:nowrap; align-items:center; }
  body.nt-page #novatutors_name{ margin-right:auto !important; flex:0 1 auto; min-width:0; display:flex; align-items:center; }
  body.nt-page #novatutors-logo-coloured{ width:112px !important; }
  body.nt-page .nt-nav-cta--mobile{ flex:none; white-space:nowrap; padding:8px 14px !important; font-size:0.84rem; margin-right:8px; }
  body.nt-page #navbar-toggler-btn{ flex:none; }
}
@media (max-width:389px){
  body.nt-page #novatutors-logo-coloured{ width:100px !important; }
  body.nt-page .nt-nav-cta--mobile{ padding:7px 11px !important; font-size:0.8rem; margin-right:6px; }
  body.nt-page #navbar-toggler-btn{ padding:4px 6px; }
}

/* 2. Footer on mobile: centre everything */
@media (max-width:700px){
  body.nt-page .nt-footer-top{ flex-direction:column; align-items:center; text-align:center; gap:22px; }
  body.nt-page .nt-footer-links{ justify-content:center; }
  body.nt-page .nt-footer-social{ justify-content:center; }
  body.nt-page .nt-footer-bottom{ flex-direction:column; justify-content:center; text-align:center; }
  body.nt-page .nt-footer-legal{ justify-content:center; }
}

/* 3. Tutor profile pages went off the edge on narrow phones: the profile column
   had 3em side margins and a fixed-width inner block. Plus a sitewide safety net. */
body.nt-page .body-content{ overflow-x:clip; }
@media (max-width:961px){
  body.nt-page .tutor-public-profile-container{ margin:0 12px; width:auto; }
  body.nt-page .tutor-info-flexbox-wrapper{ width:100%; max-width:100%; min-width:0; }
  body.nt-page .tutor-info-flexbox{ margin-left:0; margin-right:0; max-width:100%; box-sizing:border-box; border-radius:20px; }
  body.nt-page .tutor-info-flexbox .btn-nova,
  body.nt-page .tutor-info-flexbox form,
  body.nt-page .tutor-info-flexbox img{ max-width:100%; box-sizing:border-box; }
}

/* 4. Find-a-tutor cards on mobile: padding, rounded photo, calmer type */
@media (max-width:961px){
  body.nt-page .small-screen-flex.tutor-card{
    padding:18px; box-sizing:border-box; border-radius:20px; background:var(--nt-card);
    border:1px solid var(--nt-border); box-shadow:var(--nt-shadow-card); overflow:hidden;
  }
  body.nt-page .small-screen-flex.tutor-card .marketplace-img-container{ flex:0 0 auto; width:auto; height:auto; }
  body.nt-page .small-screen-flex.tutor-card .tutor-img{ width:128px; height:128px; object-fit:cover; border-radius:16px; display:block; }
  body.nt-page .small-screen-flex.tutor-card .tutor-name{ font-size:1.45rem; font-weight:800; height:auto; line-height:1.2; }
  body.nt-page .small-screen-flex.tutor-card .tutor-price{ font-size:0.92rem; font-weight:700; color:var(--nt-indigo); text-align:center; line-height:1.3; margin:4px 0; }
  body.nt-page .small-screen-flex.tutor-card > .flexbox.col.jc-start{ width:100%; padding:12px 0 0; margin:0; text-align:center; }
  body.nt-page .small-screen-flex.tutor-card .tutor-university{ font-size:1rem; }
  body.nt-page .small-screen-flex.tutor-card .tutor-university-course{ font-size:0.9rem; }
  body.nt-page .small-screen-flex.tutor-card .short-bio{ padding:8px 0 0; font-size:0.95rem; }
}

/* 5. Blog posts looked blank: the scroll-reveal gate never fired on a very tall
   article. Article body is never gated now; also break long URLs in body text. */
body.nt-page .nt-post-body, body.nt-page .nt-post-hero-inner, body.nt-page .nt-post-feature{ opacity:1 !important; transform:none !important; }
body.nt-page .nt-post-body p, body.nt-page .nt-post-body li, body.nt-page .nt-post-body a{ overflow-wrap:anywhere; word-break:break-word; }

/* 6. Register / lead forms: the +44 country-code box was ~49px wide */
body.nt-page .form-floating.field-wrapper.country_code{ width:92px; flex:0 0 92px; margin-right:8px; }
body.nt-page .form-floating.field-wrapper.phone_number{ max-width:none; flex:1 1 auto; min-width:0; }