/* =====================================================================
   Novinity — design system
   ---------------------------------------------------------------------
   One stylesheet for the whole site. No build step, no framework.
   Everything is driven by the custom properties in :root, so changing
   the brand colour in one place changes it everywhere.
   ===================================================================== */

:root {
  /* Brand */
  --ink:        #17123a;   /* headings, body text */
  --ink-soft:   #55507a;   /* secondary text */
  --ink-faint:  #8a86a6;   /* captions, meta */

  --violet:     #5b3df5;   /* primary brand */
  --violet-dk:  #4127c9;
  --violet-lt:  #efeaff;

  --coral:      #ff6b53;   /* accent — CTAs that need to shout */
  --coral-lt:   #fff0ec;

  --mint:       #12b886;   /* success, "free", availability */
  --mint-lt:    #e6f9f2;

  --sun:        #ffb020;   /* highlights, ratings */
  --sun-lt:     #fff6e2;

  --paper:      #ffffff;
  --canvas:     #f7f6fc;   /* page background */
  --line:       #e6e3f2;   /* borders */

  /* Type */
  --font-head: "Baloo 2", Georgia, serif;
  --font-body: Nunito, system-ui, -apple-system, sans-serif;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23,18,58,.06), 0 2px 8px rgba(23,18,58,.05);
  --shadow-md: 0 4px 12px rgba(23,18,58,.08), 0 12px 32px rgba(23,18,58,.07);
  --shadow-lg: 0 8px 24px rgba(23,18,58,.10), 0 24px 64px rgba(23,18,58,.10);

  --wrap: 1180px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* Visible focus for keyboard users — never remove this. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section-tight { padding: 44px 0; }
.section-alt { background: var(--paper); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.narrow { max-width: 720px; margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
/* The supplied logo is a square lockup: the brain symbol on top, the word
   "Novinity" beneath it, and a lot of cream whitespace around both. Shown
   whole in a header bar it has to shrink so far that the word becomes
   unreadable and the brain is tiny.
   So the header shows the SYMBOL ONLY, windowed out of that square with
   background-size and background-position, and sets "Novinity" alongside
   it as real text. Nothing is redrawn — the artwork file is untouched —
   and the name is now live text, so it stays crisp at any size and can be
   read by a screen reader. */
.brand-mark {
  /* Wider than it is tall so the sun rays either side of the brain get
     room, instead of being clipped by a square window. */
  width: 112px; height: 84px;
  flex: 0 0 112px;
  display: block;
  border-radius: 16px;
  background-image: url('assets/logo.jpg');
  background-repeat: no-repeat;
  /* Zoom lifts the symbol to fill the window; 33% down the image is where
     its middle sits, which drops the wordmark out of view. `contain` on
     the height keeps the artwork's proportions while the box is wider. */
  background-size: auto 250%;
  background-position: 50% 33%;
  background-color: #fdfbf4;          /* matches the artwork's own cream */
}

.brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -.015em;
  line-height: 1;
  color: #16457a;                      /* the blue used in the artwork */
  white-space: nowrap;
}

/* On the dark footer the blue would disappear into the background. */
.brand-footer .brand-name { color: #fff; }

@media (max-width: 640px) {
  .brand-mark { width: 62px; height: 50px; flex-basis: 62px; border-radius: 11px; }
  .brand-name { font-size: 1.35rem; }
}

/* Kept for anywhere still showing the whole lockup. */
.brand-logo {
  height: 56px; width: auto;
  flex: 0 0 auto; display: block;
  border-radius: 8px;
}
@media (max-width: 640px) { .brand-logo { height: 46px; } }

/* On the dark footer the logo's cream background would read as a pale
   square. Rounding and a soft inset keep it looking intentional. */
.brand-logo-footer {
  height: 64px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.main-nav { display: flex; gap: 22px; margin-left: auto; }
.main-nav a { color: var(--ink-soft); font-weight: 600; font-size: .96rem; }
.main-nav a:hover, .main-nav a.active { color: var(--violet); text-decoration: none; }
.header-actions { display: flex; gap: 10px; align-items: center; }

/* Auth links live in the header on desktop and inside the menu on mobile,
   so they are never the thing that gets squeezed out on a small screen. */
.nav-auth { display: none; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink); }

@media (max-width: 900px) {
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: 8px 20px 16px;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; margin-left: auto; order: 3; }

  /* There is not room for both header buttons beside the logo on a phone,
     so the outline one (Log In, or the dashboard link once signed in) is
     hidden HERE and shown inside the menu instead — see .nav-auth below.
     Hiding it without that replacement left mobile users with no way to
     log in or reach their dashboard at all. */
  .header-actions .btn-outline { display: none; }

  .main-nav .nav-auth {
    display: block;
    color: var(--violet);
    font-weight: 700;
  }
  .main-nav .nav-auth:last-child { border-bottom: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 700; font-size: .96rem;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--violet-dk); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--coral); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: #ec5540; box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--violet); border-color: var(--line); }
.btn-outline:hover { border-color: var(--violet); background: var(--violet-lt); }
.btn-ghost { background: transparent; color: var(--ink-soft); padding-inline: 10px; }
.btn-ghost:hover { color: var(--violet); }
.btn-sm { padding: 7px 14px; font-size: .87rem; }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-danger { background: #fff; color: #c0392b; border-color: #f3d0cb; }
.btn-danger:hover { background: #fdf0ee; border-color: #c0392b; }

/* ---------- cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px; box-shadow: var(--shadow-sm);
}
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-pad-lg { padding: 32px; }

/* Course / tutor tile */
.tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; }
.tile-media { aspect-ratio: 16/9; background: var(--violet-lt); overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tile-title { font-size: 1.15rem; margin: 0 0 6px; }
.tile-title a { color: var(--ink); }
.tile-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- pills, badges, tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700; line-height: 1.6;
  background: var(--violet-lt); color: var(--violet-dk);
}
.pill-mint  { background: var(--mint-lt); color: #0b7a5a; }
.pill-coral { background: var(--coral-lt); color: #c2402c; }
.pill-sun   { background: var(--sun-lt); color: #9a6600; }
.pill-grey  { background: #f0eef8; color: var(--ink-soft); }

.eyebrow {
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; font-weight: 800; color: var(--violet);
  margin: 0 0 10px;
}

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label, .label {
  display: block; font-weight: 700; font-size: .9rem;
  margin-bottom: 6px; color: var(--ink);
}
.input, input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
input[type="time"], input[type="url"], input[type="search"],
select, textarea {
  width: 100%; padding: 11px 14px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); transition: border-color .12s ease, box-shadow .12s ease;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355507a' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 18px; padding-right: 40px;
}
textarea { min-height: 120px; resize: vertical; }

/* Safari puts its own chrome on search inputs and ignores the height we set. */
input[type="search"] { -webkit-appearance: none; appearance: none; }

.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-lt);
}
.hint { font-size: .84rem; color: var(--ink-faint); margin-top: 5px; }
.field-error { font-size: .84rem; color: #c0392b; margin-top: 5px; font-weight: 600; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.check input { width: auto; margin-top: 4px; flex-shrink: 0; }

/* ---------- alerts ---------- */
.alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: .93rem; font-weight: 600; margin-bottom: 16px; border: 1px solid; }
.alert-info    { background: var(--violet-lt); border-color: #d6cbff; color: var(--violet-dk); }
.alert-success { background: var(--mint-lt);   border-color: #b7ead7; color: #0b7a5a; }
.alert-warn    { background: var(--sun-lt);    border-color: #f5dca6; color: #8a5c00; }
.alert-error   { background: #fdeeec;          border-color: #f5c6bf; color: #a62d1c; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
table.data th, table.data td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); background: #fbfaff; }
table.data tr:last-child td { border-bottom: 0; }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(900px 420px at 12% -8%, #ede7ff 0%, transparent 62%),
    radial-gradient(760px 400px at 92% 6%, var(--coral-lt) 0%, transparent 60%),
    var(--canvas);
  padding: 68px 0 76px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.hero .lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 56ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }
.hero-visual { position: relative; }
.hero-visual img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.hero-float {
  position: absolute; background: var(--paper); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 12px 16px; font-size: .88rem; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.hero-float-a { bottom: -18px; left: -14px; }
.hero-float-b { top: -16px; right: -10px; }
@media (max-width: 640px) { .hero-float { display: none; } }

.trust-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 24px; }
.trust-item { display: flex; gap: 9px; align-items: center; font-size: .93rem; font-weight: 700; color: var(--ink-soft); }

.stat-row { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 30px; }
.stat .num { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--violet); line-height: 1; }
.stat .label { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- subject chips ---------- */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-weight: 700; font-size: .9rem; color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-body);
}
.chip:hover { border-color: var(--violet); color: var(--violet); text-decoration: none; }
.chip[aria-pressed="true"], .chip.active { background: var(--violet); border-color: var(--violet); color: #fff; }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { position: relative; padding-top: 52px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--violet); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-family: var(--font-head);
}

/* ---------- booking calendar ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.slot {
  padding: 10px 6px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--paper); font-weight: 700; font-size: .9rem; color: var(--ink);
  cursor: pointer; text-align: center; font-family: var(--font-body);
}
.slot:hover { border-color: var(--violet); background: var(--violet-lt); }
.slot[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.slot:disabled { opacity: .4; cursor: not-allowed; background: #f4f2fa; }

.day-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.day-btn {
  flex: 0 0 auto; min-width: 74px; padding: 10px 8px; text-align: center;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; font-family: var(--font-body);
}
.day-btn .dow { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 800; }
.day-btn .dnum { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.day-btn[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); }
.day-btn[aria-pressed="true"] .dow,
.day-btn[aria-pressed="true"] .dnum { color: #fff; }
.day-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }
.side-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 88px; }
@media (max-width: 860px) { .side-nav { position: static; flex-direction: row; overflow-x: auto; } }
.side-nav a, .side-nav button {
  padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: .94rem;
  color: var(--ink-soft); background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-body); white-space: nowrap;
}
.side-nav a:hover, .side-nav button:hover { background: var(--violet-lt); color: var(--violet-dk); text-decoration: none; }
.side-nav .active { background: var(--violet); color: #fff; }

.kid-card { display: flex; gap: 14px; align-items: center; }
.kid-avatar {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  background: var(--sun-lt); display: grid; place-items: center; font-size: 1.6rem;
}
.session-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.session-item:last-child { border-bottom: 0; }
.session-when {
  flex: 0 0 84px; text-align: center; background: var(--violet-lt);
  border-radius: var(--r-sm); padding: 8px 4px;
}
.session-when .m { font-size: .72rem; text-transform: uppercase; font-weight: 800; color: var(--violet-dk); letter-spacing: .05em; }
.session-when .d { font-size: 1.5rem; font-weight: 800; font-family: var(--font-head); color: var(--violet-dk); line-height: 1.1; }

.credit-badge {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--mint-lt); border: 1px solid #b7ead7;
  border-radius: var(--r-md); padding: 14px 20px;
}
.credit-badge .n { font-size: 2rem; font-weight: 800; font-family: var(--font-head); color: #0b7a5a; line-height: 1; }

/* ---------- pricing ---------- */
.price-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.price-card.featured {
  border-color: var(--violet); border-width: 2px; box-shadow: var(--shadow-md);
  /* Extra headroom so the ribbon sits above the title rather than on it. */
  padding-top: 34px;
}
.price-tag { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; color: var(--ink); line-height: 1; }
.price-tag .per { font-size: .95rem; font-weight: 700; color: var(--ink-faint); font-family: var(--font-body); }
.price-features { list-style: none; padding: 0; margin: 18px 0; }
.price-features li { padding: 7px 0 7px 28px; position: relative; font-size: .95rem; }
.price-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--mint); font-weight: 800; }
.ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--violet); color: #fff; padding: 4px 16px; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  /* Must stay on one line — wrapping doubles its height and it lands on the title. */
  white-space: nowrap;
}

/* ---------- prose (long text) ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose code { background: #f0eef8; padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--violet-lt); color: var(--ink-soft); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .94rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: #fbfaff; }

/* ---------- testimonial ---------- */
.quote-card { background: var(--paper); border-radius: var(--r-md); padding: 26px; border: 1px solid var(--line); }
.quote-card .stars { color: var(--sun); letter-spacing: 2px; margin-bottom: 8px; }
.quote-card blockquote { margin: 0 0 16px; font-size: 1.02rem; }
.quote-by { display: flex; gap: 10px; align-items: center; font-size: .9rem; font-weight: 700; }

/* ---------- FAQ ---------- */
details.faq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 12px; }
details.faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--violet); line-height: 1; }
details.faq[open] summary::after { content: "\2013"; }
details.faq > *:not(summary) { margin-top: 12px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--violet), #7d4bf0 55%, var(--coral));
  color: #fff; border-radius: var(--r-lg); padding: 44px 36px; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 56ch; margin-inline: auto; }
.cta-band .btn-primary { background: #fff; color: var(--violet-dk); }
.cta-band .btn-primary:hover { background: #f2eeff; }
.cta-band .btn-outline { color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #c9c4e4; padding: 56px 0 28px; margin-top: 72px; }
.site-footer a { color: #c9c4e4; font-size: .93rem; }
.site-footer a:hover { color: #fff; }
/* The brand column, then four link columns. auto-fit rather than a fixed
   count so adding or removing a column does not need a CSS change, and so
   the columns reflow on a laptop instead of being squeezed thin. */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 1040px) { .footer-grid { grid-template-columns: 1.6fr repeat(2, 1fr); } }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.13); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .87rem; }

/* =====================================================================
   TUTOR CONSOLE — schedule and classroom
   ---------------------------------------------------------------------
   A working tool rather than a marketing page: denser, calmer, and built
   around "what am I teaching next" answered at a glance.
   ===================================================================== */

/* Sub-navigation across the top of the console */
.tt-subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.tt-subnav button {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .98rem;
  color: var(--ink-soft); padding: 12px 16px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tt-subnav button:hover { color: var(--violet); }
.tt-subnav button.active { color: var(--violet); border-bottom-color: var(--violet); }

/* Toolbar: Today, arrows, range, view toggle */
.tt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.tt-range { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; margin: 0 4px; }
.tt-views { display: flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.tt-views button {
  background: var(--paper); border: 0; cursor: pointer; padding: 8px 20px;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--ink-soft);
}
.tt-views button.active { background: var(--violet); color: #fff; }
.tt-arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer; font-size: 1.1rem; color: var(--ink-soft);
  display: grid; place-items: center;
}
.tt-arrow:hover { border-color: var(--violet); color: var(--violet); }

/* Agenda view */
.agenda-day { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-date {
  flex: 0 0 62px; text-align: center; align-self: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.agenda-date .m { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint); padding-top: 6px; }
.agenda-date .d { display: block; font-family: var(--font-head); font-size: 1.6rem;
  font-weight: 800; line-height: 1.1; color: var(--ink); }
.agenda-date .w { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  background: var(--ink-soft); color: #fff; padding: 3px 0; letter-spacing: .06em; }
.agenda-date.is-today .w { background: var(--violet); }
.agenda-items { flex: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.agenda-item { display: flex; gap: 16px; align-items: flex-start; }
.agenda-thumb {
  flex: 0 0 84px; height: 60px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--violet-lt); display: grid; place-items: center; font-size: 1.5rem;
}
.agenda-thumb img { width: 100%; height: 100%; object-fit: cover; }
.agenda-title { font-weight: 800; margin: 0 0 3px; font-size: 1.02rem; }
.agenda-title a { color: var(--violet-dk); }
.agenda-meta { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* Week view */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 900px) { .week-grid { grid-template-columns: repeat(2, 1fr); } }
.week-col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); min-height: 130px; padding: 10px; }
.week-col.is-today { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet-lt); }
.week-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); margin: 0 0 8px; }
.week-col .dnum { font-family: var(--font-head); font-size: 1.15rem; color: var(--ink); }
.week-chip {
  display: block; background: var(--violet-lt); border-radius: 8px;
  padding: 7px 9px; margin-bottom: 6px; font-size: .8rem; font-weight: 700;
  color: var(--violet-dk); text-decoration: none; line-height: 1.35;
}
.week-chip:hover { background: #e2d9ff; text-decoration: none; }
.week-chip .t { display: block; font-weight: 800; }

/* Classroom page */
.cls-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 18px 0 26px; }
.cls-tabs a, .cls-tabs button {
  padding: 10px 0; font-weight: 700; font-size: .96rem; color: var(--ink-soft);
  border: 0; background: none; cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -1px; font-family: var(--font-body);
}
.cls-tabs .active { color: var(--violet); border-bottom-color: var(--violet); }
.cls-meeting {
  background: #fbfaff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px; text-align: center;
}
.cls-safety { border-left: 4px solid var(--sun); background: var(--sun-lt); padding: 18px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cls-safety ul { margin: 10px 0 0; padding-left: 1.1em; font-size: .93rem; }
.cls-safety li { margin-bottom: 5px; }

/* ---------------------------------------------------------------------
   Conversations — thread list beside a reader, like a mail client.
   --------------------------------------------------------------------- */
.msg-layout {
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden; min-height: 460px;
}
@media (max-width: 780px) { .msg-layout { grid-template-columns: 1fr; } }

.msg-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: 620px; }
@media (max-width: 780px) {
  .msg-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 260px; }
}
.msg-thread {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px;
  cursor: pointer; font-family: var(--font-body);
}
.msg-thread:hover { background: #fbfaff; }
.msg-thread.active { background: var(--violet-lt); }
.msg-thread .who { font-weight: 800; font-size: .95rem; color: var(--ink); margin: 0 0 2px; }
.msg-thread .about { font-size: .82rem; color: var(--ink-faint); margin: 0 0 4px; }
.msg-thread .peek { font-size: .84rem; color: var(--ink-soft); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); margin-left: 6px; vertical-align: middle;
}

.msg-reader { display: flex; flex-direction: column; min-height: 460px; }
.msg-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.msg-body { flex: 1; padding: 20px; overflow-y: auto; max-height: 420px; display: flex;
  flex-direction: column; gap: 14px; }
.msg-empty { flex: 1; display: grid; place-items: center; color: var(--ink-faint); padding: 40px; text-align: center; }

.bubble { max-width: 78%; padding: 11px 15px; border-radius: 16px; font-size: .94rem; line-height: 1.55; }
.bubble .meta { display: block; font-size: .74rem; margin-top: 6px; opacity: .75; }
.bubble.them { background: #f0eef8; color: var(--ink); border-bottom-left-radius: 5px; align-self: flex-start; }
.bubble.me   { background: var(--violet); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }

.msg-compose { border-top: 1px solid var(--line); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-end; }
.msg-compose textarea { min-height: 46px; max-height: 140px; resize: vertical; }

/* =====================================================================
   THE STUDENT VIEW (student.html)
   ---------------------------------------------------------------------
   Deliberately different from the rest of the site: larger type, fewer
   things on screen, and nothing small enough to be fiddly for a seven-
   year-old on a tablet. Every tap target here is at least 44px.
   ===================================================================== */

body.kid-page { background: #fbfaff; font-size: 18px; }

.kid-header {
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 10px 0; position: sticky; top: 0; z-index: 50;
}
.kid-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.kid-hero {
  background:
    radial-gradient(800px 300px at 20% 0%, #ede7ff 0%, transparent 65%),
    radial-gradient(600px 280px at 90% 10%, var(--sun-lt) 0%, transparent 60%);
  padding: 40px 0 32px; margin-bottom: 8px;
}
.kid-hello { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kid-hello h1 { margin: 0 0 4px; font-size: clamp(2rem, 6vw, 3rem); }
.kid-avatar-big {
  width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow-md);
  display: grid; place-items: center; font-size: 3rem;
}
.kid-cheer { margin: 0; font-size: 1.12rem; color: var(--ink-soft); font-weight: 600; }

.kid-h2 {
  font-size: 1.5rem; margin: 36px 0 14px;
  display: flex; align-items: center; gap: 10px;
}

/* ---- the next class, the most important thing on the page ---- */
.kid-next {
  background: var(--paper); border: 2px solid var(--violet-lt);
  border-radius: var(--r-lg); padding: 26px;
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.kid-next-main { flex: 1 1 300px; }
.kid-next-course { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; margin: 0 0 2px; }
.kid-next-with { margin: 0 0 10px; color: var(--ink-soft); font-weight: 700; }
.kid-next-when { margin: 0 0 10px; font-size: 1.06rem; font-weight: 700; }
.kid-countdown {
  margin: 0; display: inline-block;
  background: var(--violet-lt); color: var(--violet-dk);
  padding: 8px 18px; border-radius: var(--r-pill);
  font-weight: 800; font-size: 1.02rem;
}
.kid-next-action { flex: 0 1 260px; text-align: center; }

/* The join button is deliberately dull until the class is actually open,
   so a child is never invited to click something that will not work. */
.kid-join {
  width: 100%; font-size: 1.15rem; padding: 18px 24px;
  background: #cfc9e8; box-shadow: none; pointer-events: none;
}
.kid-join.is-live {
  background: var(--coral); box-shadow: var(--shadow-md); pointer-events: auto;
  animation: kid-pulse 2s ease-in-out infinite;
}
@keyframes kid-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.kid-note { font-size: .92rem; color: var(--ink-faint); margin: 10px 0 0; }

.kid-empty {
  background: var(--paper); border: 2px dashed var(--line);
  border-radius: var(--r-lg); padding: 40px 24px; text-align: center;
}
.kid-empty p { margin: 10px 0 0; font-weight: 700; }

/* ---- later classes ---- */
.kid-list { display: flex; flex-direction: column; gap: 12px; }
.kid-row {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; display: flex; align-items: center; gap: 18px;
}
.kid-row-date {
  flex: 0 0 62px; text-align: center; background: var(--violet-lt);
  border-radius: var(--r-sm); padding: 8px 4px; line-height: 1.1;
}
.kid-row-date .d { display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--violet-dk); }
.kid-row-date .m { display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase; color: var(--violet-dk); letter-spacing: .05em; }

/* ---- progress ---- */
.kid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.kid-stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 18px; text-align: center;
}
.kid-stat .n { display: block; font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; color: var(--violet); line-height: 1; }
.kid-stat .l { display: block; margin-top: 6px; font-weight: 700; color: var(--ink-soft); font-size: .95rem; }

.kid-badges {
  margin-top: 16px; font-size: 1.7rem; line-height: 1.7;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}

/* ---- tutor's notes ---- */
.kid-notes { display: flex; flex-direction: column; gap: 14px; }
.kid-quote {
  margin: 0; background: var(--mint-lt); border: 1px solid #b7ead7;
  border-radius: var(--r-md); padding: 20px 22px;
}
.kid-quote blockquote {
  margin: 0 0 10px; font-size: 1.06rem; font-weight: 600; color: #0a5c45;
}
.kid-quote blockquote::before { content: "“"; }
.kid-quote blockquote::after  { content: "”"; }
.kid-quote figcaption { font-weight: 800; color: #0b7a5a; font-size: .95rem; }

@media (max-width: 560px) {
  .kid-next { padding: 20px; }
  .kid-next-action { flex: 1 1 100%; }
  .kid-avatar-big { width: 68px; height: 68px; flex-basis: 68px; font-size: 2.2rem; }
}

/* ---------- utilities ---------- */
.hidden, [hidden] { display: none !important; }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--violet); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0; z-index: 100; font-weight: 700;
}
.skip-link:focus { left: 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #eeebf7 25%, #f7f5fd 50%, #eeebf7 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite;
  border-radius: var(--r-sm); color: transparent;
}
@keyframes shimmer { to { background-position: -200% 0; } }

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

/* Print — parents printing a schedule or receipt */
@media print {
  .site-header, .site-footer, .btn, .side-nav { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}