/* ==========================================================================
   EduCore: Public marketing pages — the warm "chalk and board" theme

   Loaded fifth, after tokens / layout / components / modules, by
   includes/layout-marketing.php. Everything here is prefixed .ec-mk so it
   cannot reach into the app.

   ---------------------------------------------------------------------------
   Where the palette went
   ---------------------------------------------------------------------------

   This sheet used to re-key the role tokens inside the .ec-mk scope: the
   application was indigo on cool slate, these pages were green on cream, and
   the override kept the two apart. They are no longer apart. The whole
   scheme — cream field, deep green brand, green-cast ink — is now the
   application's own, declared once in tokens.css, and this file would only
   be restating it. What stays here is what is genuinely local: the --mk-*
   brand extras (amber, the pinned tile green, the doodles) and a type scale
   sized for a page read at arm's length rather than for a marks table.

   The decorative strokes — the underline squiggle, the sparkle, the arrow,
   the spiral — are inline SVG data URIs. That costs bytes but no requests,
   which is the trade this codebase makes everywhere.

   The type scale is still the marketing-local --mk-* block: tokens.css is
   sized for a marks table, a landing page is read at arm's length.
   ========================================================================== */

/* --- Reset the reset -----------------------------------------------------
   [hidden] { display: none !important } is Bootstrap's rule, not the
   browser's. The UA rule is weak enough that any component rule setting a
   display value beats it, so dropping Bootstrap makes `hidden` stop working
   everywhere it is used, and the theme toggle shows a sun and a moon at once.
   -------------------------------------------------------------------------- */

[hidden] { display: none !important; }

/* Taller than the app header (--ec-header-h, 64px), which is sized to sit
   above a data table. The mobile menu drops from exactly this line, and the
   auth screens subtract it from their full-height split — so it is declared on
   the root rather than inside a scope, where only descendants of the header
   could read it. */
:root { --mk-head-h: 68px; }

/* --- Page-local palette and scale -----------------------------------------

   Three selectors, not one. The header and the footer are shared partials now
   — the auth screens render both around a page that is not .ec-mk — so every
   --mk-* token those subtrees resolve has to be in scope on the subtree
   itself, or a sign-in page gets a nav bar with no head height, no brand
   green and no amber underline, and a footer whose type scale collapses to
   the browser default. Declaring them on each root is the whole fix; the
   rules further down override the three that are page-level (background,
   font-size, line-height).

   The sign-in stage itself is deliberately NOT on this list. Its rules live
   in modules.css, which loads before this file, so a `background` declared
   here would win over the stage's own gradient by source order. It reads the
   amber it needs from --ec-chart-2, which is the same hex on the global ramp.
   -------------------------------------------------------------------------- */

.ec-mk,
.ec-mk-head,
.ec-mk-foot {
  /* The role tokens these pages used to re-key are the application's own now.
     See the note at the top of this file, and tokens.css. */

  /* The second brand colour. Amber points; green states. */
  --mk-amber:       #f4a71d;
  --mk-amber-hover: #e29404;
  --mk-amber-ink:   #241d0d;

  /* Solid tile colours, fixed across both themes: a deep green block reads
     the same on cream and on near-black, and pinning it means the white
     text on it never has to renegotiate its contrast. */
  --mk-green:     #266d53;
  --mk-green-ink: #ffffff;

  /* Type: fluid between a 360px phone and a 1140px page. */
  --mk-display: clamp(2.375rem, 1.4rem + 4.2vw, 4.25rem);
  --mk-h2:      clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
  --mk-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --mk-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --mk-body:    1.0625rem;   /* 17 */
  --mk-small:   0.9375rem;   /* 15 */
  --mk-micro:   0.8125rem;   /* 13 */

  --mk-weight-black: 800;

  /* Vertical rhythm. One knob for the whole page. */
  --mk-section-y: clamp(3.5rem, 7vw, 6rem);
  --mk-gutter:    clamp(1.25rem, 4vw, 2rem);

  /* Soft and warm. The reference look is nearly flat; shadow is reserved
     for hover states and the few blocks that float. */
  --mk-shadow-card: 0 12px 32px -14px rgb(30 42 36 / 0.18);
  --mk-shadow-soft: 0 4px 14px -6px rgb(30 42 36 / 0.10);

  /* Hand-drawn strokes, as data URIs. Amber is pinned in the artwork the
     same way the tile green is pinned: it must not dim in dark mode. */
  --mk-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F4A71D' stroke-linecap='round'%3E%3Cpath stroke-width='6' d='M5 12 C 45 5 110 4 155 9'/%3E%3Cpath stroke-width='3.5' d='M30 15 C 72 10 116 9 143 12'/%3E%3C/g%3E%3C/svg%3E");
  --mk-sparkle:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23F4A71D' d='M20 1c1.6 10.8 8.2 17.4 19 19-10.8 1.6-17.4 8.2-19 19-1.6-10.8-8.2-17.4-19-19C11.8 18.4 18.4 11.8 20 1Z'/%3E%3C/svg%3E");
  --mk-arrow:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 72'%3E%3Cg fill='none' stroke='%23266D53' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 64C22 30 54 16 88 22'/%3E%3Cpath d='M78 10l12 12-14 8'/%3E%3C/g%3E%3C/svg%3E");
  --mk-spiral:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23266D53' stroke-width='3.5' stroke-linecap='round' d='M52 32a20 20 0 1 0-20 20 14 14 0 1 0 14-14 8 8 0 1 0-8 8'/%3E%3C/svg%3E");
  --mk-plus:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 8v12M6 14h12'/%3E%3Cpath d='M38 22v12M32 28h12'/%3E%3Cpath d='M56 4v10M51 9h10'/%3E%3C/g%3E%3C/svg%3E");

  background: var(--ec-bg);
  font-size: var(--mk-body);
  line-height: 1.6;
}

/* The dark theme's role tokens are in tokens.css with the light ones. What is
   left here is what only these pages have: the green and amber doodles
   brighten one step so they hold on near-black, and the card shadow deepens
   because a soft warm shadow is invisible on a near-black field. */
[data-theme='dark'] .ec-mk {
  --mk-shadow-card: 0 14px 36px -14px rgb(0 0 0 / 0.55);
  --mk-shadow-soft: 0 4px 14px -6px rgb(0 0 0 / 0.4);

  --mk-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 72'%3E%3Cg fill='none' stroke='%2343A379' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 64C22 30 54 16 88 22'/%3E%3Cpath d='M78 10l12 12-14 8'/%3E%3C/g%3E%3C/svg%3E");
  --mk-spiral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%2343A379' stroke-width='3.5' stroke-linecap='round' d='M52 32a20 20 0 1 0-20 20 14 14 0 1 0 14-14 8 8 0 1 0-8 8'/%3E%3C/svg%3E");
}

/* --- Page rhythm --------------------------------------------------------- */

.ec-mk-wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--mk-gutter);
}

.ec-mk-wrap--narrow { max-width: 800px; }

/* --- Focus, and anchors under the sticky header --------------------------
   layout.css draws one focus ring for the whole application in --ec-accent.
   On these pages that token is #266d53, the exact hex of the green the closing
   band is painted in, so the ring landed green-on-green and a keyboard user
   tabbing into the closing call to action saw nothing at all.

   The ring colour is therefore a variable, defaulting to the text colour
   (near-black on cream, near-white on the dark theme) and re-keyed to white
   inside the green band. It has to be declared on that block
   explicitly: --mk-focus: var(--ec-text) resolves once, where it is declared,
   so re-keying --ec-text further down does not carry into it.
   -------------------------------------------------------------------------- */

.ec-mk { --mk-focus: var(--ec-text); }

.ec-mk :focus-visible {
  outline: 3px solid var(--mk-focus);
  outline-offset: 2px;
  border-radius: var(--ec-radius-sm);
}

/* An anchor target scrolls its top to y=0, which is underneath a 68px sticky
   header. Section padding hides that above ~990px and stops hiding it below,
   which is where an anchored heading starts arriving clipped. */
.ec-mk [id] { scroll-margin-top: calc(var(--mk-head-h) + var(--ec-space-4)); }

.ec-mk-section {
  position: relative;
  padding-block: var(--mk-section-y);
}

.ec-mk-section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.25rem); }

/* The back control the shell puts above the first band. It gets the page's own
   wrap so it lines up with the copy underneath it, and its own top padding
   because the section below is what normally holds the header off the content
   and this now sits between the two. No bottom margin: the section's
   padding-block is already the gap. */
.ec-mk-backbar {
  padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}

.ec-mk-backbar .ec-backbar { margin-block-end: 0; }

/* .ec-mk .ec-btn--ghost above sets padding-inline to --ec-space-4, and it is
   both later in the cascade and no less specific than the rule in layout.css —
   so the chevron landed 8px inside the wrap while the brand above it and the
   cards below it sat on the edge. Restated at .ec-mk depth to win it back. */
.ec-mk .ec-backbar .ec-btn {
  padding-inline: var(--ec-space-2);
  margin-inline-start: calc(var(--ec-space-2) * -1);
}

/* One continuous warm field, on purpose. The reference design never breaks
   the page into grey bands; the tiles and panels carry all the structure.
   The --alt class stays in the markup so a page moved back to a banded
   theme needs no template change — here it only hosts a doodle. */
.ec-mk-section--alt {
  background: transparent;
  border: 0;
}

.ec-mk-section--alt::before {
  content: '';
  position: absolute;
  top: clamp(12px, 2.5vw, 28px);
  right: clamp(12px, 4vw, 48px);
  width: 52px;
  height: 52px;
  background: var(--mk-spiral) no-repeat center / contain;
  opacity: 0.5;
  pointer-events: none;
}

/* --- Section headings ---------------------------------------------------- */

.ec-mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ec-space-2);
  padding: 0.3125rem 0.875rem 0.3125rem 0.75rem;
  border-radius: var(--ec-radius-full);
  background: var(--ec-accent-soft);
  font-size: var(--mk-micro);
  font-weight: var(--ec-weight-semibold);
  letter-spacing: 0.03em;
  color: var(--ec-accent);
  margin-bottom: var(--ec-space-5);
}

.ec-mk-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-amber);
}

.ec-mk-h1 {
  font-size: var(--mk-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--mk-weight-black);
  text-wrap: balance;
}

.ec-mk-h2 {
  font-size: var(--mk-h2);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: var(--mk-weight-black);
  text-wrap: balance;
}

.ec-mk-h3 {
  font-size: var(--mk-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: var(--ec-weight-semibold);
}

/* The hand-drawn underline. The span is emitted by mk_t() in
   includes/layout-marketing.php from *markers* in the language files; see
   the note there. box-decoration-break repeats the stroke on each line if
   the phrase wraps, instead of underlining only the first fragment. */
.ec-mk-hl {
  background-image: var(--mk-underline);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.3em;
  padding-bottom: 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ec-mk-lead {
  font-size: var(--mk-lead);
  line-height: 1.62;
  color: var(--ec-text-muted);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Heading left, lead right, baselines level: the two-column section head
   from the reference. Collapses to a stack in a narrow wrap and on phones. */
.ec-mk-head-block {
  display: grid;
  gap: var(--ec-space-3) clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ec-mk-wrap--narrow .ec-mk-head-block {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* --- Buttons: pills ------------------------------------------------------
   The app button is a 38px rectangle for toolbars. Here everything is a
   pill, the primary is amber with dark ink, and the outline is a white
   pill with a hairline of the text colour — the reference's two buttons. */

.ec-mk .ec-btn {
  height: 48px;
  padding-inline: 1.625rem;
  font-size: var(--mk-small);
  font-weight: var(--ec-weight-semibold);
  border-radius: var(--ec-radius-full);
  transition: background var(--ec-transition-fast), color var(--ec-transition-fast),
    border-color var(--ec-transition-fast), box-shadow var(--ec-transition),
    translate var(--ec-transition);
}

.ec-mk .ec-btn--sm { height: 40px; padding-inline: var(--ec-space-5); }

.ec-mk .ec-btn--primary {
  background: var(--mk-amber);
  color: var(--mk-amber-ink);
  box-shadow: none;
}

.ec-mk .ec-btn--primary:hover {
  background: var(--mk-amber-hover);
  color: var(--mk-amber-ink);
  translate: 0 -1px;
  box-shadow: var(--mk-shadow-soft);
}

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

.ec-mk .ec-btn--outline:hover {
  background: var(--ec-surface);
  border-color: color-mix(in srgb, var(--ec-text) 55%, transparent);
  translate: 0 -1px;
}

.ec-mk .ec-btn--ghost { color: var(--ec-accent); padding-inline: var(--ec-space-4); }
.ec-mk .ec-btn--ghost:hover { color: var(--ec-accent-hover); background: var(--ec-accent-soft); }

/* The chevron leans into the direction of travel on hover. */
.ec-mk .ec-btn svg { transition: translate var(--ec-transition-fast); }
.ec-mk .ec-btn:hover svg:last-child { translate: 2px 0; }

/* --- Sticky site header -------------------------------------------------- */

.ec-mk-head {
  position: sticky;
  top: 0;
  z-index: var(--ec-z-header);
  background: color-mix(in srgb, var(--ec-bg) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ec-transition), box-shadow var(--ec-transition);
}

/* Set by the shell script once the page has scrolled. At the very top the
   header should look like part of the hero, not like a bar bolted above it. */
.ec-mk-head.is-stuck {
  border-bottom-color: var(--ec-border);
  box-shadow: 0 2px 20px -10px rgb(30 42 36 / 0.25);
}

.ec-mk-head__inner {
  display: flex;
  align-items: center;
  gap: var(--ec-space-4);
  min-height: var(--mk-head-h);
}

/* gap: 0, and the spacing moves onto the mark.

   "Edu<span>Core</span>" puts a bare text node next to a span, and flex wraps
   a bare text node in an anonymous flex item — so a gap on this container is
   drawn INSIDE the wordmark and the product's own name renders as "Edu Core"
   on every public page and every sign-in screen. Spacing the mark instead
   leaves the two halves of the word touching, which is what a word is. */
.ec-mk-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: var(--mk-weight-black);
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  color: var(--ec-text);
  white-space: nowrap;
}

.ec-mk-brand .ec-sidebar__logo { margin-inline-end: var(--ec-space-2); }

.ec-mk-brand:hover { color: var(--ec-text); }
.ec-mk-brand span:last-child { color: var(--ec-accent); }

/* The mark rides the brand green here rather than the app's indigo tile. */
.ec-mk-brand .ec-sidebar__logo {
  color: var(--mk-green-ink);
  background: var(--mk-green);
  border-radius: 12px;
}

.ec-mk-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.ec-mk-nav__link {
  position: relative;
  padding: var(--ec-space-2) var(--ec-space-3);
  border-radius: var(--ec-radius-full);
  font-size: var(--mk-small);
  font-weight: var(--ec-weight-medium);
  color: var(--ec-text-muted);
  white-space: nowrap;
  transition: color var(--ec-transition-fast), background var(--ec-transition-fast);
}

.ec-mk-nav__link:hover {
  color: var(--ec-text);
  background: var(--ec-surface-hover);
}

.ec-mk-nav__link.is-active { color: var(--ec-text); font-weight: var(--ec-weight-semibold); }

.ec-mk-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: var(--ec-space-3);
  right: var(--ec-space-3);
  bottom: 1px;
  height: 3px;
  border-radius: var(--ec-radius-full);
  background: var(--mk-amber);
}

.ec-mk-nav__sep {
  width: 1px;
  height: 22px;
  background: var(--ec-border);
  margin-inline: var(--ec-space-3);
}

.ec-mk-head__tools {
  display: flex;
  align-items: center;
  gap: var(--ec-space-1);
  margin-left: var(--ec-space-2);
}

/* .ec-icon-btn is a 36x36 grid box built for exactly one icon. The language
   switcher is the only one on the site carrying an icon AND a label, and grid
   auto-flow stacked them into two rows, pushing the "FR" out of the button.
   It opts out into a flex pill instead. */
/* .ec-langbtn and .ec-lang moved to components.css when the application shell
   grew a language switcher of its own: two shells, one control, one rule. */

.ec-mk-burger { display: none; }

/* --- Hero ---------------------------------------------------------------- */

.ec-mk-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}

.ec-mk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.ec-mk-hero__copy { position: relative; }

.ec-mk-hero .ec-mk-h1 { max-width: 15ch; }

.ec-mk-hero__sub {
  margin-top: var(--ec-space-6);
  font-size: var(--mk-lead);
  line-height: 1.62;
  color: var(--ec-text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.ec-mk-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-3);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.ec-mk-note {
  margin-top: var(--ec-space-4);
  font-size: var(--mk-small);
  color: var(--ec-text-subtle);
}

/* The board: the reference puts a photograph on a green rounded panel.
   This product ships no photographs, so the panel is drawn instead — the
   deep green tile, a chalk-dot field, the graduation mark from the shared
   icon sprite, and three floating chips. Decoration only, and the markup
   carries aria-hidden, so it costs a screen reader nothing. */

.ec-mk-hero__art {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Sketch marks either side of the board. */
.ec-mk-hero__art::before {
  content: '';
  position: absolute;
  top: -16px;
  right: 6%;
  width: 34px;
  height: 34px;
  background: var(--mk-sparkle) no-repeat center / contain;
  pointer-events: none;
}

.ec-mk-hero__art::after {
  content: '';
  position: absolute;
  bottom: 6%;
  left: -58px;
  width: 82px;
  height: 62px;
  background: var(--mk-arrow) no-repeat center / contain;
  pointer-events: none;
}

.ec-mk-hero__board {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  background-color: var(--mk-green);
  background-image: radial-gradient(rgb(255 255 255 / 0.13) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--mk-shadow-card);
}

/* The amber corner, clipped by the board's own radius. */
.ec-mk-hero__board::after {
  content: '';
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--mk-amber);
}

.ec-mk-hero__cap {
  width: clamp(110px, 11vw, 150px);
  height: clamp(110px, 11vw, 150px);
  color: rgb(255 255 255 / 0.95);
}

/* --- The cut-out pupil ---------------------------------------------------
   A cut-out has no frame of its own, so the panel becomes the frame. Three
   things follow from that and none of them are optional:

   * the board goes taller than its 5:4 default, because a standing figure
     cropped to a landscape tile is cropped at the knees and the chin;
   * `object-fit: cover` with `object-position: bottom` pins the feet to the
     bottom edge, so the head has the slack when the panel narrows. Centring
     instead takes the crop off the top, which beheads the subject at exactly
     the widths a laptop uses;
   * the figure overflows the panel's top edge deliberately — that is the look
     the design is after — so the board's own `overflow: hidden` is lifted and
     the amber corner gets clipped by its own radius instead.
   -------------------------------------------------------------------------- */

.ec-mk-hero__board--photo {
  aspect-ratio: 1 / 1.06;
  display: block;
  overflow: visible;
}

.ec-mk-hero__board--photo::after {
  /* Re-clipped, now that the board no longer clips its own children. */
  right: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  clip-path: inset(0 0 0 0 round 0 0 28px 0);
  background: radial-gradient(circle at 100% 100%, var(--mk-amber) 118px, transparent 119px);
}

.ec-mk-hero__cutout {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  /* Sized by HEIGHT, with the width left to follow.
     A cut-out is a tall portrait once its transparent margins are trimmed, so
     fixing both axes and leaning on object-fit letterboxes it: the box stays
     the panel's shape and the figure shrinks inside it to about two thirds of
     the width, leaving a child adrift in the middle of a tile. Driving the
     height and letting the width fall out of the aspect ratio means the
     rendered size is the figure, with no dead box around it. */
  width: auto;
  height: 128%;
  max-width: none;
  object-position: bottom center;
  /* Grounds the cut-out on the panel. Without it the figure floats, which is
     what makes a bad composite look pasted on. */
  filter: drop-shadow(0 18px 24px rgb(30 42 36 / 0.28));
  pointer-events: none;
}

/* The chips sit over the photo, so they need to outrank it. */
.ec-mk-hero__board--photo .ec-mk-hero__chip { z-index: 2; }

.ec-mk-hero__chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--mk-green);
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.35);
}

.ec-mk-hero__chip--1 { top: 14%; left: 10%; rotate: -6deg; }
.ec-mk-hero__chip--2 { top: 12%; right: 13%; rotate: 5deg; }
.ec-mk-hero__chip--3 {
  bottom: 16%;
  left: 16%;
  rotate: 4deg;
  background: var(--mk-amber);
  color: var(--mk-amber-ink);
}

/* --- Proof strip: solid stat tiles ---------------------------------------
   The reference renders its numbers as solid green and amber blocks. The
   alternation is nth-child, so adding a fifth figure costs nothing. */

.ec-mk-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--ec-space-4);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.ec-mk-proof > div {
  background: var(--mk-green);
  color: var(--mk-green-ink);
  border-radius: 20px;
  padding: var(--ec-space-6) var(--ec-space-6) var(--ec-space-5);
}

.ec-mk-proof > div:nth-child(even) {
  background: var(--mk-amber);
  color: var(--mk-amber-ink);
}

.ec-mk-proof__n {
  display: block;
  font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.625rem);
  font-weight: var(--mk-weight-black);
  letter-spacing: -0.035em;
  line-height: 1;
  color: inherit;
}

.ec-mk-proof__l {
  display: block;
  margin-top: var(--ec-space-2);
  font-size: var(--mk-micro);
  line-height: 1.4;
  color: inherit;
  opacity: 0.85;
}

/* --- Card grids: soft warm tiles ------------------------------------------ */

.ec-mk-grid {
  display: grid;
  gap: var(--ec-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.ec-mk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.ec-mk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.ec-mk-card {
  background: var(--ec-surface-2);
  border: 0;
  border-radius: 20px;
  padding: clamp(1.5rem, 2.5vw, 1.875rem);
  transition: background var(--ec-transition), box-shadow var(--ec-transition),
    translate var(--ec-transition);
}

.ec-mk-card:hover {
  background: var(--ec-surface);
  box-shadow: var(--mk-shadow-card);
  translate: 0 -3px;
}

[data-theme='dark'] .ec-mk-card:hover { background: var(--ec-surface-hover); }

/* A white disc on the warm tile; on hover it turns board-green, which is
   the only motion a card needs beyond its lift. */
.ec-mk-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ec-surface);
  color: var(--ec-accent);
  box-shadow: var(--mk-shadow-soft);
  margin-bottom: var(--ec-space-5);
  transition: background var(--ec-transition), color var(--ec-transition);
}

.ec-mk-card:hover .ec-mk-card__icon {
  background: var(--mk-green);
  color: var(--mk-green-ink);
}

.ec-mk-card__title {
  font-size: var(--mk-h3);
  font-weight: var(--ec-weight-semibold);
  letter-spacing: -0.015em;
  margin-bottom: var(--ec-space-2);
}

.ec-mk-card__body {
  font-size: var(--mk-small);
  line-height: 1.62;
  color: var(--ec-text-muted);
  text-wrap: pretty;
}

/* --- Feature module blocks (the Features page) --------------------------- */

.ec-mk-module {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 0;
  border-radius: 20px;
  background: var(--ec-surface-2);
  transition: box-shadow var(--ec-transition), background var(--ec-transition);
}

.ec-mk-module:hover { box-shadow: var(--mk-shadow-soft); }

.ec-mk-module + .ec-mk-module { margin-top: var(--ec-space-5); }

.ec-mk-module__head {
  display: flex;
  align-items: flex-start;
  gap: var(--ec-space-4);
  margin-bottom: var(--ec-space-6);
}

/* Same disc as the cards use, without the trailing gap. */
.ec-mk-module__icon { margin-bottom: 0; flex: none; }

.ec-mk-module__head p { font-size: var(--mk-small); }

/* --- Checklists ---------------------------------------------------------- */

.ec-mk-list {
  display: grid;
  gap: var(--ec-space-4);
}

.ec-mk-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ec-space-3);
  font-size: var(--mk-small);
  line-height: 1.62;
  color: var(--ec-text-muted);
  text-wrap: pretty;
}

/* The tick sits in its own disc so a wrapped line stays optically aligned. */
.ec-mk-list li > svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ec-accent-soft);
  color: var(--ec-accent);
}

.ec-mk-list--cols {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  column-gap: var(--ec-space-8);
}

/* --- Numbered steps ------------------------------------------------------ */

.ec-mk-steps {
  display: grid;
  gap: var(--ec-space-6);
  counter-reset: ec-step;
}

.ec-mk-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--ec-space-5);
  align-items: start;
}

.ec-mk-step::before {
  counter-increment: ec-step;
  content: counter(ec-step);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mk-amber);
  color: var(--mk-amber-ink);
  font-size: var(--mk-small);
  font-weight: var(--mk-weight-black);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

/* The rail that ties the numbers together. Drawn from each step except the
   last, so it never dangles past the end of the sequence. */
.ec-mk-step::after {
  content: '';
  position: absolute;
  top: 44px;
  bottom: calc(var(--ec-space-6) * -1);
  left: 21px;
  width: 2px;
  background: color-mix(in srgb, var(--mk-amber) 45%, transparent);
}

.ec-mk-step:last-child::after { display: none; }

.ec-mk-step__title {
  font-size: var(--mk-h3);
  font-weight: var(--ec-weight-semibold);
  letter-spacing: -0.015em;
  margin-bottom: var(--ec-space-2);
  padding-top: 0.5rem;
}

.ec-mk-step__body {
  font-size: var(--mk-small);
  line-height: 1.62;
  color: var(--ec-text-muted);
  text-wrap: pretty;
  padding-bottom: var(--ec-space-2);
}

/* --- Split section ------------------------------------------------------- */

.ec-mk-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: center;
}

/* --- Metric row ---------------------------------------------------------- */

.ec-mk-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--ec-space-4);
  margin-top: var(--ec-space-6);
}

.ec-mk-metric {
  background: var(--ec-surface-2);
  border: 0;
  border-radius: 16px;
  padding: var(--ec-space-5);
}

.ec-mk-metric__v {
  display: block;
  font-size: 1.375rem;
  font-weight: var(--mk-weight-black);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ec-accent);
}

.ec-mk-metric__l {
  display: block;
  margin-top: var(--ec-space-2);
  font-size: var(--mk-micro);
  line-height: 1.4;
  color: var(--ec-text-muted);
}

/* --- Photograph -----------------------------------------------------------
   One band of photography per page, and never more than one.

   These are portrait sources cropped to a landscape band by object-fit, so the
   focal point is not the centre of the file: `object-position` pulls the crop
   up to 30% so faces survive it. A photograph of the top of somebody's head is
   the default outcome of centring a 3:4 source in a 16:9 box.

   The radius and border match .ec-mk-card rather than being a second visual
   language, because a photograph in a different frame from every other block
   reads as a widget that arrived from somewhere else.
   -------------------------------------------------------------------------- */

.ec-mk-shot {
  margin: 0;
  overflow: hidden;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 24px;
  box-shadow: var(--mk-shadow-card);
}

.ec-mk-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Landscape band. Taller on a phone, where 16:9 of a portrait source crops to
   a letterbox slit and shows nothing at all. */
.ec-mk-shot--band { aspect-ratio: 16 / 7; }

/* For a source whose subject sits low in the frame. The bursary photograph is
   shot from across the room and its subject is in the bottom third, so the
   default 30% crops her head off at the lower edge — visible only by rendering
   the crop, since the file itself looks correct. */
.ec-mk-shot--low img { object-position: center 55%; }

@media (max-width: 700px) {
  .ec-mk-shot--band { aspect-ratio: 4 / 3; }
}

/* --- Callout ------------------------------------------------------------- */

.ec-mk-callout {
  display: flex;
  gap: var(--ec-space-4);
  padding: var(--ec-space-5);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mk-amber) 40%, transparent);
  background: color-mix(in srgb, var(--mk-amber) 9%, var(--ec-surface));
  font-size: var(--mk-small);
  line-height: 1.62;
  color: var(--ec-text-muted);
}

.ec-mk-callout > svg { flex: none; margin-top: 2px; color: var(--mk-amber-hover); }

/* --- Questions and the honest-limits list -------------------------------- */

.ec-mk-qa {
  border-top: 1px solid var(--ec-border);
  padding-block: var(--ec-space-6);
}

.ec-mk-qa:last-child { border-bottom: 1px solid var(--ec-border); }

.ec-mk-qa__q {
  font-size: var(--mk-h3);
  font-weight: var(--ec-weight-semibold);
  letter-spacing: -0.015em;
  margin-bottom: var(--ec-space-3);
}

.ec-mk-qa__a {
  font-size: var(--mk-small);
  line-height: 1.68;
  color: var(--ec-text-muted);
  max-width: 74ch;
  text-wrap: pretty;
}

.ec-mk-limits { display: grid; gap: var(--ec-space-4); }

.ec-mk-limit {
  display: grid;
  gap: var(--ec-space-2);
  padding: var(--ec-space-5) var(--ec-space-6);
  border: 1px solid var(--ec-border);
  border-left: 4px solid var(--mk-amber);
  border-radius: 16px;
  background: var(--ec-surface);
}

/* The two paragraphs inside a limit carry the question styles; the block
   supplies the spacing, so they reset their own. */
.ec-mk-limit > p { margin: 0; }
.ec-mk-limit > .ec-mk-qa__q { font-size: var(--mk-body); }

/* --- Closing call to action: the green band ------------------------------- */

.ec-mk-band {
  --ec-text:        #ffffff;
  --ec-text-muted:  rgb(255 255 255 / 0.8);
  /* 0.65 composited to 3.63:1 on the green. This clears 4.6:1, which the
     register sub-line needs: it is body text, not a watermark. */
  --ec-text-subtle: rgb(255 255 255 / 0.8);
  --mk-focus:       #ffffff;

  position: relative;
  border: 0;
  border-radius: 28px;
  background: var(--mk-green);
  color: #ffffff;
  padding: clamp(2.5rem, 6vw, 4.25rem) clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: var(--mk-shadow-card);
  overflow: hidden;
}

.ec-mk-band::before {
  content: '';
  position: absolute;
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 4vw, 44px);
  width: 36px;
  height: 36px;
  background: var(--mk-sparkle) no-repeat center / contain;
  pointer-events: none;
}

.ec-mk-band::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: clamp(14px, 4vw, 44px);
  width: 60px;
  height: 42px;
  background: var(--mk-plus) no-repeat center / contain;
  opacity: 0.55;
  pointer-events: none;
}

.ec-mk-band .ec-mk-cta { justify-content: center; }
.ec-mk-band .ec-mk-lead { margin-inline: auto; }
.ec-mk-band .ec-mk-note { text-align: center; }

/* --- The band, with a pupil on it ----------------------------------------
   Only the home page's closing band takes the photograph, so everything here
   hangs off the modifier and the centred text band above is left alone.

   The photo column is fixed and the copy column takes the rest, rather than
   a 1fr/1fr split: a cut-out has a natural width and stretching it to half a
   1140px band makes a life-size child. Below 760px the photo is dropped
   rather than stacked — a cut-out above a call to action pushes the buttons
   below the fold on a phone, and the buttons are the point of the band.
   -------------------------------------------------------------------------- */

.ec-mk-band--photo {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  text-align: left;
  padding-block: 0 0;
  padding-inline: clamp(1.5rem, 5vw, 3.5rem);
}

/* Left-aligned here, so the centring rules above are undone rather than
   fought with a more specific selector further down the sheet. */
.ec-mk-band--photo .ec-mk-cta { justify-content: flex-start; }
.ec-mk-band--photo .ec-mk-lead { margin-inline: 0; }
.ec-mk-band--photo .ec-mk-note { text-align: left; }

.ec-mk-band__copy { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

/* The figure stands on the band's bottom edge: the column is the full height
   of the band and the image is bottom-aligned inside it, so the cut-out's
   feet meet the panel rather than floating above it. */
.ec-mk-band__art {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 240px;
}

/* `contain`, not `cover`.
   The source is a square frame with a standing figure and whatever they are
   carrying inside it. Filling a tall narrow column with `cover` would crop the
   sides, and the sides are where the book and the backpack are. Letting it
   letterbox keeps the whole subject and costs only some empty panel above the
   head, which the band's own colour fills anyway. */
.ec-mk-band__cutout {
  display: block;
  /* Height-driven for the same reason as the hero, and here it is also what
     keeps the figure inside the band: at 320px wide this portrait would stand
     627px tall in a 440px band, and the band clips its own overflow, so the
     head would be cut off rather than the image simply being large. */
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 22px rgb(0 0 0 / 0.3));
}

@media (max-width: 760px) {
  .ec-mk-band--photo {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    padding-inline: clamp(1.5rem, 5vw, 3.5rem);
  }

  .ec-mk-band--photo .ec-mk-cta { justify-content: center; }
  .ec-mk-band--photo .ec-mk-lead { margin-inline: auto; }
  .ec-mk-band--photo .ec-mk-note { text-align: center; }
  .ec-mk-band__art { display: none; }
}

/* The outline pill inverts on green. */
.ec-mk-band .ec-btn--outline {
  background: transparent;
  color: #ffffff;
  border-color: rgb(255 255 255 / 0.5);
}

.ec-mk-band .ec-btn--outline:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: #ffffff;
  color: #ffffff;
}

/* --- Contact channels ---------------------------------------------------- */

.ec-mk-channels {
  display: grid;
  gap: var(--ec-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.ec-mk-channel {
  display: flex;
  align-items: center;
  gap: var(--ec-space-4);
  padding: var(--ec-space-4) var(--ec-space-5);
  border: 0;
  border-radius: 16px;
  background: var(--ec-surface-2);
  color: var(--ec-text);
  font-size: var(--mk-small);
  font-weight: var(--ec-weight-semibold);
  transition: box-shadow var(--ec-transition), translate var(--ec-transition),
    background var(--ec-transition);
}

.ec-mk-channel:hover {
  background: var(--ec-surface);
  box-shadow: var(--mk-shadow-card);
  translate: 0 -2px;
  color: var(--ec-text);
}

[data-theme='dark'] .ec-mk-channel:hover { background: var(--ec-surface-hover); }

.ec-mk-channel > svg {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background: var(--ec-surface);
  color: var(--ec-accent);
  box-shadow: var(--mk-shadow-soft);
  transition: background var(--ec-transition), color var(--ec-transition);
}

.ec-mk-channel:hover > svg {
  background: var(--mk-green);
  color: var(--mk-green-ink);
}

.ec-mk-channel small {
  display: block;
  margin-top: 2px;
  font-size: var(--mk-micro);
  font-weight: 400;
  color: var(--ec-text-muted);
}

/* --- Lead form ----------------------------------------------------------- */

.ec-mk-form {
  border: 1px solid var(--ec-border);
  border-radius: 24px;
  background: var(--ec-surface);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--mk-shadow-soft);
}

.ec-mk-form__row {
  display: grid;
  gap: 0 var(--ec-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.ec-mk-form .ec-input,
.ec-mk-form .ec-select {
  height: 46px;
  font-size: var(--mk-small);
  border-radius: 12px;
}

.ec-mk-form textarea.ec-input {
  min-height: 118px;
  height: auto;
  resize: vertical;
}

.ec-mk-form label { font-size: var(--mk-small); }

/* --- Site footer ---------------------------------------------------------
   Deliberately dark in both themes. It is the site's closing band, painted
   straight from the ink ramp rather than the role tokens, so the light theme
   ends on the same near-black panel the dark theme does. Everything inside
   therefore names its own colours instead of inheriting the page's.
   -------------------------------------------------------------------------- */

.ec-mk-foot {
  margin-top: 0;
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--ec-space-6);
  color: var(--ec-ink-50);
  background: var(--ec-ink-950);
  border-top: 1px solid var(--ec-ink-800);
}

.ec-mk-foot__grid {
  display: grid;
  gap: var(--ec-space-8);
  grid-template-columns: minmax(240px, 1.6fr) minmax(150px, 1fr) minmax(170px, 1fr) minmax(230px, 1.2fr);
}

/* Brand block: tile, name over tagline, then the description. */
.ec-mk-foot__id {
  display: inline-flex;
  gap: var(--ec-space-3);
  align-items: center;
  color: inherit;
}

.ec-mk-foot__id:hover { color: inherit; }

.ec-mk-foot__name {
  display: block;
  font-size: var(--ec-text-base);
  font-weight: var(--ec-weight-bold);
  letter-spacing: -0.02em;
}

.ec-mk-foot__name span { color: var(--ec-primary-400); }

.ec-mk-foot__tagline {
  display: block;
  font-size: var(--mk-small);
  color: var(--ec-ink-200);
}

.ec-mk-foot__desc {
  max-width: 40ch;
  margin-block: var(--ec-space-4);
  font-size: var(--mk-small);
  color: var(--ec-ink-200);
}

/* The accent link, used twice: under the brand and beside the QR. */
.ec-mk-foot__cta {
  display: inline-flex;
  gap: var(--ec-space-1);
  align-items: center;
  font-size: var(--mk-small);
  font-weight: var(--ec-weight-medium);
  color: var(--ec-primary-400);
}

.ec-mk-foot__cta:hover { color: var(--ec-primary-300); }

.ec-mk-foot__head {
  font-size: var(--ec-text-xs);
  font-weight: var(--ec-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-ink-300);
  margin-bottom: var(--ec-space-4);
}

/* A second heading stacked under a first list in the same column. */
.ec-mk-foot__head--stack { margin-top: var(--ec-space-6); }

.ec-mk-foot__list { display: grid; gap: var(--ec-space-3); }

.ec-mk-foot__list a {
  display: inline-flex;
  gap: var(--ec-space-2);
  align-items: center;
  font-size: var(--mk-small);
  color: var(--ec-ink-200);
}

.ec-mk-foot__list a svg { opacity: 0.7; flex-shrink: 0; }

.ec-mk-foot__list a:hover { color: var(--ec-primary-400); }

/* The install code: white tile, because a QR needs its own quiet field and
   a scanner will not read dark-on-dark. */
.ec-mk-foot__app {
  display: flex;
  gap: var(--ec-space-4);
  align-items: flex-start;
}

.ec-mk-foot__qr {
  display: block;
  flex-shrink: 0;
  width: 92px;
  padding: 4px;
  background: #fff;
  border-radius: var(--ec-radius-md);
}

.ec-mk-foot__qr svg { display: block; width: 100%; height: auto; }

.ec-mk-foot__scan {
  font-size: var(--mk-small);
  font-weight: var(--ec-weight-medium);
}

.ec-mk-foot__hint {
  margin-block: var(--ec-space-2) var(--ec-space-3);
  font-size: var(--mk-small);
  color: var(--ec-ink-300);
}

.ec-mk-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ec-space-3) var(--ec-space-6);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--ec-space-5);
  border-top: 1px solid var(--ec-ink-800);
  font-size: var(--mk-micro);
  color: var(--ec-ink-300);
}

.ec-mk-foot__lang {
  color: var(--ec-ink-300);
  margin-left: var(--ec-space-4);
}

.ec-mk-foot__lang:first-child { margin-left: 0; }

.ec-mk-foot__lang:hover { color: var(--ec-primary-400); }

.ec-mk-foot__lang.is-active {
  color: var(--ec-ink-50);
  font-weight: var(--ec-weight-semibold);
}

/* --- Entrance ------------------------------------------------------------
   The .ec-mk-reveal class is added by script, never by the server, so a
   visitor without JavaScript is served a page with nothing hidden on it.
   -------------------------------------------------------------------------- */

.ec-mk-reveal {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-mk-reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ec-mk-reveal { opacity: 1; translate: 0 0; transition: none; }
  .ec-mk *, .ec-mk *::before, .ec-mk *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .ec-mk .ec-btn:hover,
  .ec-mk-card:hover,
  .ec-mk-channel:hover { translate: none; }
}

/* --- Small screens ------------------------------------------------------- */

/* 1140px. It moved twice for the same reason, and then the reason went away.

   Kept at 1140 rather than lowered: with the grouped header the French
   intrinsic width is 1012px, which would fit inside a 1024px viewport's wrap
   only by 4px. That is not a margin, it is a coincidence, and the next
   translated label would eat it.

   The history below is why the number is measured rather than picked.
   The header lays out brand + horizontal nav + tools on one line, and the
   French labels are the long ones. It was 900px until "Fonctionnalites",
   "Se connecter" and the register pill were measured together at about
   1105px, and a French visitor on a 1000px window got 120px of horizontal
   page scroll. Adding "Types d'ecole" as a fifth item pushed the intrinsic
   width of .ec-mk-head__inner to 1099px: measured, not estimated — at a
   1045px viewport the row overflowed its container by 54px and the document
   scrolled sideways. 1140 is that plus a margin.

   Then eleven public pages arrived. Seven flat items measured 1214px in
   French, which would have pushed this number past 1280 and handed a burger
   to every laptop — so the header was grouped into two disclosure menus and
   two links instead, and the intrinsic width fell to 1012px. Three more
   destinations, two hundred fewer pixels.
   The measurement to repeat when these labels change is the intrinsic width
   of .ec-mk-head__inner in French. Set the viewport just above the current
   breakpoint, read .ec-mk-head__inner.scrollWidth - .clientWidth, and if it
   is not zero this number is too small. */
@media (max-width: 1139.98px) {
  .ec-mk-burger { display: inline-flex; }

  .ec-mk-nav {
    position: absolute;
    inset: var(--mk-head-h) 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ec-space-1);
    padding: var(--ec-space-4) var(--mk-gutter) var(--ec-space-6);
    background: var(--ec-bg);
    border-bottom: 1px solid var(--ec-border);
    box-shadow: var(--ec-shadow-lg);
  }

  .ec-mk-nav.is-open { display: flex; }
  .ec-mk-nav__sep { display: none; }
  .ec-mk-nav__link { padding: var(--ec-space-3); font-size: var(--mk-body); }
  .ec-mk-nav__link.is-active::after { display: none; }
  .ec-mk-nav .ec-btn { justify-content: center; margin-top: var(--ec-space-3); }
  .ec-mk-head__tools { margin-left: auto; }

  .ec-mk-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ec-mk-hero__art { display: none; }
}

@media (max-width: 768px) {
  .ec-mk-head-block {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* Doodles add nothing at phone width but clutter. */
@media (max-width: 700px) {
  .ec-mk-section--alt::before,
  .ec-mk-band::before,
  .ec-mk-band::after { display: none; }
}

@media (max-width: 560px) {
  .ec-mk-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-mk-proof > div { padding: var(--ec-space-4) var(--ec-space-5); }

  .ec-mk-cta .ec-btn { width: 100%; }
  .ec-mk-step { grid-template-columns: 38px 1fr; gap: var(--ec-space-4); }
  .ec-mk-step::before { width: 38px; height: 38px; }
  .ec-mk-step::after { top: 38px; left: 18px; }
}

/* The footer's four fixed tracks need roughly 990px before they fit. Below
   that the brand takes a row of its own and the link columns pair up; on a
   phone everything stacks. */
@media (max-width: 1020px) {
  .ec-mk-foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-6) var(--ec-space-5);
  }

  .ec-mk-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .ec-mk-foot__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- The few Bootstrap utilities these pages used ------------------------
   Reimplemented rather than kept as a reason to load 232 KB of framework.
   Same names on purpose: a page moved between shells keeps working.
   -------------------------------------------------------------------------- */

.mt-1 { margin-top: var(--ec-space-1) !important; }
.mt-2 { margin-top: var(--ec-space-2) !important; }
.mt-3 { margin-top: var(--ec-space-3) !important; }
.mt-4 { margin-top: var(--ec-space-4) !important; }
.mt-5 { margin-top: var(--ec-space-6) !important; }
.mb-1 { margin-bottom: var(--ec-space-1) !important; }
.mb-2 { margin-bottom: var(--ec-space-2) !important; }
.mb-3 { margin-bottom: var(--ec-space-3) !important; }
.mb-4 { margin-bottom: var(--ec-space-4) !important; }
.mb-5 { margin-bottom: var(--ec-space-6) !important; }

.ec-mk .w-100 { width: 100% !important; }
.ec-mk .text-center { text-align: center !important; }

/* --- Print ---------------------------------------------------------------
   Browsers drop background colours by default. The band and the green proof
   tiles both pin white ink on a painted background, so without this block
   their text printed white on white — the closing call to action disappeared
   from the page entirely. Rather than force
   backgrounds on and spend a cartridge on solid green slabs, the painted
   blocks become plain bordered ones and their ink returns to black.
   -------------------------------------------------------------------------- */

@media print {
  .ec-mk-head, .ec-mk-foot, .ec-mk-cta, .ec-mk-hero__art { display: none !important; }
  .ec-mk-reveal { opacity: 1 !important; translate: none !important; }

  .ec-mk-band, .ec-mk-proof > div, .ec-front-stats {
    --ec-text:        #000000;
    --ec-text-muted:  #333333;
    --ec-text-subtle: #333333;
    background: none !important;
    color: #000000 !important;
    border: 1px solid #999999 !important;
    box-shadow: none !important;
  }

  .ec-mk-band::before, .ec-mk-band::after,
  .ec-mk-section--alt::before { display: none !important; }

  /* The counters and the tick discs also rely on a fill to be visible. */
  .ec-mk-step::before {
    background: none !important;
    color: #000000 !important;
    box-shadow: inset 0 0 0 1px #999999 !important;
  }

  .ec-mk-hl { background-image: none !important; }
}