/* ═══════════════════════════════════════════════════════════════════
   Marketing-page primitives shared by /teach and /about (and any future
   server-rendered landing): the phone canvas, section bands, label pills,
   numbered steps, the orange CTA band, the scroll fade and the hero wash.
   Same shapes as the front page; palette comes from tokens.css, which must
   load first. Page sheets (page-teach.css, page-about.css) add only what is
   specific to that page. Loads BEFORE the Bulma bundle ($head vs $styles),
   so beating helpers needs specificity, not !important. NO reset here.
   ═══════════════════════════════════════════════════════════════════ */
body.ln-marketing { background: #e9e6e0; } /* neutral surround for the phone canvas */

/* The 430px phone canvas, centered on any viewport (as on the front page). */
.ln-canvas {
  max-width: 430px;
  margin: 0 auto;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0 40px rgba(20, 33, 61, .14);
}

/* ── Scoped Bulma re-theming ────────────────────────────────────── */
.ln-canvas .box {
  --bulma-box-background-color: var(--card);
  --bulma-box-radius: 16px;
  --bulma-box-shadow: var(--shadow-sm);
  --bulma-box-padding: 16px;
  border: 1px solid var(--line);
}
.ln-canvas .box:not(:last-child) { margin-bottom: 0; } /* spacing via mb-* only */
.ln-canvas .title { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; }
.ln-canvas .tag { font-weight: 600; }

/* ── Primitives ─────────────────────────────────────────────────── */
.ln-section { padding: 40px 20px 44px; }
.ln-section--cream { background: var(--cream); border-top: 1px solid var(--line); }
.ln-label { font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: var(--orange-d); background: var(--orange-soft); }
.ln-label--ai { color: var(--ai-1); background: var(--ai-soft); }
.ln-lead { font-size: .85rem; color: var(--muted); }
.ln-kicker { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 5px; }
.ln-kicker--ai { color: var(--ai-1); }
.ln-ok { color: var(--ok); font-weight: 700; }
.ln-ai-dot { color: var(--ai-1); flex-shrink: 0; }
.ln-glow { box-shadow: var(--glow-orange); }
.ln-micro { font-size: .74rem; color: var(--muted); }

/* Scroll fade-in (page-front.js toggles .visible). The delayed animation is
   a failsafe: a missing or stale script can never leave the page blank. */
.ln-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  animation: ln-fade-failsafe 0s linear 4s forwards;
}
.ln-fade.visible { opacity: 1; transform: none; animation: none; }
@keyframes ln-fade-failsafe { to { opacity: 1; transform: none; } }

/* ── Hero wash + gradient headline accent ───────────────────────── */
.ln-canvas .ln-hero {
  background: radial-gradient(ellipse 80% 45% at 90% 0%, var(--orange-soft), transparent 70%), var(--cream);
}
.ln-grad-text {
  background: linear-gradient(100deg, var(--orange), var(--ai-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Numbered step cards ────────────────────────────────────────── */
.ln-step { gap: 13px; align-items: flex-start; }
.ln-step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  font-variant-numeric: lining-nums; /* Playfair's old-style figures sit off-centre */
}
.ln-step-text { font-size: .82rem; color: var(--muted); }

/* ── Closing CTA band ───────────────────────────────────────────── */
.ln-cta { background: linear-gradient(115deg, var(--orange), var(--orange-d)); color: #fff; padding: 44px 20px; }
.ln-cta p { font-size: .9rem; opacity: .95; }

/* ═══ Desktop/tablet tiers — nothing below 769px is affected ═════ */
@media (min-width: 769px) {
  .ln-canvas { max-width: 704px; }
  .ln-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
  .ln-grid > .box { margin-bottom: 0 !important; height: 100%; }
}
@media (min-width: 1024px) {
  body.ln-marketing { background: var(--card); } /* drop the phone surround */
  .ln-canvas { max-width: none; box-shadow: none; }
  .ln-section { padding: 72px 40px; }
  .ln-section > * { max-width: 1000px; margin-inline: auto; }
  .ln-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .ln-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .ln-hero .hero-body { padding: 48px 40px 56px; }
  .ln-cta { padding: 72px 40px; }
  .ln-cta > * { max-width: 720px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ln-fade { opacity: 1; transform: none; transition: none; animation: none; }
}