/* The public site: everything a stranger sees before they have an account.
   ---------------------------------------------------------------------------
   Loaded after styles.css and using nothing from it but the custom properties.
   Every selector here is either prefixed `site-` or nested under `body.site`,
   so that none of it can reach the product. That matters more than it looks:
   the marketing pages and the lesson page will be edited by different people at
   different times for different reasons, and a shared `.card` that quietly
   changes shape under a student mid-lesson is the kind of bug nobody thinks to
   look for.

   The layout follows Laura's own site rather than improving on it — a red bar
   across the top, full-width bands of teal and cyan, photographs cut out and
   laid over the colour, headlines in her condensed display face. Her audience
   arrives from a YouTube channel with 910,000 subscribers; the site they land
   on should look like the channel they came from, not like a SaaS product with
   her logo dropped in.

   Three things here are deliberately not hers:

     - Body text is 17px, not her 14-16px. The readers are learning English.
     - Her nav red (#ec2f2f) is deepened to --red (#d92b2b) for white text,
       which takes it from 4.2:1 to 4.9:1 and over the AA line.
     - Nothing animates on scroll. Her Wix build fades sections in as they
       arrive, which on a slow connection means reading a blank page.
*/

/* --- undoing the product's own element selectors ------------------------- */
/*
   styles.css styles four bare element names — `main`, `section`, `h1` and `h2`
   — because until now every page in this app was a product page and those rules
   were a sensible default for all of them. The public site is served by the
   same stylesheet and inherits them, and two do real damage:

     main     display:grid with a 340-420px first column above 900px, plus
              max-width:1180px and padding. Every full-bleed band became a cell
              in a narrow left-hand column.
     section  a white card: border, radius, shadow, 20px padding. Every band
              turned into a floating box with a rounded edge.

   Found by looking at the rendered page, not by the tests, which were all green
   — they assert what the markup *says*, and nothing about a stylesheet written
   for somewhere else reaching in. The comment at the top of this file claiming
   nothing here can reach the product was true and beside the point: the leak
   ran the other way.

   The reset is wrapped in `:where()`, which contributes no specificity. That
   leaves each rule weighing exactly as much as the bare `section` it is undoing
   — and since this file loads after styles.css, equal weight means this one
   wins. Written as plain `body.site section` instead, the reset scores higher
   than `.band-teal` and paints every coloured band white, which is precisely
   what the first attempt did.
*/

:where(body.site) main {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}

:where(body.site) section {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.site {
  font-size: 17px;
  background: var(--card);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

body.site :focus-visible {
  outline: 3px solid var(--teal-logo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- masthead ------------------------------------------------------------ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--red);
  border-bottom: 4px solid var(--teal);
}

.site-head-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-head .brand-logo { height: 44px; width: auto; display: block; }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.site-nav a:hover { background: rgba(0, 0, 0, .16); color: #fff; }

/* An underline rather than a filled pill: on a red bar a filled "you are here"
   competes with the sign-up button beside it, and only one of the two is worth
   a click. */
.site-nav a.on {
  box-shadow: inset 0 -3px 0 var(--yellow);
  background: rgba(0, 0, 0, .12);
}

.nav-gap { width: 10px; }

.site-nav a.nav-cta {
  background: var(--card);
  color: var(--red-deep);
  font-weight: 700;
  padding: 9px 16px;
}
.site-nav a.nav-cta:hover { background: var(--yellow); color: var(--ink); }

.site-nav a.nav-quiet { opacity: .9; }

/* The menu, as a checkbox. No JavaScript runs on these pages. */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-button { display: none; }

@media (max-width: 900px) {
  .site-head-in { flex-wrap: wrap; }

  .menu-button {
    display: block;
    margin-left: auto;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
  }
  .menu-button span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
  }
  .menu-button span + span { margin-top: 5px; }
  .menu-toggle:focus-visible + .menu-button { outline: 3px solid #fff; }

  .site-nav {
    display: none;
    width: 100%;
    margin: 6px 0 4px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .menu-toggle:checked ~ .site-nav { display: flex; }

  .site-nav a {
    padding: 12px 8px;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 1rem;
  }
  .site-nav a.on { box-shadow: inset 3px 0 0 var(--yellow); }
  .nav-gap { display: none; }
  .site-nav a.nav-cta {
    margin-top: 10px;
    border-radius: 10px;
    border-top: 0;
    text-align: center;
  }
}

/* --- bands --------------------------------------------------------------- */
/* Full-bleed colour, content held to a column inside it. Her site's rhythm. */

.band { padding: clamp(44px, 7vw, 86px) clamp(16px, 4vw, 32px); }
.band-in { max-width: 1120px; margin: 0 auto; }
.band-narrow .band-in { max-width: 780px; }

.band-paper { background: var(--paper); }
.band-white { background: var(--card); }
.band-teal { background: var(--teal); color: var(--on-teal); }
.band-cyan { background: var(--cyan-soft); }
.band-cream { background: var(--yellow-soft); }

.band-teal h2, .band-teal h3 { color: #fff; }
.band-teal p { color: var(--on-teal-soft); }
.band-teal a:not(.btn) { color: var(--yellow); }

/* --- type ---------------------------------------------------------------- */

.site h1, .site h2, .site h3 { line-height: 1.12; letter-spacing: -.005em; }

.site h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  letter-spacing: .005em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.site h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  margin: 0 0 16px;
  text-wrap: balance;
}

.site h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 8px; }

.site p { margin: 0 0 16px; max-width: 62ch; }
.lede { font-size: 1.16rem; color: var(--ink-soft); }
.band-teal .lede { color: var(--on-teal-soft); }

.site .eyebrow {
  display: block;
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--red);
}
.band-teal .eyebrow { color: var(--yellow); }

.centred { text-align: center; }
.centred p, .centred .lede { margin-left: auto; margin-right: auto; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); color: #fff; }

.btn-teal { background: var(--teal-logo); color: #fff; }
.btn-teal:hover { background: var(--teal-deep); color: #fff; }

.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: #ffd22e; color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn-ghost:hover { background: var(--ink); color: var(--card); }

.band-teal .btn-ghost { color: #fff; }
.band-teal .btn-ghost:hover { background: #fff; color: var(--teal-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.centred .btn-row { justify-content: center; }

.btn-note { font-size: .9rem; color: var(--ink-soft); margin: 14px 0 0; }
.band-teal .btn-note { color: var(--on-teal-soft); }

/* --- hero ---------------------------------------------------------------- */

/* The hero carries `band-teal` as well, in the markup, rather than repeating
   its rules here. It started out with only a teal background of its own, which
   looked identical and was not: every "on a teal surface" rule in this file is
   written against `.band-teal`, so the hero kept the light-background eyebrow
   (red on teal, about 2:1) and the light-background ghost button. Two colours
   that were never meant to touch, in the first thing anybody sees. */
.hero {
  overflow: hidden;
  position: relative;
}

.hero-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 70px) clamp(16px, 4vw, 32px) 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 4vw, 50px);
  align-items: end;
}

.hero-words { padding-bottom: clamp(44px, 6vw, 76px); }
.hero h1 { color: #fff; }
.hero .lede { color: var(--on-teal-soft); font-size: 1.24rem; }

/* Sat on the floor of the band, because the cut-out has feet. Aligning it any
   other way leaves her standing in mid-air. */
.hero-figure {
  align-self: end;
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  object-position: bottom center;
}

@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; padding-bottom: 0; }
  .hero-words { padding-bottom: 20px; }
  .hero-figure { max-height: 300px; }
}

/* --- the figures strip --------------------------------------------------- */

.figures {
  background: var(--red);
  color: #fff;
  padding: 22px clamp(16px, 4vw, 32px);
}
.figures-in {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  text-align: center;
}
.figures b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
}
.figures span { font-size: .88rem; opacity: .92; }

/* --- grids --------------------------------------------------------------- */

.grid { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }

/* A two-column block of words beside a picture. `.flip` puts the picture
   first on wide screens and never on narrow ones — on a phone the words
   always come first, because a column of photographs with the explanation
   underneath each one reads as a gallery. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.split img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.split .plain { border-radius: 0; }
.split-words { min-width: 0; }

@media (min-width: 861px) {
  .split.flip .split-words { order: 2; }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* --- cards --------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.band-white .card { background: var(--paper); }

/* `height: auto` is load-bearing. The `height` attribute on an <img> is a
   presentational hint that sets the CSS `height` property, and `aspect-ratio`
   only does anything when one of the two dimensions is auto — so without this
   the box kept the full 562px of the source file against a 353px column and
   `cover` cropped away half the artwork. The attributes stay on the tag
   because they are what reserves the right space before the image arrives. */
.card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 4px; }
.card-tag { font-size: .84rem; color: var(--red); font-weight: 600; margin: 0 0 10px; }
.card-body p { font-size: .97rem; }
.card-body .btn { margin-top: auto; align-self: flex-start; }

/* Laura speaking in her own words, as separate points rather than one block
   of prose. Bulleted because she wrote them as bullets, but spaced like
   paragraphs — three sentences behind a small round dot reads as a list of
   features, which is the opposite of what this section is for. */
.says { list-style: none; margin: 0; padding: 0; }
.says li { margin-bottom: 16px; }
.says li:last-child { margin-bottom: 0; }

.bullets { margin: 0 0 18px; padding-left: 22px; font-size: .97rem; }
.bullets li { margin-bottom: 8px; }

.ticks { list-style: none; margin: 0 0 18px; padding: 0; font-size: .97rem; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}
.band-teal .ticks li::before { border-color: var(--yellow); }

.price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--ink);
  margin: 0 0 12px;
}

/* --- numbered steps ------------------------------------------------------ */

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 56px;
  margin-bottom: 22px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  display: grid;
  place-items: center;
}
.band-teal .steps li::before { background: var(--yellow); color: var(--ink); }
.steps h3 { margin-bottom: 2px; }
.steps p { margin: 0; font-size: .97rem; }

/* --- quotes -------------------------------------------------------------- */

.quote {
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px;
  border-top: 5px solid var(--yellow);
  box-shadow: var(--shadow);
}
.quote blockquote { margin: 0 0 14px; font-size: 1.04rem; }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote cite { font-style: normal; font-size: .88rem; color: var(--ink-soft); font-weight: 600; }

/* --- teachers ------------------------------------------------------------ */

.teacher { text-align: center; }
.teacher img.photo {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 14px;
  display: block;
}
/* The badge slot is rendered for both teachers and filled for one. Berwyn has
   his own channel mark and Laura's *is* the site logo, so only his is shown —
   and with the slot collapsing when empty, his name, his lesson count and his
   student's quote all sat 55px below hers, which read as the two of them being
   ranked rather than laid out. An empty box costs nothing and lines the
   columns up. */
.teacher .badge-slot { height: 84px; display: grid; place-items: center; }
.teacher .badge { width: 74px; height: auto; display: block; }
.teacher p { margin-left: auto; margin-right: auto; }
.teacher .role { color: var(--ink-soft); font-size: .97rem; }
.teacher .lessons {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--red);
}

/* --- forms --------------------------------------------------------------- */

.site-form { display: grid; gap: 16px; max-width: 560px; }
.site-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.site-form input,
.site-form textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}
.site-form textarea { min-height: 150px; resize: vertical; }
.site-form input:focus, .site-form textarea:focus { border-color: var(--teal-logo); outline: none; }
.site-form .hint { font-weight: 400; color: var(--ink-soft); font-size: .88rem; }

.flash {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 24px;
  max-width: 560px;
}
.flash p { margin: 0; }
.flash-good { background: var(--teal-soft); border-left: 5px solid var(--teal-logo); }
.flash-bad { background: var(--danger-soft); border-left: 5px solid var(--danger); }

/* --- footer -------------------------------------------------------------- */

.site-foot {
  background: var(--teal-deep);
  color: var(--on-teal-soft);
  padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 32px) 0;
}

.site-foot-in {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.2fr;
  gap: clamp(26px, 5vw, 60px);
}

.foot-brand img { width: 170px; height: auto; display: block; margin-bottom: 14px; }
.foot-brand p { font-size: .95rem; margin-bottom: 14px; }

.foot-social { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }

.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; }
.foot-cols h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 10px;
}
.foot-cols a { display: block; padding: 5px 0; font-size: .95rem; }

.site-foot a { color: var(--on-teal-soft); text-decoration: none; }
.site-foot a:hover { color: var(--yellow); text-decoration: underline; }

.foot-legal {
  max-width: 1120px;
  margin: clamp(30px, 5vw, 48px) auto 0;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .86rem;
  text-align: center;
}

@media (max-width: 760px) {
  .site-foot-in { grid-template-columns: 1fr; }
}

/* --- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.site *, body.site *::before, body.site *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}