/* ==========================================================================
   DIGISCHOOL: the landing page.

   Loaded on index.php only, named in $mkPageSheets. Everything here is
   prefixed .lp- and nothing outside this file uses those classes, so the
   sheet can be rewritten whole when the composition changes — which is what
   happened when the EduCam layout replaced the one before it.

   ---------------------------------------------------------------------------
   The palette is NOT the sheet's
   ---------------------------------------------------------------------------

   stitch/.../educam_design_system/DESIGN.md specifies a deep navy primary
   (#0F294A) with emerald (#128A4A) and warm gold (#F5A623). This product's
   colour is the Digisol cyan in tokens.css and stays that way; what is taken
   from the sheet is which ROLE each of its three colours plays, mapped onto
   tokens this application already owns:

       sheet navy      structure, chrome, dark bands  ->  --mk-block / --ec-chrome
       sheet emerald   verified, settled, "go"        ->  --ec-success
       sheet gold      attention, pending, MoMo       ->  --ec-warning
       (the sheet has no equivalent)  primary action  ->  --ec-accent, the cyan

   So the page reads the way the sheet composes it and every colour on screen
   is one the rest of the application uses. Nothing below hardcodes a hex
   except the two carrier marks, which are MTN's and Orange's own and are not
   ours to re-tint.
   ========================================================================== */

/* ==========================================================================
   THE STAGE
   One inset panel in the brand cyan with the header floating over it, the
   office laptop and a parent's phone tilted on the right, the feature row
   and the catalogue strip along the foot. The panel is a tonal ramp within
   the cyan — 600 into 800, a 500 glow behind the devices — never cyan into
   indigo: the glow sits where the devices are, so no line of text is ever
   set on the light end of it.
   ========================================================================== */

.ec-mk[data-page='home'],
.ec-mk[data-page='home'] .ec-mk-head {
  --mk-gutter: clamp(1.75rem, 5vw, 2.5rem);
  /* Fluid: the page takes 90% of a wide window instead of parking a fixed
     column in the middle of it, up to 2100px. */
  --lp-max: clamp(1240px, 90vw, 2100px);
  --lp-head-pad: 16px;
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Every band on this page, header and footer included, shares that width. */
.ec-mk[data-page='home'] .ec-mk-wrap:not(.ec-mk-wrap--narrow) { max-width: var(--lp-max); }

/* --- The header, as a pill --------------------------------------------------
   The shell's header, re-dressed here and nowhere else. The bar loses its
   own background and the pill is drawn by ::before, inset 14px less than the
   gutter: the logo then lines up with the headline under it and the pill
   reaches just past both, which is how the reference sits its nav. */

.ec-mk[data-page='home'] .ec-mk-head {
  padding-block: var(--lp-head-pad) 8px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ec-mk[data-page='home'] .ec-mk-head__inner {
  position: relative;
  isolation: isolate;
  max-width: var(--lp-max);
  min-height: calc(var(--mk-head-h) - 8px);
}

.ec-mk[data-page='home'] .ec-mk-head__inner::before {
  position: absolute;
  inset: 0 calc(var(--mk-gutter) - 14px);
  z-index: -1;
  content: '';
  background: var(--ec-surface);
  border-radius: var(--ec-radius-full);
  box-shadow: 0 10px 30px -14px rgb(6 32 46 / 45%);
  transition: box-shadow var(--ec-transition);
}

.ec-mk[data-page='home'] .ec-mk-head.is-stuck .ec-mk-head__inner::before {
  box-shadow: 0 0 0 1px var(--ec-border), 0 14px 34px -14px rgb(6 32 46 / 50%);
}

@media (max-width: 1139.98px) {
  /* The drawer drops out of the pill as a floating panel of the same shape
     family, rather than the full-bleed sheet the other pages use. */
  .ec-mk[data-page='home'] .ec-mk-nav {
    inset: calc(100% + 8px) calc(var(--mk-gutter) - 14px) auto;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-xl);
  }
}

/* --- The panel ------------------------------------------------------------ */

.lp-stage {
  --lp-n: 4;
  --lp-stage: var(--ec-primary-600);
  --lp-stage-deep: var(--ec-primary-800);
  --lp-glow: var(--ec-primary-500);
  --lp-glow-at: 50% 78%;
  --lp-on: var(--ec-paper-0);
  --lp-on-soft: color-mix(in srgb, var(--ec-paper-0) 92%, transparent);
  --lp-hair: rgb(255 255 255 / 16%);

  position: relative;
  isolation: isolate;
  /* Pulled up under the header, so the pill floats inside the panel. */
  margin: calc(-1 * (var(--mk-head-h) + var(--lp-head-pad)) + 8px) 8px 0;
  padding-block-start: calc(var(--mk-head-h) + var(--lp-head-pad) + clamp(1.25rem, 4.5vh, 3rem));
  overflow: hidden;
  color: var(--lp-on);
  background:
    radial-gradient(48rem 30rem at var(--lp-glow-at), color-mix(in srgb, var(--lp-glow) 35%, transparent), transparent 70%),
    linear-gradient(175deg, var(--lp-stage) 20%, var(--lp-stage-deep));
  border-radius: clamp(22px, 3vw, 36px);
}

[data-theme='dark'] .lp-stage {
  --lp-stage: var(--ec-primary-900);
  --lp-stage-deep: var(--ec-chrome);
  --lp-glow: var(--ec-primary-700);
}

@media (min-width: 1100px) {
  .lp-stage { --lp-glow-at: 78% 42%; margin-inline: 12px; }
}

/* The ruled grid from the reference, faded out towards the edges. */
.lp-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background-image:
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 60% 35%, black, transparent);
  mask-image: radial-gradient(70% 60% at 60% 35%, black, transparent);
}


.lp-stage__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .lp-stage__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

.lp-stage__copy { min-width: 0; }

/* The headline is capped by the window's height as well as its width, so on
   a short laptop screen the whole stage (headline, lead, both buttons and
   the devices) still fits above the fold. */
.lp-h1 {
  max-width: 17ch;
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: clamp(2.125rem, min(1.2rem + 3.4vw, 7.4vh), 6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--lp-on);
  text-wrap: balance;
}

/* mk_t() marks the second sentence; on the panel it reads as one statement,
   so the shell's drawn underline is taken off too. */
.lp-h1 .ec-mk-hl {
  padding: 0;
  color: inherit;
  font-weight: inherit;
  background: none;
}

.lp-sub {
  max-width: 46ch;
  margin: var(--ec-space-4) 0 0;
  font-size: var(--ec-text-lg);
  line-height: 1.55;
  color: var(--lp-on-soft);
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-3);
  margin-block-start: clamp(var(--ec-space-5), 3.5vh, var(--ec-space-8));
}

/* And a step up on a large desktop, so the lead keeps pace with the headline. */
@media (min-width: 1600px) {
  .lp-sub { max-width: 52ch; font-size: 1.375rem; }
}

@media (max-width: 480px) {
  /* A step down on a phone, so more of the stage fits the first screen. */
  .lp-sub { font-size: 1.0625rem; }
  .lp-stage__grid { gap: var(--ec-space-6); }

  .lp-cta { flex-direction: column; align-items: stretch; }

  /* The French label is half again as long; on a phone it wraps inside the
     pill rather than pushing the pill past the panel. */
  .lp-cta .lp-btn { white-space: normal; text-align: start; }
  .lp-btn--light { justify-content: space-between; padding-block: 6px; }
}

/* --- The devices ----------------------------------------------------------
   Both tilt in one shared perspective. --lp-rx/--lp-ry are the pointer's,
   set by assets/js/pages/home.js; --lp-lift is the entrance, registered so
   the browser can animate it, and it settles from a steep lean to the
   resting one exactly once, on load. */

@property --lp-lift {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

.lp-devices {
  --lp-rx: 0deg;
  --lp-ry: 0deg;
  position: relative;
  min-width: 0;
  /* width, not just max-width: the drawn screens are size-contained (their
     type is sized off the lid), so they have no width of their own and an
     auto-margined box would shrink to nothing around them. */
  width: 100%;
  /* Grows with the column on a wide screen, but never taller than the
     window leaves room for under the header and above the strip: the drawn
     devices are about 0.6 as tall as they are wide. */
  max-width: min(1200px, calc((100svh - 16rem) * 1.65));
  margin-inline: auto;
  padding: 0 0 9% 19%;
  perspective: 1800px;
}

.lp-laptop,
.lp-phone {
  transition: transform 0.7s var(--lp-ease);
  will-change: transform;
}

.lp-laptop {
  transform: rotateY(calc(-14deg + var(--lp-ry))) rotateX(calc(7deg + var(--lp-lift) + var(--lp-rx)));
  transform-origin: 60% 50%;
}

.lp-laptop__lid {
  padding: 1.4%;
  container-type: inline-size;
  background: var(--ec-chrome);
  border: 1px solid var(--ec-chrome-line);
  border-radius: clamp(10px, 1.6vw, 18px);
  box-shadow:
    0 2px 0 0 rgb(255 255 255 / 6%) inset,
    0 30px 60px -20px rgb(4 22 33 / 60%),
    0 60px 120px -40px rgb(4 22 33 / 50%);
}

.lp-laptop__base {
  height: clamp(9px, 1.4vw, 16px);
  margin-inline: -5%;
  background: linear-gradient(var(--ec-chrome-line), var(--ec-chrome-2));
  border-radius: 2px 2px 18px 18px / 2px 2px 10px 10px;
  box-shadow: 0 18px 30px -12px rgb(4 22 33 / 60%);
}

.lp-phone {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26%;
  transform: rotateY(calc(-8deg + var(--lp-ry) * 1.5)) rotateX(calc(4deg + var(--lp-lift) + var(--lp-rx) * 1.5)) translateZ(70px);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-devices { animation: lp-settle 1.4s var(--lp-ease) both; }
  .lp-laptop { animation: lp-rise 1.1s var(--lp-ease) both; }
  .lp-phone { animation: lp-rise 1.1s 0.16s var(--lp-ease) both; }
}

@keyframes lp-settle { from { --lp-lift: 26deg; } }

@keyframes lp-rise {
  from { opacity: 0; translate: 0 14%; }
}

/* --- The office app, drawn ------------------------------------------------
   Sized in em off a font size that is a fraction of the lid's width, so the
   drawing scales as one picture at every viewport instead of reflowing. */

.lp-app {
  display: grid;
  grid-template-columns: 7% minmax(0, 1fr);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  font-family: var(--ec-font-sans);
  font-size: 1.7cqi;
  color: var(--ec-text);
  background: var(--ec-bg);
  border-radius: clamp(4px, 0.8vw, 8px);
}

.lp-devices svg { width: 1em; height: 1em; flex-shrink: 0; }

.lp-app__rail {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  align-items: center;
  padding-block: 1.2em;
  color: var(--ec-text-muted);
  background: var(--ec-surface);
  border-inline-end: 1px solid var(--ec-border);
}

.lp-app__logo {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  margin-block-end: 0.4em;
  font-family: var(--ec-font-display);
  font-weight: 800;
  color: var(--ec-accent-on);
  background: var(--ec-accent);
  border-radius: 0.6em;
}

.lp-app__ico {
  padding: 0.45em;
  box-sizing: content-box;
  border-radius: 0.5em;
  transition: color 0.4s, background-color 0.4s;
}

.lp-stage[data-i='0'] .lp-app__ico[data-lp-at='0'],
.lp-stage[data-i='1'] .lp-app__ico[data-lp-at='1'],
.lp-stage[data-i='2'] .lp-app__ico[data-lp-at='2'],
.lp-stage[data-i='3'] .lp-app__ico[data-lp-at='3'],
.lp-stage[data-i='4'] .lp-app__ico[data-lp-at='4'] {
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
}

.lp-app__main { display: flex; flex-direction: column; min-width: 0; }

.lp-app__bar {
  display: flex;
  gap: 1em;
  align-items: center;
  padding: 0.9em 1.4em;
  background: var(--ec-surface);
  border-block-end: 1px solid var(--ec-border);
}

.lp-app__search {
  display: inline-flex;
  flex: 0 1 18em;
  gap: 0.6em;
  align-items: center;
  padding: 0.5em 1em;
  overflow: hidden;
  color: var(--ec-text-subtle);
  white-space: nowrap;
  background: var(--ec-bg);
  border-radius: 99em;
}

.lp-app__bell { margin-inline-start: auto; color: var(--ec-text-muted); }

.lp-app__me {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: 50%;
}

.lp-app__view,
.lp-phone__view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* The track. Each screen is exactly the viewport's height, so moving the
   track by one own-height moves exactly one screen. The phone's track runs
   a beat behind the laptop's: the office writes, then the family reads. */
.lp-track {
  display: flex;
  flex-direction: column;
  height: 100%;
  translate: 0 calc(var(--lp-i, 0) * -100%);
  transition: translate 0.9s var(--lp-ease);
}

.lp-track--late { transition-delay: 0.18s; }

.lp-scr {
  flex: 0 0 100%;
  height: 100%;
  padding: 1.6em 1.8em;
  overflow: hidden;
}

.lp-scr__title {
  display: flex;
  gap: 0.6em;
  align-items: center;
  margin: 0 0 1em;
  font-family: var(--ec-font-display);
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lp-scr__title i {
  padding: 0.2em 0.7em;
  font-family: var(--ec-font-sans);
  font-size: 0.62em;
  font-style: normal;
  font-weight: 600;
  color: var(--ec-text-muted);
  background: var(--ec-surface-2);
  border-radius: 99em;
}

/* Fees: the reconciliation table. */
.lp-feed {
  width: 100%;
  font-size: 1em;
  background: var(--ec-surface);
  border-collapse: collapse;
  border-radius: 0.8em;
  box-shadow: 0 0 0 1px var(--ec-border);
}

.lp-feed th {
  padding: 0.9em 1em 0.6em;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--ec-text-subtle);
  text-align: start;
}

.lp-feed td {
  padding: 0.85em 1em;
  vertical-align: middle;
  border-block-start: 1px solid var(--ec-border);
}

.lp-feed__r { text-align: end; }

.lp-feed b { display: block; font-weight: 600; }

.lp-feed td span:not([class]) {
  font-size: 0.82em;
  color: var(--ec-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* The two carrier marks. MTN's yellow and Orange's orange are those
   companies' own and are the one place this sheet writes a hex: re-tinting a
   carrier's colour to match ours would misidentify it. */
.lp-chan,
.lp-state {
  display: inline-block;
  padding: 0.2em 0.75em;
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 99em;
}

.lp-chan--mtn    { color: #3d2c00; background: #ffcc00; }
.lp-chan--orange { color: #fff;    background: #ff6600; }

.lp-state--ok   { color: var(--ec-success); background: var(--ec-success-soft); }
.lp-state--wait { color: var(--ec-warning); background: var(--ec-warning-soft); }

/* Marks: the mark sheet, one bar per pupil. */
.lp-marks,
.lp-roll,
.lp-card,
.lp-day {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-marks li {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr) 5em;
  gap: 1.2em;
  align-items: center;
  padding: 0.75em 1em;
  margin-block-end: 0.5em;
  background: var(--ec-surface);
  border-radius: 0.7em;
  box-shadow: 0 0 0 1px var(--ec-border);
}

.lp-marks li:first-child { box-shadow: 0 0 0 1.5px var(--ec-accent); }

.lp-marks b { font-weight: 600; }

.lp-marks__bar {
  height: 0.55em;
  overflow: hidden;
  background: var(--ec-surface-2);
  border-radius: 99em;
}

.lp-marks__bar i {
  display: block;
  width: var(--w);
  height: 100%;
  background: var(--ec-accent);
  border-radius: inherit;
}

.lp-marks__n { font-weight: 600; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Register: the roll call. */
.lp-roll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em;
}

.lp-roll li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
  padding: 1em;
  background: var(--ec-surface);
  border-radius: 0.7em;
  box-shadow: 0 0 0 1px var(--ec-border);
}

.lp-roll b { font-weight: 600; }

.lp-roll__chip {
  padding: 0.25em 0.8em;
  font-size: 0.82em;
  font-weight: 700;
  border-radius: 99em;
}

.lp-roll__chip--present { color: var(--ec-success); background: var(--ec-success-soft); }
.lp-roll__chip--absent  { color: var(--ec-danger);  background: var(--ec-danger-soft); }
.lp-roll__chip--late    { color: var(--ec-warning); background: var(--ec-warning-soft); }

/* Timetable: a week, tinted by subject. */
.lp-tt {
  display: grid;
  grid-template-columns: 3.6em repeat(5, minmax(0, 1fr));
  gap: 0.4em;
  font-size: 0.92em;
}

.lp-tt__day,
.lp-tt__time {
  padding: 0.3em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ec-text-muted);
}

.lp-tt__time { align-self: center; font-variant-numeric: tabular-nums; }

.lp-tt__slot,
.lp-day li {
  padding: 0.85em 0.6em;
  font-weight: 600;
  background: color-mix(in srgb, var(--tint) 15%, var(--ec-surface));
  border-inline-start: 0.3em solid var(--tint);
  border-radius: 0.4em;
}

/* --- The phone, drawn ------------------------------------------------------ */

.lp-phone__body {
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19;
  padding: 4.5%;
  container-type: inline-size;
  background: var(--ec-chrome);
  border: 1px solid var(--ec-chrome-line);
  border-radius: 16% / 7.6%;
  box-shadow:
    0 2px 0 0 rgb(255 255 255 / 8%) inset,
    0 30px 50px -16px rgb(4 22 33 / 70%);
}

.lp-phone__notch {
  align-self: center;
  width: 32%;
  height: 4.5cqi;
  margin-block-end: -4.5cqi;
  position: relative;
  z-index: 1;
  top: 2.5cqi;
  background: var(--ec-chrome);
  border-radius: 99em;
}

.lp-phone__head {
  display: flex;
  gap: 0.6em;
  align-items: center;
  padding: 2.4em 1em 0.9em;
  font-size: 5.6cqi;
  line-height: 1.25;
  color: var(--ec-text);
  background: var(--ec-surface);
  border-radius: 12cqi 12cqi 0 0;
  border-block-end: 1px solid var(--ec-border);
}

.lp-phone__head span:last-child { display: grid; font-size: 0.85em; color: var(--ec-text-muted); }
.lp-phone__head b { font-size: 1.12em; color: var(--ec-text); }

.lp-phone__kid {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--ec-chart-2-on);
  background: var(--ec-chart-2);
  border-radius: 50%;
}

.lp-phone__view {
  font-size: 5.6cqi;
  line-height: 1.3;
  color: var(--ec-text);
  background: var(--ec-bg);
  border-radius: 0 0 12cqi 12cqi;
}

.lp-scr--phone {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  align-items: flex-start;
  padding: 1.2em 1em;
}

.lp-ok {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  margin-block-end: 0.3em;
  font-size: 1.1em;
  color: var(--ec-success);
  background: var(--ec-success-soft);
  border-radius: 50%;
}

.lp-ok--warn { color: var(--ec-warning); background: var(--ec-warning-soft); }

.lp-pscr__big {
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.15;
}

.lp-pscr__muted { margin: 0; color: var(--ec-text-muted); }

.lp-pscr__label { margin: 0 0 0.2em; font-weight: 700; }

.lp-pscr__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6em 0.8em;
  align-items: center;
  width: 100%;
  margin: 0.6em 0 0;
  padding: 0.9em;
  font-size: 0.9em;
  background: var(--ec-surface);
  border-radius: 0.7em;
}

.lp-pscr__dl dt { color: var(--ec-text-muted); }
.lp-pscr__dl dd { margin: 0; text-align: end; font-weight: 600; }

.lp-card { display: grid; gap: 0.5em; width: 100%; }

.lp-card li,
.lp-day li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.75em 0.85em;
  background: var(--ec-surface);
  border-radius: 0.6em;
}

.lp-card span { display: grid; font-weight: 600; }
.lp-card i { font-size: 0.85em; font-style: normal; font-weight: 400; color: var(--ec-text-muted); }

.lp-card b {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  font-family: var(--ec-font-display);
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: 0.5em;
}

.lp-day { display: grid; gap: 0.45em; width: 100%; }

.lp-day li {
  justify-content: flex-start;
  gap: 0.8em;
  background: color-mix(in srgb, var(--tint) 15%, var(--ec-surface));
}

.lp-day i { font-style: normal; font-weight: 400; color: var(--ec-text-muted); font-variant-numeric: tabular-nums; }

/* Homework on the laptop: subject, task, and the due day pushed right. */
.lp-day--wide { gap: 0.55em; }
.lp-day--wide li { gap: 1.2em; padding: 0.95em 1em; font-weight: 400; }
.lp-day--wide b { flex: 0 0 6.5em; font-weight: 600; }
.lp-day--wide span { flex: 1; min-width: 0; }
.lp-day--wide i { flex-shrink: 0; font-weight: 600; }

/* The tour's pause control: small, translucent on the cyan, in the corner
   under the devices rather than in a row of its own. */
.lp-stage .lp-stage__pause {
  position: absolute;
  right: var(--mk-gutter);
  bottom: 0;
  width: 44px;
  height: 44px;
  color: var(--lp-on);
  background: rgb(255 255 255 / 12%);
  border-color: var(--lp-hair);
}

.lp-stage .lp-stage__pause:hover { background: rgb(255 255 255 / 22%); border-color: var(--lp-on); }
.lp-stage .lp-stage__pause:focus-visible { outline-color: var(--lp-on); }

/* Stacked, the devices fill the column to its corner: the control gets a
   strip of its own under them instead of sitting on the laptop. */
@media (max-width: 959.98px) {
  .lp-stage__grid { padding-block-end: 52px; }
}

/* --- The catalogue strip --------------------------------------------------- */

.lp-strip {
  display: flex;
  gap: var(--ec-space-6);
  align-items: center;
  margin-block-start: clamp(1.25rem, 3.5vh, 3rem);
  padding: var(--ec-space-5) 0 var(--ec-space-6);
  border-block-start: 1px solid var(--lp-hair);
}

.lp-strip__label {
  flex-shrink: 0;
  margin: 0;
  padding-inline-start: max(var(--mk-gutter), calc((100% - var(--lp-max)) / 2 + var(--mk-gutter)));
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--lp-on-soft);
}

.lp-strip__mask {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.lp-strip__track {
  display: flex;
  gap: var(--ec-space-8);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-strip__track li {
  display: inline-flex;
  gap: var(--ec-space-8);
  align-items: center;
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.lp-strip__track li::after {
  width: 6px;
  height: 6px;
  content: '';
  background: var(--ec-primary-300);
  border-radius: var(--ec-radius-full);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-strip__track { animation: lp-strip 90s linear infinite; }
  .lp-strip:hover .lp-strip__track { animation-play-state: paused; }
}

/* Two copies of the list sit end to end, so moving by half the track lands
   exactly where it started. */
@keyframes lp-strip { to { translate: -50% 0; } }

@media (max-width: 639.98px) {
  .lp-strip { flex-direction: column; align-items: stretch; gap: var(--ec-space-3); }
  .lp-strip__label { padding-inline: var(--mk-gutter); }
}

.lp-stage__note {
  margin-block: var(--ec-space-3) 0;
  font-size: var(--ec-label-sm);
  line-height: 1.45;
  color: var(--ec-text-subtle);
  text-align: center;
}

/* --- The four figures ------------------------------------------------------ */

.lp-proof { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 3vw, 2rem); }

.lp-proof__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ec-space-4);
  margin: var(--ec-space-6) 0 0;
}

@media (min-width: 560px) {
  .lp-proof__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .lp-proof__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lp-proof__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ec-space-4);
  overflow: hidden;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-lg);
  transition: transform 0.4s var(--lp-ease), box-shadow 0.4s var(--lp-ease), border-color 0.3s;
}

/* A rule of accent along the top edge; it draws in when the row arrives. */
.lp-proof__card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: '';
  background: var(--ec-accent);
  transform-origin: left;
}

.lp-proof__card:hover {
  border-color: color-mix(in srgb, var(--ec-accent) 40%, var(--ec-border));
  box-shadow: 0 24px 40px -28px rgb(6 32 46 / 45%);
  transform: translateY(-4px);
}

.lp-proof__top {
  display: flex;
  gap: var(--ec-space-3);
  align-items: flex-start;
  justify-content: space-between;
}

.lp-proof__n {
  font-family: var(--ec-font-display);
  font-size: clamp(3rem, 2rem + 2.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ec-accent);
}

/* The odometer: a column of the digits 0 to 9, one digit tall, scrolled to
   --n. At rest it simply shows the figure; home.js winds it back to 0 and
   lets it roll when the row comes into view. */
.lp-odo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
}

.lp-odo__strip {
  display: flex;
  flex-direction: column;
  translate: 0 calc(var(--n) * -1em);
}

.lp-odo__strip span { display: block; height: 1em; line-height: 1; }

.lp-proof__ico {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: 14px;
}

.lp-proof__t {
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ec-text);
}

.lp-proof__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-proof__chip {
  padding: 5px 12px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ec-text);
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-full);
}

/* The carriers' own colours, with dark ink so the label holds AA. */
.lp-proof__chip--mtn    { color: #3d2c00; background: #ffcc00; border-color: transparent; }
.lp-proof__chip--orange { color: #1f0b00; background: #ff7a1a; border-color: transparent; }

/* Seven years as seven rising steps, Form 1 on the left. */
.lp-proof__steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-proof__steps li {
  height: calc(10px + var(--i) * 5px);
  background: color-mix(in srgb, var(--ec-accent) calc(40% + var(--i) * 10%), var(--ec-surface));
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
}

.lp-proof__s {
  margin: auto 0 0;
  font-size: var(--ec-text-sm);
  line-height: 1.45;
  color: var(--ec-text-muted);
}

/* The arrival, once: cards rise in turn, the odometers roll, the top rule
   draws, then each card's chips or steps follow. .is-armed is set by
   home.js only when motion is allowed, so nothing is hidden without it. */
@media (prefers-reduced-motion: no-preference) {
  .lp-proof.is-armed .lp-proof__card {
    transition:
      transform 0.4s var(--lp-ease), box-shadow 0.4s var(--lp-ease), border-color 0.3s,
      opacity 0.7s var(--lp-ease) calc(var(--d) * 0.1s),
      translate 0.7s var(--lp-ease) calc(var(--d) * 0.1s);
  }

  .lp-proof.is-armed:not(.is-in) .lp-proof__card { opacity: 0; translate: 0 24px; }

  .lp-proof.is-armed .lp-odo__strip { transition: translate 1.5s var(--lp-ease) calc(var(--d) * 0.12s + 0.15s); }
  .lp-proof.is-armed:not(.is-in) .lp-odo__strip { translate: 0 0; }

  .lp-proof.is-armed .lp-proof__card::before { transition: transform 0.9s var(--lp-ease) calc(var(--d) * 0.12s + 0.3s); }
  .lp-proof.is-armed:not(.is-in) .lp-proof__card::before { transform: scaleX(0); }

  .lp-proof.is-armed .lp-proof__chip {
    transition-property: opacity, transform;
    transition-duration: 0.45s;
    transition-timing-function: var(--lp-ease);
    transition-delay: calc(var(--d) * 0.12s + 0.7s + var(--i) * 0.09s);
  }

  .lp-proof.is-armed:not(.is-in) .lp-proof__chip { opacity: 0; transform: translateY(8px) scale(0.9); }

  .lp-proof.is-armed .lp-proof__steps li { transition: transform 0.45s var(--lp-ease) calc(var(--d) * 0.12s + 0.6s + var(--i) * 0.08s); }
  .lp-proof.is-armed:not(.is-in) .lp-proof__steps li { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-laptop,
  .lp-phone,
  .lp-track,
  .lp-app__ico { transition: none; }
}

/* ==========================================================================
   THE TWO SUBSYSTEMS
   A photograph with the report card floating over it in 3D, the copy
   beside it, and a switch between the two ladders. home.js adds .is-tabbed;
   until it does, both panels simply stack and the switch is hidden.
   ========================================================================== */

.lp-seg {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
  padding: 5px;
  overflow-x: auto;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-full);
  scrollbar-width: none;
}

.lp-show:not(.is-tabbed) .lp-seg { display: none; }

.lp-seg__btn {
  min-height: 44px;
  padding: 0 var(--ec-space-5);
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-md);
  font-weight: 600;
  color: var(--ec-text-muted);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--ec-radius-full);
  transition: color 0.3s, background-color 0.3s;
}

.lp-seg__btn:hover { color: var(--ec-text); }

/* On a phone the two halves share the width and a long French label wraps
   inside its half rather than scrolling out of sight. */
@media (max-width: 599.98px) {
  .lp-seg { display: flex; width: 100%; border-radius: 26px; }
  .lp-seg__btn { flex: 1; padding: 8px 12px; line-height: 1.25; white-space: normal; border-radius: 22px; }
}

.lp-seg__btn[aria-selected='true'] {
  color: var(--ec-accent-on);
  background: var(--ec-accent);
}

.lp-seg__btn:focus-visible,
.lp-round:focus-visible,
.lp-dot:focus-visible {
  outline: 2px solid var(--ec-focus);
  outline-offset: 3px;
}

.lp-show__stage {
  display: grid;
  gap: clamp(3rem, 8vw, 5rem);
}

/* Tabbed: both panels in one grid cell, the inactive one turned away. */
.lp-show.is-tabbed .lp-show__panel { grid-area: 1 / 1; }

.lp-show__panel {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .lp-show__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.lp-show__media {
  position: relative;
  margin: 0;
  perspective: 1400px;
}

.lp-show__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: clamp(20px, 3vw, 30px);
}

@media (min-width: 900px) {
  .lp-show__media img { aspect-ratio: 5 / 5.4; }
}

/* The report card, floating off the photograph's corner. */
.lp-sheet {
  position: absolute;
  inset-inline-end: 4%;
  bottom: -9%;
  width: min(84%, 360px);
  padding: var(--ec-space-4) var(--ec-space-5);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 20px;
  box-shadow:
    0 2px 4px rgb(6 32 46 / 6%),
    0 30px 60px -24px rgb(6 32 46 / 40%);
  transform: rotateY(-14deg) rotateX(6deg) translateZ(40px);
  transform-origin: 100% 100%;
}

@media (max-width: 599.98px) {
  .lp-sheet { width: 74%; bottom: -14%; padding: var(--ec-space-3); }
  .lp-sheet__t { font-size: var(--ec-label-md); }
  .lp-sheet__t td { padding-block: 6px; }
}

@media (min-width: 900px) {
  .lp-sheet { inset-inline-end: -7%; bottom: 7%; }
}

.lp-sheet__cap {
  margin: 0 0 var(--ec-space-2);
  font-size: var(--ec-label-md);
  font-weight: 600;
  color: var(--ec-text-muted);
}

.lp-sheet__t {
  width: 100%;
  font-size: var(--ec-text-sm);
  border-collapse: collapse;
}

.lp-sheet__t th {
  padding: 6px 4px;
  font-size: var(--ec-label-sm);
  font-weight: 600;
  color: var(--ec-text-subtle);
  text-align: start;
}

.lp-sheet__t th:not(:first-child),
.lp-sheet__t .ec-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }

.lp-sheet__t td {
  padding: 9px 4px;
  color: var(--ec-text);
  border-block-start: 1px solid var(--ec-border);
}

.lp-show__copy { min-width: 0; padding-block-start: var(--ec-space-12); }

@media (min-width: 900px) {
  .lp-show__copy { padding-block-start: 0; }
}

.lp-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: var(--ec-label-md);
  font-weight: 700;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: var(--ec-radius-full);
}

.lp-show__panel--fra .lp-tag {
  color: var(--ec-info);
  background: color-mix(in srgb, var(--ec-info) 14%, var(--ec-surface));
}

.lp-show__title {
  margin: var(--ec-space-4) 0 var(--ec-space-2);
  font-family: var(--ec-font-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ec-text);
}

.lp-show__sub {
  margin: 0 0 var(--ec-space-6);
  color: var(--ec-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-show__panel {
    transition: opacity 0.5s ease, visibility 0s linear 0s;
  }

  .lp-show__media img,
  .lp-sheet,
  .lp-show__copy {
    transition: transform 0.9s var(--lp-ease), opacity 0.6s ease;
  }
}

.lp-show.is-tabbed .lp-show__panel:not(.is-on) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.lp-show.is-tabbed .lp-show__panel:not(.is-on) .lp-show__media img {
  transform: perspective(1400px) rotateY(16deg) translateX(-4%) scale(0.94);
}

.lp-show.is-tabbed .lp-show__panel:not(.is-on) .lp-sheet {
  transform: rotateY(-40deg) rotateX(14deg) translateZ(120px) translateY(30%);
}

.lp-show.is-tabbed .lp-show__panel:not(.is-on) .lp-show__copy {
  transform: translateY(24px);
}

/* --- The bilingual college ------------------------------------------------- */

.lp-bi {
  display: grid;
  gap: var(--ec-space-5);
  align-items: center;
  margin-block-start: clamp(4rem, 9vw, 6.5rem);
  padding: var(--ec-space-3);
  color: var(--ec-paper-0);
  background: linear-gradient(170deg, var(--ec-primary-700), var(--ec-primary-800));
  border-radius: clamp(22px, 3vw, 30px);
}

[data-theme='dark'] .lp-bi { background: linear-gradient(170deg, var(--ec-primary-900), var(--ec-chrome-2)); }

@media (min-width: 900px) {
  .lp-bi { grid-template-columns: 260px minmax(0, 1fr) auto; padding-inline-end: var(--ec-space-8); }
}

.lp-bi__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(16px, 2.4vw, 22px);
}

@media (min-width: 900px) {
  .lp-bi__img { aspect-ratio: 4 / 3; }
}

.lp-bi__copy { padding-inline: var(--ec-space-3); }

.lp-bi__kicker { margin: 0 0 6px; font-size: var(--ec-text-sm); font-weight: 600; color: var(--ec-primary-200); }

.lp-bi__title {
  margin: 0 0 var(--ec-space-2);
  font-family: var(--ec-font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ec-paper-0);
}

.lp-bi__body { max-width: 62ch; margin: 0; line-height: 1.55; color: color-mix(in srgb, var(--ec-paper-0) 86%, transparent); }

.lp-bi__cta { margin: 0 var(--ec-space-3) var(--ec-space-3); justify-self: start; }

@media (min-width: 900px) {
  .lp-bi__cta { margin: 0; }
}

/* ==========================================================================
   MONEY: the passing slides
   A native scroll-snap strip, so a phone swipes it with no script. Where the
   browser supports scroll-driven animation, each slide turns in 3D as it
   passes through the strip; elsewhere the slides simply slide.
   ========================================================================== */

.lp-slides__track {
  --lp-edge: max(var(--mk-gutter), calc((100% - 1140px) / 2 + var(--mk-gutter)));
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: var(--ec-space-2) var(--lp-edge) var(--ec-space-8);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--lp-edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.lp-slides__track::-webkit-scrollbar { display: none; }

.lp-slides__track:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: -4px; }

.lp-slide {
  display: grid;
  flex: 0 0 min(calc(100vw - 2 * var(--mk-gutter) - 40px), 1000px);
  overflow: hidden;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: clamp(22px, 3vw, 30px);
  scroll-snap-align: start;
}

@media (min-width: 820px) {
  .lp-slide { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: 440px; }
}

.lp-slide__media { position: relative; margin: 0; }

.lp-slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (min-width: 820px) {
  .lp-slide__media img { position: absolute; inset: 0; aspect-ratio: auto; }
}

.lp-slide__chip {
  position: absolute;
  bottom: var(--ec-space-4);
  inset-inline-start: var(--ec-space-4);
  display: inline-flex;
  gap: var(--ec-space-2);
  align-items: center;
  max-width: calc(100% - 2 * var(--ec-space-4));
  padding: 8px 14px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--ec-text);
  background: var(--ec-surface);
  border-radius: var(--ec-radius-full);
  box-shadow: 0 10px 24px -10px rgb(6 32 46 / 45%);
}

.lp-slide__chip svg { color: var(--ec-accent); }

.lp-slide__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.lp-slide__was {
  display: flex;
  gap: var(--ec-space-3);
  align-items: flex-start;
  margin: 0 0 var(--ec-space-6);
  padding: var(--ec-space-3) var(--ec-space-4);
  font-size: var(--ec-text-sm);
  line-height: 1.5;
  color: var(--ec-text-muted);
  background: var(--ec-surface);
  border-radius: 14px;
}

.lp-slide__was b { color: var(--ec-text); font-weight: 600; }

.lp-slide__mark {
  flex-shrink: 0;
  padding: 2px 10px;
  font-size: var(--ec-label-sm);
  font-weight: 700;
  color: var(--ec-danger);
  background: var(--ec-danger-soft);
  border-radius: var(--ec-radius-full);
}

.lp-slide__title {
  margin: 0 0 var(--ec-space-3);
  font-family: var(--ec-font-display);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.375rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ec-text);
}

.lp-slide__body {
  max-width: 48ch;
  margin: 0;
  font-size: var(--ec-text-lg);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.lp-slide__plus {
  display: flex;
  gap: var(--ec-space-3);
  align-items: flex-start;
  margin: var(--ec-space-6) 0 0;
  padding-block-start: var(--ec-space-5);
  line-height: 1.55;
  color: var(--ec-text);
  border-block-start: 1px solid var(--ec-border);
}

.lp-slide__plus svg { flex-shrink: 0; margin-block-start: 2px; color: var(--ec-success); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-slide {
      animation: lp-pass linear both;
      animation-timeline: view(inline);
      animation-range: cover;
    }
  }
}

@keyframes lp-pass {
  0%   { opacity: 0.4; transform: perspective(1600px) rotateY(-22deg) scale(0.9); }
  40%,
  60%  { opacity: 1; transform: none; }
  100% { opacity: 0.4; transform: perspective(1600px) rotateY(22deg) scale(0.9); }
}

.lp-slides__nav {
  display: flex;
  gap: var(--ec-space-2);
  align-items: center;
}

.lp-round {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ec-text);
  cursor: pointer;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border-strong);
  border-radius: var(--ec-radius-full);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.lp-round:hover { background: var(--ec-accent-soft); border-color: var(--ec-accent); }
.lp-round:active { transform: scale(0.94); }
.lp-round--toggle { margin-inline-start: auto; }

.lp-slides__dots { display: flex; gap: 2px; padding-inline: var(--ec-space-2); }

.lp-dot {
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0 4px;
  cursor: pointer;
  background: none;
  border: 0;
}

.lp-dot i {
  display: block;
  width: 22px;
  height: 5px;
  background: var(--ec-border-strong);
  border-radius: 5px;
  transition: width 0.4s var(--lp-ease), background-color 0.3s;
}

.lp-dot[aria-current='true'] i { width: 44px; background: var(--ec-accent); }

/* Pause is two bars; play is a triangle drawn with borders. */
.lp-round__glyph {
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}

.lp-slides.is-paused .lp-round__glyph,
.lp-stage.is-paused .lp-round__glyph {
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  border-inline: 10px solid currentColor;
  border-inline-end: 0;
  translate: 2px 0;
}

/* ==========================================================================
   THE NETWORK IT HAS TO RUN ON
   The band in the stage's own cyan: the three claims as a list on the left,
   the queue drawn on the right as a white phone card, so the one moving thing
   in the band is also the brightest thing in it.
   ========================================================================== */

.lp-band {
  --lp-band: var(--ec-primary-600);
  --lp-band-deep: var(--ec-primary-800);
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  color: var(--ec-paper-0);
  background:
    radial-gradient(44rem 28rem at 78% 50%, color-mix(in srgb, var(--ec-primary-500) 35%, transparent), transparent 70%),
    linear-gradient(175deg, var(--lp-band) 20%, var(--lp-band-deep));
}

[data-theme='dark'] .lp-band {
  --lp-band: var(--ec-primary-900);
  --lp-band-deep: var(--ec-chrome);
}

/* The stage's ruled grid, so the two blue panels read as one family. */
.lp-band::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background-image:
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 50%, black, transparent);
  mask-image: radial-gradient(70% 70% at 70% 50%, black, transparent);
}

/* lp.css keys its onDark head to the navy; on the cyan the eyebrow and the
   lead need lighter ink to hold their contrast. */
.lp-band .lp-head--onDark .lp-eyebrow { color: var(--ec-primary-100); }
.lp-band .lp-head--onDark .lp-lead { color: color-mix(in srgb, var(--ec-paper-0) 90%, transparent); }

.lp-net-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .lp-net-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.lp-net-grid .lp-head { display: block; margin-block-end: var(--ec-space-8); }
.lp-net-grid .lp-lead { margin-block-start: var(--ec-space-4); }

.lp-net {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-net li {
  display: flex;
  gap: var(--ec-space-4);
  padding-block: var(--ec-space-5);
  border-block-start: 1px solid rgb(255 255 255 / 18%);
}

.lp-net__ico {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ec-paper-0);
  background: rgb(255 255 255 / 14%);
  border-radius: 14px;
}

.lp-net h3 {
  margin: 0 0 4px;
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-lg);
  font-weight: 600;
  color: var(--ec-paper-0);
}

.lp-net p { margin: 0; line-height: 1.55; color: color-mix(in srgb, var(--ec-paper-0) 88%, transparent); }

/* --- The queue, drawn ------------------------------------------------------
   A white card in both themes' surface colour, held flat so it reads at a
   glance. Without motion it shows the offline moment: no signal, three
   entries waiting on the phone. */

.lp-sync {
  justify-self: center;
  width: 100%;
  max-width: 440px;
  padding: var(--ec-space-4);
  color: var(--ec-text);
  background: var(--ec-surface);
  border-radius: 28px;
  box-shadow: 0 40px 80px -30px rgb(4 30 46 / 60%);
}

.lp-sync__head {
  display: flex;
  gap: var(--ec-space-3);
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--ec-space-4);
  padding: 14px 16px;
  background: var(--ec-warning-soft);
  border-radius: 18px;
}

.lp-sync__signal,
.lp-sync__state { display: grid; justify-items: end; }

.lp-sync__off,
.lp-sync__on,
.lp-sync__q,
.lp-sync__s {
  grid-area: 1 / 1;
  padding: 4px 12px;
  font-size: var(--ec-label-sm);
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--ec-radius-full);
}

.lp-sync__off,
.lp-sync__q { color: var(--ec-warning); background: var(--ec-warning-soft); }

.lp-sync__off { background: var(--ec-surface); }

.lp-sync__on,
.lp-sync__s { color: var(--ec-success); background: var(--ec-success-soft); opacity: 0; }

.lp-sync__on { background: var(--ec-surface); }

.lp-sync__list {
  display: grid;
  gap: var(--ec-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-sync__list li {
  position: relative;
  display: flex;
  gap: var(--ec-space-3);
  align-items: center;
  overflow: hidden;
  padding: 14px;
  font-size: var(--ec-text-sm);
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: 16px;
}

.lp-sync__ico {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: 10px;
}

.lp-sync__what { flex: 1; min-width: 0; font-weight: 600; color: var(--ec-text); }

/* Each entry's own upload bar, along its bottom edge. */
.lp-sync__prog {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--ec-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* One ten-second loop, all on the same clock. The entries arrive one by one
   while the signal is gone; the header turns green when it returns; each
   entry then uploads, its chip flips to Sent with a pop, and the cleared
   queue slides away before the next round. */
@media (prefers-reduced-motion: no-preference) {
  .lp-sync__head { animation: lp-net-head 10s infinite; }
  .lp-sync__off { animation: lp-gone 10s infinite; }
  .lp-sync__on { animation: lp-back 10s infinite; }

  .lp-sync__list li { animation: lp-row 10s var(--lp-d, 0s) infinite both; }
  .lp-sync__list li:nth-child(2) { --lp-d: 0.6s; }
  .lp-sync__list li:nth-child(3) { --lp-d: 1.2s; }

  .lp-sync__q { animation: lp-row-q 10s var(--lp-d, 0s) infinite both; }
  .lp-sync__s { animation: lp-row-s 10s var(--lp-d, 0s) infinite both; }
  .lp-sync__prog { animation: lp-row-prog 10s var(--lp-d, 0s) infinite both; }
}

@keyframes lp-net-head {
  0%, 42%   { background: var(--ec-warning-soft); }
  46%, 94%  { background: var(--ec-success-soft); }
  98%, 100% { background: var(--ec-warning-soft); }
}

@keyframes lp-gone {
  0%, 42%   { opacity: 1; }
  46%, 94%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes lp-back {
  0%, 42%   { opacity: 0; }
  46%, 94%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes lp-row {
  0%        { opacity: 0; transform: translateX(28px); }
  6%        { opacity: 1; transform: none; }
  52%       { background: var(--ec-surface-2); }
  56%       { background: var(--ec-success-soft); }
  66%, 80%  { opacity: 1; transform: none; background: var(--ec-surface-2); }
  86%, 100% { opacity: 0; transform: translateX(-28px); }
}

@keyframes lp-row-q {
  0%, 52%   { opacity: 1; }
  54%, 100% { opacity: 0; }
}

@keyframes lp-row-s {
  0%, 52%   { opacity: 0; transform: scale(0.6); }
  56%       { opacity: 1; transform: scale(1.15); }
  60%, 100% { opacity: 1; transform: none; }
}

@keyframes lp-row-prog {
  0%, 45%   { opacity: 1; transform: scaleX(0); }
  53%       { opacity: 1; transform: scaleX(1); }
  58%, 100% { opacity: 0; transform: scaleX(1); }
}

/* ==========================================================================
   PRICING
   ========================================================================== */

.lp-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ec-space-4);
  align-items: stretch;
}

@media (min-width: 900px) {
  .lp-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lp-plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: clamp(22px, 3vw, 30px);
}

/* The common case on the stage's own cyan, so the eye lands on it. */
.lp-plan.is-featured {
  color: var(--ec-paper-0);
  background: linear-gradient(170deg, var(--ec-primary-600), var(--ec-primary-800));
  border-color: transparent;
  box-shadow: 0 30px 60px -30px rgb(6 32 46 / 60%);
}

[data-theme='dark'] .lp-plan.is-featured { background: linear-gradient(170deg, var(--ec-primary-800), var(--ec-primary-900)); }

.lp-plan__flag {
  align-self: flex-start;
  margin: 0 0 var(--ec-space-4);
  padding: 4px 12px;
  font-size: var(--ec-label-md);
  font-weight: 700;
  color: var(--ec-primary-ink);
  background: var(--ec-paper-0);
  border-radius: var(--ec-radius-full);
}

.lp-plan__title {
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lp-plan__who { margin: 4px 0 var(--ec-space-6); font-size: var(--ec-text-sm); color: var(--ec-text-muted); }

/* Where a price list would print a figure. There is no published price for
   this product; see the note in index.php. */
.lp-plan__ask {
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ec-accent);
}

.lp-plan__unit { margin: 4px 0 var(--ec-space-6); font-size: var(--ec-text-sm); color: var(--ec-text-muted); }

.lp-plan__list {
  margin: 0 0 var(--ec-space-8);
  padding: var(--ec-space-5) 0 0;
  list-style: none;
  border-block-start: 1px solid var(--ec-border);
}

.lp-plan__list li {
  display: flex;
  gap: var(--ec-space-2);
  align-items: flex-start;
  padding-block: var(--ec-space-2);
  font-size: var(--ec-text-sm);
  line-height: 1.45;
  color: var(--ec-text-muted);
}

.lp-plan__list svg { flex-shrink: 0; margin-block-start: 3px; color: var(--ec-success); }

.lp-plan.is-featured .lp-plan__who,
.lp-plan.is-featured .lp-plan__unit,
.lp-plan.is-featured .lp-plan__list li { color: color-mix(in srgb, var(--ec-paper-0) 88%, transparent); }

.lp-plan.is-featured .lp-plan__title,
.lp-plan.is-featured .lp-plan__ask { color: var(--ec-paper-0); }
.lp-plan.is-featured .lp-plan__list { border-color: rgb(255 255 255 / 18%); }
.lp-plan.is-featured .lp-plan__list svg { color: var(--ec-primary-200); }

.lp-plan__cta { width: 100%; margin-block-start: auto; }
.lp-plan__cta.lp-btn--light { justify-content: space-between; padding-inline-start: var(--ec-space-6); }

.lp-price__foot {
  display: flex;
  gap: var(--ec-space-2);
  align-items: center;
  justify-content: center;
  margin: var(--ec-space-8) 0 0;
  font-size: var(--ec-text-sm);
  color: var(--ec-text-muted);
  text-align: center;
}

.lp-price__foot svg { flex-shrink: 0; color: var(--ec-success); }

/* ==========================================================================
   THE ASK
   The page closes on the stage's cyan: a campus photograph under the copy,
   faded into the panel, and the real lead form beside it.
   ========================================================================== */

.lp-ask {
  display: grid;
  gap: var(--ec-space-3);
  padding: var(--ec-space-3);
  background: linear-gradient(170deg, var(--ec-primary-600), var(--ec-primary-800));
  border-radius: clamp(24px, 3vw, 36px);
}

[data-theme='dark'] .lp-ask { background: linear-gradient(170deg, var(--ec-primary-900), var(--ec-chrome)); }

@media (min-width: 960px) {
  .lp-ask { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}

.lp-ask__copy {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(11rem, 26vw, 16rem) clamp(1.25rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem);
  overflow: hidden;
  color: var(--ec-paper-0);
  border-radius: clamp(18px, 2.6vw, 28px);
}

.lp-ask__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deep enough under the copy that every line clears AA on the darkest
   photograph: the lower half is the panel's own ink at 94%. */
.lp-ask__copy::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ec-primary-800) 30%, transparent),
    color-mix(in srgb, var(--ec-primary-900) 94%, transparent) 50%);
}

.lp-ask .lp-eyebrow { color: var(--ec-primary-200); }
.lp-ask .lp-h2 { max-width: 16ch; color: var(--ec-paper-0); }
.lp-ask .lp-lead { margin-block-start: var(--ec-space-4); color: color-mix(in srgb, var(--ec-paper-0) 90%, transparent); }
.lp-ask .lp-ticks { margin-block-start: var(--ec-space-6); }

.lp-wa {
  display: inline-flex;
  gap: var(--ec-space-2);
  align-items: center;
  align-self: flex-start;
  min-height: 48px;
  margin-block-start: var(--ec-space-6);
  padding-inline: var(--ec-space-5);
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-md);
  font-weight: 600;
  color: var(--ec-paper-0);
  text-decoration: none;
  background: var(--ec-success);
  border-radius: var(--ec-radius-full);
  transition: filter var(--ec-transition-fast);
}

.lp-wa:hover { color: var(--ec-paper-0); filter: brightness(1.08); }

.lp-demo__card {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--ec-surface);
  border-radius: clamp(18px, 2.6vw, 28px);
}

/* The shared form drops its own card chrome inside this one. */
.lp-demo__card .ec-mk-form {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ==========================================================================
   PRINT
   A landing page is not a document, but somebody will print it.
   ========================================================================== */

@media print {
  .lp-stage,
  .lp-band,
  .lp-bi,
  .lp-ask,
  .lp-plan.is-featured { color: black; background: none; border: 1px solid var(--ec-border); }
  .lp-devices,
  .lp-strip,
  .lp-slides__nav,
  .lp-sync,
  .lp-ask__img { display: none; }
  .lp-btn, .lp-wa { display: none; }
}