/* ============================================================
   Sejeli — marketing landing page
   ------------------------------------------------------------
   Reads its colour and type tokens from style.css (the app's design
   system), so the site and the app are one product: the same terracotta
   ramp, the same Fraunces + Manrope pairing, the same header band.

   The header band and the hero share the app's signature gradient:
     linear-gradient(168deg, #3F1409 0%, #7B3520 40%, #A44F31 68%, #C06B4A 100%)
   The app's first screen is that gradient full-bleed; tapping "Get
   started" compresses it upward into a header band. Here the same thing
   happens on scroll — the header starts transparent over the hero and
   gains the band as the hero leaves (scroll-driven animation where the
   browser has it, a solid band everywhere else).

   Contracts with js/landing.js — do not rename:
     .reveal / .reveal.in      reveal on scroll (both halves live here)
     .ld-hero-art              parallax target (owns no other transform)
     .ld-nav                   measured for the anchor offset
     .ld-nav-links a[href^=#]  scroll-spy toggles .active
     #how #why #day            section ids the nav points at

   Motion rules: only transform / opacity / filter animate; entrances
   start at scale(.985) + opacity; hover only behind (hover: hover);
   a full prefers-reduced-motion block at the bottom.
   ============================================================ */

:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);

  --grad: linear-gradient(168deg, #3F1409 0%, #7B3520 40%, #A44F31 68%, #C06B4A 100%);
  --grad-band: linear-gradient(168deg, #3F1409 0%, #7B3520 55%, #A44F31 100%);

  --nav-h: 4.25rem;
  --wrap: 72rem;
  --gutter: 1.6rem;

  --shadow-phone: 0 2px 4px rgba(28, 21, 18, .12), 0 30px 60px -20px rgba(28, 21, 18, .55);
  --shadow-card:  0 1px 2px rgba(63, 20, 9, .05), 0 18px 40px -18px rgba(63, 20, 9, .22);
}

body.landing {
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  font-family: var(--font-ui);
}
.landing main { position: relative; z-index: 1; }

/* Direct hash loads and no-JS anchors clear the fixed header. The JS
   smooth-scroll measures its own offset. */
#how, #why, #day { scroll-margin-top: calc(var(--nav-h) + 1rem); }

:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: .4rem; }

/* ============================================================
   1 · Type
   ============================================================ */
.landing h1, .landing h2, .landing h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 34, "WONK" 1;
  font-weight: 500;
  letter-spacing: -.024em;
  line-height: 1.06;
  margin: 0;
}
.landing h2 { font-size: clamp(2rem, 3.8vw, 3rem); text-wrap: balance; }
.landing h1 { text-wrap: balance; }
.landing p { text-wrap: pretty; }
.landing h3 { font-size: 1.45rem; letter-spacing: -.016em; }
.landing p  { margin: 0; }

.ld-eyebrow {
  display: inline-block;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: .9rem;
}
.ld-eyebrow.on-dark { color: var(--brand-200); }

/* ============================================================
   2 · Logo lockup — the same mark and wordmark the app draws
   ============================================================ */
.ld-logo {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit;
  transition: transform 200ms var(--ease-out);
}
.ld-logo:active { transform: scale(.97); }
.ld-logo-mark {
  display: block; width: 2.2rem; height: 2rem; flex: none;
  /* white on the band, exactly as the app draws it in its header */
  filter: brightness(0) invert(1);
  transition: transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ld-logo:hover .ld-logo-mark { transform: translateY(-1px) rotate(-4deg); }
}
.ld-logo-word {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 46, "WONK" 1;
  font-weight: 600; font-size: 1.5rem; letter-spacing: -.035em;
  color: #fff;
}
.ld-logo.small .ld-logo-mark { filter: none; width: 1.9rem; height: 1.7rem; }
.ld-logo.small .ld-logo-word { color: var(--text); font-size: 1.25rem; }

/* ============================================================
   3 · Header band
   Fixed, so the hero can run edge to edge beneath it like the app's
   first screen. ::before carries the band; over the hero it is
   transparent and it fades in as you scroll away.
   ============================================================ */
.ld-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--nav-h);
  color: #fff;
}
.ld-nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-band);
  box-shadow: 0 8px 30px -12px rgba(63, 20, 9, .55);
  opacity: 1;
}
@supports (animation-timeline: scroll()) {
  .ld-nav::before {
    animation: nav-band linear both;
    animation-timeline: scroll(root);
    animation-range: 0 260px;
  }
  @keyframes nav-band { from { opacity: 0; } to { opacity: 1; } }
}
.ld-nav-inner {
  max-width: var(--wrap); margin: 0 auto; height: 100%;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 2.2rem;
}
.ld-nav-links { display: flex; gap: 1.6rem; flex: 1; }
.ld-nav-links a {
  position: relative;
  color: rgba(255, 255, 255, .78); font-size: .92rem; font-weight: 600;
  text-decoration: none; padding: .3rem 0;
  transition: color 200ms var(--ease-out);
}
.ld-nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.1rem;
  height: 2px; border-radius: 2px; background: var(--brand-200);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ld-nav-links a:hover { color: #fff; }
  .ld-nav-links a:hover::after { transform: scaleX(1); }
}
.ld-nav-links a.active { color: #fff; }
.ld-nav-links a.active::after { transform: scaleX(1); }
.ld-nav-cta { display: flex; gap: .55rem; margin-left: auto; }

/* ============================================================
   4 · Buttons
   ============================================================ */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.15rem; border-radius: .75rem;
  font-size: .92rem; font-weight: 700; letter-spacing: -.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: transform 150ms var(--ease-out), box-shadow 260ms var(--ease-out),
              background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.ld-btn:active { transform: scale(.97); }
.ld-btn.big { padding: .95rem 1.6rem; font-size: 1rem; border-radius: .9rem; }

/* white on the band — the app's one button */
.ld-btn.light { background: #fff; color: var(--brand-700); box-shadow: 0 6px 20px -6px rgba(28, 21, 18, .45); }
@media (hover: hover) and (pointer: fine) {
  .ld-btn.light:hover { box-shadow: 0 12px 30px -8px rgba(28, 21, 18, .55); transform: translateY(-1px); }
}
/* outlined on the band */
.ld-btn.outline { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .42); }
@media (hover: hover) and (pointer: fine) {
  .ld-btn.outline:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); }
}
/* quiet text button on the band */
.ld-btn.ghost { background: transparent; color: rgba(255, 255, 255, .86); }
@media (hover: hover) and (pointer: fine) {
  .ld-btn.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
}

/* ============================================================
   5 · Reveal on scroll  (landing.js adds .in)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

.ld-hero-visual.reveal { --reveal-delay: 140ms; }
.ld-proof-item:nth-child(2) { --reveal-delay: 90ms; }
.ld-proof-item:nth-child(3) { --reveal-delay: 180ms; }
.ld-day-item:nth-child(2) { --reveal-delay: 60ms; }
.ld-day-item:nth-child(3) { --reveal-delay: 120ms; }
.ld-day-item:nth-child(4) { --reveal-delay: 180ms; }
.ld-day-item:nth-child(5) { --reveal-delay: 240ms; }
.ld-students-visual.reveal { --reveal-delay: 120ms; }

/* ============================================================
   6 · Hero — the app's first screen, full bleed
   ============================================================ */
.ld-hero {
  position: relative; overflow: hidden;
  background: var(--grad);
  color: #fff;
  padding: calc(var(--nav-h) + 4.5rem) 0 5.5rem;
}
/* the mark, ghosted into the band the way a watermark sits on paper */
.ld-hero::after {
  content: ''; position: absolute; right: -6%; top: -8%;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  background: url('/logo-mark.png') center / contain no-repeat;
  opacity: .06; filter: brightness(0) invert(1);
  pointer-events: none;
}
.ld-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 3rem; align-items: center;
}
.ld-hero-text h1 {
  font-size: clamp(2.7rem, 6vw, 4.75rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin: 0 0 1.4rem;
}
.ld-hero-text h1 em {
  font-style: italic; font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--brand-200);
}
.ld-sub {
  font-size: 1.12rem; line-height: 1.62;
  color: rgba(255, 255, 255, .84);
  max-width: 34rem; margin: 0 0 2rem;
}
.ld-hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }

.ld-hero-points {
  list-style: none; margin: 2.6rem 0 0; padding: 1.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-direction: column; gap: .7rem;
}
.ld-hero-points li {
  display: flex; align-items: center; gap: .75rem;
  font-size: .98rem; font-weight: 500; color: rgba(255, 255, 255, .92);
}
.ld-pt-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.7rem; height: 1.7rem; border-radius: .55rem;
  background: rgba(255, 255, 255, .12); font-size: .95rem;
}

/* ---- hero visual ---------------------------------------------------- */
/* .ld-hero-visual carries the reveal transform; .ld-hero-art carries the
   scroll parallax. Separate elements, so neither overwrites the other. */
.ld-hero-visual { display: flex; justify-content: center; }
.ld-hero-art { position: relative; will-change: transform; }

/* ============================================================
   7 · The phone — drawn the way the app draws itself: a header band
   in the gradient, cream body, real labels
   ============================================================ */
.ld-phone {
  position: relative; width: 292px; flex: none;
  background: #1C1512;
  border-radius: 2.6rem; padding: .5rem;
  box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotate(-2deg);
  transition: transform 700ms var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .ld-hero-visual:hover .ld-phone { transform: rotate(0deg) translateY(-6px); }
}
.ld-phone.small { width: 250px; transform: rotate(2deg); }
.ld-phone-screen {
  background: #FAF6F4; color: #1C1512;
  border-radius: 2.15rem; overflow: hidden;
  display: flex; flex-direction: column;
}
.ld-ph-band {
  background: var(--grad-band); color: #fff;
  padding: .55rem .95rem .9rem;
}
.ld-ph-band.tall { padding-bottom: 1.3rem; }
.ld-ph-status {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .68rem; font-weight: 700; color: rgba(255, 255, 255, .9);
  padding: .1rem .1rem .7rem;
}
.ld-ph-sig { display: inline-flex; gap: 2px; align-items: flex-end; }
.ld-ph-sig i { width: 3px; background: #fff; border-radius: 1px; opacity: .9; }
.ld-ph-sig i:nth-child(1) { height: 5px; } .ld-ph-sig i:nth-child(2) { height: 8px; } .ld-ph-sig i:nth-child(3) { height: 11px; }
.ld-ph-title { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.ld-ph-title small { display: block; font-size: .66rem; color: rgba(255, 255, 255, .78); }
.ld-ph-title strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1; letter-spacing: -.02em;
  font-size: 1.05rem; line-height: 1.15;
}
.ld-ph-eyebrow { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-200); }
.ld-ph-big {
  display: block; margin-top: .25rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.15;
  font-variation-settings: "SOFT" 40, "WONK" 1; letter-spacing: -.02em;
}
.ld-ph-sub { display: block; font-size: .7rem; color: rgba(255, 255, 255, .8); margin-top: .2rem; }

.ld-ph-body { padding: .8rem .8rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.ld-ph-body.centre { align-items: center; padding-top: 1.3rem; padding-bottom: 1.5rem; gap: 1rem; }

.ld-ph-count { display: flex; align-items: center; gap: .6rem; padding: .1rem .1rem .2rem; }
.ld-ph-count > strong {
  font-family: var(--font-display); font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: 2.3rem; font-weight: 500; color: var(--brand-600); line-height: 1; letter-spacing: -.03em;
}
.ld-ph-count > strong span { font-size: 1rem; color: #73665F; letter-spacing: 0; }
.ld-ph-count b { display: block; font-size: .78rem; font-weight: 700; }
.ld-ph-count small { display: block; font-size: .64rem; color: #73665F; }
.ld-ph-qr {
  margin-left: auto; width: 2.1rem; height: 2.1rem; padding: .22rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  border: 1.5px solid #E3DAD5; border-radius: .4rem; background: #fff;
}
.ld-ph-qr i { background: #1C1512; border-radius: 1px; }
.ld-ph-qr i:nth-child(2), .ld-ph-qr i:nth-child(6), .ld-ph-qr i:nth-child(8) { background: transparent; }
.ld-ph-qr i:nth-child(5) { animation: qr-blink 4s steps(1) infinite; }
@keyframes qr-blink { 0%, 49% { background: #1C1512; } 50%, 100% { background: transparent; } }

.ld-ph-label { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #73665F; }
.ld-ph-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ld-ph-rows li {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid #EFE9E5; border-radius: .7rem;
  padding: .42rem .5rem;
}
.ld-ph-rows li div { flex: 1; min-width: 0; }
.ld-ph-rows strong { display: block; font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-ph-rows small { display: block; font-size: .62rem; color: #73665F; }
.ld-ph-rows li.new { animation: row-land 900ms var(--ease-out) 1.2s both; }
@keyframes row-land {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.ld-av {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: #F7E7E1; color: #7B3520; font-size: .58rem; font-weight: 800;
}
.ld-av.dim { background: #F7F3F1; color: #73665F; }
.ld-ph-actions { display: flex; gap: .4rem; padding-top: .2rem; }
.ld-ph-actions span {
  flex: 1; text-align: center; font-size: .68rem; font-weight: 700;
  padding: .45rem .3rem; border-radius: .55rem;
  background: #F7F3F1; color: #1C1512;
}
.ld-ph-actions span.danger { background: #A81F42; color: #fff; }

/* pills — the app's pills, named so nothing in style.css collides */
.ld-pill {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  padding: .2rem .5rem; border-radius: 99px;
  background: #F7F3F1; color: #73665F;
}
.ld-pill.ok   { background: #E7F1EA; color: #2C6A44; }
.ld-pill.warn { background: #F7EEDF; color: #8A5712; }
.ld-pill.mut  { background: #F7F3F1; color: #73665F; }
.ld-pill.live { background: rgba(255, 255, 255, .16); color: #fff; text-transform: uppercase; letter-spacing: .1em; }
.ld-pill.live i { width: .38rem; height: .38rem; border-radius: 50%; background: #fff; animation: blink 2s var(--ease-in-out) infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* the student's check-in target */
.ld-ph-target { position: relative; display: flex; align-items: center; justify-content: center; width: 8.5rem; height: 8.5rem; }
.ld-ph-wave {
  position: absolute; width: 6.6rem; height: 6.6rem; border-radius: 50%;
  border: 2px solid #C06B4A; opacity: 0;
  animation: ping 3.2s var(--ease-out) infinite; will-change: transform, opacity;
}
.ld-ph-wave.late { animation-delay: 1.6s; }
@keyframes ping {
  0%   { transform: scale(.7); opacity: .55; }
  80%, 100% { transform: scale(1.35); opacity: 0; }
}
.ld-ph-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 6.6rem; height: 6.6rem; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
  box-shadow: 0 12px 28px -8px rgba(63, 20, 9, .55);
}
.ld-ph-confirm { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ld-ph-confirm small { font-size: .66rem; color: #73665F; }

/* floating proof chips beside the hero phone */
.ld-float {
  position: absolute;
  display: flex; align-items: center; gap: .6rem;
  background: #fff; color: #1C1512;
  border-radius: .9rem; padding: .65rem .85rem;
  box-shadow: 0 14px 34px -10px rgba(28, 21, 18, .5);
  will-change: transform;
}
.ld-float strong { display: block; font-size: .78rem; font-weight: 800; }
.ld-float small  { display: block; font-size: .68rem; color: #73665F; }
.ld-float-ic {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 1.9rem; height: 1.9rem; border-radius: .6rem;
  background: #F7E7E1; color: #A44F31; font-size: 1rem; font-weight: 800;
}
.ld-float.f1 { top: 44%; left: -10.4rem; animation: float-a 7s var(--ease-in-out) infinite; }
.ld-float.f2 { bottom: 17%; right: -6.6rem; animation: float-b 8.5s var(--ease-in-out) infinite; }
@keyframes float-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
@keyframes float-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 12px, 0); } }

/* ============================================================
   8 · Sections
   ============================================================ */
.ld-section { padding: 6rem var(--gutter); }
.ld-section > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.ld-section-head { text-align: center; margin-bottom: 3.75rem; max-width: 46rem; }
.ld-section-head p { margin-top: 1.1rem; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }

.ld-section.alt {
  background: linear-gradient(180deg, var(--brand-100), var(--bg) 100%);
  border-top: 1px solid var(--brand-200);
}
[data-theme="dark"] .ld-section.alt { background: linear-gradient(180deg, var(--surface), var(--bg)); border-top-color: var(--border); }

/* ---- the verification ladder (#how) ---------------------------------- */
.ld-ladder { display: flex; flex-direction: column; gap: 1.25rem; }
.ld-rung {
  display: grid; grid-template-columns: 17rem 1fr; gap: 2.5rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 1.5rem; padding: 1.6rem;
  box-shadow: var(--shadow-card);
}
.ld-rung-tag {
  display: inline-block; margin-bottom: .6rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: .28rem .6rem; border-radius: 99px;
}
.ld-rung h3 { margin-bottom: .55rem; }
.ld-rung p { color: var(--muted); font-size: 1rem; line-height: 1.66; max-width: 40rem; }
.ld-rung-copy { padding-right: 1rem; }

.ld-rung-art {
  position: relative; height: 13rem; border-radius: 1.1rem; overflow: hidden;
  background: linear-gradient(160deg, var(--brand-50), var(--brand-100));
  border: 1px solid var(--brand-200);
}
[data-theme="dark"] .ld-rung-art { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border-color: var(--border); }

/* GPS — the room's circle, dots inside and one outside */
.ld-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid var(--brand-500); transform: translate(-50%, -50%); }
.ld-ring.r1 { width: 9rem; height: 9rem; opacity: .55; background: rgba(192, 107, 74, .08); }
.ld-ring.r2 { width: 4.5rem; height: 4.5rem; opacity: .35; }
.ld-pin {
  position: absolute; left: 50%; top: 50%; width: 1.15rem; height: 1.15rem;
  background: var(--brand-600); border: 3px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 4px 12px rgba(63, 20, 9, .35);
}
.ld-dot { position: absolute; width: .65rem; height: .65rem; border-radius: 50%; }
.ld-dot.d-in  { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ld-dot.d-out { background: var(--muted); opacity: .55; }
.ld-dot.k1 { left: 40%; top: 37%; }
.ld-dot.k2 { left: 57%; top: 61%; }
.ld-dot.k3 { left: 85%; top: 20%; }

/* QR — a tile that changes, and a timer draining beneath it */
.ld-rung-art.qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; }
.ld-qr-tile {
  width: 6.2rem; height: 6.2rem; padding: .45rem; background: #fff; border-radius: .7rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .22rem;
  box-shadow: 0 8px 22px -10px rgba(63, 20, 9, .35);
}
.ld-qr-tile i { background: #1C1512; border-radius: 2px; }
.ld-qr-tile i:nth-child(3n) { animation: qr-a 4s steps(1) infinite; }
.ld-qr-tile i:nth-child(5n+2) { animation: qr-b 4s steps(1) infinite; }
@keyframes qr-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .08; } }
@keyframes qr-b { 0%, 49% { opacity: .08; } 50%, 100% { opacity: 1; } }
.ld-qr-timer { width: 6.2rem; height: .3rem; border-radius: 99px; background: var(--brand-200); overflow: hidden; }
.ld-qr-timer b { display: block; height: 100%; background: var(--brand-600); transform-origin: left; animation: drain 4s linear infinite; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Bluetooth — the hero rung: the instructor's phone in the middle of a dark
   room, the students' phones lighting up as they are heard */
.ld-rung.hero-rung {
  grid-template-columns: 1.1fr 1fr; gap: 3rem;
  background: var(--grad); border-color: transparent; color: #fff;
  padding: 2rem;
  box-shadow: 0 30px 70px -30px rgba(63, 20, 9, .6);
}
.ld-rung.hero-rung .ld-rung-tag { background: rgba(255, 255, 255, .14); color: #fff; }
.ld-rung.hero-rung h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: #fff; }
.ld-rung.hero-rung p { color: rgba(255, 255, 255, .86); font-size: 1.04rem; }
.ld-rung.hero-rung p strong { color: #fff; font-weight: 700; }
.ld-rung-note {
  margin-top: 1rem !important; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--font-display); font-variation-settings: "SOFT" 60, "WONK" 1;
  font-style: italic; font-size: 1.08rem !important; color: var(--brand-200) !important;
}
.ld-rung-art.ble {
  height: auto; min-height: 20rem;
  background: rgba(28, 21, 18, .35); border-color: rgba(255, 255, 255, .12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  padding: 1.5rem 1rem;
}
.ld-radio { position: relative; width: 15rem; height: 15rem; flex: none; }
.ld-wave {
  position: absolute; left: 50%; top: 50%; width: 15rem; height: 15rem; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%) scale(.2); opacity: 0;
  animation: radio 3.6s var(--ease-out) infinite; will-change: transform, opacity;
}
.ld-wave.w2 { animation-delay: 1.2s; }
.ld-wave.w3 { animation-delay: 2.4s; }
@keyframes radio {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: .7; }
  85%, 100% { transform: translate(-50%, -50%) scale(1.02); opacity: 0; }
}
.ld-radio-src {
  position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 1rem;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
}
.ld-radio-src img { display: block; width: 1.7rem; height: auto; }
.ld-radio-ph {
  position: absolute; left: 50%; top: 50%; width: .95rem; height: 1.5rem;
  margin: -.75rem 0 0 -.475rem; border-radius: .25rem;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, 0);
  transform: rotate(var(--a)) translate(6rem) rotate(calc(-1 * var(--a)));
  animation: heard 3.6s var(--ease-out) infinite; animation-delay: var(--d);
}
.ld-radio-ph.p1 { --a: -90deg;  --d: .9s; }
.ld-radio-ph.p2 { --a: -30deg;  --d: 1.05s; }
.ld-radio-ph.p3 { --a: 30deg;   --d: .95s; }
.ld-radio-ph.p4 { --a: 90deg;   --d: 1.1s; }
.ld-radio-ph.p5 { --a: 150deg;  --d: 1s; }
.ld-radio-ph.p6 { --a: 210deg;  --d: .85s; }
@keyframes heard {
  0%, 20% { background: rgba(255, 255, 255, 0); box-shadow: none; }
  30%     { background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 5px rgba(255, 255, 255, .22); }
  70%     { background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
  100%    { background: rgba(255, 255, 255, 0); box-shadow: none; }
}
.ld-radio-status { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem; font-size: .74rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
.ld-radio-status span { display: inline-flex; align-items: center; gap: .4rem; }
.ld-radio-status i { width: .5rem; height: .5rem; border-radius: 50%; }
.ld-radio-status i.off { background: rgba(255, 255, 255, .28); }
.ld-radio-status i.on  { background: #7CD9A0; box-shadow: 0 0 0 3px rgba(124, 217, 160, .25); }

/* ---- the proof screens (#why) ---------------------------------------- */
.ld-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.ld-proof-item h3 { margin: 1.4rem 0 .5rem; font-size: 1.25rem; }
.ld-proof-item p  { color: var(--muted); font-size: .95rem; line-height: 1.62; }

.ld-screen {
  background: #FAF6F4; color: #1C1512;
  border-radius: 1.25rem; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ld-proof-item:hover .ld-screen { transform: translateY(-5px); box-shadow: 0 30px 50px -22px rgba(63, 20, 9, .35); }
}
.ld-screen-band { background: var(--grad-band); color: #fff; padding: .85rem 1rem .95rem; }
.ld-screen-band strong {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  font-variation-settings: "SOFT" 40, "WONK" 1; letter-spacing: -.02em; line-height: 1.15;
}
.ld-screen-band small { display: block; font-size: .68rem; color: rgba(255, 255, 255, .78); margin-top: .15rem; }
.ld-screen-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .8rem; height: 13.25rem; }

.ld-meter-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ld-meter-head strong { font-size: .82rem; font-weight: 700; }
.ld-meter small { display: block; margin-top: .4rem; font-size: .68rem; color: #73665F; }
.ld-bar { position: relative; height: .6rem; border-radius: 99px; background: #EFE9E5; margin-top: .55rem; overflow: visible; }
.ld-bar i {
  display: block; height: 100%; width: var(--w); border-radius: 99px;
  background: linear-gradient(90deg, #A44F31, #C06B4A);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1100ms var(--ease-soft) 250ms;
}
.reveal.in .ld-bar i { transform: scaleX(1); }
.ld-bar b {
  position: absolute; top: -.3rem; bottom: -.3rem; left: var(--at); width: 2px;
  background: #8A5712; border-radius: 2px;
}
.ld-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ld-mini-list li {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #EFE9E5; border-radius: .6rem;
  padding: .45rem .6rem; font-size: .74rem; font-weight: 600;
}
.ld-mini-list em { font-style: normal; font-weight: 800; color: #A44F31; }
.ld-mini-list em.dim { color: #73665F; font-weight: 600; }

.ld-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.ld-week-day { display: flex; flex-direction: column; gap: .3rem; min-height: 7rem; padding: .35rem .3rem; background: #fff; border: 1px solid #EFE9E5; border-radius: .55rem; }
.ld-week-day small { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #73665F; text-align: center; }
.ld-week-day span { display: block; font-size: .56rem; font-weight: 700; padding: .3rem .25rem; border-radius: .35rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-week-day span.lec { background: #F7E7E1; color: #7B3520; }
.ld-week-day span.lab { background: #A44F31; color: #fff; }
.ld-week-day span.cancel { background: #F7F3F1; color: #73665F; text-decoration: line-through; }

.ld-sheet { display: flex; flex-direction: column; border: 1px solid #E3DAD5; border-radius: .5rem; overflow: hidden; font-size: .66rem; font-variant-numeric: tabular-nums; }
.ld-sheet-row { display: grid; grid-template-columns: 1.6fr 1fr .8fr .5fr; gap: .3rem; padding: .32rem .5rem; background: #fff; border-top: 1px solid #EFE9E5; }
.ld-sheet-row.head { background: #F7F3F1; border-top: 0; font-weight: 800; color: #73665F; text-transform: uppercase; letter-spacing: .05em; font-size: .56rem; }
.ld-sheet-row span:nth-child(n+3) { text-align: right; }
.ld-export-row { display: flex; gap: .4rem; }
.ld-export-row span { flex: 1; text-align: center; font-size: .7rem; font-weight: 800; padding: .45rem; border-radius: .55rem; background: #fff; border: 1px solid #E3DAD5; color: #A44F31; }
.ld-export-row span:first-child { background: #A44F31; border-color: #A44F31; color: #fff; }

.ld-facts {
  list-style: none; margin-top: 3rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem;
  border-top: 1px solid var(--border);
}
.ld-facts li {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--border);
}
.ld-facts strong { font-size: .98rem; font-weight: 800; }
.ld-facts span { font-size: .9rem; line-height: 1.55; color: var(--muted); }

/* ---- a day with it (#day) -------------------------------------------- */
.ld-day { list-style: none; margin: 0 auto; padding: 0; max-width: 48rem; display: flex; flex-direction: column; gap: 0; }
.ld-day-item { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem; align-items: start; padding-bottom: 1.25rem; }
.ld-day-item::before {
  content: ''; position: absolute; left: 6rem; top: 1.2rem; bottom: -.9rem; width: 2px;
  background: var(--brand-200);
}
.ld-day-item:last-child::before { display: none; }
.ld-day-item::after {
  content: ''; position: absolute; left: 5.6rem; top: .9rem;
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--bg); border: 2.5px solid var(--brand-600);
}
.ld-day-time {
  font-family: var(--font-display); font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: 1.35rem; font-weight: 500; color: var(--brand-700);
  letter-spacing: -.02em; padding-top: .55rem; padding-right: 2.9rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .ld-day-time { color: var(--brand-500); }
.ld-day-card {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 1.1rem;
  padding: 1.2rem 1.4rem;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ld-day-card:hover { transform: translateX(5px); box-shadow: var(--shadow-card); }
}
.ld-day-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.ld-day-card p  { color: var(--muted); font-size: .95rem; line-height: 1.62; }
.ld-day-card em { font-style: normal; font-weight: 800; color: var(--accent); }

/* ---- students, as evidence ------------------------------------------- */
#day.ld-section { padding-bottom: 4rem; }
.ld-section.students { padding-top: 1rem; }
.ld-students-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 1.75rem;
  padding: 3.5rem 3.5rem; box-shadow: var(--shadow-card);
}
.ld-students-copy h2 { margin-bottom: 1rem; }
.ld-students-copy > p { color: var(--muted); font-size: 1.04rem; line-height: 1.62; margin-bottom: 1.4rem; }
.ld-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.ld-list li { position: relative; padding-left: 1.7rem; font-size: .98rem; line-height: 1.55; }
.ld-list li::before {
  content: ''; position: absolute; left: .1rem; top: .42rem;
  width: .8rem; height: .42rem; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg); border-radius: 1px;
}
.ld-students-note {
  margin-top: 1.6rem !important; padding: .9rem 1rem;
  background: var(--accent-soft); border-radius: .8rem;
  font-size: .9rem !important; color: var(--brand-800) !important; line-height: 1.5;
}
[data-theme="dark"] .ld-students-note { color: var(--brand-200) !important; }
.ld-students-visual { display: flex; justify-content: center; }

/* ---- origin ---------------------------------------------------------- */
.ld-section.origin { padding-top: 3rem; padding-bottom: 3rem; }
.ld-origin-inner { max-width: 44rem; text-align: center; padding: 2rem 0 0; border-top: 1px solid var(--border); }
.ld-origin-inner h2 { margin-bottom: 1.1rem; }
.ld-origin-inner p { color: var(--muted); font-size: 1.06rem; line-height: 1.65; }
.ld-origin-uni { margin-top: 1.2rem !important; color: var(--text) !important; font-weight: 600; }
.ld-origin-uni a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   9 · CTA — the band again, closing the loop with the hero
   ============================================================ */
.ld-cta { max-width: var(--wrap); margin: 3rem auto 6rem; padding: 0 var(--gutter); }
.ld-cta-inner {
  position: relative; overflow: hidden; text-align: center;
  padding: 4.5rem 2rem 4rem; border-radius: 2rem;
  background: var(--grad); color: #fff;
  box-shadow: 0 34px 80px -32px rgba(63, 20, 9, .65);
}
.ld-cta-inner::after {
  content: ''; position: absolute; left: -8%; bottom: -30%;
  width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
  background: url('/logo-mark.png') center / contain no-repeat;
  opacity: .07; filter: brightness(0) invert(1); pointer-events: none;
}
.ld-cta-inner > * { position: relative; z-index: 1; }
.ld-cta-mark { display: block; margin: 0 auto 1.2rem; width: 3.25rem; height: auto; filter: brightness(0) invert(1); }
.ld-cta-inner h2 { color: #fff; max-width: 22ch; margin: 0 auto .8rem; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.ld-cta-inner p { color: rgba(255, 255, 255, .86); font-size: 1.05rem; margin-bottom: 1.9rem; }
.ld-cta-inner small { display: block; margin-top: 1.1rem; font-size: .86rem; color: rgba(255, 255, 255, .78); }
.ld-cta-inner small a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   10 · Footer
   ============================================================ */
.ld-footer { border-top: 1px solid var(--border); }
.ld-footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.ld-footer-links { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ld-footer-links a { color: var(--muted); font-size: .86rem; font-weight: 600; text-decoration: none; transition: color 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ld-footer-links a:hover { color: var(--accent); } }

/* ============================================================
   11 · Responsive
   ============================================================ */
@media (min-width: 961px) and (max-width: 1200px) {
  .ld-float.f1 { left: -4.5rem; }
  .ld-float.f2 { right: -3rem; }
}

@media (max-width: 960px) {
  .ld-hero { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 4.5rem; }
  .ld-hero-inner { grid-template-columns: 1fr; gap: 3.5rem; text-align: center; }
  .ld-hero-text { order: 0; }
  .ld-hero-visual { order: 1; }
  .ld-sub { margin-inline: auto; }
  .ld-hero-cta { justify-content: center; }
  .ld-hero-points { align-items: flex-start; width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .ld-hero::after { width: 70vw; height: 70vw; right: -25%; top: auto; bottom: -10%; }
  .ld-rung, .ld-rung.hero-rung { grid-template-columns: 1fr; gap: 1.5rem; }
  .ld-rung-art { height: 12rem; }
  .ld-rung-art.ble { min-height: 0; }
  .ld-proof { grid-template-columns: 1fr; max-width: 30rem; }
  .ld-facts { grid-template-columns: 1fr 1fr; }
  .ld-students-grid { grid-template-columns: 1fr; padding: 2.5rem 2rem; text-align: center; }
  .ld-students-copy .ld-list { text-align: left; }
}

@media (max-width: 720px) {
  :root { --gutter: 1.1rem; --nav-h: 3.75rem; }
  .ld-nav-links { display: none; }
  .ld-nav-inner { gap: 1rem; }
  .ld-nav-cta .ld-btn.ghost { padding-inline: .7rem; }
  .ld-section { padding: 4rem var(--gutter); }
  .ld-section-head { margin-bottom: 2.5rem; }
  .ld-hero-text h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .ld-hero-cta .ld-btn { flex: 1 1 100%; }
  /* The chips would cover the roster on a narrow phone; they sit beneath it instead. */
  .ld-hero-art { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
  .ld-float { position: static; animation: none; width: 100%; max-width: 292px; }
  .ld-float.f1 { order: 1; margin-top: .6rem; }
  .ld-float.f2 { order: 2; }
  .ld-float strong { font-size: .72rem; }
  .ld-float small  { font-size: .62rem; }
  .ld-rung { padding: 1.1rem; border-radius: 1.2rem; }
  .ld-rung.hero-rung { padding: 1.4rem; }
  .ld-rung-copy { padding-right: 0; }
  .ld-facts { grid-template-columns: 1fr; }
  .ld-day-item { grid-template-columns: 1fr; gap: .4rem; padding-left: 1.6rem; }
  .ld-day-item::before { left: .35rem; top: 1.5rem; bottom: -.6rem; }
  .ld-day-item::after { left: 0; top: .35rem; width: .75rem; height: .75rem; }
  .ld-day-time { text-align: left; padding: 0; font-size: 1.1rem; }
  .ld-day-card { padding: 1rem 1.1rem; }
  .ld-students-grid { padding: 2rem 1.25rem; border-radius: 1.25rem; }
  .ld-cta { margin: 2rem auto 4rem; }
  .ld-cta-inner { padding: 3.25rem 1.25rem 3rem; border-radius: 1.5rem; }
  .ld-footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .ld-btn { padding: .55rem .85rem; font-size: .86rem; }
  .ld-phone { width: 262px; }
  .ld-phone.small { width: 236px; }
}

/* ============================================================
   12 · Reduced motion — keep the design, drop the movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 300ms ease; }
  .ld-float, .ld-ph-wave, .ld-pill.live i, .ld-wave, .ld-radio-ph,
  .ld-qr-tile i, .ld-qr-timer b, .ld-ph-qr i, .ld-ph-rows li.new { animation: none !important; }
  .ld-ph-wave { opacity: .18; }
  .ld-wave { opacity: .25; transform: translate(-50%, -50%) scale(.6); }
  .ld-wave.w2 { transform: translate(-50%, -50%) scale(.85); }
  .ld-radio-ph { background: rgba(255, 255, 255, .85); }
  .ld-qr-timer b { transform: scaleX(.6); }
  .ld-bar i { transform: scaleX(1); transition: none; }
  .ld-phone, .ld-phone.small { transform: none; }
  .ld-nav::before { animation: none; opacity: 1; }
  .ld-logo-mark, .ld-screen, .ld-day-card, .ld-btn { transition: none; }
}