/* ==========================================================================
   Learningly pre-launch landing pages
   --------------------------------------------------------------------------
   Loaded after base.css and index.css, and only by prelaunch_base.html. The
   two landing pages reuse the homepage's own sections — hero, trust strip,
   steps, subjects, FAQ, tutor CTA — so almost everything is already styled by
   index.css. What lives here is the handful of components the homepage has no
   equivalent of: the waitlist panel that stands where the tutor photography
   will go at launch, the "what we check" list, and the static subject display
   that replaces the live search.

   Brand colours come from the --ll-* custom properties in base.css. Nothing
   here introduces a new one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* A quiet status marker rather than a countdown. A date we might miss would
   cost more trust than it buys, and "opening soon" next to a live dot says
   the same thing without making a promise. */
.site-nav-status {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--ll-body);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.site-nav-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ll-green);
  box-shadow: 0 0 0 4px rgba(15, 91, 67, 0.14);
}

/* --------------------------------------------------------------------------
   Hero supporting points
   -------------------------------------------------------------------------- */

.hero-points {
  margin: 30px 0 0;
  display: grid;
  gap: 14px;
}

.hero-points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  line-height: 1.6;
}

.hero-points i {
  margin-top: 5px;
  color: var(--ll-green);
  font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   Trust strip
   --------------------------------------------------------------------------
   index.css lays this out as one row of four centred items, which works while
   every label is two or three words. These labels are longer, and once they
   wrap, centred text with a vertically centred icon leaves the row looking
   like it has come apart.

   The horizontal inset is not handled here. It comes from .site-shell on the
   wrapping div in the markup, because .site-shell on the <ul> itself was being
   overridden by index.css's `.home-page :where(ul, ol) { padding: 0 }` — same
   specificity, later file — which left the labels flush against the edge of a
   phone screen.

   Scoped to .prelaunch-page throughout, so the live homepage's own strip is
   untouched.
   -------------------------------------------------------------------------- */

/* Deep green with pale type, where the live homepage's strip is near-white.
   These pages have no tutor photography yet, so the hero above and the steps
   below are both cream: this is the one band of weight on the page, and it
   lands on the four claims a visitor has to believe before joining a waiting
   list.

   Both colours are existing --ll-* tokens. The rules index.css draws above
   and below the band are set to the band's own colour, because --ll-line is
   lighter than the green and would read as a hairline inside the block rather
   than an edge to it. */
.prelaunch-page .trust-strip {
  border-block-color: var(--ll-green-deep);
  background-color: var(--ll-green-deep);
}

.prelaunch-page .trust-items li { color: var(--ll-cream); }

/* Mint rather than cream, so the icons sit one step back from the labels the
   way the green ones do against ink on the homepage. */
.prelaunch-page .trust-items i { color: var(--ll-mint); }

@media (max-width: 991px) {
  .prelaunch-page .trust-items {
    min-height: 0;
    padding-block: 26px;
    gap: 22px 30px;
  }

  /* flex-start, not center: the icon belongs beside the first line of a
     two-line label, not floating halfway down it. */
  .prelaunch-page .trust-items li {
    align-items: flex-start;
    line-height: 1.45;
    text-align: left;
  }

  /* A fixed column for the icon, so every label starts at the same x whatever
     glyph sits in front of it and the icon is never squeezed by the text. */
  .prelaunch-page .trust-items i {
    flex: 0 0 18px;
    margin-top: 2px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  /* Two by two, rather than the single column index.css falls back to. Four
     stacked rows turn a band into a long list and push the section after it
     off the first screen; a square of four short claims still reads at a
     glance and keeps the strip looking like a strip. */
  .prelaunch-page .trust-items {
    grid-template-columns: repeat(2, 1fr);
    padding-block: 22px;
    gap: 18px 20px;
  }

  .prelaunch-page .trust-items li { font-size: 0.86rem; }
  .prelaunch-page .trust-items i { flex-basis: 16px; font-size: 0.9rem; }
}

@media (max-width: 400px) {
  /* Narrower than this, two columns leave roughly thirteen characters to a
     line and break the longer claims over three of them. One column is the
     lesser evil at that width. */
  .prelaunch-page .trust-items {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* --------------------------------------------------------------------------
   Waitlist panel
   --------------------------------------------------------------------------
   Occupies the hero's second column, where the live homepage puts the tutor
   portraits. On the homepage that column is decorative; here it carries the
   only action on the page, so it is a solid card rather than an overlapping
   composition — one rectangle, one job.
   -------------------------------------------------------------------------- */

.prelaunch-page .hero-visual {
  max-width: 480px;
  margin-left: auto;
  /* index.css indents this column from 1279px down, to slide the smaller
     portrait out past the main one. There is no overlap here, so the padding
     would only narrow the form. */
  padding: 0;
}

.waitlist-card {
  padding: 34px 32px 28px;
  border: 1px solid var(--ll-line);
  border-radius: 12px;
  background-color: #fff;
  /* Lifted just enough to read as the foreground element against cream. The
     homepage is otherwise flat, so this stays subtle on purpose. */
  box-shadow: 0 18px 40px rgba(23, 33, 28, 0.07);
}

.waitlist-heading {
  margin: 0;
  color: var(--ll-ink);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.waitlist-intro {
  margin: 10px 0 24px;
  color: var(--ll-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

.waitlist-form {
  display: grid;
  gap: 18px;
}

.waitlist-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ll-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.waitlist-field label .optional {
  color: var(--ll-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.75;
  text-transform: none;
}

/* Styled by attribute rather than by class, so a field added to leads/forms.py
   without a widget class still looks right instead of falling back to the
   browser default. */
.waitlist-field input[type="text"],
.waitlist-field input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.waitlist-field input::placeholder { color: #A7ADA8; }

.waitlist-field input:focus {
  border-color: var(--ll-green);
  box-shadow: 0 0 0 3px rgba(15, 91, 67, 0.12);
  outline: 0;
}

.waitlist-field.has-error input { border-color: #B3261E; }

.waitlist-help {
  margin: 7px 0 0;
  color: var(--ll-body);
  font-size: 0.82rem;
  line-height: 1.5;
}

.waitlist-error {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 8px 0 0;
  color: #B3261E;
  font-size: 0.85rem;
  line-height: 1.5;
}

.waitlist-error i { margin-top: 3px; font-size: 0.8em; }

.waitlist-alert {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #F0D2CF;
  border-radius: 8px;
  background-color: #FDF3F2;
  color: #8C2F26;
  font-size: 0.9rem;
}

.waitlist-alert p { margin: 0; }
.waitlist-alert p + p { margin-top: 8px; }

.waitlist-submit {
  width: 100%;
  margin-top: 4px;
}

.waitlist-note {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ll-line);
  color: var(--ll-body);
  font-size: 0.82rem;
  line-height: 1.6;
}

.waitlist-note i { margin-top: 4px; color: var(--ll-green); font-size: 0.78rem; }
.waitlist-note a { color: var(--ll-green); font-weight: 600; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Subject areas
   --------------------------------------------------------------------------
   Grouped rather than listed one subject per card. A card per subject would
   run to thirty of them and push the rest of the page below the fold, whereas
   eight headed groups fit two rows and still name everything.
   -------------------------------------------------------------------------- */

.subject-areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.subject-areas li {
  padding: 24px 24px 22px;
  border: 1px solid rgba(23, 33, 28, 0.12);
  border-radius: 12px;
  background-color: #fff;
}

.subject-areas h3 {
  display: flex;
  gap: 11px;
  align-items: baseline;
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.35;
}

.subject-areas h3 i {
  flex: 0 0 18px;
  color: var(--ll-green);
  font-size: 0.95rem;
  text-align: center;
}

/* The yellow accent, used on two of the eight the way index.css uses it on
   one card of its subject grid: a personality note, not a second colour. */
.subject-areas > :nth-child(3) h3 i,
.subject-areas > :nth-child(6) h3 i { color: #B5891B; }

.subject-areas p {
  margin: 0;
  color: var(--ll-body);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Levels
   -------------------------------------------------------------------------- */

.prelaunch-levels {
  display: flex;
  gap: 16px 26px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid rgba(23, 33, 28, 0.14);
}

.prelaunch-levels h3 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 1.15rem;
}

.prelaunch-levels ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.prelaunch-levels li {
  padding: 8px 18px;
  border: 1px solid rgba(23, 33, 28, 0.16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--ll-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   "What we check" / "What we will ask for"
   --------------------------------------------------------------------------
   The same shape as the homepage's .trust-points, without the photography
   column it sits beside there.
   -------------------------------------------------------------------------- */

.checks-section { background-color: var(--ll-peach); }

.check-list { display: grid; }

.check-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(23, 33, 28, 0.12);
}

.check-list li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.check-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #fff;
  color: var(--ll-green);
  font-size: 1.05rem;
}

.check-list h3 { margin: 4px 0 8px; font-size: 1.15rem; }
.check-list p { margin: 0; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Three columns instead of the live site's five, since two of its four nav
   groups have nowhere to point yet. */
.prelaunch-footer-grid { grid-template-columns: 2fr 1fr 1fr; }

/* --------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------
   index.css already stacks .hero-grid, .split-layout, .product-layout and
   .faq-layout at 991px, so only the components defined above need handling.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /* The form is the page's purpose: full width once stacked, and no longer
     pushed to the right of a column that no longer exists. */
  .prelaunch-page .hero-visual { max-width: none; margin-left: 0; padding: 0; }
  .subject-areas { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .prelaunch-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .prelaunch-footer-grid .footer-intro { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .waitlist-card { padding: 26px 22px 24px; }
  .waitlist-heading { font-size: 1.25rem; }
  .hero-points { margin-top: 26px; }
  .subject-areas { grid-template-columns: 1fr; gap: 12px; }
  .subject-areas li { padding: 20px; }
  .subject-areas h3 { font-size: 1rem; }
  .prelaunch-levels { display: block; }
  .prelaunch-levels ul { margin-top: 16px; }

  .check-list li { grid-template-columns: 40px 1fr; gap: 14px; }
  .check-icon { width: 40px; height: 40px; font-size: 0.95rem; }
  .prelaunch-footer-grid { grid-template-columns: 1fr; }

  /* Two nav items plus a status marker fit on one line on a phone; stacking
     them the way the signed-in header does would waste the fold. */
  .site-nav-status { justify-content: flex-start; }
}