/* ============================================================
   Piplab — marketing site
   Translated from the design exports in /marketing.

   Everything here is scoped under body.site so the logged-in app
   (dashboard, editor, wizard, learn) keeps its own styling
   untouched — the two share a domain, not a design system.
   ============================================================ */

body.site {
  --ink: #111111;
  --ink-70: rgba(17, 17, 17, 0.70);
  --ink-64: rgba(17, 17, 17, 0.64);
  --ink-45: rgba(17, 17, 17, 0.45);
  --line: rgba(17, 17, 17, 0.08);
  --line-strong: rgba(17, 17, 17, 0.18);
  --paper: #FBFAF7;
  --white: #FFFFFF;
  --orange: #FF6B1A;
  --green: #18B891;
  --blue: #5B7CFA;
  --violet: #8B5CF6;
  --display: Sora, ui-sans-serif, system-ui, sans-serif;
  --text: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wrap: 1200px;

  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Same reason as in style.css: reserve the scrollbar's width always, so a
   short page and a long one centre their 1200px wrap in the same place and the
   header does not jump as you move between them. This file only loads on the
   marketing pages, so the html selector cannot reach the app. */
html { scrollbar-gutter: stable; }

body.site * { box-sizing: border-box; }
body.site img { max-width: 100%; }

.site h1, .site h2, .site h3, .site h4, .site .display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.site h1 { font-size: clamp(38px, 5.4vw, 66px); letter-spacing: -0.035em; line-height: 1.03; }
.site h2 { font-size: clamp(29px, 3.9vw, 46px); }
.site h3 { font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
.site p { margin: 0; text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.sec { padding: 88px 0; }
.sec-tight { padding: 56px 0; }
.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.lede { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--ink-70); max-width: 560px; }

/* ---------- buttons ---------- */
.site .btn {
  display: inline-block;
  font-family: var(--text);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.site .btn-primary { background: var(--orange); color: #fff; }
.site .btn-primary:hover { background: var(--ink); }
.site .btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.site .btn-line:hover { border-color: var(--ink); }
.site .btn-ink { background: var(--ink); color: #fff; }
.site .btn-ink:hover { background: var(--orange); }
.site .btn-sm { font-size: 15.5px; padding: 11px 20px; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.arrow {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  color: var(--orange);
  text-decoration: none;
}
.arrow:hover { color: var(--ink); }

/* ---------- nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
}
.nav-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand span { color: var(--orange); }
/* The nav brand is the supplied lockup. It is black artwork on transparent, so
   it can only sit on the light chrome — the footer, which is --ink, keeps a text
   wordmark until there is a reversed export. */
.brand img { display: block; height: 33px; width: auto; }
@media (max-width: 620px) { .brand img { height: 28px; } }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15.5px;
  font-weight: 500;
}
.nav-links a {
  color: rgba(17, 17, 17, 0.62);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.on { color: var(--ink); border-bottom-color: var(--orange); }
.nav-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav-cta .plain { font-size: 15.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-burger {
  display: none;
  border: 0;
  background: none;
  font-size: 21px;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- hero ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 96px 0 88px;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-shot { position: relative; }
.hero-shot img { width: 100%; height: 520px; object-fit: cover; border-radius: 28px; display: block; }
.float-card {
  position: absolute;
  left: -36px;
  bottom: 44px;
  background: var(--white);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.14);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 216px;
}
.float-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.float-big { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.float-big small { font-size: 15px; color: rgba(17, 17, 17, 0.4); font-weight: 400; }
.meter { height: 6px; border-radius: 999px; background: rgba(17, 17, 17, 0.08); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; background: var(--green); }

/* ---------- trust strip ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  font-size: 15px;
  color: rgba(17, 17, 17, 0.6);
}
.strip-in b { color: var(--ink); font-weight: 600; }

/* ---------- cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card {
  background: var(--white);
  border-radius: 22px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-chip { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 4px; }
.chip-orange { background: rgba(255, 107, 26, 0.14); }
.chip-blue { background: rgba(91, 124, 250, 0.14); }
.chip-violet { background: rgba(139, 92, 246, 0.14); }
.chip-green { background: rgba(24, 184, 145, 0.14); }
.card-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.card p { font-size: 16.5px; line-height: 1.58; color: var(--ink-64); }
.ticks { display: flex; flex-direction: column; gap: 9px; font-size: 16px; color: rgba(17, 17, 17, 0.72); padding-top: 4px; }
.ticks div { display: flex; gap: 10px; }
.ticks .t { color: var(--orange); font-weight: 700; flex-shrink: 0; }

/* ---------- section 3: the three audience cards ----------
   Icon tile, pill, headline, body, a rule, ticks, arrow. Each card sets --a and
   --a-soft once and every accented part reads from them, so recolouring a card
   is one line rather than six. */
/* Values below are the design's own, from piplab-home-standalone.html: the
   168deg wash fading to white at 72%, the tinted hairline border, the coloured
   drop shadow and the 4px lift on hover. Each card sets --a, --a-12, --a-16,
   --a-20, --a-22 and --a-45 once; everything else reads from them. */
.aud {
  padding: 34px 32px 32px;
  gap: 16px;
  background: linear-gradient(168deg, var(--a-11) 0%, var(--a-02) 38%, #FFFFFF 72%);
  border: 1px solid var(--a-20);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 34px -22px var(--a-45);
  transition: transform .22s ease, box-shadow .22s ease;
}
.aud:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(17, 17, 17, 0.05), 0 26px 48px -24px var(--a-55);
}
.aud-orange {
  --a: #FF6B1A; --a-02: rgba(255,107,26,0.02); --a-11: rgba(255,107,26,0.11);
  --a-12: rgba(255,107,26,0.12); --a-16: rgba(255,107,26,0.16);
  --a-20: rgba(255,107,26,0.20); --a-22: rgba(255,107,26,0.22);
  --a-45: rgba(255,107,26,0.45); --a-55: rgba(255,107,26,0.55);
}
.aud-blue {
  --a: #5B7CFA; --a-02: rgba(91,124,250,0.02); --a-11: rgba(91,124,250,0.11);
  --a-12: rgba(91,124,250,0.12); --a-16: rgba(91,124,250,0.16);
  --a-20: rgba(91,124,250,0.20); --a-22: rgba(91,124,250,0.22);
  --a-45: rgba(91,124,250,0.45); --a-55: rgba(91,124,250,0.55);
}
.aud-green {
  --a: #18B891; --a-02: rgba(24,184,145,0.02); --a-11: rgba(24,184,145,0.11);
  --a-12: rgba(24,184,145,0.12); --a-16: rgba(24,184,145,0.16);
  --a-20: rgba(24,184,145,0.20); --a-22: rgba(24,184,145,0.22);
  --a-45: rgba(24,184,145,0.45); --a-55: rgba(24,184,145,0.55);
}

.aud-top { display: flex; align-items: center; gap: 12px; }
.aud-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: var(--a-16); color: var(--a);
  display: flex; align-items: center; justify-content: center;
}
.aud-icon svg { display: block; width: 21px; height: 21px; stroke-width: 1.9; }
.aud-pill {
  background: var(--a-12); color: var(--a);
  border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.site .aud h3 { font-size: 27px; letter-spacing: -0.028em; line-height: 1.15; margin: 0; }
.aud p { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(17, 17, 17, 0.62); }
.aud-ticks {
  display: flex; flex-direction: column; gap: 11px;
  font-size: 16px; color: rgba(17, 17, 17, 0.78);
  padding-top: 6px; margin-top: 2px;
  border-top: 1px solid var(--a-22);
}
.aud-ticks > div { display: flex; gap: 11px; line-height: 1.45; padding-top: 5px; }
.aud-ticks .t { color: var(--a); font-weight: 700; flex-shrink: 0; }
/* .site p sets margin:0 and outranks a bare class, so the auto that pushes the
   link to the foot of the card has to be written at the same weight. Without it
   the three arrows sit wherever their own tick list happened to end. */
.site .aud-foot { margin-top: auto; padding-top: 22px; }
.aud-foot a { color: var(--a); font-weight: 600; font-size: 16.5px; text-decoration: none; }
.aud-foot a:hover { color: var(--ink); }

/* ---------- section headers ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.sec-head p { color: var(--ink-70); font-size: 17.5px; margin-top: 12px; max-width: 560px; }

/* ---------- dark band ---------- */
.band-dark { background: var(--ink); color: var(--paper); }
.band-dark h2 { color: var(--paper); }
.band-dark p { color: rgba(251, 250, 247, 0.66); font-size: 16.5px; line-height: 1.58; }

/* ---------- steps ---------- */
.steps-rail { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; color: var(--ink-45); margin-bottom: 44px; }
.steps-rail b { font-family: var(--display); color: var(--ink); font-weight: 600; }
.step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 46px 0;
  border-top: 1px solid var(--line);
}
.step:nth-child(even) .step-visual { order: -1; }
.step-n {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange);
  text-transform: uppercase;
}
.step h3 { margin: 12px 0 12px; }
.step p { color: var(--ink-64); font-size: 16.5px; line-height: 1.6; }
.mock {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mock-label { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); font-weight: 700; }
.bubble { border-radius: 14px; padding: 12px 14px; line-height: 1.5; }
.bubble-ai { background: rgba(255, 107, 26, 0.09); }
.bubble-kid { background: rgba(17, 17, 17, 0.05); }
.mock code, .mock pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}
.blockline {
  background: rgba(91, 124, 250, 0.10);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14.5px;
}

/* ---------- project cards ---------- */
.proj {
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.proj:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(17, 17, 17, 0.08); }
.proj-cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
.proj h3 { font-size: 20px; }
.proj p { font-size: 15.5px; line-height: 1.55; color: var(--ink-64); }
.proj-meta { font-size: 13.5px; color: var(--ink-45); margin-top: 4px; }

/* ---------- pricing ---------- */
.price-card {
  background: var(--white);
  border-radius: 22px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1.5px solid transparent;
  position: relative;
}
.price-card.featured { border-color: var(--orange); }
.tag-pop {
  position: absolute;
  top: -12px;
  left: 30px;
  background: var(--orange);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.price-name { font-family: var(--display); font-size: 17px; font-weight: 600; }
.price-big { font-family: var(--display); font-size: 42px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price-big small { font-size: 15px; font-weight: 400; color: var(--ink-45); letter-spacing: 0; }
.price-card p { font-size: 15.5px; color: var(--ink-64); line-height: 1.55; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); padding: 26px 0; display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px; }
.faq h3 { font-size: 19px; }
.faq p { color: var(--ink-64); font-size: 16.5px; line-height: 1.6; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea, .field select {
  font-family: var(--text);
  font-size: 16px;
  padding: 13px 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--orange); }
.pill-choice { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.pill-choice label {
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.pill-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pill-choice input:checked + span { color: #fff; }
.pill-choice label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.form-note { font-size: 13.5px; color: var(--ink-45); }

.flash {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 20px;
}
.flash-ok { background: rgba(24, 184, 145, 0.12); color: #0E7C63; }
.flash-bad { background: rgba(255, 107, 26, 0.12); color: #B23F00; }

/* ---------- closing CTA ---------- */
.cta-band { text-align: center; padding: 96px 0 104px; }
.cta-band p { color: var(--ink-70); font-size: 18px; margin: 16px auto 30px; max-width: 540px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--paper); padding: 80px 32px 40px; }
.foot-in { max-width: var(--wrap); margin: 0 auto; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(251, 250, 247, 0.14);
}
.foot-brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; }
.foot-brand .brand { color: var(--paper); }
.foot-brand p { font-size: 15px; line-height: 1.6; color: rgba(251, 250, 247, 0.62); }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col h4 {
  font-family: var(--text);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.45);
  font-weight: 600;
}
.foot-col a { color: rgba(251, 250, 247, 0.82); text-decoration: none; font-size: 15px; }
.foot-col a:hover { color: var(--orange); }
.foot-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  color: rgba(251, 250, 247, 0.45);
}
.foot-under { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foot-under a { display: inline-flex; align-items: center; transition: opacity .15s; }
.foot-under a:hover { opacity: 0.8; }
.foot-under img, .foot-under svg { height: 20px; width: auto; display: block; }
.foot-under strong { color: rgba(251, 250, 247, 0.7); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 64px; }
  .hero-shot img { height: 380px; }
  .float-card { left: 16px; bottom: 16px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 28px; }
  .step:nth-child(even) .step-visual { order: 0; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .faq { grid-template-columns: 1fr; gap: 10px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 32px 18px;
  }
  .nav-links.open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-burger { display: block; }
  .site-nav { position: relative; }
}
@media (max-width: 620px) {
  .wrap, .nav-in, .site-foot { padding-left: 20px; padding-right: 20px; }
  .sec { padding: 60px 0; }
  .strip-in { gap: 14px; flex-direction: column; }
  .nav-cta .plain { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}

/* ============================================================
   Home page — appended for a faithful translation of
   marketing/Home.dc.html. Nothing above this line is modified;
   every rule here is either a new class or a modifier that only
   applies when the home page opts into it.
   ============================================================ */

/* ---------- per-section padding, matching the design exactly ---------- */
.pt-88 { padding-top: 88px; }
.pt-96 { padding-top: 96px; }
.pt-104 { padding-top: 104px; }
.pb-32 { padding-bottom: 32px; }
.pb-96 { padding-bottom: 96px; }
.pb-104 { padding-bottom: 104px; }
.sec-head.mb-32 { margin-bottom: 32px; }
.sec-head.mb-36 { margin-bottom: 36px; }

.hp-hero-lede { max-width: 520px; }
.hp-head-wide { max-width: 640px; }

/* ---------- section 5b: the finished gadget, drawn ----------
   The picture is the point of these cards, so it takes the room the parts list
   used to. Capped width keeps the drawing from ballooning on a wide column. */
.hp-result-art {
  background: var(--paper);
  border-radius: 16px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hp-result-art svg { width: 100%; max-width: 200px; height: auto; display: block; }
.hp-result h3 { margin-bottom: 10px; }

/* ---------- section 1: the hero, question turning into steps ----------
   A mock of the Steps panel rather than a photograph, because the headline
   promises the product does something and this shows it doing it. Built from
   plain boxes, no images, so it costs nothing to load and stays sharp. */
.hh { display: grid; grid-template-columns: 1fr 1.12fr; gap: 60px; align-items: center; padding: 84px 0 88px; }
.hh-copy { display: flex; flex-direction: column; gap: 26px; }
/* 1.06 was tight enough that the five lines read as one block. The descenders
   in "questions" and the apostrophe in "kids'" need the room. */
.site .hh h1 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.16; }
.hh-lede { max-width: 540px; }
.hh-lede b { color: var(--ink); font-weight: 600; }
.hh-ticks { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15.5px; color: var(--ink-45); }
.hh-ticks i { color: var(--green); font-style: normal; font-weight: 700; margin-right: 6px; }

/* The panel itself is the design export swell-alert-panel-sea.html, carried
   inline in index.php rather than translated into classes here — same
   reasoning as the parents page. Only the hero grid and the copy column
   are styled from this sheet. */
@media (max-width: 980px) {
  .hh { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 64px; }
  .hh-lede { max-width: none; }
}

/* ---------- the guardrail band ----------
   Lives on /tutors: a statement on the left, the actual refusal on the right.
   It was on the homepage first, where a parent quote replaced it; the rules stay
   here because showing the refusal beats describing it, and a tutor is the
   reader most likely to be asked about it by a head of department. */
.hp-guard { background: var(--white); }
.hp-guard-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.site .hp-guard-line { font-size: clamp(26px, 2.9vw, 36px); margin: 12px 0 14px; max-width: 440px; }
.hp-guard-sub { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-64); max-width: 470px; }
.hp-guard-mock { background: var(--paper); }
@media (max-width: 900px) {
  .hp-guard-in { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
}

/* ---------- section 2: the parent quote ----------
   One voice, centred, nothing else competing with it. A band rather than a full
   section so the page keeps its rhythm between the hero and the audience cards. */
/* The hero→body pivot (design supplied): a muted setup line over a huge bold
   claim, its full-stop an orange accent, framed by hairline rules. */
.pivot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 84px;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}
/* .site-scoped so it beats `.site p { margin: 0 }` (0,1,1) — the gap between
   the two lines dies without this. */
.site .pivot > * + * { margin-top: 20px; }
.pivot-lede {
  margin: 0;
  max-width: 520px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(17, 17, 17, 0.45);
}
.pivot-claim {
  margin: 0;
  max-width: 1000px;
  font-family: Sora, sans-serif;
  font-size: 80px;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.046em;
  text-wrap: balance;
}
.pivot-claim span { color: #FF6B1A; }
@media (max-width: 1180px) { .pivot-claim { font-size: 56px; } }
@media (max-width: 900px) {
  .pivot { padding: 56px 24px 60px; }
  .pivot-claim { font-size: 40px; }
  .pivot-lede { font-size: 17px; }
}

/* ---------- section 3: the three audience cards carry their own accent ---------- */
.card-kicker.k-blue { color: var(--blue); }
.card-kicker.k-green { color: var(--green); }
.ticks.t-blue .t { color: var(--blue); }
.ticks.t-green .t { color: var(--green); }
.arrow.a-blue { color: var(--blue); }
.arrow.a-green { color: var(--green); }
.arrow.a-blue:hover, .arrow.a-green:hover { color: var(--ink); }
.card .hp-card-foot { margin-top: auto; padding-top: 16px; }

/* ---------- section 4: browser frame around the dashboard mock ---------- */
.hp-frame {
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 30px 70px rgba(17, 17, 17, 0.10);
  border: 1px solid var(--line);
}
.hp-frame-bar {
  height: 44px;
  background: var(--white);
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}
.hp-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(17, 17, 17, 0.14); }
.hp-frame-url { margin-left: 14px; font-size: 13px; color: rgba(17, 17, 17, 0.4); }
.hp-shell { overflow: hidden; position: relative; }
.hp-scale { width: 1160px; transform-origin: top left; }

/* ---------- section 5: the five-step walkthrough ---------- */
.hp-steps-h2 { margin: 0 0 12px; max-width: 620px; }
.hp-steps-sub { margin: 0 0 44px; font-size: 18px; color: rgba(17, 17, 17, 0.62); max-width: 520px; }
.hp-steps { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.hp-rail { display: flex; flex-direction: column; gap: 6px; }
.hp-step {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--text);
  transition: background 160ms;
}
.hp-step-num {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 17, 17, 0.22);
  transition: background 160ms;
}
.hp-step-txt { display: flex; flex-direction: column; gap: 2px; }
.hp-step-name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(17, 17, 17, 0.72);
}
.hp-step-hint { font-size: 14.5px; color: rgba(17, 17, 17, 0.55); }
.hp-step:hover { background: rgba(255, 255, 255, 0.6); }
.hp-step.on { background: var(--white); }
.hp-step.on .hp-step-num { background: var(--acc); }
.hp-step.on .hp-step-name { color: var(--ink); }
.hp-panelwrap {
  background: var(--white);
  border-radius: 24px;
  padding: 38px 40px;
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06), 0 26px 60px rgba(17, 17, 17, 0.07);
  min-height: 404px;
  display: flex;
}
.hp-panel { display: flex; flex-direction: column; gap: 26px; flex: 1; min-width: 0; }
.hp-panel[hidden] { display: none; }
.hp-panel-step {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
}
.hp-panel h3 { font-size: 30px; line-height: 1.2; letter-spacing: -0.025em; max-width: 520px; }
.hp-panel-body { font-size: 17.5px; line-height: 1.62; color: rgba(17, 17, 17, 0.66); max-width: 560px; }
.hp-panel-box {
  margin-top: auto;
  background: var(--paper);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-panel-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.4);
}
.hp-line { display: flex; gap: 12px; align-items: baseline; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.hp-line i { display: block; width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; background: var(--acc); }

/* ---------- section 6: three skills ---------- */

/* ---------- section 7: the week card ---------- */

/* ---------- section 8: build ideas, 1.5fr / 1fr / 1fr ---------- */
.hp-ideas { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; }
.hp-idea-lg { border-radius: 22px; overflow: hidden; background: var(--white); box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06); }
.hp-idea-lg img { width: 100%; height: 280px; object-fit: cover; display: block; }
.hp-idea-lg-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.hp-idea-md {
  border-radius: 22px;
  background: var(--white);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06);
}
.hp-idea-stack { display: flex; flex-direction: column; gap: 20px; }
.hp-idea-sm {
  border-radius: 22px;
  background: var(--white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06);
}
.hp-idea-chip { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
.hp-idea-lg h3 { font-size: 20px; }
.hp-idea-md h3, .hp-idea-sm h3 { font-size: 19px; }
.hp-idea-lg p { font-size: 16px; line-height: 1.55; color: rgba(17, 17, 17, 0.6); }
.hp-idea-md p { font-size: 15.5px; line-height: 1.55; color: rgba(17, 17, 17, 0.6); }
.hp-idea-sm p { font-size: 15.5px; line-height: 1.5; color: rgba(17, 17, 17, 0.6); }
.proj-cat.c-blue { color: var(--blue); }
.proj-cat.c-green { color: var(--green); }
.proj-cat.c-violet { color: var(--violet); }

/* ---------- section 9: pricing preview (three plain plan cards) ---------- */
.hp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-plan { background: var(--white); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.hp-plan-name { font-size: 14px; color: rgba(17, 17, 17, 0.5); }
.hp-plan-price { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.hp-plan-price small { font-size: 16px; font-weight: 400; letter-spacing: 0; }
.hp-plan p { font-size: 16px; color: var(--ink-64); line-height: 1.55; }
.hp-plan-hot { background: var(--orange); color: #fff; }
.hp-plan-hot .hp-plan-name { color: rgba(255, 255, 255, 0.8); }
.hp-plan-hot p { color: rgba(255, 255, 255, 0.88); }

/* ---------- section 10: closing card ---------- */
.hp-cta {
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.hp-cta img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.hp-cta-body { padding: 64px 56px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.hp-cta-body h2 { font-size: clamp(29px, 3.3vw, 38px); line-height: 1.14; }
.hp-cta-body p { font-size: 18px; line-height: 1.6; color: rgba(17, 17, 17, 0.66); }

/* ---------- home responsive: the design collapses every grid to one column ---------- */
@media (max-width: 980px) {
  .hp-steps, .hp-ideas, .hp-plans, .hp-cta { grid-template-columns: 1fr; }
  .hp-steps { gap: 24px; }
  .hp-panelwrap { padding: 28px 24px; min-height: 0; }
  .hp-panel h3 { font-size: 25px; }
  .hp-cta-body { padding: 40px 28px; }
  .hp-idea-lg img { height: 240px; }
}
@media (max-width: 620px) {
  .pt-88, .pt-96, .pt-104 { padding-top: 60px; }
  .pb-96, .pb-104 { padding-bottom: 60px; }
  .pb-32 { padding-bottom: 24px; }
}

/* ============================================================
   LEGACY PAGE SUPPORT
   Pages the designer didn't cover (log in, sign up, checkout,
   about, faq, students, tutors, schools, privacy, terms) still
   use the old class names. Rather than leave them unstyled or
   reload the old stylesheet and fight it, their classes are
   re-expressed here in the new design language.
   ============================================================ */

.site .container { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.site .section { padding: 80px 0; }
.site .section-warm { background: var(--white); }
.site .page-hero { padding: 88px 0 40px; }
.site .page-hero h1 { margin-bottom: 18px; }
.site .page-hero p { font-size: 19px; line-height: 1.6; color: var(--ink-70); max-width: 640px; }
.site .prose { max-width: 720px; }
.site .prose p, .site .prose li { font-size: 17px; line-height: 1.7; color: var(--ink-70); margin-bottom: 16px; }
.site .prose h2 { font-size: 27px; margin: 40px 0 14px; }
.site .prose h3 { margin: 30px 0 10px; }

/* ---- auth: log in, sign up ---- */
.site .auth-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.site .auth-card {
  background: var(--white);
  border-radius: 26px;
  padding: 40px 36px;
  box-shadow: 0 24px 56px rgba(17, 17, 17, 0.07);
}
.site .auth-card h1 { font-size: 34px; margin-bottom: 8px; }
.site .auth-sub { font-size: 16.5px; color: var(--ink-64); margin-bottom: 26px; }
.site .auth-alt { margin-top: 22px; font-size: 15.5px; color: var(--ink-64); text-align: center; }
.site .auth-alt a { color: var(--orange); text-decoration: none; font-weight: 600; }
.site .auth-alt a:hover { color: var(--ink); }

.site .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.site .form-field label { font-size: 14.5px; font-weight: 600; color: var(--ink-64); }
.site .form-field input,
.site .form-field select,
.site .form-field textarea {
  font-family: var(--text);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(17, 17, 17, 0.14);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.site .form-field input:focus,
.site .form-field select:focus,
.site .form-field textarea:focus { border-color: var(--orange); }
.site .form-hint { font-size: 13.5px; color: var(--ink-45); }

.site .btn-block { display: block; width: 100%; text-align: center; }
.site .btn-accent { background: var(--orange); color: #fff; }
.site .btn-accent:hover { background: var(--ink); }
.site .btn-dark { background: var(--ink); color: #fff; }
.site .btn-dark:hover { background: var(--orange); }
.site .btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.site .btn-outline:hover { border-color: var(--ink); }

.site .alert { border-radius: 14px; padding: 13px 16px; font-size: 15.5px; font-weight: 600; margin-bottom: 16px; }
.site .alert-error { background: rgba(255, 107, 26, 0.12); color: #B23F00; }
.site .alert-success { background: rgba(24, 184, 145, 0.12); color: #0E7C63; }

/* ---- shared bits used by the secondary pages ---- */
.site .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.site .check-list { display: flex; flex-direction: column; gap: 11px; font-size: 16.5px; color: rgba(17, 17, 17, 0.72); }
.site .check-list li, .site .check-list div { display: flex; gap: 11px; list-style: none; }
.site .tick { color: var(--green); font-weight: 700; flex-shrink: 0; }
.site .chip {
  display: inline-block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.site .big-panel { background: var(--white); border-radius: 24px; padding: 36px 32px; }
.site .stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.site .stat { background: var(--white); border-radius: 20px; padding: 26px; }
.site .stat strong { display: block; font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.site .stat span { font-size: 15px; color: var(--ink-64); }
.site .step-num {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  flex-shrink: 0;
}
.site .demo-steps { display: flex; flex-direction: column; gap: 16px; }
.site .demo-question, .site .demo-answer-label { font-size: 16.5px; line-height: 1.55; }
.site .faq-list { display: flex; flex-direction: column; }
.site .faq-body { color: var(--ink-64); font-size: 16.5px; line-height: 1.6; }
.site .cta-final { text-align: center; padding: 88px 0 96px; }
.site .cta-final h2 { margin-bottom: 14px; }
.site .cta-final p { color: var(--ink-70); font-size: 18px; margin-bottom: 26px; }

@media (max-width: 900px) {
  .site .split-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* "What they come away with" — the outcome, sitting under the challenge card
   so a parent reads the problem and then what it leaves behind. */

/* ── homepage: challenges, from piplab-home-standalone3.html ──────────────
   Values are the export's own. Paragraph margins are scoped with `.site`
   because `.site p { margin: 0 }` is (0,1,1) and outranks a bare class. */
.hp-ch {
  background: #F2F0E9;
  border-top: 1px solid rgba(17,17,17,0.07);
  border-bottom: 1px solid rgba(17,17,17,0.07);
  margin-top: 88px;
}
.hp-ch-in {
  max-width: var(--wrap); margin: 0 auto; padding: 96px 32px;
  display: flex; flex-direction: column; gap: 56px;
}
.hp-ch-photo { width: 100%; height: auto; display: block; border-radius: 22px; }

.hp-ch-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: start; }
.hp-ch-copy { display: flex; flex-direction: column; gap: 22px; }
.site .hp-ch-copy p { font-size: 18px; line-height: 1.62; color: var(--ink-64); text-wrap: pretty; }
.hp-ch-lede { display: flex; flex-direction: column; gap: 22px; }
.site .hp-ch-lede h2 {
  font-size: 44px; line-height: 1.08; letter-spacing: -0.034em; font-weight: 600;
  text-wrap: balance; margin: 0;
}
.hp-ch-stats {
  display: flex; gap: 36px; flex-wrap: wrap;
  padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(17,17,17,0.14);
}
.hp-ch-stats div { display: flex; flex-direction: column; gap: 3px; }
.hp-ch-stats b { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.hp-ch-stats span { font-size: 15px; color: rgba(17,17,17,0.55); }

.hp-ch-card {
  background: var(--white); border-radius: 22px; border: 1px solid rgba(17,17,17,0.08);
  box-shadow: 0 24px 60px rgba(17,17,17,0.09); overflow: hidden;
}
.hp-ch-card-top {
  padding: 18px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(17,17,17,0.08);
  font-size: 14.5px; font-weight: 600; color: rgba(17,17,17,0.55);
}
.hp-ch-flag {
  background: rgba(24,184,145,0.14); color: #0E9E7C; border-radius: 999px;
  padding: 6px 13px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.hp-ch-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.hp-ch-cols > div { padding: 26px; border-right: 1px solid rgba(17,17,17,0.09); }
.hp-ch-cols > div:last-child { border-right: 0; }
.hp-ch-lab {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(17,17,17,0.42); margin-bottom: 8px;
}
.site .hp-ch-cols p { font-size: 17px; line-height: 1.5; color: var(--ink); }

.hp-ch-foot {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(17,17,17,0.09); background: var(--paper);
}
.hp-ch-foot > div { padding: 16px 26px; border-right: 1px solid rgba(17,17,17,0.08); }
.hp-ch-foot > div:last-child { border-right: 0; }
.hp-ch-foot b {
  display: block; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
}
.hp-ch-foot span { font-size: 13.5px; color: rgba(17,17,17,0.5); }
.hp-ch-ok { color: #0E9E7C; }

@media (max-width: 900px) {
  .hp-ch-in { padding: 56px 20px; gap: 36px; }
  .hp-ch-grid { grid-template-columns: 1fr; gap: 26px; }
  /* The heading introduces the copy, so on one column it has to come first. */
  .hp-ch-lede { order: -1; }
  .site .hp-ch-lede h2 { font-size: 32px; }
  .hp-ch-cols, .hp-ch-foot { grid-template-columns: 1fr; }
  .hp-ch-cols > div, .hp-ch-foot > div { border-right: 0; border-bottom: 1px solid rgba(17,17,17,0.09); }
  .hp-ch-cols > div:last-child, .hp-ch-foot > div:last-child { border-bottom: 0; }
}

/* ── /schools, from piplab-for-schools-standalone.html ────────────────────
   Values are the export's own. Paragraph and heading margins are scoped with
   `.site` because `.site p { margin: 0 }` and `.site h1/h2` are (0,1,1) and
   outrank a bare class. The export has no images: it is a type-led page, and
   its rules and hairlines are doing the work a photograph would. */

.sch-hero { padding-top: 96px; padding-bottom: 72px; }
.sch-hero .eyebrow { display: block; margin-bottom: 26px; }
/* Text beside the photograph: the headline shares the row now, so it scales
   for a column, not the whole page width. */
.sch-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.sch-hero-grid img { width: 100%; height: auto; display: block; border-radius: 20px; }
.site .sch-hero h1 {
  font-size: clamp(38px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.042em;
  font-weight: 700; margin: 0 0 24px;
}
.site .sch-hero .sch-lede {
  font-size: clamp(18px, 1.7vw, 20px); line-height: 1.6;
  color: rgba(17,17,17,0.62); max-width: 560px; margin: 0 0 40px;
}

/* Three cells divided by hairlines, not three boxes — the design deliberately
   has no card here, so the numbers sit on the paper. */
.sch-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 72px; border-top: 1px solid rgba(17,17,17,0.14);
}
.sch-stats > div { padding: 26px 32px 0 0; border-right: 1px solid rgba(17,17,17,0.10); }
.sch-stats > div + div { padding-left: 32px; }
.sch-stats > div:last-child { padding-right: 0; border-right: 0; }
.sch-stats b {
  display: block; font-family: var(--display); font-size: clamp(30px, 3.3vw, 40px);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.1;
}
.sch-stats span { display: block; font-size: 16px; line-height: 1.4; color: rgba(17,17,17,0.55); margin-top: 4px; }

/* Longhand, not `padding: 80px 0`. These sit on the same element as .wrap and
   are declared after it, so the shorthand would reset .wrap's 32px gutter to 0
   and slam the section flat against the viewport edge. */
.sch-sec { padding-top: 80px; padding-bottom: 80px; }
.sch-close { padding-top: 96px; padding-bottom: 104px; }

/* ---------- heading left, numbered rules right ---------- */
.sch-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; }
.site .sch-split h2 {
  font-size: clamp(30px, 3.7vw, 44px); line-height: 1.08; letter-spacing: -0.034em;
  font-weight: 600; margin: 0 0 16px;
}
.site .sch-split-copy p { font-size: 18px; line-height: 1.62; color: rgba(17,17,17,0.62); }

.sch-rules { display: flex; flex-direction: column; }
.sch-rules > div { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid rgba(17,17,17,0.14); }
.sch-rules > div:last-child { border-bottom: 1px solid rgba(17,17,17,0.14); }
.sch-rules i {
  font-family: var(--display); font-style: normal; font-size: 14px; font-weight: 600;
  color: rgba(17,17,17,0.35); padding-top: 4px; width: 26px; flex-shrink: 0;
}
.sch-rules span { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.45; }

/* ---------- the dark four-pillar band ---------- */
.sch-why { margin-top: 32px; }
.sch-why-in { max-width: var(--wrap); margin: 0 auto; padding: 96px 32px; }
.site .sch-why h2 {
  font-size: clamp(29px, 3.5vw, 42px); line-height: 1.12; letter-spacing: -0.03em;
  font-weight: 600; max-width: 620px; margin: 0 0 56px;
}
.sch-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 72px; }
.sch-why-grid > div {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 22px; border-top: 1px solid rgba(251,250,247,0.22);
}
.sch-why-grid b {
  font-family: var(--display); font-size: 24px; font-weight: 600;
  letter-spacing: -0.025em; color: var(--orange);
}
/* Beats .band-dark p, which is (0,1,1) and would hold these at 16.5px. */
.site .sch-why-grid p { font-size: 18px; line-height: 1.55; color: rgba(251,250,247,0.72); }

/* ---------- closing panel: copy left, spec table right ---------- */
.sch-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  background: #F2F0E9; border-radius: 24px; padding: 64px 56px;
}
.sch-cta-body { display: flex; flex-direction: column; gap: 20px; }
.site .sch-cta h2 {
  font-size: clamp(28px, 3.3vw, 40px); line-height: 1.1; letter-spacing: -0.032em;
  font-weight: 600; margin: 0;
}
.site .sch-cta-body p { font-size: 18px; line-height: 1.6; color: rgba(17,17,17,0.66); }

.sch-spec { display: flex; flex-direction: column; }
.sch-spec > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-top: 1px solid rgba(17,17,17,0.14);
}
.sch-spec > div:last-child { border-bottom: 1px solid rgba(17,17,17,0.14); }
.sch-spec span { font-size: 16.5px; color: rgba(17,17,17,0.55); }
.sch-spec b { font-size: 16.5px; font-weight: 600; text-align: right; }

@media (max-width: 900px) {
  .sch-hero { padding-top: 60px; padding-bottom: 48px; }
  .sch-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .sch-sec { padding-top: 56px; padding-bottom: 56px; }
  .sch-close { padding-top: 56px; padding-bottom: 72px; }
  .sch-stats { margin-top: 48px; }
  .sch-split { grid-template-columns: 1fr; gap: 28px; }
  .sch-why { margin-top: 0; }
  .sch-why-in { padding: 60px 20px; }
  .site .sch-why h2 { margin-bottom: 36px; }
  .sch-why-grid { grid-template-columns: 1fr; gap: 32px; }
  .sch-cta { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; }
}
@media (max-width: 700px) {
  /* Three numerals plus their captions will not sit side by side down here —
     "student email addresses collected" goes to three lines and the row stops
     scanning — so the rail becomes a stack of hairlines instead. */
  .sch-stats { grid-template-columns: 1fr; }
  .sch-stats > div,
  .sch-stats > div + div {
    padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(17,17,17,0.10);
  }
  .sch-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ============================================================
   /build-ideas — the parents page
   Ported from piplab-for-parents-standalone.html. Every value below is the
   export's own; the only things that changed on the way in are the two the
   export could not express — style-hover="" became real :hover on the shared
   .btn classes, and the design's attribute selectors
   ([style*="grid-template-columns"] { grid-template-columns: 1fr }) became
   named rules, because those only worked while every grid was inline.

   TWO TRAPS IN THIS FILE, both of which have already cost an afternoon:
     - `.site p { margin: 0 }` is (0,1,1). A bare `.pp-thing { margin-top }` on
       a <p> loses to it silently. Everything below that touches a <p> is
       written `.site .pp-…`.
     - a shorthand `padding` on an element that also carries .wrap wipes .wrap's
       32px side gutter. This block never uses .wrap — .pp-wrap is its own — and
       still only sets padding-top/padding-bottom, so nothing can reach an edge.
   ============================================================ */

.pp-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.pp-orange { color: var(--orange); }

/* The export runs its own type scale on this page — 82px h1, 58px/52px h2,
   38px h3 — well above the shared .site h1/h2/h3 clamps. Held here rather than
   changed globally, and clamped so the small end matches the export's own
   1180px and 900px breakpoints. */
.site .pp-h1 { font-size: clamp(40px, 5.9vw, 82px); line-height: 1.1; letter-spacing: -0.042em; }
.site .pp-h2 { font-size: clamp(30px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.038em; }
.site .pp-h3 { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.12; letter-spacing: -0.03em; }

/* ---------- 1. hero ---------- */
.pp-hero { background: var(--ink); color: var(--paper); overflow: hidden; }
.pp-hero-in {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center;
  padding-top: 104px; padding-bottom: 96px;
}
.pp-hero-copy { display: flex; flex-direction: column; gap: 30px; }
.site .pp-hero-lede {
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.68;
  color: rgba(251, 250, 247, 0.78); max-width: 500px;
}
.pp-hero-btns { padding-top: 6px; }
.pp-hero-img {
  width: 100%; height: 520px; object-fit: cover; object-position: 60% center;
  border-radius: 24px; display: block;
}

/* ---------- 2. the reassurance strip ---------- */
.pp-reassure { background: var(--white); border-bottom: 1px solid rgba(17, 17, 17, 0.07); }
.pp-reassure-in {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding-top: 44px; padding-bottom: 44px;
}
.pp-reassure-in > div { display: flex; flex-direction: column; gap: 7px; }
.pp-reassure-in > div:first-child { padding-right: 44px; }
.pp-reassure-in > div:nth-child(2) {
  padding: 0 44px;
  border-left: 1px solid rgba(17, 17, 17, 0.1);
  border-right: 1px solid rgba(17, 17, 17, 0.1);
}
.pp-reassure-in > div:last-child { padding-left: 44px; }
.pp-reassure-in b {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: -0.022em; line-height: 1.3;
}
.pp-reassure-in span { font-size: 16.5px; line-height: 1.5; color: rgba(17, 17, 17, 0.55); }

/* ---------- shared section head: headline left, standfirst right ---------- */
.pp-sec-head {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px;
  align-items: end; margin-bottom: 44px;
}
.site .pp-sec-head p {
  font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.68;
  color: var(--ink-64); max-width: 520px;
}

/* ---------- 3. the three numbered steps ---------- */
.pp-steps { padding-top: 104px; padding-bottom: 40px; }
.pp-step-list { display: flex; flex-direction: column; padding-top: 8px; }
/* THE SHOT SITS BESIDE THE COPY, NOT UNDER IT. Capping the screenshots at
   600px fixed one problem and made another: in a single column inside a
   1136px wrap, a 600px image leaves the right half of every step empty, and
   three steps of that reads as a page that failed to load. Two columns spend
   the width on the thing the step is about.

   The sides alternate. Three identical rows of copy-then-picture marches; a
   zigzag gives the eye somewhere to go and stops the third step looking like a
   repeat of the first. */
.pp-step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
  padding-top: 56px; padding-bottom: 72px;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}
.pp-step:nth-child(even) .pp-step-head { order: 2; }
.pp-step:nth-child(even) .pp-shot { order: 1; }
.pp-step-head { display: flex; flex-direction: column; gap: 16px; }
.pp-step-num {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--pp-acc, var(--orange));
}
.pp-step-copy { display: flex; flex-direction: column; gap: 14px; }
/* The column is now ~540px, so these caps only bite on one column at narrow
   widths — kept so the copy never runs the full width when it stacks. */
.site .pp-step-copy h3 { max-width: 740px; }
.site .pp-step-copy p {
  font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.7;
  color: rgba(17, 17, 17, 0.66); max-width: 660px;
}
/* The export had these at width:100% of the 1136px wrap. At that size a
   screenshot of a dialog box is the largest object on the page — bigger than
   the hero photograph, four times the width of anything else in this column —
   and the step it is illustrating reads as its caption. Capped at 600px, which
   is the width the rest of the site already works at: a .grid-2 card is 558,
   an "or they bring their own" cell is 568, the marking card is 532. Sitting
   just inside the 660px copy measure above it makes it a figure belonging to
   that block rather than a band across the page. The files are encoded at
   1200px — 2x, because these are screenshots of small UI text.

   SCOPED `.site .pp-shot` FOR THE SAME REASON THE <p> RULES ARE. `body.site img
   { max-width: 100% }` near the top of this file is (0,1,1); a bare
   `.pp-shot { max-width: 600px }` is (0,1,0) and loses to it silently, which
   is exactly the trap `.site p { margin: 0 }` sets for paragraphs. */
.site .pp-shot {
  width: 100%; max-width: 600px; height: auto; display: block; border-radius: 20px;
  border: 1px solid rgba(17, 17, 17, 0.09);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.09);
}

/* ---------- 4. the marking ---------- */
.pp-brief {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  padding-top: 96px; padding-bottom: 96px;
}
.pp-brief-copy { display: flex; flex-direction: column; gap: 22px; }
.site .pp-brief-copy p {
  font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.7;
  color: rgba(17, 17, 17, 0.66); max-width: 560px;
}
.pp-brief-card {
  background: var(--white); border-radius: 24px; padding: 30px;
  box-shadow: 0 24px 56px rgba(17, 17, 17, 0.08);
  display: flex; flex-direction: column; gap: 16px;
}
.pp-brief-lab {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-45);
}
.pp-brief-said {
  background: var(--paper); border-radius: 14px; padding: 18px 20px;
  font-size: 17px; line-height: 1.5; color: rgba(17, 17, 17, 0.75);
}
.pp-brief-reply {
  background: rgba(255, 107, 26, 0.09); border-left: 3px solid var(--orange);
  border-radius: 14px; padding: 18px 20px; font-size: 17px; line-height: 1.55;
}
.pp-brief-reply code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  background: rgba(17, 17, 17, 0.06); padding: 1px 6px; border-radius: 5px;
}

/* ---------- 5. the counts ---------- */
.pp-stats {
  background: #F2F0E9;
  border-top: 1px solid rgba(17, 17, 17, 0.07);
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
}
.pp-stats-in { padding-top: 80px; padding-bottom: 88px; }
.pp-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.14);
  margin-top: 40px; padding-top: 34px;
}
.pp-stats-grid > div { display: flex; flex-direction: column; gap: 10px; }
.pp-stats-grid > div:not(:last-child) { border-right: 1px solid rgba(17, 17, 17, 0.12); }
.pp-stats-grid > div:first-child { padding-right: 36px; }
.pp-stats-grid > div:nth-child(2),
.pp-stats-grid > div:nth-child(3) { padding: 0 36px; }
.pp-stats-grid > div:last-child { padding-left: 36px; }
.pp-stat-num {
  font-family: var(--display); font-size: clamp(48px, 5vw, 64px); font-weight: 600;
  letter-spacing: -0.045em; line-height: 0.95;
}
.pp-stat-lab {
  font-family: var(--display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3;
}
.pp-stats-grid span {
  font-size: 16.5px; line-height: 1.55; color: rgba(17, 17, 17, 0.55); max-width: 260px;
}

/* ---------- 6. or they bring their own ---------- */
.pp-own { padding-top: 96px; padding-bottom: 96px; }
.pp-own-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}
.pp-own-grid > div {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 34px; padding-bottom: 34px;
}
.pp-own-grid > div:nth-child(odd) {
  padding-right: 40px; border-right: 1px solid rgba(17, 17, 17, 0.12);
}
.pp-own-grid > div:nth-child(even) { padding-left: 40px; }
.pp-own-grid > div:nth-child(1),
.pp-own-grid > div:nth-child(2) { border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.pp-own-grid b {
  font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
}
.site .pp-own-grid p {
  font-size: 17.5px; line-height: 1.66; color: rgba(17, 17, 17, 0.62); max-width: 460px;
}

/* ---------- 7. the guardrail band ----------
   Not in the export. It borrows the hero's ink field rather than inventing a
   surface, so the page reads as two dark bookends around the light middle. */
.pp-guard { background: var(--ink); color: var(--paper); }
.pp-guard-in { padding-top: 88px; padding-bottom: 96px; }
.site .pp-guard h2 { color: var(--paper); max-width: 860px; margin-top: 18px; }
.pp-guard-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 64px; margin-top: 52px;
}
.pp-guard-grid > div {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 26px; border-top: 1px solid rgba(251, 250, 247, 0.16);
}
.pp-guard-grid b {
  font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.022em;
}
.site .pp-guard-grid p {
  font-size: 17px; line-height: 1.62; color: rgba(251, 250, 247, 0.62); max-width: 460px;
}

/* ---------- 8. the honest pair ---------- */
.pp-honest { padding-top: 96px; padding-bottom: 8px; }

/* ---------- 9. closing ---------- */
.pp-close { padding-top: 96px; padding-bottom: 104px; }
.pp-close-panel {
  background: var(--white); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
.pp-close-img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; }
.pp-close-body {
  padding: 68px 56px; display: flex; flex-direction: column; gap: 22px; justify-content: center;
}
.site .pp-close-body p {
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.68;
  color: rgba(17, 17, 17, 0.66); max-width: 480px;
}

/* ---------- responsive: the export's own two breakpoints ---------- */
@media (max-width: 1180px) {
  .pp-hero-in { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
  .site .pp-hero-lede { max-width: none; }
  .pp-hero-img { height: auto; max-height: 420px; }
  .pp-sec-head { grid-template-columns: 1fr; gap: 18px; }
  .site .pp-sec-head p { max-width: none; }
  .pp-brief { grid-template-columns: 1fr; gap: 40px; }
  .site .pp-brief-copy p { max-width: none; }
  .pp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .pp-stats-grid > div,
  .pp-stats-grid > div:first-child,
  .pp-stats-grid > div:nth-child(2),
  .pp-stats-grid > div:nth-child(3),
  .pp-stats-grid > div:last-child { border-right: 0; padding: 0; }
  .pp-stats-grid span { max-width: none; }
  .pp-own-grid > div,
  .pp-own-grid > div:nth-child(odd),
  .pp-own-grid > div:nth-child(even) {
    padding-left: 0; padding-right: 0; border-right: 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  }
  .site .pp-own-grid p { max-width: none; }
  .pp-guard-grid { gap: 32px 48px; }
  .site .pp-guard-grid p { max-width: none; }
  .pp-close-panel { grid-template-columns: 1fr; }
  .pp-close-img { min-height: 0; height: 320px; }
  .pp-close-body { padding: 44px 36px 48px; }
  .site .pp-close-body p { max-width: none; }
}
@media (max-width: 900px) {
  .pp-wrap { padding-left: 20px; padding-right: 20px; }
  .pp-reassure-in { grid-template-columns: 1fr; gap: 24px; }
  .pp-reassure-in > div,
  .pp-reassure-in > div:first-child,
  .pp-reassure-in > div:nth-child(2),
  .pp-reassure-in > div:last-child { padding: 0; border: 0; }
  .pp-steps { padding-top: 64px; }
  /* One column below the breakpoint, and the shot goes back under the copy —
     including on the alternating rows, where order would otherwise put a
     picture above the words it illustrates. */
  .pp-step { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 48px; }
  .pp-step:nth-child(even) .pp-step-head { order: 0; }
  .pp-step:nth-child(even) .pp-shot { order: 0; }
  .pp-brief { padding-top: 64px; padding-bottom: 64px; }
  .pp-stats-in { padding-top: 56px; padding-bottom: 64px; }
  .pp-stats-grid { grid-template-columns: 1fr; gap: 32px; }
  .pp-own { padding-top: 64px; padding-bottom: 64px; }
  .pp-own-grid { grid-template-columns: 1fr; }
  .pp-guard-in { padding-top: 64px; padding-bottom: 64px; }
  .pp-guard-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .pp-honest { padding-top: 64px; }
  .pp-close { padding-top: 64px; padding-bottom: 72px; }
}

/* ═══════════ /tutors — ported from piplab-for-tutors-standalone.html ═══
   Pixel-for-pixel: every value below is the export's own. Scoped .tut- and,
   where a rule must beat `.site p { margin: 0 }` (0,1,1) or `.site h1/h2`,
   written as `.site .tut-…`. The export's wrap is 1200px/32px — hard-coded
   here rather than var(--wrap), because the export is the ruler. */

.tut-hero {
  max-width: 1200px; margin: 0 auto; padding: 80px 32px 72px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
}
.tut-hero img { width: 100%; height: auto; display: block; border-radius: 20px; }
/* The live board's stage: mount() paints its surface; this only reserves the
   box so the hero doesn't jump while the script loads. */
.tut-hero-stage { width: 100%; min-height: 460px; border-radius: 20px; background: radial-gradient(120% 90% at 50% 0%, #1B2C22 0%, #0D1712 70%); }
/* The "Push me" callout on the hero board. It bobs by margin, not transform —
   pi-board's paint() re-writes the tag's transform every frame to keep it
   facing the camera, so transform is not ours to animate. */
.tut-pushme { animation: tut-bob 1.8s ease-in-out infinite; }
.tut-pushme-caret {
  position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  width: 0; height: 0; border: 6px solid transparent;
  border-top-color: #FF6B1A; border-bottom: 0;
}
@keyframes tut-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
@media (prefers-reduced-motion: reduce) { .tut-pushme { animation: none; } }
/* the fullscreen toggle riding the stage's top-right corner */
.tut-fs {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  color: rgba(251, 250, 247, 0.75);
  background: rgba(251, 250, 247, 0.08);
  border: 1px solid rgba(251, 250, 247, 0.18);
  backdrop-filter: blur(4px);
  transition: color .15s, background .15s;
}
.tut-fs:hover { color: #FBFAF7; background: rgba(251, 250, 247, 0.16); }
/* "Reasonably bigger": a fixed overlay with breathing room, not OS
   fullscreen. The 100vmax shadow is the backdrop — one element, no extra
   markup, dismissed by the same button or Escape. */
.tut-hero-stage.is-big {
  position: fixed; inset: 4vh 5vw; z-index: 200;
  /* width:auto, or the base class's width:100% beats the right inset and the
     stage hangs off the viewport's right edge. min-height likewise yields to
     the insets. */
  width: auto; min-height: 0;
  box-shadow: 0 0 0 100vmax rgba(17, 17, 17, 0.55);
}
/* the tasting-menu of parts along the stage's bottom edge */
.tut-parts {
  position: absolute; left: 14px; top: 14px;
  z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-height: calc(100% - 28px);
}
.site .tut-part {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--font, inherit); font-size: 13.5px; font-weight: 600;
  color: rgba(251, 250, 247, 0.85);
  background: rgba(251, 250, 247, 0.08);
  border: 1px solid rgba(251, 250, 247, 0.18);
  backdrop-filter: blur(4px);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.site .tut-part:hover { background: rgba(251, 250, 247, 0.16); color: #FBFAF7; }
.site .tut-part.is-on {
  background: rgba(255, 107, 26, 0.22); border-color: rgba(255, 107, 26, 0.65); color: #FBFAF7;
}
.site .tut-part-more { color: #FF9F45; }
.site .tut-part-more:hover { color: #FBFAF7; background: rgba(255, 107, 26, 0.25); border-color: rgba(255, 107, 26, 0.5); }
.tut-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.tut-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #FF6B1A;
}
.site .tut-h1 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 58px; line-height: 1.02;
  letter-spacing: -0.04em; font-weight: 600; text-wrap: balance;
}
.site .tut-lede { font-size: 19px; line-height: 1.55; color: rgba(17,17,17,0.66); }
.tut-btns { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
/* the "alive" chip in the challenges section */
.tut-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: #C2620F;
  background: rgba(255, 107, 26, 0.07); border: 1px solid rgba(255, 107, 26, 0.28);
}
.tut-badge-dot {
  width: 7px; height: 7px; border-radius: 999px; background: #FF6B1A;
  animation: tut-pulse 2.2s ease-out infinite;
}
@keyframes tut-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 26, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 107, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 26, 0); }
}
@media (prefers-reduced-motion: reduce) { .tut-badge-dot { animation: none; } }
.site .tut-btn, .site .tut-btn-line {
  text-decoration: none; border-radius: 999px; padding: 15px 30px;
  font-size: 16px; font-weight: 600;
}
.site .tut-btn { background: #FF6B1A; color: #FFFFFF; }
.site .tut-btn:hover { background: #E85A0C; color: #FFFFFF; }
.site .tut-btn-line { background: #FFFFFF; border: 1px solid rgba(17,17,17,0.16); color: #111111; }
.site .tut-btn-line:hover { border-color: #111111; color: #111111; }

/* ── the four-quadrant build section ── */
.tut-build-sec {
  max-width: 1200px; margin: 0 auto; padding: 0 32px 96px;
  display: flex; flex-direction: column; gap: 40px;
}
.tut-build-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.site .tut-h2 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 44px; line-height: 1.08;
  letter-spacing: -0.034em; font-weight: 600; text-wrap: balance;
}
.site .tut-build-head p { font-size: 18.5px; line-height: 1.6; color: rgba(17,17,17,0.66); }

.tut-quad {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid rgba(17,17,17,0.14);
}
.tut-cell { display: flex; flex-direction: column; gap: 16px; padding-top: 30px; padding-bottom: 30px; }
.tut-cell-left { padding-right: 40px; border-right: 1px solid rgba(17,17,17,0.12); }
.tut-cell-right { padding-left: 40px; }
.tut-cell-top { border-bottom: 1px solid rgba(17,17,17,0.12); }
.tut-cell-mid { justify-content: center; }

.tut-cat { display: flex; align-items: center; gap: 11px; }
.tut-cat-chip {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tut-cat-name { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.tut-mt { display: flex; flex-direction: column; gap: 5px; }
.tut-mt-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(17,17,17,0.4);
}
.site .tut-mt p { font-size: 17px; line-height: 1.55; color: rgba(17,17,17,0.66); }
.site .tut-mt .tut-mt-make { color: #111111; }
.tut-mt-teach { padding-top: 14px; border-top: 1px solid rgba(17,17,17,0.1); }

/* the little browser-window mocks */
.tut-mock {
  width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(17,17,17,0.12); background: #FFFFFF;
  box-shadow: 0 14px 34px -26px rgba(17,17,17,0.6);
}
.tut-mock-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: #F1EFEA; border-bottom: 1px solid rgba(17,17,17,0.1);
}
.tut-dots { display: flex; gap: 5px; }
.tut-dots span { width: 8px; height: 8px; border-radius: 999px; background: rgba(17,17,17,0.18); }
.tut-mock-url {
  flex: 1; min-width: 0; background: #FFFFFF; border: 1px solid rgba(17,17,17,0.1);
  border-radius: 999px; padding: 4px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: rgba(17,17,17,0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tut-mock-body { padding: 14px; }
.tut-mock-game { background: #F7F5F0; }
.tut-mock-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 12px;
}
.tut-mock-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.tut-chips { display: flex; gap: 8px; }
.tut-chip {
  background: #FFFFFF; border: 1px solid rgba(17,17,17,0.1); border-radius: 8px;
  padding: 4px 10px; font-size: 12.5px; font-weight: 600;
}
.tut-chip-add {
  background: rgba(255,107,26,0.1); border-color: rgba(255,107,26,0.28);
  color: #C2620F; font-weight: 700;
}

/* the database table inside the second mock */
.tut-tbl-head, .tut-tbl-row, .tut-tbl-total {
  display: grid; grid-template-columns: 1.3fr 0.7fr 0.8fr 0.9fr; gap: 8px;
}
.tut-tbl-head {
  padding-bottom: 7px; border-bottom: 1px solid rgba(17,17,17,0.14);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(17,17,17,0.42);
}
.tut-tbl-head span:last-child { text-align: right; }
.tut-tbl-row { padding: 9px 0; border-bottom: 1px solid rgba(17,17,17,0.08); font-size: 13.5px; }
.tut-tbl-row span:first-child { font-weight: 600; }
.tut-tbl-row span { color: rgba(17,17,17,0.7); }
.tut-tbl-row span:first-child { color: #111111; }
.tut-tbl-row span:last-child { color: rgba(17,17,17,0.5); text-align: right; }
.tut-tbl-total { padding-top: 10px; font-size: 13.5px; font-weight: 700; }
.tut-tbl-total span:first-child { color: rgba(17,17,17,0.5); }
.tut-tbl-total span:last-child { text-align: right; color: rgba(17,17,17,0.4); font-weight: 600; }

/* the Pi Lab board on its dotted grid */
.tut-pi {
  width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(17,17,17,0.12); background-color: #F6F4EE;
  background-image: linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px);
  background-size: 16px 16px; padding: 16px;
}
.tut-pi-note { font-size: 12.5px; font-weight: 600; color: rgba(17,17,17,0.5); }

.site .tut-build-close {
  font-size: 20px; line-height: 1.55; max-width: 900px; padding-top: 8px;
  border-top: 1px solid rgba(17,17,17,0.14); color: rgba(17,17,17,0.8);
}

/* ── the challenges section ── */
.tut-ch-sec {
  max-width: 1200px; margin: 0 auto; padding: 0 32px 96px;
  display: flex; flex-direction: column; gap: 36px;
}
.tut-ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(17,17,17,0.14); }
.tut-ch-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 34px 4px 0; }
.tut-ch-card + .tut-ch-card { padding-left: 34px; border-left: 1px solid rgba(17,17,17,0.12); }
.tut-ch-card:last-child { padding-right: 0; }
.tut-ch-card h3 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 21px;
  font-weight: 600; letter-spacing: -0.024em;
}
.site .tut-ch-card p { font-size: 16.5px; line-height: 1.55; color: rgba(17,17,17,0.62); font-style: italic; }
.tut-ch-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid rgba(17,17,17,0.14); }
.site .tut-ch-foot p { font-size: 15px; line-height: 1.55; color: rgba(17,17,17,0.55); margin: 0; }

/* ── the dark approval band ── */
.tut-approval-sec { background: #111111; color: #FBFAF7; }
.tut-approval-in {
  max-width: 1200px; margin: 0 auto; padding: 76px 32px 80px;
  display: flex; flex-direction: column; gap: 34px;
}
.site .tut-approval-in h2 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 38px; line-height: 1.12;
  letter-spacing: -0.032em; font-weight: 600; max-width: 620px; text-wrap: balance;
  color: #FBFAF7;
}
.tut-approval {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(251,250,247,0.18);
}
.tut-approval > div { display: flex; flex-direction: column; gap: 8px; padding: 26px 34px; }
.tut-approval > div:first-child { padding-left: 0; border-right: 1px solid rgba(251,250,247,0.16); }
.tut-approval > div:nth-child(2) { border-right: 1px solid rgba(251,250,247,0.16); }
.tut-approval > div:last-child { padding-right: 0; }
.tut-app-title { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.site .tut-approval p { font-size: 17px; line-height: 1.55; color: rgba(251,250,247,0.66); }
.site .tut-approval-close {
  font-size: 18px; line-height: 1.6; color: rgba(251,250,247,0.62);
  max-width: 700px; padding-top: 8px;
}

/* ── the dashboard tour ── */
.tut-tour {
  max-width: 1200px; margin: 0 auto; padding: 92px 32px 96px;
  display: flex; flex-direction: column; gap: 34px;
}
.site .tut-tour-h2 { max-width: 560px; }
.tut-tour-grid {
  width: 100%; height: auto; display: block; border-radius: 18px;
  border: 1px solid rgba(17,17,17,0.09);
  box-shadow: 0 24px 60px -34px rgba(17,17,17,0.5);
}
.tut-tour-row {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px;
  align-items: start; padding-top: 10px;
}
.tut-tour-list { display: flex; flex-direction: column; border-top: 1px solid rgba(17,17,17,0.14); }
.tut-tour-list > div {
  padding: 20px 0; border-bottom: 1px solid rgba(17,17,17,0.09);
  display: flex; flex-direction: column; gap: 5px;
}
.tut-tour-list > div:last-child { border-bottom: 0; }
.tut-tour-title { font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.site .tut-tour-list p { font-size: 17px; line-height: 1.55; color: rgba(17,17,17,0.62); }
.tut-tour-side {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid rgba(17,17,17,0.09);
  box-shadow: 0 18px 44px -32px rgba(17,17,17,0.5);
}

/* ── the cost band ── */
.tut-cost-sec {
  background: #F2F0E9;
  border-top: 1px solid rgba(17,17,17,0.07);
  border-bottom: 1px solid rgba(17,17,17,0.07);
}
.tut-cost {
  max-width: 1200px; margin: 0 auto; padding: 80px 32px 84px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.tut-cost-copy { display: flex; flex-direction: column; gap: 18px; }
.site .tut-cost-copy h2 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 40px; line-height: 1.1;
  letter-spacing: -0.034em; font-weight: 600; text-wrap: balance;
}
.site .tut-cost-copy p { font-size: 17.5px; line-height: 1.6; color: rgba(17,17,17,0.62); }
.tut-cost-rows { display: flex; flex-direction: column; border-top: 1px solid rgba(17,17,17,0.16); }
.tut-cost-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid rgba(17,17,17,0.1);
}
.tut-cost-rows > div:last-child { border-bottom: 0; }
.tut-cost-rows > div > span:first-child { font-size: 18px; font-weight: 600; }
.tut-cost-price { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }

/* ── the close ── */
.tut-close {
  max-width: 1200px; margin: 0 auto; padding: 92px 32px 104px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.tut-close img { width: 100%; height: auto; display: block; border-radius: 20px; }
.tut-close-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.site .tut-close-copy h2 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 48px; line-height: 1.06;
  letter-spacing: -0.038em; font-weight: 600; text-wrap: balance;
}

/* the export's own breakpoint */
@media (max-width: 1000px) {
  .tut-hero, .tut-build-head, .tut-quad, .tut-approval,
  .tut-ch-grid, .tut-tour-row, .tut-cost, .tut-close { grid-template-columns: 1fr; }
  .tut-ch-card { padding-right: 0; }
  .tut-ch-card + .tut-ch-card { padding-left: 0; border-left: 0; border-top: 1px solid rgba(17,17,17,0.12); margin-top: 22px; padding-top: 26px; }
  .site .tut-h1 { font-size: 44px; }
  .site .tut-close-copy h2 { font-size: 40px; }
  .tut-cell-left, .tut-cell-right { padding-left: 0; padding-right: 0; border-right: 0; }
  .tut-cell, .tut-cell-top { border-bottom: 1px solid rgba(17,17,17,0.12); }
  .tut-quad > .tut-cell:last-child { border-bottom: 0; }
  .tut-approval > div { padding-left: 0; padding-right: 0; border-right: 0 !important;
    border-bottom: 1px solid rgba(251,250,247,0.16); }
  .tut-approval > div:last-child { border-bottom: 0; }
}


/* ============================================================
   Legal pages — privacy.php and terms.php. Prefix .lg- so
   nothing leaks into the shared stylesheet's territory.

   Selector notes, learned the hard way elsewhere in this file:
   - `.site p { margin: 0 }` is (0,1,1) and outranks a bare
     class, so every paragraph margin below is written as
     `.site .lg-…`.
   - `.container` supplies the 32px side gutter via
     `padding: 0 32px`; nothing here sets shorthand `padding`
     on a `.container`, only padding-top/bottom.
   ============================================================ */

.site .lg-updated {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-45);
  letter-spacing: 0.01em;
}

/* The plain-summary box at the top — the "in short" pattern
   kids' platforms use so a parent gets the whole shape before
   the detail. White card on the paper background. */
.site .lg-inshort {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 28px 30px 24px;
  max-width: 760px;
  margin-bottom: 40px;
}
.site .lg-inshort-kicker {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.site .lg-inshort ul { margin: 0; padding-left: 20px; }
.site .lg-inshort li {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-70);
  margin-bottom: 10px;
}
.site .lg-inshort li:last-child { margin-bottom: 0; }
.site .lg-inshort li strong { color: var(--ink); }

/* On-page contents: pill links. A row that wraps, not a sidebar —
   the prose column is 720px and a sidebar would fight it. */
.site .lg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin-bottom: 8px;
}
.site .lg-toc a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-70);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  transition: color .15s, border-color .15s;
}
.site .lg-toc a:hover { color: var(--ink); border-color: var(--ink); }

/* The sticky nav is ~64px; anchors need to land below it. */
.site .lg-prose h2 { scroll-margin-top: 90px; }

/* Audience subsections — "If you are a parent" / "If you run a
   class". Tinted left rule so the two read as addressed asides. */
.site .lg-aud {
  border-left: 3px solid var(--green);
  border-radius: 4px;
  padding: 4px 0 4px 22px;
  margin: 22px 0 26px;
}
.site .lg-aud-tutor { border-left-color: var(--blue); }
.site .lg-aud h3 { margin: 0 0 10px; }
.site .lg-aud p, .site .lg-aud li { margin-bottom: 12px; }
.site .lg-aud :last-child { margin-bottom: 0; }

/* One quiet line under the hero and at the foot of each page. */
.site .lg-plain {
  font-size: 15px;
  color: var(--ink-45);
  max-width: 720px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.site .lg-plain a { color: var(--ink-70); }

@media (max-width: 640px) {
  .site .lg-inshort { padding: 22px 20px 18px; }
  .site .lg-aud { padding-left: 16px; }
}

/* Links inside the legal pages' text. site.css styles no prose links, so
   without this they fall back to browser blue. */
.site .lg-hero p a, .site .lg-prose a, .site .lg-inshort a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 107, 26, 0.4);
  text-underline-offset: 3px;
}
.site .lg-hero p a:hover, .site .lg-prose a:hover, .site .lg-inshort a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ── /join — the parent consent form ─────────────────────────────────── */
.jn-wrap { padding-top: 72px; padding-bottom: 96px; }
.jn-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.jn-copy { display: flex; flex-direction: column; gap: 18px; }
.jn-facts { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.site .jn-facts div { font-size: 15.5px; line-height: 1.6; color: var(--ink-64); padding-left: 16px; border-left: 3px solid rgba(255,107,26,0.35); }
.site .jn-facts b { color: var(--ink); }
.jn-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 32px; }
.jn-form { display: flex; flex-direction: column; gap: 16px; }
.site .jn-form label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; }
.jn-form input[type="text"], .jn-form input[type="email"] {
  border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 12px 14px;
  font-family: var(--text); font-size: 15.5px;
}
.jn-form input:focus { outline: none; border-color: var(--orange); }
.site .jn-form small { font-weight: 400; color: var(--ink-45); line-height: 1.5; }
.site .jn-tick { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14.5px; line-height: 1.55; }
.jn-tick input { margin-top: 3px; accent-color: var(--orange); }
.jn-err { background: #fdecea; color: #a3301d; border-radius: 10px; padding: 11px 14px; font-size: 14px; }
.jn-hp { position: absolute; left: -9999px; height: 1px; width: 1px; opacity: 0; }
@media (max-width: 900px) { .jn-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   FAQ page (faq.php) — .fq-* only.
   The accordion grammar is pricing's .pr-faq — numbered rows on
   hairlines, native <details>, a plus that loses its vertical
   stroke — arranged as four groups, each with a sticky heading
   column on the left. No .wrap anywhere here, so every container
   carries its own longhand gutters and cannot trip the shorthand-
   padding trap.
   ============================================================ */
.fq-hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-top: 88px;
  padding-bottom: 8px;
  padding-left: 32px;
  padding-right: 32px;
}
.site .fq-hero h1 {
  font-size: clamp(38px, 4.6vw, 56px);
  max-width: 680px;
  margin-top: 18px;
  margin-bottom: 20px;
}
.site .fq-hero .lede { max-width: 620px; }
.site .fq-lede-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(17, 17, 17, 0.3); }
.site .fq-lede-link:hover { color: var(--orange); text-decoration-color: var(--orange); }

/* Jump pills — one per group, quiet until hovered. */
.fq-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.site .fq-jump a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-70);
  text-decoration: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color .15s ease, color .15s ease;
}
.site .fq-jump a:hover { border-color: var(--ink); color: var(--ink); }

/* ---- the groups ---- */
.fq-main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 24px;
  padding-left: 32px;
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.fq-group {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px 56px;
  align-items: start;
  scroll-margin-top: 96px; /* the sticky nav is 76px tall */
}
.fq-group-head { position: sticky; top: 100px; }
.fq-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 12px;
}
.site .fq-group-head h2 { font-size: clamp(24px, 2.3vw, 30px); margin-bottom: 12px; }
.site .fq-group-head p { font-size: 16px; line-height: 1.55; color: var(--ink-64); max-width: 300px; }

/* ---- the accordion rows — same metrics as .pr-faq ---- */
.fq-list { max-width: 860px; border-top: 1px solid rgba(17, 17, 17, 0.12); }
.fq-item { border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.fq-item summary {
  display: flex; align-items: baseline; gap: 18px;
  padding: 22px 4px; cursor: pointer; list-style: none;
}
.fq-item summary::-webkit-details-marker { display: none; }
.fq-n {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  color: var(--orange); flex-shrink: 0; letter-spacing: 0.06em;
}
.fq-q {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: -0.02em; flex: 1; line-height: 1.3;
}
.fq-item summary:hover .fq-q { color: var(--orange); }
/* The plus loses its vertical stroke when open — nothing rotates, no JS. */
.fq-mark { position: relative; width: 14px; height: 14px; flex-shrink: 0; align-self: center; }
.fq-mark::before, .fq-mark::after {
  content: ""; position: absolute; background: rgba(17, 17, 17, 0.55);
  transition: opacity .15s ease;
}
.fq-mark::before { left: 0; right: 0; top: 6px; height: 2px; }
.fq-mark::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.fq-item[open] .fq-mark::after { opacity: 0; }
.fq-item[open] summary { padding-bottom: 10px; }
.site .fq-item p {
  margin: 0;
  padding-top: 0;
  padding-bottom: 24px;
  padding-left: 45px;
  padding-right: 4px;
  font-size: 16.5px; line-height: 1.65; color: var(--ink-64);
  max-width: 680px;
}
.site .fq-item p a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(17, 17, 17, 0.3); }
.site .fq-item p a:hover { color: var(--orange); text-decoration-color: var(--orange); }

/* ---- closing card ---- */
.fq-cta {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 104px;
  padding-left: 32px;
  padding-right: 32px;
}
.fq-cta-card {
  background: var(--white);
  border-radius: 26px;
  padding: 64px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.site .fq-cta-card h2 { font-size: clamp(26px, 3vw, 36px); }
.site .fq-cta-card p { font-size: 17.5px; line-height: 1.6; color: var(--ink-70); max-width: 520px; }
.fq-cta-btns { justify-content: center; margin-top: 10px; }

@media (max-width: 900px) {
  .fq-hero, .fq-main, .fq-cta { padding-left: 20px; padding-right: 20px; }
  .fq-hero { padding-top: 64px; }
  .fq-main { gap: 56px; }
  .fq-group { grid-template-columns: 1fr; gap: 6px; }
  .fq-group-head { position: static; }
  .site .fq-group-head p { max-width: 560px; margin-bottom: 10px; }
  .site .fq-item p { padding-left: 0; }
  .fq-cta-card { padding: 48px 24px; }
}

/* Signup: who are you? Two cards; the radio is the card. Lives HERE because
   login/signup are marketing-shell pages — an earlier copy sat in style.css,
   which these pages never load, so the cards rendered as bare radios. */
.site .auth-who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.site .auth-who-card { position: relative; display: block; cursor: pointer; }
.site .auth-who-card input { position: absolute; opacity: 0; }
.site .auth-who-body {
  display: flex; flex-direction: column; gap: 4px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 13px 15px;
}
.site .auth-who-card input:checked + .auth-who-body { border-color: var(--orange); background: rgba(255,107,26,0.07); }
.site .auth-who-body b { font-size: 14.5px; }
.site .auth-who-body small { font-size: 12.5px; line-height: 1.45; color: var(--ink-64); }
.site .auth-who.is-nag .auth-who-body { border-color: var(--orange); }
.site .auth-who-nag {
  margin: -8px 0 16px; font-size: 13.5px; font-weight: 600; color: var(--orange);
}
@media (max-width: 560px) { .site .auth-who { grid-template-columns: 1fr; } }

/* "or" rule and the Google button. */
.site .auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ink-45); font-size: 13px; }
.site .auth-or::before, .site .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.site .auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 13px 20px; font-family: var(--text); font-weight: 600; font-size: 15.5px;
  color: var(--ink); text-decoration: none; background: var(--white);
}
.site .auth-google:hover { border-color: var(--ink); }
.site .auth-google svg { flex-shrink: 0; }

/* ── /checkout — the receipt ──────────────────────────────────────────────
   The tutor's world in this product is paper: pasted registers, print-once
   password sheets. The order summary is therefore a slip — perforated edge,
   mono lines, and "Due today $0.00" as its bottom line — and the payment card
   stays quiet beside it. One signature element; everything else restrained. */
.co-wrap { padding-top: 64px; padding-bottom: 104px; }
.co-head { max-width: 880px; margin: 0 auto 36px; }
.site .co-head h1 { font-size: clamp(30px, 3.4vw, 40px); }
.site .co-sub { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--ink-64); max-width: 520px; }
.co-grid { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }

/* the slip */
.co-slip {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 4px 4px 14px 14px; padding: 26px 26px 22px;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.08);
}
.co-slip::before {
  /* the perforation: a torn top edge, drawn not photographed */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 8px;
  background: radial-gradient(circle at 6px -2px, transparent 6px, var(--white) 6.5px);
  background-size: 16px 8px; background-repeat: repeat-x;
  filter: drop-shadow(0 -1px 0 var(--line));
}
.co-slip-brand {
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  color: var(--ink); margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-strong);
}
.co-line {
  display: flex; justify-content: space-between; gap: 16px; padding: 7px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; color: var(--ink-70);
}
.co-line-rule { border-top: 1px dashed var(--line-strong); padding: 0; margin-top: 8px; }
.co-line-due {
  font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink);
  padding-top: 12px;
}
.site .co-slip-foot {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong);
  font-size: 13px; line-height: 1.6; color: var(--ink-45);
}

/* band rows inside the slip */
.co-bands { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.co-band {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px;
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit;
}
.co-band-name { font-family: var(--display); font-weight: 600; font-size: 15px; }
.co-band-meta { grid-row: 2; font-size: 12.5px; color: var(--ink-45); }
.co-band-price { grid-row: 1 / span 2; align-self: center; font-family: var(--display); font-weight: 600; font-size: 17px; }
.co-band-price small { font-size: 12px; color: var(--ink-45); font-weight: 400; }
.co-band:hover { border-color: var(--ink); }
.co-band.is-on { border-color: var(--orange); background: rgba(255, 107, 26, 0.06); }
.co-band.is-off { opacity: 0.45; cursor: not-allowed; }

/* the payment side */
.co-pay { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.site .co-pay h2 { font-size: 19px; margin-bottom: 2px; }
.site .co-field { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; }
.co-field input {
  border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 13px 15px;
  font-family: var(--text); font-size: 16px; background: var(--white);
}
.co-field input:focus { outline: none; border-color: var(--orange); }
.co-field input::placeholder { color: rgba(17, 17, 17, 0.28); }
.co-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-go { margin-top: 6px; }
.site .co-fine { text-align: center; font-size: 13px; color: var(--ink-45); }
.co-err { background: #fdecea; color: #a3301d; border-radius: 10px; padding: 11px 14px; font-size: 14px; }

/* done */
.co-receipt { max-width: 480px; margin: 0 auto; text-align: center; }
.co-receipt .co-slip { text-align: left; margin-bottom: 28px; }
.site .co-receipt h1 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 10px; }
.co-receipt .co-sub { margin: 0 auto 22px; }

@media (max-width: 860px) {
  .co-grid { grid-template-columns: 1fr; gap: 30px; }
  .co-wrap { padding-top: 40px; }
}

/* Homepage hero panel — the swell-alert demo comes alive: the buoy bobs, the
   sonar rings ping outward, the trajectory dashes toward shore. Ported from
   swell-alert-panel-sea-animated.html. Motion stilled for anyone who asks. */
@keyframes pip-ping { 0% { transform: scale(0.55); opacity: 0.85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes pip-bob  { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes pip-dash { to { stroke-dashoffset: -64; } }
@media (prefers-reduced-motion: reduce) {
  .hh-buoy, .hh-ping, .hh-swell-path { animation: none !important; }
}

/* ═══════════ /about — ported from piplab-about-standalone.html ═══════════
   Scoped .ab-, values are the export's own; .site-prefixed where a rule must
   beat `.site p { margin: 0 }` (0,1,1) or `.site h1/h2`. Wrap 1200/32px. */
.ab-hero {
  max-width: 1200px; margin: 0 auto; padding: 88px 32px 64px;
  display: flex; flex-direction: column; gap: 24px;
}
.ab-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #FF6B1A;
}
.site .ab-h1 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 64px; line-height: 1.02;
  letter-spacing: -0.042em; font-weight: 600; max-width: 900px; text-wrap: balance;
}
.site .ab-lede { font-size: 20px; line-height: 1.55; color: rgba(17,17,17,0.62); max-width: 660px; }

.ab-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px 88px; }
.ab-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start;
  padding-top: 52px; border-top: 1px solid rgba(17,17,17,0.14);
}
.ab-col { display: flex; flex-direction: column; gap: 20px; }
.site .ab-h2 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 32px; line-height: 1.12;
  letter-spacing: -0.032em; font-weight: 600; text-wrap: balance;
}
.site .ab-p { font-size: 18px; line-height: 1.62; color: rgba(17,17,17,0.68); }

.ab-beliefs { display: flex; flex-direction: column; border-top: 1px solid rgba(17,17,17,0.14); }
.ab-belief {
  padding: 16px 0; border-bottom: 1px solid rgba(17,17,17,0.09);
  display: flex; flex-direction: column; gap: 4px;
}
.ab-belief:last-child { border-bottom: 0; }
.ab-belief-t { font-size: 17.5px; font-weight: 600; }
.ab-belief-s { font-size: 17px; line-height: 1.5; color: rgba(17,17,17,0.6); }

.ab-stats-sec {
  background: #F2F0E9;
  border-top: 1px solid rgba(17,17,17,0.07);
  border-bottom: 1px solid rgba(17,17,17,0.07);
}
.ab-stats {
  max-width: 1200px; margin: 0 auto; padding: 64px 32px 68px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.ab-stat { display: flex; flex-direction: column; gap: 6px; padding: 0 40px; }
.ab-stat:first-child { padding-left: 0; }
.ab-stat:not(:last-child) { border-right: 1px solid rgba(17,17,17,0.12); }
.ab-stat:last-child { padding-right: 0; }
.ab-stat-n { font-family: 'Sora', sans-serif; font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ab-stat-l { font-size: 17px; line-height: 1.5; color: rgba(17,17,17,0.6); }

.ab-close { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding-top: 88px; }
.site .ab-close-h {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 48px; line-height: 1.06;
  letter-spacing: -0.038em; font-weight: 600; text-wrap: balance;
}
.ab-close-body { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

@media (max-width: 1000px) {
  .ab-body, .ab-stats, .ab-close { grid-template-columns: 1fr; }
  .ab-body { gap: 44px; }
  .ab-stat { padding: 0; }
  .ab-stat:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba(17,17,17,0.12); padding-bottom: 22px; }
  .ab-stat:not(:first-child) { padding-top: 22px; }
  .ab-close { gap: 28px; }
  .site .ab-h1 { font-size: 44px; }
}