/* /start — the word-of-mouth parent page (#1157).
   Layered on top of _styles.css, which supplies the palette and document
   defaults. This file owns the marketing layout only. */

:root {
  --brand-2: #2196F3;
  --surface: #FFFFFF;
  --surface-sunk: #FAF7F5;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #262529;
    --surface-sunk: #201F23;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  }
}

body.start {
  padding: 0;
  font-size: 18px;
}

body.start h1,
body.start h2,
body.start h3 {
  border: 0;
  padding: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body.start section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 24px;
}

body.start section > h2 {
  font-size: clamp(30px, 4.4vw, 44px);
  margin: 0;
  text-align: center;
}

.section-sub {
  max-width: 620px;
  margin: 16px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 19px;
}

.kicker {
  margin: 0 0 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}

/* ── Top bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

/* Beta stamp. The topbar is sticky, so the pill rides along the whole page. */
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.beta-pill {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* Same markup as the footer switcher, just sized for the bar. */
.topbar-langs {
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Below this the wordmark, pill and button are all the bar can carry, and
   they only fit once everything shrinks — the pill pushed the CTA off-screen
   at 390px before these were added. */
@media (max-width: 600px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar-left { gap: 8px; }
  /* Priority when space runs out: logo, beta status, language, CTA. The
     wordmark is what gets dropped — measured against the German page, which
     is the longest of the three. */
  .topbar-brand span { display: none; }
  .topbar-langs { gap: 7px; font-size: 13px; }
  .beta-pill { font-size: 10px; padding: 3px 7px; letter-spacing: 0.03em; }
  .topbar-cta { padding: 7px 12px; font-size: 13px; }
}

/* iPhone SE 1 / iPhone 5 territory. German is the tightest of the three. */
@media (max-width: 380px) {
  .topbar { padding: 10px 10px; gap: 6px; }
  .topbar-left { gap: 6px; }
  .topbar-langs { gap: 6px; font-size: 12px; }
  .beta-pill { font-size: 9px; padding: 3px 6px; letter-spacing: 0.02em; }
  .topbar-cta { padding: 6px 10px; font-size: 12px; }
}

.topbar-cta {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.start-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px 88px;
  border: 0;
  overflow: hidden;
}

.start-hero::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -20%;
  height: 90%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--brand) 22%, transparent),
    transparent
  );
  pointer-events: none;
  z-index: -1;
}

.hero-title {
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 800;
  margin: 0;
}

.hero-lead {
  margin: 22px 0 0;
  font-size: 20px;
  color: var(--muted);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* ── Phone mock (placeholder until #1158 supplies real captures) ──────── */

.hero-device {
  display: flex;
  justify-content: center;
}

/* The frame takes its height from the screen, not the other way round: a
   percentage height inside an aspect-ratio box resolves to auto on Firefox
   Android, which let the video size itself from its width/height attributes
   and poke out below the frame. */
/* Bezel width vs outer radius is load-bearing: the video's corners are square
   (see .phone::after), so the screen's corner point must sit INSIDE the
   frame's outer arc or a white sliver shows past the bezel. That needs
   padding >= radius * (1 - 1/sqrt2) = 11.7px at radius 40; 14px leaves ~3px
   of margin for antialiasing. */
.phone {
  --bezel: linear-gradient(160deg, #3A3A3E, #17171A);
  --bezel-w: 14px;
  position: relative;
  width: 300px;
  padding: var(--bezel-w);
  border-radius: 40px;
  background: var(--bezel);
  box-shadow: var(--shadow);
}

/* The bezel painted a second time ABOVE the screen, as a ring with a rounded
   hole (gradient masked to everything outside its content box). Firefox
   Android hands a playing <video> to a native compositor surface that ignores
   every rounded clip on it or its ancestors — overflow, clip-path, mask, its
   own border-radius, opacity and a sub-degree rotation all left square corners
   poking into the bezel. The poster frame clips fine, so it only shows once
   autoplay starts. Content drawn on top of the surface does composite (the
   notch always did), so covering the corners works where clipping cannot. */
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--bezel-w);
  border-radius: 40px;
  background: var(--bezel);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  z-index: 1;
  pointer-events: none;
}

.phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 20px;
  border-radius: 999px;
  background: #101014;
  z-index: 2;
}

.phone-screen {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 26px; /* outer 40px minus the bezel, matching the ::after hole */
  overflow: hidden;
  background: var(--bg);
}

/* The capture is taller than the frame: pin it to the top so the chat header
   stays visible and the empty tail below the last bubble is what gets
   cropped. Absolutely positioned so the box comes from the screen, never
   from the element's own width/height attributes. */
.phone-screen img,
.phone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.phone-still {
  display: none;
}

/* The phone itself no longer floats: translating a subtree that contains a
   playing video means masking and re-compositing that video through the
   screen's rounded clip on every frame, which dropped frames on slower
   hardware. The motion now lives inside the screen instead. */

/* .is-still is set by the script in start.html when play() is refused. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .phone-video { display: none; }
  .phone-still { display: block; }
}

.phone.is-still .phone-video { display: none; }
.phone.is-still .phone-still { display: block; }

/* ── Trust strip ─────────────────────────────────────────────────────── */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin: 0;
  padding: 22px 24px;
  list-style: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunk);
}

.trust-strip li {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}

.trust-strip li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--brand);
  font-weight: 800;
}

/* ── The promise ─────────────────────────────────────────────────────── */

.promise-title {
  font-size: clamp(30px, 4.8vw, 50px);
  font-weight: 800;
  text-align: center;
  margin: 0;
  max-width: 16em;
  margin-inline: auto;
}

.promise-body {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
  color: var(--muted);
}

.visibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}

.vis-card {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.vis-card h3 { margin: 0 0 16px; font-size: 20px; }
.vis-card ul { margin: 0; padding: 0; list-style: none; }

.vis-card li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.45;
}

.vis-card li:last-child { margin-bottom: 0; }

.vis-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.vis-see { border-top: 4px solid var(--brand-2); }
.vis-see h3 { color: var(--brand-2); }
.vis-see li::before { content: "◉"; color: var(--brand-2); }

.vis-never { border-top: 4px solid var(--brand); }
.vis-never h3 { color: var(--brand); }
.vis-never li::before { content: "✕"; color: var(--brand); }

/* ── Features ────────────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.feature {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature h3 { margin: 0 0 8px; font-size: 19px; }
.feature p { margin: 0; color: var(--muted); font-size: 16px; }

/* ── Controls ────────────────────────────────────────────────────────── */

.controls { background: var(--surface-sunk); max-width: none; }
.controls > h2,
.controls > .section-sub,
.controls > .control-list { max-width: 1080px; margin-inline: auto; }

.control-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  margin-top: 48px;
  counter-reset: ctrl;
}

.control { counter-increment: ctrl; padding-left: 52px; position: relative; }

.control::before {
  content: counter(ctrl);
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control h3 { margin: 0 0 6px; font-size: 19px; }
.control p { margin: 0; color: var(--muted); font-size: 16px; }

/* ── Steps ───────────────────────────────────────────────────────────── */

.step-list { list-style: none; padding: 0; margin: 56px 0 0; counter-reset: step; }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: center;
  gap: 48px;
  margin: 0 0 40px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.step:nth-child(even) { grid-template-columns: 260px 1fr; }
.step:nth-child(even) .step-text { order: 2; }

.step-text h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.step-text h3::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  color: var(--brand);
  font-size: 15px;
  vertical-align: 3px;
}

.step-text p { margin: 0; color: var(--muted); }

/* ── Step 3's two-layer figure: where the button is, then what it opens ─ */

/* Same 260px media column as every other step. The two phones are 78% of
   it, offset 22% across and 12% down, so the front one sits *on* the back
   one with a strip showing — which is also what hides the capture's own
   @handle. Anything wider reads as two phones side by side. */
.stack {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 100 / 185;
  color: var(--brand);
}

.stack-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
}

.stack-back img,
.stack-front {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.stack-back img { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }

.stack-front {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78%;
  box-shadow: var(--shadow);
}

/* 7.04% / 8.75% is the profile icon's centre in the source capture. */
.stack-ring {
  position: absolute;
  left: 7.04%;
  top: 8.75%;
  width: 13%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.16);
}

.stack-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Floats in the strip above the front phone, level with nothing in the
   capture, so it never has to fight the screenshot's own text. */
.stack-label {
  position: absolute;
  left: 12%;
  top: 3.3%;
  transform: translateY(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* ── Sharing one phone: the child's account resident on the tutor's ──── */

.shared-phone {
  margin-top: 56px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
}

.shared-phone h3 { margin: 0 0 10px; font-size: 24px; }
.shared-lead { margin: 0; max-width: 64ch; color: var(--muted); }

.shared-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.shared-card {
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.shared-card h4 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.shared-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.shared-card strong { color: var(--text); }

/* ── Real captures + the placeholders still waiting for one ──────────── */

.shot-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: block;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
  max-width: 820px;
  margin-inline: auto;
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: block;
}

/* Placeholders for shots not taken yet (#1158) */

.shot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  color: var(--muted);
  font-size: 13px;
}

.shot::after { content: attr(data-shot); }
.shot-tall { aspect-ratio: 9 / 16; }
.shot-wide { aspect-ratio: 16 / 7; margin-top: 40px; }

/* ── Install slot ────────────────────────────────────────────────────── */

.install { text-align: center; }
.install .store-buttons { justify-content: center; margin-top: 32px; }

.install-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 36px auto 0;
  text-align: left;
}

.install-notes p {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.install-notes strong { color: var(--text); }

@media (max-width: 760px) {
  .install-notes { grid-template-columns: 1fr; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { max-width: 760px; }

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.faq summary {
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  float: right;
  color: var(--brand);
  font-weight: 800;
}

.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 14px 0 0; color: var(--muted); font-size: 17px; }

/* ── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .control-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.start section { padding: 64px 20px; }

  .start-hero {
    grid-template-columns: 1fr;
    padding: 48px 20px 64px;
    text-align: center;
  }

  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .phone { width: 260px; }
  .visibility,
  .shared-grid,
  .feature-grid { grid-template-columns: 1fr; }

  .shared-phone { padding: 24px 20px; }

  .step,
  .step:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .stack { max-width: 260px; margin-inline: auto; }
  .step:nth-child(even) .step-text { order: 0; }
  .shot-tall,
  .shot-img { max-width: 220px; margin-inline: auto; width: 100%; }
  .gallery { grid-template-columns: 1fr; max-width: 260px; }
}