/* ==========================================================================
   EduOnPoint: the landing page — the stitch/ layout

   Loaded by includes/layout-marketing.php after the five shared sheets, and
   only on index.php, which names it in $mkPageSheets. Every rule is under
   .lp, so nothing here can reach another public page or the sign-in screens.

   Colours are role tokens, so both themes work without a second block. The
   two bands that stay dark (.lp-dark) and green (.lp-band) in BOTH themes
   re-key the role tokens they use locally from the palette layer in
   tokens.css, which never moves — the same trick the sign-in panel uses.

   Headings stay on Inter. The design asked for Plus Jakarta Sans from Google
   Fonts; this site self-hosts one face and loads nothing from a third party,
   and weight 800 with tight tracking carries the same look.
   ========================================================================== */

.lp {
  --lp-radius:    18px;
  --lp-radius-sm: 12px;
  --lp-sec-y:     clamp(3.5rem, 7vw, 5.5rem);
  --lp-h2:        clamp(1.75rem, 1.2rem + 1.9vw, 2.45rem);

  /* The design's teal, the last stop of the closing band's gradient. Nothing
     on the green ramp is this colour and nothing else uses it, so it lives
     here rather than in tokens.css. */
  --lp-teal-deep: #134e4a;

  --lp-lift: 0 16px 32px -10px color-mix(in srgb, var(--ec-primary-700) 22%, transparent);
}

[data-theme='dark'] .lp {
  --lp-lift: 0 16px 32px -10px rgb(0 0 0 / 0.55);
}

/* Two sizes the shared icon set has no class for. */
.lp .ec-icon-12 { width: 12px; height: 12px; flex: none; }
.lp .ec-icon-24 { width: 24px; height: 24px; flex: none; }

/* --- Buttons --------------------------------------------------------------
   The site's pill with an amber primary is the rest of the public site. The
   design is a rounded rectangle with a green primary, and this page follows
   the design. Wrapping is allowed: the French call to action is a sentence,
   and nowrap pushed it off a 360px screen. */

.lp .ec-btn {
  height: auto;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--lp-radius-sm);
  font-size: 1rem;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

.lp .ec-btn--primary {
  background: var(--ec-accent);
  color: var(--ec-accent-on);
  box-shadow: var(--ec-shadow-sm);
}

.lp .ec-btn--primary:hover {
  background: var(--ec-accent-hover);
  color: var(--ec-accent-on);
}

.lp .ec-btn--outline {
  background: var(--ec-surface);
  border: 1px solid color-mix(in srgb, var(--ec-text) 22%, transparent);
}

/* The highlighted phrase: coloured, not underlined, everywhere on this page. */
.lp .ec-mk-hl {
  background: none;
  padding: 0;
  color: var(--ec-accent);
}

/* --- Hero ------------------------------------------------------------------
   A plain field, a solid headline, one paragraph, two buttons and the
   photograph. Nothing floats, glows, pulses or lifts. */

.lp-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background: var(--ec-bg);
}

/* The copy takes a little more than half: at even halves the two calls to
   action missed sitting side by side at 1440px by a few pixels. */
.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.lp-kicker {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ec-accent);
}

.lp-h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ec-text);
  text-wrap: balance;
}

/* The second sentence on its own line, in the green every highlight on this
   page already takes. */
.lp-h1 .ec-mk-hl { display: block; }

.lp-sub {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ec-text-muted);
  text-wrap: pretty;
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1rem;
  margin-top: 1.75rem;
}

.lp-cta--center { justify-content: center; }

.lp-hero__note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--ec-text-subtle);
}

.lp-photo {
  overflow: hidden;
  border-radius: 16px;
  background: var(--ec-surface-2);
  box-shadow: var(--ec-shadow-md);
}

.lp-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 35%;
}

.lp-photo--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
}

.lp-photo--empty svg { width: 30%; height: 30%; }

/* --- The five pillars ----------------------------------------------------- */

.lp-pillars {
  padding-block: 2rem;
  background: var(--ec-surface);
  border-block: 1px solid var(--ec-border);
}

.lp-pillars__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-pillars__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.lp-pillars__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  color: var(--ec-tint-1-on);
  background: var(--ec-tint-1);
}

.lp-pillars__list b {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ec-text);
}

.lp-pillars__list li > span:last-child > span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--ec-text-muted);
}

/* --- Sections and their heads --------------------------------------------- */

.lp-sec { padding-block: var(--lp-sec-y); }

.lp-sec--cream { background: var(--ec-bg); }

.lp-sec--white {
  background: var(--ec-surface);
  border-top: 1px solid var(--ec-border);
}

.lp-sec--tint {
  background: color-mix(in srgb, var(--ec-accent) 5%, var(--ec-bg));
  border-block: 1px solid var(--ec-border);
}

.lp-head {
  max-width: 48rem;
  margin: 0 auto clamp(2.25rem, 4vw, 3.5rem);
  text-align: center;
}

.lp-eyebrow {
  display: inline-block;
  margin: 0 0 0.875rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--ec-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
}

.lp-h2 {
  margin: 0;
  font-size: var(--lp-h2);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--ec-text);
  text-wrap: balance;
}

.lp-lead {
  max-width: 42rem;
  margin: 0.875rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ec-text-muted);
  text-wrap: pretty;
}

.lp-after {
  margin: 2rem 0 0;
  text-align: center;
}

.lp-after--left { text-align: left; }

/* --- Manual way, EduOnPoint, campus --------------------------------------- */

.lp-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

.lp-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--ec-border);
  border-radius: var(--lp-radius);
  background: var(--ec-surface);
  box-shadow: var(--ec-shadow-sm);
}

.lp-panel--bad {
  border-color: color-mix(in srgb, var(--ec-danger) 22%, var(--ec-border));
}

.lp-panel--good {
  border: 2px solid var(--ec-accent);
  box-shadow: var(--ec-shadow-md);
}

.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--ec-radius-full);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-tag--bad  { color: var(--ec-danger); background: var(--ec-danger-soft); }
.lp-tag--good { color: var(--ec-accent); background: var(--ec-accent-soft); }

.lp-panel__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--ec-text);
}

.lp-panel__lead {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ec-text-subtle);
}

.lp-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--ec-text);
}

.lp-list__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border-radius: 50%;
}

.lp-list__mark--bad  { color: var(--ec-danger);  background: var(--ec-danger-soft); }
.lp-list__mark--good { color: var(--ec-success); background: var(--ec-success-soft); }

.lp-panel__foot {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ec-border);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ec-danger);
}

.lp-panel__foot--cta .ec-btn { width: 100%; }

.lp-panel--photo {
  gap: 0;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

.lp-panel__img {
  position: relative;
  height: 16rem;
  overflow: hidden;
}

.lp-panel__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-panel__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(15 23 42 / 0.82), transparent 60%);
}

.lp-panel__caption {
  position: absolute;
  z-index: 1;
  right: 1rem;
  bottom: 0.875rem;
  left: 1rem;
  margin: 0;
  color: var(--ec-paper-0);
}

.lp-panel__caption span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ee7b7;
}

.lp-panel__caption b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.lp-panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem;
}

.lp-panel__small {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ec-text);
}

.lp-panel__body p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.lp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ec-border);
}

.lp-stat {
  padding: 0.625rem;
  border-radius: 10px;
  background: var(--ec-surface-2);
  text-align: center;
}

.lp-stat__n {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ec-accent);
}

.lp-stat__l {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--ec-text-subtle);
}

/* --- Cards: modules, Cameroon, portals ------------------------------------ */

.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.lp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lp-card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--ec-border);
  border-radius: var(--lp-radius);
  background: var(--ec-surface);
  color: inherit;
  text-decoration: none;
  transition: translate 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.lp-card:hover {
  translate: 0 -4px;
  box-shadow: var(--lp-lift);
  color: inherit;
}

.lp-card--sm   { box-shadow: var(--ec-shadow-sm); }
.lp-card--soft { background: var(--ec-bg); }

.lp-card--link:hover {
  border-color: color-mix(in srgb, var(--ec-accent) 40%, var(--ec-border));
}

.lp-card__ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 12px;
}

.lp-card__ico--sm {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 10px;
}

.lp-card__code {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.lp-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ec-text);
}

.lp-card__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ec-text-muted);
}

.lp-card--sm .lp-card__title { font-size: 1rem; }
.lp-card--sm .lp-card__body  { font-size: 0.8125rem; }

.lp-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ec-accent);
}

/* Solid marks on the portal cards. Palette steps, so they hold in both themes. */
.lp-role {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  color: var(--ec-paper-0);
}

.lp-role--1 { background: var(--ec-primary-800); }
.lp-role--2 { background: var(--ec-primary-600); }
.lp-role--3 { background: var(--ec-sky-700); }
.lp-role--4 { background: var(--ec-lilac-700); }

/* --- The dark dashboard band ---------------------------------------------- */

.lp-dark {
  --ec-text:         var(--ec-ink-50);
  --ec-text-muted:   var(--ec-ink-200);
  --ec-text-subtle:  var(--ec-ink-300);
  --ec-border:       var(--ec-ink-700);
  --ec-accent:       var(--ec-primary-400);
  --ec-accent-hover: var(--ec-primary-300);
  --ec-accent-on:    var(--ec-primary-ink);
  --ec-accent-soft:  var(--ec-primary-wash);
  --mk-focus:        var(--ec-ink-50);

  position: relative;
  overflow: hidden;
  padding-block: var(--lp-sec-y);
  background: var(--ec-ink-900);
  color: var(--ec-ink-50);
}

.lp-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ec-primary-400) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.06;
  pointer-events: none;
}

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

.lp-mock {
  padding: 1.25rem;
  border: 1px solid var(--ec-ink-700);
  border-radius: var(--lp-radius);
  background: var(--ec-ink-950);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6);
  font-size: 0.75rem;
  color: var(--ec-ink-200);
}

.lp-mock i { display: block; }

.lp-mock__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ec-ink-750);
}

.lp-mock__dots { display: flex; gap: 0.375rem; flex: none; }

.lp-mock__dots i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.lp-mock__dots i:nth-child(1) { background: var(--ec-chart-4); }
.lp-mock__dots i:nth-child(2) { background: var(--mk-amber); }
.lp-mock__dots i:nth-child(3) { background: var(--ec-primary-400); }

.lp-mock__url {
  min-width: 0;
  overflow: hidden;
  font-family: var(--ec-font-mono);
  font-size: 0.71875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ec-ink-300);
}

.lp-mock__pill {
  flex: none;
  margin-left: auto;
  padding: 0.25rem 0.625rem;
  border: 1px solid color-mix(in srgb, var(--ec-primary-600) 50%, transparent);
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ec-primary-200);
  background: var(--ec-primary-900);
}

.lp-mock__body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.lp-mock__side {
  display: grid;
  align-content: start;
  gap: 0.25rem;
}

.lp-mock__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  overflow: hidden;
  border-radius: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ec-ink-300);
}

.lp-mock__nav svg { flex: none; }

.lp-mock__nav.is-on {
  font-weight: 500;
  color: var(--ec-paper-0);
  background: var(--ec-primary-600);
}

.lp-mock__main {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
}

.lp-mock__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.lp-mock__stat,
.lp-mock__panel {
  min-width: 0;
  padding: 0.875rem;
  border: 1px solid var(--ec-ink-800);
  border-radius: 12px;
  background: var(--ec-ink-900);
}

.lp-mock__label {
  display: block;
  overflow: hidden;
  font-size: 0.6875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ec-ink-300);
}

.lp-mock__v {
  height: 0.75rem;
  margin-top: 0.625rem;
  border-radius: 4px;
}

.lp-mock__v--1 { background: var(--ec-ink-50); }
.lp-mock__v--2 { background: var(--ec-primary-400); }
.lp-mock__v--3 { background: var(--mk-amber); }

.lp-mock__s {
  width: 45%;
  height: 0.4375rem;
  margin-top: 0.5rem;
  border-radius: 4px;
  background: var(--ec-ink-700);
}

.lp-mock__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.lp-mock__h {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ec-ink-50);
}

.lp-mock__track {
  display: flex;
  height: 0.875rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ec-ink-800);
}

.lp-mock__track i:first-child { width: 78%; background: var(--ec-primary-400); }
.lp-mock__track i:last-child  { width: 22%; background: var(--ec-chart-4); }

.lp-mock__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  color: var(--ec-ink-300);
}

.lp-mock__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.lp-mock__key {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.lp-mock__key--paid { background: var(--ec-primary-400); }
.lp-mock__key--due  { background: var(--ec-chart-4); }

.lp-mock__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.4375rem;
  border-bottom: 1px solid var(--ec-ink-800);
  color: var(--ec-primary-400);
}

.lp-mock__row:last-child { border-bottom: 0; }

.lp-mock__row svg { flex: none; }

.lp-mock__row i:nth-of-type(1) {
  flex: 1;
  height: 0.4375rem;
  border-radius: 4px;
  background: var(--ec-ink-600);
}

.lp-mock__row i:nth-of-type(2) {
  width: 22%;
  height: 0.4375rem;
  border-radius: 4px;
  background: var(--ec-ink-700);
}

.lp-eyebrow--dark {
  border: 1px solid var(--ec-primary-800);
  color: var(--ec-primary-400);
  background: color-mix(in srgb, var(--ec-primary-900) 80%, transparent);
}

.lp-dark .lp-h2 { color: var(--ec-paper-0); }

.lp-dark__body {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ec-ink-200);
}

.lp-checks {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ec-ink-50);
}

.lp-checks svg {
  flex: none;
  margin-top: 0.2rem;
  color: var(--ec-primary-400);
}

/* --- The quote ------------------------------------------------------------ */

.lp-quote {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--ec-bg);
  border-top: 1px solid var(--ec-border);
  text-align: center;
}

.lp-quote__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-warning);
}

.lp-quote__kicker .ec-mk-hl { color: inherit; }

.lp-quote__text {
  margin: 0;
  quotes: '\201C' '\201D';
}

:lang(fr) .lp-quote__text { quotes: '\00AB\00A0' '\00A0\00BB'; }

.lp-quote__text p {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ec-text);
  text-wrap: balance;
}

.lp-quote__text p::before { content: open-quote; }
.lp-quote__text p::after  { content: close-quote; }

.lp-quote__by {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  text-align: left;
}

.lp-quote__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 50%;
  color: var(--ec-paper-0);
  background: var(--ec-primary-800);
}

.lp-quote__mark > * { width: 1.375rem; height: 1.375rem; }

.lp-quote__by b {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ec-text);
}

.lp-quote__by a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ec-accent);
}

/* --- The closing band ----------------------------------------------------- */

.lp-band {
  --ec-accent:       var(--ec-primary-400);
  --ec-accent-hover: var(--ec-primary-300);
  --ec-accent-on:    var(--ec-primary-ink);
  --mk-focus:        var(--ec-paper-0);

  padding-block: clamp(3.5rem, 6vw, 4.5rem);
  background: linear-gradient(90deg, var(--ec-primary-900), var(--ec-primary-800) 50%, var(--lp-teal-deep));
  color: var(--ec-paper-0);
  text-align: center;
}

.lp-band__inner { max-width: 48rem; }

.lp-band .lp-h2 { color: var(--ec-paper-0); }
.lp-band .ec-mk-hl { color: var(--ec-primary-300); }

.lp-band__body {
  max-width: 36rem;
  margin: 1rem auto 0;
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ec-paper-0) 82%, transparent);
}

.lp-band .lp-cta { margin-top: 2rem; }

.lp-btn-glass {
  border: 1px solid rgb(255 255 255 / 0.22);
  color: var(--ec-paper-0);
  background: rgb(255 255 255 / 0.1);
}

.lp-btn-glass:hover {
  color: var(--ec-paper-0);
  background: rgb(255 255 255 / 0.16);
}

.lp-band__note {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--ec-primary-200);
}

/* --- Narrower screens ----------------------------------------------------- */

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

@media (max-width: 1020px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }

  .lp-hero__art {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
  }

  .lp-dark__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Two panels side by side, the campus card across the row beneath them
     with its photograph beside its figures. */
  .lp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lp-panel--photo {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .lp-panel__img { height: auto; min-height: 16rem; }
}

@media (max-width: 700px) {
  .lp-pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lp-compare { grid-template-columns: minmax(0, 1fr); }
  .lp-panel--photo { display: flex; }
  .lp-panel__img { height: 14rem; min-height: 0; }

  .lp-mock__body { grid-template-columns: minmax(0, 1fr); }
  .lp-mock__side { display: none; }
}

@media (max-width: 640px) {
  .lp-grid,
  .lp-grid--4 { grid-template-columns: minmax(0, 1fr); }

  .lp-cta .ec-btn { width: 100%; }
}

@media (max-width: 460px) {
  .lp-pillars__list { grid-template-columns: minmax(0, 1fr); }
  .lp-mock { padding: 0.875rem; }
  .lp-mock__panels { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-card { transition: none; }
  .lp-card:hover { translate: none; }
}

@media print {
  .lp-dark,
  .lp-band {
    color: #000 !important;
    background: none !important;
  }

  .lp-dark .lp-h2,
  .lp-band .lp-h2 { color: #000 !important; }

  .lp-mock { display: none !important; }
}