/* m3probe landing page. Builds on style.css (colours, fonts, buttons, ECG paper).
   The one moving part: the exam board in the hero plays a short exchange once. */

.landing a.btn { display: inline-block; text-decoration: none; }
.l-wrap { width: min(1080px, 100% - 2rem); margin: 0 auto; }

/* ---------- header ---------- */

.l-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(1080px, 100% - 2rem);
  margin: 0 auto;
  padding: 1rem 0;
}
.l-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.l-nav a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 500; }
.l-nav a:not(.btn):hover { color: var(--ink); }

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

.l-hero { border-top: 1px solid var(--line); }
.l-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.l-hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.l-hero .lead { max-width: 44ch; }
.l-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 2rem; }
.l-cta-note { color: var(--muted); font-size: 0.95rem; }

/* The exam board: four seats, then a short exchange that appears line by line. */
.board-demo {
  margin: 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.bd-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.1rem; }
.bd-seat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}
.bd-seat b { color: var(--ink); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-seat .avatar { flex: none; }
.bd-seat.speaking { border-color: var(--scrubs); box-shadow: 0 0 0 1px var(--scrubs); }
.bd-seat.speaking .avatar { background: var(--scrubs); color: var(--on-accent); box-shadow: 0 0 0 1px var(--scrubs); }

.bd-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.bd-line { max-width: 90%; padding: 0.7rem 0.9rem; border-radius: var(--r-md); font: 400 1.02rem/1.45 var(--serif); }
.bd-who { display: block; margin-bottom: 0.15rem; font: 600 0.75rem var(--sans); color: var(--muted); }
.bd-line.examiner { background: var(--paper); border: 1px solid var(--line); }
.bd-line.you { align-self: flex-end; background: var(--scrubs-soft); border: 1px solid color-mix(in srgb, var(--scrubs) 30%, var(--line)); }
.bd-line.strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 6px 6px;
  font: 600 0.75rem var(--sans);
  color: var(--muted);
}
.bd-line.strip svg { flex: 1; height: 40px; fill: none; stroke: var(--trace); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.bd-line.strip span { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .bd-line { opacity: 0; transform: translateY(6px); animation: bd-in 0.45s ease-out forwards; }
  .bd-line:nth-child(1) { animation-delay: 0.4s; }
  .bd-line:nth-child(2) { animation-delay: 1.9s; }
  .bd-line:nth-child(3) { animation-delay: 3.6s; }
  .bd-line:nth-child(4) { animation-delay: 4.5s; }
  .bd-seat.speaking { animation: bd-talk 1.2s ease-in-out 3 alternate; }
}
@keyframes bd-in { to { opacity: 1; transform: none; } }
@keyframes bd-talk { to { box-shadow: 0 0 0 4px var(--scrubs-soft), 0 0 0 1px var(--scrubs); } }

/* ---------- sections ---------- */

.l-section { padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--line); }
.l-alt { background: var(--surface); }
.l-section h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.025em; }
.l-sub { max-width: 60ch; margin: 0.75rem 0 0; color: var(--muted); font-size: 1.05rem; }

.l-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2rem 0 0; padding: 0; }
.l-steps li { counter-increment: step; }
.l-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.9rem;
  border: 1.5px solid var(--scrubs);
  border-radius: 50%;
  color: var(--scrubs);
  font-weight: 700;
}
.l-steps h3, .l-modes h3, .price h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.l-steps p, .l-modes p { margin: 0.4rem 0 0; color: var(--muted); }

.l-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.l-modes article { padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.l-facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; margin: 2rem 0 0; padding: 0; color: var(--muted); }
.l-facts b { color: var(--ink); }

.l-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.price {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.price .amount { margin: 0.75rem 0 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.price .minutes { margin: 0.35rem 0 0; color: var(--scrubs); font-weight: 600; }
.price p:not(.amount):not(.minutes) { margin: 0.6rem 0 1.25rem; color: var(--muted); }
.price .btn { margin-top: auto; text-align: center; }
.price.featured { border-color: var(--scrubs); box-shadow: 0 0 0 1px var(--scrubs), var(--shadow); }

.l-faq > * { max-width: 760px; }
.l-faq h2 { margin-bottom: 1.25rem; }
.l-faq details { border-top: 1px solid var(--line); }
.l-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.l-faq summary { padding: 1rem 0; font-weight: 600; cursor: pointer; }
.l-faq details p { margin: 0 0 1.1rem; max-width: 68ch; color: var(--muted); }

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

.l-foot { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.l-foot-inner { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 2rem; align-items: center; }
.l-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-self: end; }
.l-foot nav a { color: var(--muted); }
.l-foot p { grid-column: 1 / -1; margin: 0; max-width: 80ch; }
.brand.small { gap: 0.45rem; font-size: 0.95rem; }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .l-hero-inner { grid-template-columns: 1fr; }
  .l-prices { grid-template-columns: repeat(2, 1fr); }
  .l-steps, .l-modes, .l-facts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .l-nav a:not(.btn) { display: none; }
  .bd-seats { grid-template-columns: repeat(2, 1fr); }
  .l-prices { grid-template-columns: 1fr; }
  .l-foot-inner { grid-template-columns: 1fr; }
  .l-foot nav { justify-self: start; }
}

/* ---------- legal pages ---------- */

.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.025em; }
.legal h2 { margin-top: 2rem; font-size: 1.15rem; }
.legal p, .legal li { max-width: 70ch; color: var(--muted); line-height: 1.6; }
.legal a { color: var(--ink); }