/* ===========================================================================
   THE FIVE REDESIGNED PAGES.

   Nick supplied five design files on 2026-08-13 and asked for them to be built
   into the site: the eight promises, the Karma Club, the story behind our
   network, questions people ask, and apply to join. He asked for the designs
   only, and specifically NOT the navigation, which is untouched.

   ⚠️ THIS IS A COMPOSITION REDESIGN, NOT A REBRAND. The supplied designs use
   the same palette and the same typeface the site already runs: #1F7A47,
   #FBFAF6, Open Sans. What changes is layout, pacing and hierarchy. So this
   file adds NO new colours. It aliases the design's token names onto the
   values base.css already defines, which keeps one source of truth for the
   brand and lets the page rules below read exactly like the supplied files.

   Loaded after front-door.css. Anything shared with the rest of the site stays
   in front-door.css; only these five pages' components live here.
   =========================================================================== */

:root {
  /* Aliases. Same values, the design's names, so a rule ported from a supplied
     file does not have to be translated line by line and then checked. */
  --ean-green-900: var(--green-900);
  --ean-green-800: var(--green-800);
  --ean-green-700: var(--green-700);
  --ean-green-600: var(--green-600);
  --ean-green-500: var(--green-500);
  --ean-green-400: var(--green-400);
  --ean-green-200: var(--green-200);
  --ean-green-100: var(--green-100);
  --ean-green-050: var(--green-050);

  /* Genuinely absent from base.css, taken from the supplied token block. */
  --ean-green-300: #A6DCBC;
  --ink-800: #1C1C1A;
  --ink-400: #8E8E88;

  --fg:         var(--ink-900);
  --fg-muted:   var(--ink-600);
  --fg-subtle:  var(--ink-500);
  --border:     var(--ink-200);
  --accent:     var(--green-700);

  --font-display: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-pill: var(--r-pill);

  --tracking-tight: -0.02em;
  --tracking-stamp: 0.12em;

  --ease-out: var(--ease);
  --dur-base: var(--dur);
}

/* ---------------------------------------------------------------------------
   SHARED COMPONENTS across the five pages
   --------------------------------------------------------------------------- */

.dp { background: var(--paper); }

/* ⚠️ THE SITE HEADER IS position:fixed, SO IT TAKES UP NO SPACE IN THE FLOW.
   Every interior page in the rest of the theme clears it with
   `.page-head { padding-top: 190px }`. These five pages replaced .page-head
   with their own hero and inherited no clearance, so the eyebrow and the top of
   the headline sat UNDERNEATH the navigation bar on all five. Reported by Nick
   on 2026-08-13: "every one of the new pages are too far up so part of it is
   hidden behind the navigation bar".

   The clearance goes on the FIRST block inside #main, whatever it is, so a page
   that later opens on a green band is covered too. Do not remove it, and do not
   move it onto .dp-hero: the apply page has no hero. */
#main > .dp:first-child,
#main > .dp-band:first-child,
#main > section:first-child.dp-band { padding-top: 104px; }
.dp-wrap { max-width: 1280px; margin: 0 auto; padding-left: 44px; padding-right: 44px; }
/* ⚠️ THE GUTTER IS AN INVARIANT. DO NOT SET SHORTHAND `padding` ON A .dp-wrap.
   Found on a real iPhone, 2026-09-03: About us ran hard to both edges because
   `.story-open` sat ON the wrap and set `padding: 76px 0 84px`, and the
   shorthand resets padding-left and padding-right to zero. Three other rules
   had the same fault. It hides on a laptop, where max-width leaves margin
   either side anyway, and only shows on a narrow screen.
   Doubling the class raises specificity to (0,2,0) so it beats any single
   class modifier regardless of source order. Use padding-block for vertical
   padding on anything that also carries .dp-wrap. If a wrap ever genuinely
   needs to bleed to the edge, give it its own class and set padding-inline: 0
   with two classes, not one. */
.dp-wrap.dp-wrap { padding-inline: 44px; }

/* The small stamped label above a heading. Present throughout the supplied
   designs as a deliberate editorial device at 12px with wide tracking, which is
   what keeps it a stamp rather than a shout. */
.dp-eyebrow {
  font: 800 12px/1.2 var(--font-display);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ean-green-700);
  margin: 0 0 18px;
}
.dp-eyebrow--light { color: var(--ean-green-300); }

.dp-h1 {
  font: 800 clamp(2.25rem, 4.6vw, 3.5rem)/1.03 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0 0 20px;
  text-wrap: balance;
}
.dp-h2 {
  font: 800 clamp(1.75rem, 3.2vw, 2.5rem)/1.15 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0 0 18px;
  text-wrap: balance;
}
.dp-h3 {
  font: 700 1.3125rem/1.3 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink-900);
  margin: 0 0 10px;
}
.dp-lede {
  font: 400 1.1875rem/1.55 var(--font-body);
  color: var(--fg-muted);
  margin: 0 0 28px;
  max-width: 56ch;
  text-wrap: pretty;
}
.dp-body { font: 400 1.125rem/1.65 var(--font-body); color: var(--fg-muted); margin: 0 0 14px; text-wrap: pretty; }
.dp-note { font: 400 .875rem/1.5 var(--font-body); color: var(--ink-400); margin: 0; }

/* Two column hero: words one side, a photograph the other. */
.dp-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; padding: 64px 0 56px; align-items: center; }
.dp-hero-shot {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  object-fit: cover;
  width: 100%; height: 100%;
  display: block;
  box-shadow: var(--shadow-md);
}
.dp-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* A full bleed band. The green ones carry the page's pauses. */
.dp-band { padding: 72px 0; }
.dp-band--700 { background: var(--ean-green-700); color: var(--white); }
.dp-band--900 { background: var(--ean-green-900); color: var(--white); }
.dp-band--100 { background: var(--ean-green-100); }
.dp-band--050 { background: var(--ean-green-050); }
.dp-band--700 .dp-h2, .dp-band--900 .dp-h2 { color: var(--white); }
.dp-band--700 .dp-body, .dp-band--900 .dp-body { color: rgba(255,255,255,.86); }
.dp-band--700 .dp-lede, .dp-band--900 .dp-lede { color: rgba(255,255,255,.86); }

/* A rule with a label at each end, used to open a list. */
.dp-rule {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 0;
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}
.dp-rule-label {
  font: 800 12px/1.2 var(--font-display);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ink-500);
}
.dp-rule-hint { font: 400 .875rem/1.4 var(--font-body); color: var(--ink-500); }

/* Split: a square photograph beside a block of words. */
.dp-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; padding-block: 0 80px; }
.dp-split--flip { grid-template-columns: 1.15fr .85fr; }
.dp-split-shot {
  aspect-ratio: 1 / 1; width: 100%; height: 100%;
  border-radius: var(--radius-lg); object-fit: cover; display: block;
  box-shadow: var(--shadow-sm);
}

/* Three or four across. */
.dp-cols { display: grid; gap: 40px; }
.dp-cols--3 { grid-template-columns: repeat(3, 1fr); }
.dp-cols--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  /* The header shrinks below 600px (30px logo), so the clearance can too. */
  #main > .dp:first-child,
  #main > .dp-band:first-child,
  #main > section:first-child.dp-band { padding-top: 84px; }
  /* Doubled to match the invariant at the top of this file. A single .dp-wrap
     here would lose to a modifier's shorthand exactly as it did before. */
  .dp-wrap, .dp-wrap.dp-wrap { padding-inline: 24px; }
  .dp-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; }
  /* The photograph belongs under the words it illustrates on one column, in
     every one of these heroes, rather than above the headline. */
  .dp-hero-shot { aspect-ratio: 16 / 10; }
  .dp-split, .dp-split--flip { grid-template-columns: 1fr; gap: 30px; padding-bottom: 56px; }
  .dp-split-shot { aspect-ratio: 16 / 10; }
  .dp-cols--3, .dp-cols--4 { grid-template-columns: 1fr; gap: 30px; }
  .dp-band { padding: 56px 0; }
  .dp-rule { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------------------------------------------------------------------------
   THE EIGHT PROMISES
   --------------------------------------------------------------------------- */

.dp-figure { margin: 0; }
.dp-credit {
  margin-top: 10px;
  font: 600 .8125rem/1.4 var(--font-body);
  letter-spacing: .02em;
  color: var(--ink-400);
}

.promise-rows { list-style: none; margin: 8px 0 72px; padding: 0; }
.promise-row { border-bottom: 1px solid var(--ink-200); }

/* The four that open, and the four that do not, share one row shape so the
   list reads as one list. The marker is the only difference the eye sees. */
.promise-open summary,
.promise-static {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 32px;
  gap: 20px;
  align-items: start;
  padding: 26px 0;
}
.promise-open summary {
  list-style: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.promise-open summary::-webkit-details-marker { display: none; }
.promise-open summary:hover { background: var(--ean-green-050); }
.promise-open summary:focus-visible {
  outline: 2px solid var(--ean-green-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.promise-n {
  font: 800 clamp(1.5rem, 3vw, 2.125rem)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ean-green-300);
  padding-top: 2px;
}
.promise-t {
  font: 600 clamp(1.1875rem, 2.1vw, 1.625rem)/1.32 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink-900);
  max-width: 46ch;
  text-wrap: pretty;
}
/* A circle carrying a drawn plus, which becomes a minus when open. No glyph,
   no icon font: two rules that cross. */
.promise-mark {
  position: relative;
  justify-self: end;
  width: 26px; height: 26px;
  margin-top: 6px;
  border: 1px solid var(--ean-green-300);
  border-radius: 50%;
}
.promise-mark::before,
.promise-mark::after {
  content: "";
  position: absolute;
  inset: 50% 6px auto 6px;
  height: 2px;
  background: var(--ean-green-700);
  transform: translateY(-50%);
}
.promise-mark::after { transform: translateY(-50%) rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.promise-open[open] .promise-mark::after { transform: translateY(-50%) rotate(0deg); }

.promise-note {
  margin: 0 0 26px;
  padding: 0 32px 0 96px;
}
/* ⚠️ The 3px green rule is FROM NICK'S SUPPLIED DESIGN and is deliberate. The
   Impeccable detector flags a coloured left border as a "side tab", which is
   fair as a default and wrong here: the brief specifies it, and the job it does
   is structural rather than decorative, marking the revealed note as
   subordinate to the question above it. Do not remove it on a detector run. */
.promise-note p {
  margin: 0;
  max-width: 62ch;
  padding-left: 20px;
  border-left: 3px solid var(--ean-green-700);
  font: 400 1.0625rem/1.65 var(--font-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.promise-broken .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.promise-broken .dp-actions { margin-top: 28px; }

@media (max-width: 900px) {
  .promise-open summary, .promise-static { grid-template-columns: 52px minmax(0, 1fr) 28px; gap: 14px; padding: 22px 0; }
  .promise-note { padding: 0 0 22px 66px; }
  .promise-broken .inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .promise-open summary, .promise-mark::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   THE KARMA CLUB
   --------------------------------------------------------------------------- */

/* THE KARMA CLUB HERO. Centred, 2026-08-19, on Nick's note: logo in the middle,
   the sentence that explains what it is under it, and the three facts side by
   side rather than stacked. */
.karma-hero { align-items: start; }
.karma-hero--centred { text-align: center; padding: 64px 0 56px; }
/* .dp-lede carries max-width: 56ch, which left the paragraph hugging the left
   edge of a centred block. Centre the box as well as the text. */
.karma-hero--centred .dp-lede { margin-left: auto; margin-right: auto; }
.karma-hero--centred .dp-h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.karma-hero .karma-logo { display: block; width: 220px; height: auto; margin: 0 0 26px; }
/* ⚠️ AFTER the rule above, not before it. Both selectors are two classes, so
   they have equal specificity and the later one wins. Declared first, the auto
   margins lost to that rule's `margin: 0 0 26px` shorthand and the logo stayed
   hard left in the middle of a centred hero. */
.karma-hero--centred .karma-logo { margin-left: auto; margin-right: auto; }

.karma-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-content: start; }
/* Side by side. Text stays left inside each card: three centred paragraphs is
   three ragged blocks, and these are sentences rather than labels. */
.karma-hero--centred .karma-facts { grid-template-columns: repeat(3, 1fr); text-align: left; margin-top: 16px; }
@media (max-width: 860px) { .karma-hero--centred .karma-facts { grid-template-columns: 1fr; } }
.karma-facts li { padding: 20px 24px; background: var(--ean-green-050); border-radius: var(--radius-md); }
.karma-fact-k {
  display: block;
  font: 800 12px/1.2 var(--font-display);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ean-green-700);
  margin-bottom: 8px;
}
.karma-fact-v { display: block; font: 400 1rem/1.55 var(--font-body); color: var(--fg-muted); }

.karma-steps .karma-step-list {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.karma-steps .karma-step-list li { border-top: 2px solid rgba(255,255,255,.35); padding-top: 22px; }
.karma-step-n {
  display: block;
  font: 800 12px/1.2 var(--font-display);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ean-green-300);
  margin-bottom: 12px;
}
.karma-steps .dp-h3 { color: var(--white); }
.karma-steps .karma-step-list p { margin: 0; color: rgba(255,255,255,.82); font: 400 1.0625rem/1.6 var(--font-body); }

/* The doubling, demonstrated. Radios plus sibling selectors, no script. */
.karma-match { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.25); }
.karma-match-h {
  margin: 0 0 18px;
  font: 800 12px/1.2 var(--font-display);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ean-green-300);
}
.karma-match-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.karma-match-radio { position: absolute; opacity: 0; pointer-events: none; }
.karma-match-pick label {
  cursor: pointer;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,.45);
  color: var(--white);
  font: 700 1rem/1 var(--font-display);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.karma-match-pick label:hover { border-color: var(--white); }
.karma-match-radio:checked + label { background: var(--white); color: var(--ean-green-800); border-color: var(--white); }
.karma-match-radio:focus-visible + label { outline: 2px solid var(--white); outline-offset: 3px; }

.karma-match-out { flex-basis: 100%; margin-top: 22px; }
.karma-match-line { display: none; margin: 0; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.karma-match-line span { color: rgba(255,255,255,.8); font: 400 1.0625rem/1.5 var(--font-body); }
.karma-match-line strong {
  font: 800 clamp(1.75rem, 3.4vw, 2.5rem)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}
/* Each radio reveals its own line. The nth-of-type chain is the whole
   mechanism: no script, and it survives with JavaScript switched off. */
.karma-match-radio:nth-of-type(1):checked ~ .karma-match-out .karma-match-line--0,
.karma-match-radio:nth-of-type(2):checked ~ .karma-match-out .karma-match-line--1,
.karma-match-radio:nth-of-type(3):checked ~ .karma-match-out .karma-match-line--2,
.karma-match-radio:nth-of-type(4):checked ~ .karma-match-out .karma-match-line--3 { display: flex; }
.karma-match-note { margin: 20px 0 0; font: 400 .875rem/1.5 var(--font-body); color: rgba(255,255,255,.66); max-width: 60ch; }

.karma-gave { padding: 84px 0 0; }
.karma-cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.karma-cards li { padding: 28px; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-md); }
.karma-card-amt {
  display: block;
  font: 800 clamp(1.75rem, 3vw, 2.25rem)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ean-green-700);
  margin-bottom: 14px;
}
/* A drawn rule where no amount was published. Never a typed dash. */
.karma-card-amt--none::before {
  content: ""; display: block; width: 30px; height: 4px;
  margin: .55em 0; background: var(--ean-green-300); border-radius: 2px;
}
.karma-cards p { margin: 0; font: 400 1rem/1.6 var(--font-body); color: var(--fg-muted); }
.karma-after { margin: 40px 0 0; max-width: 68ch; font: 400 1.0625rem/1.65 var(--font-body); color: var(--fg-muted); }

.karma-band { padding: 64px 0 84px; }
.karma-band-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.karma-band-list li { display: flex; flex-direction: column; }
.karma-band-list img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); display: block; }
.karma-band-list span { margin-top: 14px; font: 400 .9375rem/1.5 var(--font-body); color: var(--fg-muted); }
.karma-band-note { margin: 34px 0 0; max-width: 70ch; font: 400 .9375rem/1.6 var(--font-body); color: var(--ink-500); }

.dp-split--why { padding-block: 0; align-items: center; }
.karma-pull { margin: 0; padding: 32px 34px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.karma-pull p {
  margin: 0 0 20px;
  font: 600 clamp(1.25rem, 2.4vw, 1.625rem)/1.38 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.karma-pull cite { font-style: normal; }
.karma-pull-n { display: block; font: 700 1rem/1.3 var(--font-display); color: var(--ink-900); }
.karma-pull-r { display: block; margin-top: 2px; font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-500); }

.karma-older { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.karma-proud { padding-block: 84px 96px; }
.karma-proud .dp-cols { list-style: none; margin: 40px 0 0; padding: 0; }
.karma-proud .dp-cols li { border-top: 2px solid var(--ean-green-600); padding-top: 22px; }
.karma-proud .dp-cols p { margin: 0; font: 400 1.0625rem/1.6 var(--font-body); color: var(--fg-muted); }

.karma-cta .inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.karma-cta .inner > div { max-width: 62ch; }

@media (max-width: 1000px) {
  .karma-hero .karma-logo { width: 180px; }
  .karma-steps .karma-step-list { grid-template-columns: 1fr; gap: 30px; }
  .karma-cards, .karma-band-list { grid-template-columns: 1fr; }
  .karma-older { grid-template-columns: 1fr; gap: 20px; }
  .karma-gave { padding-top: 56px; }
  .karma-proud { padding-block: 56px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .karma-match-pick label { transition: none; }
}

/* ---------------------------------------------------------------------------
   THE STORY BEHIND OUR NETWORK
   --------------------------------------------------------------------------- */

.story-section { padding: 84px 0 90px; }

/* THE TIMELINE. One spine, six stops.
   Rebuilt 2026-08-19: it was five separate cards each with its own top rule,
   which reads as five unrelated facts rather than one journey. The rule is now
   continuous and drawn once on the list, so it can never break into segments,
   and each stop punches a dot through it.
   ⚠️ Grew to six stops on 2026-09-02 (Nick joining as Partner). The column
   count must match the entry count or the last stop wraps onto its own row
   with a severed spine, which is exactly what Nick screenshotted. If a stop
   is ever added or removed, change repeat() here and the breakpoint below. */
.story-track {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
  position: relative;
}
/* The spine. Sits at the dot's centre line, behind the dots. */
.story-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 2px;
  background: var(--ean-green-200);
}
.story-track li { position: relative; padding-top: 34px; }
.story-dot {
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ean-green-700);
  /* The ring is the band colour, not white: this section sits on green-050. */
  box-shadow: 0 0 0 4px var(--ean-green-050);
}
/* The first stop gets a hollow marker: the story starts before the network did,
   and the eye should be able to find the beginning of the line. */
.story-track li:first-child .story-dot { background: var(--ean-green-050); border: 4px solid var(--ean-green-700); }

.story-when {
  display: block;
  font: 800 1.375rem/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ean-green-700);
  margin-bottom: 10px;
}
.story-track .dp-h3 { font-size: 1.0625rem; line-height: 1.35; margin-bottom: 8px; }
.story-track p { margin: 0; font: 400 .9375rem/1.6 var(--font-body); color: var(--fg-muted); }

/* Two columns keeps a horizontal spine honest only if every row starts level,
   which it does not once the bodies differ in length. Below the six column
   layout the spine turns vertical and the journey runs down the page. The
   breakpoint rose from 1100 with the sixth stop: six columns need the room. */
@media (max-width: 1200px) {
  .story-track { grid-template-columns: 1fr; gap: 0; }
  .story-track::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .story-track li { padding: 0 0 34px 40px; }
  .story-track li:last-child { padding-bottom: 0; }
  .story-dot { top: 4px; }
}
@media (max-width: 640px) { .story-section { padding: 56px 0 60px; } }

/* ---------------------------------------------------------------------------
   QUESTIONS PEOPLE ASK
   --------------------------------------------------------------------------- */

.faq-page { padding: 8px 0 100px; }
.faq-tools {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  padding: 20px 0 26px;
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 12px;
}
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-chip {
  cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-200);
  background: var(--white);
  color: var(--ink-700);
  font: 700 .9375rem/1 var(--font-display);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.faq-chip:hover { border-color: var(--ean-green-400); color: var(--ean-green-800); }
.faq-chip.is-on { background: var(--ean-green-700); border-color: var(--ean-green-700); color: var(--white); }
.faq-chip:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 3px; }

.faq-search { display: block; }
.faq-search input {
  width: min(320px, 100%);
  font: inherit; font-size: 1rem;
  padding: 12px 16px;
  color: var(--ink-900); background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
}
.faq-search input:focus-visible { border-color: var(--ean-green-500); outline: 2px solid var(--ean-green-500); outline-offset: 1px; }

.faq-empty {
  margin: 40px 0 0;
  padding: 28px 30px;
  background: var(--ean-green-050);
  border-radius: var(--radius-md);
  font: 400 1.0625rem/1.6 var(--font-body);
  color: var(--fg-muted);
  max-width: 62ch;
}
.faq-empty strong { display: block; color: var(--ink-900); font-size: 1.1875rem; margin-bottom: 6px; }
.faq-empty a { color: var(--ean-green-800); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .faq-tools { flex-direction: column; align-items: stretch; }
  .faq-search input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .faq-chip { transition: none; } }

/* ---------------------------------------------------------------------------
   APPLY TO JOIN

   The supplied design asks one big question per screen, with the question set
   as the largest type on the page. .funnel--big turns the step legend into the
   headline, so there is no second competing title above it.
   --------------------------------------------------------------------------- */

.apply-page { padding: 56px 0 100px; }
.apply-kicker { margin-bottom: 26px; }
.apply-page .funnel { max-width: 760px; }

.funnel--big .funnel-step legend {
  font: 800 clamp(2rem, 4.2vw, 3.25rem)/1.05 var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 14px;
  text-wrap: balance;
}
.funnel--big .funnel-intro { font-size: 1.125rem; margin-bottom: 34px; max-width: 52ch; }
.funnel--big .funnel-progress { margin-bottom: 44px; }
.funnel--big .funnel-fields { gap: 26px; }
.funnel--big input[type="text"],
.funnel--big input[type="email"],
.funnel--big input[type="tel"],
.funnel--big select {
  font-size: 1.25rem;
  padding: 18px 20px;
}
.funnel--big input::placeholder { color: var(--ink-300); }
.funnel--big .funnel-nav { margin-top: 46px; }

.apply-foot {
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--ink-200);
  max-width: 760px;
  font: 400 .9375rem/1.6 var(--font-body);
  color: var(--ink-500);
}

.apply-done { max-width: 760px; padding: 40px 0 20px; }

/* The story page's opening pair: what it is, and why it exists, side by side
   rather than stacked down a single narrow column. */
.story-open { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 76px 84px; align-items: start; }
.story-open .dp-h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
@media (max-width: 1000px) { .story-open { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 56px; } }

/* ---------------------------------------------------------------------------
   THE MOVEMENT WALL

   Members in the green #AgentsYouCanTrust shirt, each in their own office. One
   is a portrait. Fourteen is a movement, which is the difference Nick asked for
   between a badge and something people chose to put on.
   --------------------------------------------------------------------------- */

.movement { padding: 84px 0 90px; }
.movement-wall {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}
.movement-wall li { display: flex; flex-direction: column; }
.movement-wall img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Faces sit high in a standing portrait; a centred crop takes the chin off. */
  object-position: center 22%;
  border-radius: var(--radius-md);
  display: block;
  background: var(--ink-100);
}
.movement-who { display: block; margin-top: 10px; }
.movement-name { display: block; font: 700 .8125rem/1.3 var(--font-display); color: var(--ink-900); }
.movement-agency { display: block; font: 400 .8125rem/1.35 var(--font-body); color: var(--ink-500); }

/* The shirt and the bottle, in a row beside the words. */
.brand-split { align-items: center; padding-top: 76px; }
.brand-trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.brand-trio img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

@media (max-width: 1100px) { .movement-wall { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 760px)  { .movement-wall { grid-template-columns: repeat(3, 1fr); gap: 12px; } .movement { padding: 56px 0 60px; } }
@media (max-width: 460px)  { .movement-wall { grid-template-columns: repeat(2, 1fr); } }

/* The member agencies as people, on the members page, above the logo wall. */
.faces { padding: 84px 0 90px; }
.faces-grid {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.faces-grid img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  background: var(--ink-100);
}
@media (max-width: 1100px) { .faces-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .faces-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .faces { padding: 56px 0 60px; } }

/* The collage is square, so it must not be cropped to a wide band the way the
   landscape photographs are. */
.collage-shot img { height: auto; max-height: 720px; object-fit: contain; background: var(--ean-green-050); }

/* ---------------------------------------------------------------------------
   CROP CORRECTIONS, 2026-08-18, from Nick's review of the live site.
   --------------------------------------------------------------------------- */

/* ⚠️ The plaque photograph reads "As Exclusive Members of the Ethical Agent
   Network" in legible type at full width, and this site deliberately carries no
   exclusivity claim, because two members can share a district. Cropping to the
   two people is the better composition anyway: they were sitting low in the
   frame under a lot of hedge. It also takes the small print out of shot, which
   is the point until Nick rules on what the area rule actually is. */
.promise-shot--faces img { object-position: center 30%; }

/* A phone photograph taken in portrait cannot be cropped to a full width band
   without losing the person in it. This one now sits in a split, where a tall
   frame is what the source actually wants. */
.karma-real { padding-top: 76px; align-items: center; }
.karma-real .dp-split-shot { aspect-ratio: 3 / 4; object-position: center 60%; }

@media (max-width: 1000px) {
  .karma-real .dp-split-shot { aspect-ratio: 4 / 3; }
}

/* The office photograph above the contact form. Shorter than a hero band: it
   is there to warm the page, not to be the page. */
.contact-shot img { height: clamp(220px, 30vw, 420px); }

/* ===========================================================================
   THE STORY BEHIND OUR NETWORK, 2026-08-19 review.
   Nick walked the live site and dictated the changes. Everything in this block
   traces to one of his notes, and each rule says which.
   =========================================================================== */

/* "Four words a member has to be willing to wear" never said the four words:
   they were in the 12px eyebrow. They are now the heading, in quotation marks,
   because they are a claim somebody makes rather than a section title. */
.four-words { font-size: clamp(2rem, 4.2vw, 3.125rem); line-height: 1.05; }

/* WHO RUNS IT. .people--bios is a two column grid everywhere else it is used,
   so this overrides only the About us instance.

   ⚠️ WAS repeat(3, 1fr), FROM NICK'S "I think we could get the three of us in a
   row would be quite good". That was correct for three people and broke the day
   a fourth card was added on 2026-09-04: three across and one stranded on its
   own row. Nick: "seems to be a bit odd and untidy".

   FOUR, NOT TWO BY TWO, AND THE REASON IS THE PHOTOGRAPH. He offered both. The
   content column is 1136px, so 2x2 gives cards of ~537px and .person-photo is
   aspect-ratio 1/1, which would put a 537px SQUARE headshot above a two line
   biography. Fixing that means moving the photo beside the text, which is a
   different card rather than a column count. Four across gives ~260px, close to
   the advice cards that already work at that size.

   ⚠️ THE LADDER IS 4 - 2 - 1 AND EVERY STEP DIVIDES INTO FOUR. That is the
   point of it: no orphan at any width. If a FIFTH person is ever added this
   breaks again in the same way, and the answer then is probably 3-up restored
   at a wider gap, not five across. */
.team .people--photos { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.team .people--photos .person-body { max-width: none; }

/* Two across before the single column, so the row is never three-plus-one and
   never a 537px portrait. Sits above the 900px rule below, which still wins
   underneath it and takes the grid to one column. */
@media (max-width: 1100px) {
  .team .people--photos { grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
}

/* The holding portrait. A monogram, deliberately not a stock face and not a
   grey silhouette: it has to be unmistakably a placeholder. Same box as a real
   photograph so nothing reflows when the real one lands. */
.person-photo--holding {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--green-100);
  border: 1px dashed var(--green-400);
  color: var(--green-700);
  font: 800 clamp(2.5rem, 5vw, 3.75rem)/1 var(--font-display);
  letter-spacing: .02em;
  font-stretch: 75%;
}

@media (max-width: 900px) {
  .team .people--photos { grid-template-columns: 1fr; gap: 0; }
}

/* THE QUOTES, AS A CAROUSEL.
   "They need to be on either like a carousel or something that's flicking
   between them, because at the moment they're on top of each other and it just
   looks way too much text, and you have to scroll down ages to get to it."

   A scroll snap track, so it works with no JavaScript at all: the browser does
   the scrolling and the script only adds the buttons. It never advances by
   itself. Three ADHD readers, one severely dyslexic, and the standing rule is
   no motion; text that moves while you read it is the worst thing this could
   do. */
.quotes--carousel { padding: 20px 0 96px; }
/* ⚠️ FLEX, NOT GRID, AND THAT IS THE SECOND ATTEMPT.
   The first version used `grid-auto-flow: column` with
   `grid-auto-columns: minmax(0, calc(50% - 20px))`. It rendered all six quotes
   side by side in six columns about 160px wide, which is a wall of one-word
   lines: the exact thing Nick asked to be fixed, made worse.
   A flex-basis percentage on a flex item resolves against the flex container's
   content box and is the ordinary way to build a scroll-snap track. Checked in
   a render rather than reasoned about. */
.quote-track {
  list-style: none;
  margin: 0;
  padding: 4px 0 20px;
  display: flex;
  gap: 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.quote-track::-webkit-scrollbar { display: none; }
.quote-track:focus-visible { outline: 2px solid var(--green-500); outline-offset: 6px; border-radius: var(--r-md); }
.quote-slide { flex: 0 0 calc(50% - 20px); min-width: 0; scroll-snap-align: start; }
/* Inside the track the quote fills its slide rather than running to a 60ch
   measure and leaving the second column short. */
.quote-slide .pull { margin: 0; max-width: none; }
.quote-slide .pull p { font-size: clamp(1.1875rem, 1.9vw, 1.5rem); }

.quote-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-200);
}
.quote-count { margin: 0 auto; color: var(--ink-500); font-size: .9375rem; }
.quote-controls .btn[disabled] { opacity: .38; cursor: default; }

/* Two quotes side by side above 900px, one below. Two rather than three: these
   are long quotations, and three columns of them is the wall of text Nick was
   objecting to, just turned on its side. */
@media (max-width: 900px) {
  .quote-track { gap: 24px; }
  .quote-slide { flex-basis: 100%; }
  .quote-controls { gap: 12px; }
}

/* ===========================================================================
   THE REST OF THE 2026-08-19 REVIEW: spacing and layout fixes.
   =========================================================================== */

/* ⚠️ THE GREEN QUOTE BAND SAT DIRECTLY ON TOP OF THE CERTIFICATE PHOTOGRAPH.
   Nick, on The standard: "there's no space between the top of that picture and
   the green bit with Jerry's quote, so the spacing needs to be sorted there."

   Real bug, and a structural one rather than a typo. .dp-split carries
   padding: 0 0 80px, bottom only, because everywhere else it is used something
   above it has already opened the space. Here it is the first thing in its
   block and the thing above it is a full bleed band, so the photograph started
   on the same pixel the green ended. */
.karma-quote + .dp > .dp-wrap > .dp-split:first-child { padding-top: 80px; }

/* "There needs to be a little bit more of a gap between this line, every one of
   them signed the same eight promises, and then the logos." Members page. */
.logowall .logowall-intro { margin-bottom: 92px; }

/* THE APPLY PAGE ASIDE.
   "Apply, I feel like could need a little image on the right hand side."
   The funnel is capped at 760px inside a 1280px wrap, so this fills paper that
   was already empty rather than squeezing the form. */
.apply-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 64px; align-items: start; }
.apply-aside {
  position: sticky;
  top: 128px;
  padding: 26px 28px 30px;
  background: var(--ean-green-050);
  border-radius: var(--radius-lg);
}
.apply-aside img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* ⚠️ Cropped low on purpose. The plaque at the top of this frame reads "As
     Exclusive Members of the Ethical Agent Network" and the site makes no
     exclusivity claim while two members can share a district. Low also happens
     to be the better composition: the box, the brochure and the coasters are
     what the sentence underneath is about. */
  object-position: center 78%;
  border-radius: var(--radius-md);
  margin-bottom: 22px;
}
.apply-aside h2 { font: 800 1.25rem/1.25 var(--font-display); letter-spacing: -.01em; color: var(--ink-900); margin: 0 0 12px; }
.apply-aside p { font: 400 .9375rem/1.6 var(--font-body); color: var(--fg-muted); margin: 0 0 12px; }
.apply-aside p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .apply-layout { grid-template-columns: 1fr; gap: 44px; }
  .apply-aside { position: static; }
  /* Landscape once it is full width: a tall portrait block under a form is a
     lot of scrolling to get past on a phone. */
  .apply-aside img { aspect-ratio: 16 / 9; object-position: center 72%; }
}

/* ===========================================================================
   THE MEMBER AREA, 2026-08-19.
   Behind a shared password. See the header of inc/member-area.php: this is a
   door, not authentication, and nothing confidential goes on the page.
   =========================================================================== */

/* .member-page is the FIRST block inside #main, so it takes the shared header
   clearance rule at the top of this file. Do not add a second one here. */
.member-page { padding: 0 0 100px; }

/* THE DOOR. Words on the left, the form on the right.
   ⚠️ The page says what is behind it before it asks for the password. A login
   box on its own demands something without saying why, and half the people who
   land here will have arrived from a navigation menu by accident. */
.member-gate {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: start;
  padding: 56px 0 40px;
}
.member-login {
  padding: 32px 34px 34px;
  background: var(--ean-green-050);
  border: 1px solid var(--ean-green-200);
  border-radius: var(--radius-lg);
}
.member-login h2 { font: 800 1.375rem/1.2 var(--font-display); letter-spacing: -.01em; margin: 0 0 20px; color: var(--ink-900); }
.member-login .field { margin-bottom: 18px; }
.member-login label { display: block; font: 700 .9375rem/1.4 var(--font-display); margin-bottom: 7px; color: var(--ink-900); }
.member-login input {
  width: 100%;
  padding: 14px 16px;
  font: 400 1rem/1.4 var(--font-body);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-900);
}
.member-login input:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.member-login .btn { width: 100%; justify-content: center; margin-top: 6px; }
.member-login .note { margin: 16px 0 0; font: 400 .875rem/1.5 var(--font-body); color: var(--ink-500); }

/* THE DASHBOARD HEADER, rebuilt 2026-09-03 as a photographic banner.
   A UK estate-agency image under a deep-forest scrim, so white text stays
   legible over whatever image is set. The image comes from the member-area
   settings, or the bundled member/member-hero.jpg. */
.ma-hero {
  position: relative;
  display: flex;
  min-height: 300px;
  margin: 24px 0 40px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background-color: var(--ean-green-900);
  background-size: cover;
  background-position: center right;
  box-shadow: var(--shadow-md);
}
/* The scrim: opaque forest at the left where the words sit, clearing to the
   right so the photograph shows through. Over the image, under the words. */
.ma-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--ean-green-900) 0%,
    rgba(14, 62, 34, .92) 34%,
    rgba(14, 62, 34, .55) 62%,
    rgba(14, 62, 34, .15) 100%);
}
.ma-hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 44px;
}
.ma-hero-words { max-width: 32ch; }
.ma-hero-greeting {
  font: 800 .8125rem/1.2 var(--font-display);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ean-green-300);
  margin: 0 0 12px;
}
.ma-hero-title {
  font: 800 clamp(1.75rem, 3.4vw, 2.75rem)/1.08 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
.ma-hero-out { flex: 0 0 auto; }

.member-block { padding: 0 0 64px; }
.member-block .dp-h2 { margin-bottom: 12px; }

.member-cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.member-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 30px 30px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
}
.member-card h3 { font: 800 1.1875rem/1.25 var(--font-display); letter-spacing: -.01em; margin: 0 0 10px; color: var(--ink-900); }
/* margin-top:auto pins the button to the bottom, so a card with two lines of
   body and a card with four still line their buttons up. */
.member-card p { font: 400 .9375rem/1.6 var(--font-body); color: var(--fg-muted); margin: 0 0 22px; }
.member-card .btn { margin-top: auto; }

/* ⚠️ Administrators only. Members never see this block: it exists so an empty
   settings screen does not silently produce a page with no downloads on it. */
.member-todo {
  padding: 22px 26px 24px;
  border: 1px dashed var(--ean-green-400);
  border-radius: var(--radius-md);
  background: var(--ean-green-050);
}
.member-todo h3 { font: 800 12px/1.2 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-700); margin: 0 0 10px; }
.member-todo p { font: 400 .9375rem/1.6 var(--font-body); color: var(--fg-muted); margin: 0 0 8px; }
.member-todo p:last-child { margin-bottom: 0; }

.swatches { list-style: none; margin: 30px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.swatches li { display: flex; flex-direction: column; }
.swatch { display: block; height: 88px; border-radius: var(--radius-md); border: 1px solid var(--ink-200); margin-bottom: 14px; }
.swatch-name { font: 700 1rem/1.3 var(--font-display); color: var(--ink-900); }
.swatches code { font-size: .9375rem; color: var(--ean-green-800); margin: 4px 0 6px; }
.swatch-use { font: 400 .875rem/1.5 var(--font-body); color: var(--ink-500); }

@media (max-width: 900px) {
  .member-gate { grid-template-columns: 1fr; gap: 36px; }
  .member-cards { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
}

/* The hero on a narrow screen: shorter, less padding, and the sign-out drops
   below the words rather than fighting them for the row. The scrim is already
   strong enough on the left at any width. */
@media (max-width: 720px) {
  .ma-hero { min-height: 220px; }
  .ma-hero-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px; }
  .ma-hero-words { max-width: none; }
  .ma-hero::before {
    background: linear-gradient(120deg,
      var(--ean-green-900) 0%,
      rgba(14, 62, 34, .9) 55%,
      rgba(14, 62, 34, .55) 100%);
  }
}

/* ===========================================================================
   THE MEMBERSHIP LANDING PAGE  /membership/

   Built 2026-09-03 from the design Nick supplied (Ethical Agent Network
   Landing Page pack). The design's own brand bar and footer are dropped: the
   theme's real header and footer are used, as on every supplied-design page.
   The class names are the supplied file's own, eanlp- prefixed, so a rule here
   can be checked against the pack line by line. Colours are swapped for the
   base.css tokens they were drawn from; the pack used the site palette
   verbatim, so nothing changes visually and no new colour enters the theme.

   ⚠️ THE PAGE IS LINKED FROM NOWHERE ON PURPOSE and noindexed in inc/seo.php.
   See inc/setup-pages.php before "fixing" either.
   =========================================================================== */

.eanlp { background: var(--paper); font-size: 18px; line-height: 1.45; }
/* ⚠️ Every image on the page carries its real width and height attributes so
   the browser can reserve space. This reset is what keeps those attributes
   from BECOMING the rendered size; without it the badge draws at 2001px. */
.eanlp img { max-width: 100%; height: auto; }
.eanlp p { margin: 0; }
.eanlp h1, .eanlp h2, .eanlp h3 { margin: 0; font-weight: 800; }

/* The site header is fixed and takes no space in the flow. Same clearance as
   the other supplied-design pages: on the first block inside #main. */
#main > .eanlp:first-child { padding-top: 104px; }

.eanlp-w { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.eanlp-w--narrow { max-width: 900px; }
.eanlp-w--form { max-width: 720px; }

/* sections */
.eanlp-sec { padding: 86px 0; }
.eanlp-sec--white { background: var(--white); border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); }
.eanlp-sec--paper { background: var(--paper); }
.eanlp-sec--green { background: var(--green-900); color: var(--white); padding: 96px 0; }
.eanlp-sec--wash { background: var(--green-050); border-top: 1px solid var(--ink-200); padding: 92px 0; }

/* type */
.eanlp-eyebrow { font-weight: 800; font-size: 13px; letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--green-700); line-height: 1.45; }
.eanlp-eyebrow--light { color: var(--green-400); }
.eanlp-eyebrow--pale { color: var(--green-300); font-weight: 800; }
.eanlp-h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.03; letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 18px 0 22px; text-wrap: balance; }
.eanlp-h1 span { color: var(--green-700); }
.eanlp-h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 14px 0 16px; text-wrap: balance; }
.eanlp-h2--light { color: var(--white); }
.eanlp-p { font-size: 18px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty; }
.eanlp-p--lg { font-size: 19px; line-height: 1.62; }
.eanlp-p--light { color: rgba(255, 255, 255, .72); }
.eanlp-center { text-align: center; }

/* buttons. The !importants are the supplied file's own guards against link
   styling, kept because front-door.css does style anchors. */
.eanlp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; line-height: 1; border-radius: var(--r-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none !important; box-shadow: none; transition: background 160ms var(--ease), border-color 160ms, transform 120ms; }
.eanlp-btn--p { padding: 14px 26px; font-size: 15px; background: var(--green-700); border-color: var(--green-700); color: var(--white) !important; box-shadow: var(--shadow-sm); }
.eanlp-btn--p:hover, .eanlp-btn--p:focus { background: var(--green-800); border-color: var(--green-800); color: var(--white) !important; transform: translateY(-1px); }
.eanlp-btn--g { padding: 14px 26px; font-size: 15px; background: transparent; border-color: var(--green-700); color: var(--green-800) !important; }
.eanlp-btn--g:hover, .eanlp-btn--g:focus { background: var(--green-100); color: var(--green-800) !important; }
.eanlp-btn--l { padding: 15px 30px; font-size: 16px; background: var(--white); border-color: var(--white); color: var(--green-800) !important; }
.eanlp-btn--l:hover, .eanlp-btn--l:focus { background: var(--green-100); border-color: var(--green-100); color: var(--green-800) !important; }
.eanlp-btn--full { width: 100%; padding: 15px 26px; font-size: 16px; margin-top: 4px; }

.eanlp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--green-100); color: var(--green-800); border-radius: var(--r-pill); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.eanlp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-700); flex: 0 0 auto; }

/* hero */
.eanlp-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding: 78px 0 68px; }
.eanlp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.eanlp-stats { margin-top: 40px; display: flex; gap: 40px; flex-wrap: wrap; }
.eanlp-stat-n { font-weight: 800; font-size: 28px; letter-spacing: var(--tracking-tight); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.eanlp-stat-l { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.eanlp-badge-wrap { display: flex; align-items: center; justify-content: center; }
.eanlp-badge { width: min(380px, 100%); aspect-ratio: 1 / 1; border-radius: 50%; display: block; filter: drop-shadow(0 24px 40px rgba(20, 88, 51, .32)); transition: transform 300ms var(--ease); }
.eanlp-badge:hover { transform: rotate(-3deg); }

/* this-month banners */
.eanlp-intro { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.eanlp-banners { display: flex; flex-direction: column; gap: 28px; }
.eanlp-banner { border: 1px solid var(--ink-100); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--paper); }
.eanlp-banner img { width: 100%; height: auto; display: block; }

/* whatsapp band */
.eanlp-wa { display: flex; align-items: center; gap: 48px; }
.eanlp-wa-copy { width: 390px; flex: 0 0 auto; }
.eanlp-365 { font-weight: 800; font-size: 132px; line-height: .88; letter-spacing: -.035em; color: var(--ink-900); }
.eanlp-365-sub { font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--ink-900); margin-top: 4px; }
.eanlp-wa-note { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.eanlp-wa-note .eanlp-dot { width: 9px; height: 9px; }
.eanlp-wa-note span:last-child { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); line-height: 1.3; }
.eanlp-wa-logo { height: 44px; width: auto; margin-top: 44px; display: block; }
.eanlp-wa-vis { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.eanlp-phones { position: relative; width: 360px; max-width: 100%; }
.eanlp-phone-back { position: absolute; top: 36px; right: -30px; width: 300px; height: 430px; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-xl); box-shadow: var(--shadow-md); transform: rotate(6deg); overflow: hidden; opacity: .5; z-index: 1; }
.eanlp-phone-back-h { height: 60px; background: var(--green-800); }
.eanlp-phone-back-b { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.eanlp-phone-back-b > div { height: 30px; border-radius: 11px; background: var(--ink-100); }
.eanlp-phone-back-b > .is-out { background: var(--green-100); align-self: flex-end; }
.eanlp-phone-back-b > .is-tall { height: 44px; }
.eanlp-phone { position: relative; z-index: 2; width: 100%; background: var(--white); border: 1px solid var(--ink-200); border-radius: 30px; box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(-2.5deg); }
.eanlp-phone-top { background: var(--green-700); padding: 13px 15px; display: flex; align-items: center; gap: 10px; }
.eanlp-phone-top svg { flex: 0 0 auto; }
.eanlp-phone-top-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .9); display: block; }
.eanlp-phone-top-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eanlp-phone-top-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.eanlp-phone-top-t b { font-weight: 700; font-size: 15px; color: var(--white); line-height: 1.2; }
.eanlp-phone-top-t i { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .82); line-height: 1.3; margin-top: 1px; }
.eanlp-chat { background: var(--ink-050); padding: 15px 12px 13px; display: flex; flex-direction: column; gap: 9px; }
.eanlp-chat-day { align-self: center; background: rgba(255, 255, 255, .85); color: var(--ink-500); font-size: 11px; font-weight: 600; padding: 3px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow-xs); }
.eanlp-msg { display: flex; gap: 7px; align-items: flex-end; max-width: 87%; }
.eanlp-msg--in { align-self: flex-start; }
.eanlp-msg--out { align-self: flex-end; flex-direction: row-reverse; }
.eanlp-av { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; font-weight: 700; font-size: 11px; color: var(--white); }
.eanlp-bub { background: var(--white); border-radius: 4px 14px 14px 14px; padding: 8px 11px 6px; box-shadow: var(--shadow-xs); }
.eanlp-bub--out { background: var(--green-100); border-radius: 14px 4px 14px 14px; }
.eanlp-bub-n { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.eanlp-bub-t { font-size: 13px; line-height: 1.4; color: var(--ink-800); }
.eanlp-bub-m { font-size: 10px; color: var(--ink-400); text-align: right; margin-top: 3px; }
.eanlp-bub-m--out { color: var(--green-700); }
.eanlp-typing { background: var(--white); border-radius: 4px 14px 14px 14px; padding: 11px 13px; box-shadow: var(--shadow-xs); display: flex; gap: 4px; align-items: center; }
.eanlp-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); display: inline-block; animation: eanlp-typing 1.2s infinite ease-in-out; }
.eanlp-typing span:nth-child(2) { animation-delay: .15s; }
.eanlp-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes eanlp-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .eanlp-typing span { animation: none; }
  .eanlp-badge, .eanlp-btn { transition: none; }
  .eanlp-badge:hover, .eanlp-btn--p:hover { transform: none; }
}
.eanlp-phone-in { background: var(--white); border-top: 1px solid var(--ink-100); padding: 10px 12px; display: flex; align-items: center; gap: 9px; }
.eanlp-phone-in-f { flex: 1; background: var(--ink-050); border: 1px solid var(--ink-100); border-radius: var(--r-pill); padding: 9px 15px; color: var(--ink-400); font-size: 13px; }
.eanlp-phone-in-s { width: 36px; height: 36px; border-radius: 50%; background: var(--green-700); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* The avatar and name tones, in place of the pack's inline styles. Amber's
   name is darkened to A9741A in the supplied file so it reads on white, and
   that value ships in the pack rather than base.css. */
.eanlp-tone-a { background: var(--green-700); }
.eanlp-tone-b { background: var(--green-500); }
.eanlp-tone-c { background: var(--warning); }
.eanlp-tone-d { background: var(--ink-500); }
.eanlp-tone-e { background: var(--green-600); }
.eanlp-name-in { color: var(--green-700); }
.eanlp-name-out { color: var(--green-800); }
.eanlp-name-amber { color: #A9741A; }

/* mastermind */
.eanlp-mm { display: flex; align-items: center; gap: 64px; }
.eanlp-mm-vis { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.eanlp-ring { position: relative; width: 100%; max-width: 520px; aspect-ratio: 520 / 420; }
.eanlp-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.eanlp-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: var(--green-050); border: 2px solid var(--green-200); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow-sm); }
.eanlp-hub b { font-weight: 800; font-size: 30px; line-height: 1; color: var(--green-800); }
.eanlp-hub i { font-style: normal; font-weight: 800; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); margin-top: 3px; line-height: 1.2; }
.eanlp-node { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid var(--white); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--white); }
.eanlp-node--you { width: 80px; height: 80px; background: var(--green-700); font-weight: 800; font-size: 16px; letter-spacing: .04em; }
.eanlp-node--peer { width: 76px; height: 76px; }
.eanlp-node svg { width: 40px; height: 40px; }
.eanlp-mm-copy { width: 430px; flex: 0 0 auto; }
.eanlp-mm-copy .eanlp-h2 { margin: 14px 0 18px; }
.eanlp-checks { display: flex; flex-direction: column; gap: 14px; }
.eanlp-check { display: flex; align-items: flex-start; gap: 12px; }
.eanlp-check-i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--green-100); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.eanlp-check-t { font-size: 16px; line-height: 1.5; color: var(--ink-800); }
.eanlp-check-t strong { color: var(--ink-900); }

/* calculator */
.eanlp-calc { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 38px 44px; color: var(--ink-900); }
.eanlp-calc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--ink-100); padding-bottom: 16px; margin-bottom: 6px; }
.eanlp-calc-head b { font-weight: 800; font-size: 12px; letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--green-700); }
.eanlp-calc-head i { font-style: normal; font-size: 13px; color: var(--ink-500); }
.eanlp-calc-head--total { border: 0; padding: 0; margin: 0; display: block; }
.eanlp-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--ink-100); }
.eanlp-line-t { font-weight: 700; font-size: 20px; color: var(--ink-900); }
.eanlp-line-s { font-size: 14px; color: var(--ink-500); margin-top: 3px; }
.eanlp-line-v { font-weight: 800; font-size: 26px; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eanlp-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: 26px; }
.eanlp-total-v { font-weight: 800; font-size: clamp(38px, 6vw, 60px); line-height: .95; color: var(--green-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eanlp-extras { margin-top: 42px; }
.eanlp-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.eanlp-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: var(--white); padding: 10px 16px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 600; }
.eanlp-vs { margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 640px; }
.eanlp-vs-c { border-radius: var(--r-lg); padding: 26px 24px; text-align: center; }
.eanlp-vs-c--a { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.eanlp-vs-c--b { background: var(--white); }
.eanlp-vs-l { font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.eanlp-vs-l--pale { color: var(--green-300); }
.eanlp-vs-l--green { color: var(--green-700); }
.eanlp-vs-n { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 8px; font-variant-numeric: tabular-nums; }
.eanlp-vs-n--light { color: var(--white); }
.eanlp-vs-n--deep { color: var(--green-900); }
.eanlp-vs-per { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.eanlp-kicker { text-align: center; font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, .9); margin: 30px auto 0; max-width: 560px; text-wrap: balance; }

/* form */
.eanlp-formcard { background: var(--white); border: 1px solid var(--ink-200); border-top: 3px solid var(--green-700); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 36px 40px; }
.eanlp-form { display: flex; flex-direction: column; gap: 18px; }
.eanlp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.eanlp-field { display: flex; flex-direction: column; gap: 7px; }
.eanlp-field--full { grid-column: 1 / -1; }
.eanlp-label { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.eanlp-input { font-family: inherit; font-size: 15px; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--ink-200); background: var(--white); color: var(--ink-900); width: 100%; line-height: 1.4; }
.eanlp-input:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: var(--green-700); }
.eanlp-fine { font-size: 13px; line-height: 1.5; color: var(--ink-500); text-align: center; margin: 2px 0 0; }
.eanlp-err { background: #FBEDEB; border: 1px solid #E3B6B0; color: #8E2C22; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.5; }
.eanlp-thanks { text-align: center; padding: 12px 8px; }
.eanlp-thanks img { width: 84px; height: 84px; border-radius: 50%; display: block; margin: 0 auto 20px; filter: drop-shadow(0 10px 18px rgba(20, 88, 51, .28)); }
.eanlp-thanks h3 { font-weight: 800; font-size: 26px; letter-spacing: -.01em; color: var(--ink-900); margin: 0 0 12px; }
.eanlp-thanks-p { font-size: 17px; max-width: 460px; margin: 0 auto; }
.eanlp-thanks-sig { font-weight: 700; font-size: 14px; color: var(--green-700); margin: 20px 0 0; }

/* responsive */
@media (max-width: 1000px) {
  #main > .eanlp:first-child { padding-top: 84px; }
  .eanlp-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 48px; }
  .eanlp-badge-wrap { order: -1; }
  .eanlp-badge { width: min(280px, 70%); }
  .eanlp-wa, .eanlp-mm { flex-direction: column; gap: 44px; align-items: stretch; }
  .eanlp-wa-copy, .eanlp-mm-copy { width: 100%; }
  .eanlp-mm-vis { order: -1; }
  .eanlp-365 { font-size: 104px; }
  .eanlp-365-sub { font-size: 42px; }
  .eanlp-calc { padding: 30px 26px; }
  .eanlp-sec { padding: 64px 0; }
  .eanlp-sec--green { padding: 72px 0; }
  .eanlp-sec--wash { padding: 68px 0; }
}
@media (max-width: 680px) {
  .eanlp-w { padding: 0 20px; }
  .eanlp-stats { gap: 24px; }
  .eanlp-365 { font-size: 76px; }
  .eanlp-365-sub { font-size: 32px; }
  .eanlp-phone-back { display: none; }
  .eanlp-phone { transform: none; }
  .eanlp-grid2 { grid-template-columns: 1fr; }
  .eanlp-formcard { padding: 26px 20px; }
  .eanlp-calc { padding: 24px 18px; }
  .eanlp-line, .eanlp-total { flex-direction: column; align-items: flex-start; gap: 6px; }
  .eanlp-line-v, .eanlp-total-v { align-self: flex-start; }
  .eanlp-vs { grid-template-columns: 1fr; }
  .eanlp-node--you { width: 64px; height: 64px; font-size: 13px; }
  .eanlp-node--peer { width: 58px; height: 58px; }
  .eanlp-node svg { width: 30px; height: 30px; }
  .eanlp-hub { width: 74px; height: 74px; }
  .eanlp-hub b { font-size: 24px; }
  .eanlp-hub i { font-size: 8px; }
  .eanlp-kicker { font-size: 18px; }
}

/* ===========================================================================
   THE MEMBER AREA, rebuilt 2026-09-03.

   Signs in with the member app's own account and reads the same Supabase
   database, so the board, training and suppliers match the app and update
   with it through Enid. The gate, head, download cards and swatches reuse the
   classes above; this block adds only the new pieces: the section nav, the
   board, the training rows and lesson view, and the supplier tracker.

   ADHD rules, same as the app: big text, plain layout, no motion for its own
   sake. One palette, from base.css tokens.
   =========================================================================== */

/* section nav */
.ma-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 40px; border-bottom: 1px solid var(--ink-200); padding-bottom: 0; }
.ma-nav a {
  font: 700 1rem/1 var(--font-display);
  color: var(--ink-600);
  text-decoration: none;
  padding: 12px 18px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.ma-nav a:hover { color: var(--ean-green-800); background: var(--ean-green-050); }
.ma-nav a[aria-current="page"] { color: var(--ean-green-800); border-bottom-color: var(--ean-green-700); }

.ma-empty { font: 400 1.0625rem/1.6 var(--font-body); color: var(--ink-500); padding: 24px 0; }

/* messages */
.ma-note { border-radius: var(--r-sm); padding: 14px 16px; font: 400 .9375rem/1.5 var(--font-body); margin: 0 0 20px; }
.ma-note strong { font-weight: 700; }
.ma-note--error { background: #FBEDEB; border: 1px solid #E3B6B0; color: #8E2C22; }
.ma-note--status { background: var(--ean-green-100); border: 1px solid var(--ean-green-200); color: var(--ean-green-800); }
.ma-note--plain { background: var(--ink-050); border: 1px solid var(--ink-200); color: var(--ink-700); }

/* the board: compact cards in a grid, opening a popup (never expanding in place) */
.ma-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ma-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--ink-200); border-radius: var(--r-lg); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-sm);
  cursor: pointer; text-align: left;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ma-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--ean-green-200); }
.ma-card:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--ean-green-050); }
.ma-card-media--none { aspect-ratio: auto; height: 12px; background: var(--ean-green-700); }
.ma-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-card-media .ma-chip { position: absolute; left: 14px; top: 14px; }
.ma-card-words { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.ma-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.ma-chip { font: 800 .6875rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--white); background: var(--ean-green-700); padding: 6px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow-xs); }
.ma-card-eyebrow { font: 800 .75rem/1.2 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-700); }
.ma-card-date { font: 400 .875rem/1.2 var(--font-body); color: var(--ink-500); }
.ma-card-title { font: 800 1.1875rem/1.25 var(--font-display); color: var(--ink-900); margin: 0 0 6px; }
.ma-card-sub { font: 400 .9375rem/1.45 var(--font-body); color: var(--ink-600); margin: 0; }
.ma-card-open { margin-top: auto; padding-top: 14px; font: 700 .875rem/1 var(--font-display); color: var(--ean-green-700); }
.ma-card-open::after { content: "\00a0\2192"; }

/* the board popup */
.ma-modal {
  width: min(600px, calc(100vw - 40px)); max-height: min(86vh, 900px);
  padding: 0; border: 0; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); background: var(--white); color: var(--ink-900);
  overflow: auto; overscroll-behavior: contain;
}
.ma-modal::backdrop { background: rgba(14, 62, 34, .55); }
.ma-modal[open] { animation: ma-modal-in 180ms var(--ease); }
@keyframes ma-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ma-modal[open] { animation: none; } .ma-card:hover { transform: none; } }
.ma-modal-close {
  position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 2;
  font: 700 .875rem/1 var(--font-display); color: var(--ean-green-800);
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-xs);
}
.ma-modal-close:hover { background: var(--ean-green-050); }
#ma-modal-body { padding: 0 30px 32px; }
.ma-modal-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
#ma-modal-body .ma-card-meta { margin: 22px 0 10px; }
.ma-modal-title { font: 800 1.75rem/1.15 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 6px 0 8px; }
.ma-modal-sub { font: 400 1.0625rem/1.5 var(--font-body); color: var(--ink-600); margin: 0 0 6px; }
.ma-modal-when { font: 700 .9375rem/1.4 var(--font-display); color: var(--ean-green-800); margin: 12px 0 0; }
.ma-modal-p { font: 400 1.0625rem/1.65 var(--font-body); color: var(--ink-700); margin: 16px 0 0; }

/* training: course cards, Teachable style */
.ma-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ma-course {
  display: flex; align-items: stretch; gap: 0; text-decoration: none;
  border: 1px solid var(--ink-200); border-radius: var(--r-lg); overflow: hidden; background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ma-course:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--ean-green-200); }
.ma-course-thumb { flex: 0 0 84px; background: linear-gradient(150deg, var(--ean-green-700), var(--ean-green-900)); display: flex; align-items: center; justify-content: center; }
.ma-course-num { font: 800 2rem/1 var(--font-display); color: rgba(255,255,255,.9); }
.ma-course-words { padding: 18px 20px; min-width: 0; }
.ma-course-eyebrow { font: 800 .6875rem/1.2 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-700); }
.ma-course-title { font: 800 1.1875rem/1.25 var(--font-display); color: var(--ink-900); margin: 6px 0 6px; }
.ma-course-note { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-500); margin: 0; }

/* a course header, above its curriculum */
.ma-course-head { padding: 4px 0 20px; border-bottom: 1px solid var(--ink-200); margin-bottom: 20px; }
.ma-course-head-title { font: 800 clamp(1.5rem, 3vw, 2rem)/1.15 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 8px 0 8px; }

/* the curriculum list, shared by the course page and the lesson sidebar */
.ma-curric-label { font: 800 .75rem/1.2 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ink-500); margin: 0 0 12px; }
.ma-curric { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ma-curric-item { margin: 0; }
.ma-curric-link {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 14px 16px; border: 1px solid var(--ink-200); border-radius: var(--r-md); background: var(--white);
}
.ma-curric-link:hover { border-color: var(--ean-green-300); background: var(--ean-green-050); }
.ma-curric-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 .875rem/1 var(--font-display); color: var(--ean-green-800); background: var(--ean-green-100);
}
.ma-curric-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ma-curric-title { font: 700 1rem/1.3 var(--font-display); color: var(--ink-900); }
.ma-curric-sub { font: 400 .8125rem/1.2 var(--font-body); color: var(--ink-500); }
.ma-curric-here { flex: 0 0 auto; font: 800 .6875rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-700); }
.ma-curric-item--now .ma-curric-link { border-color: var(--ean-green-500); background: var(--ean-green-050); }
.ma-curric-item--now .ma-curric-num { color: var(--white); background: var(--ean-green-700); }

.ma-back { display: inline-block; margin-bottom: 20px; font: 700 .9375rem/1 var(--font-display); color: var(--ean-green-700); text-decoration: none; }
.ma-back::before { content: "\2190\00a0"; }
.ma-back:hover { color: var(--ean-green-800); }
.ma-section-sub { font: 800 1.25rem/1.25 var(--font-display); color: var(--ink-900); margin: 24px 0 14px; }
.ma-section-sub--attention { color: var(--warning); }
.ma-section-sub--expired { color: var(--ink-500); }

/* the lesson view: player and text, curriculum alongside */
.ma-lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.ma-lesson-main { min-width: 0; }
.ma-lesson-aside { position: sticky; top: 96px; }
.ma-lesson-eyebrow { font: 800 .75rem/1.2 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-700); margin: 20px 0 6px; }
.ma-lesson-title { font: 800 1.625rem/1.15 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0 0 6px; }
.ma-lesson-mins { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-500); margin: 0 0 16px; }
.ma-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-900); box-shadow: var(--shadow-md); }
.ma-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ma-video-soon { font: 400 1.0625rem/1.6 var(--font-body); color: var(--ink-600); background: var(--ean-green-050); border: 1px solid var(--ean-green-200); border-radius: var(--r-lg); padding: 40px 30px; text-align: center; }
.ma-lesson-desc { font: 400 1.0625rem/1.65 var(--font-body); color: var(--ink-700); margin: 20px 0 0; }
.ma-lesson-pdf { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; padding: 14px 16px; background: var(--ean-green-050); border-radius: var(--r-md); font: 400 .9375rem/1.5 var(--font-body); color: var(--ink-700); }
.ma-lesson-pdf-label { flex: 0 0 auto; font: 800 .6875rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-800); }
.ma-lesson-move { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ink-200); }

/* suppliers */
.ma-supplier { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 22px; border: 1px solid var(--ink-200); border-radius: var(--r-md); background: var(--white); margin-bottom: 10px; }
.ma-supplier--dueNotice, .ma-supplier--missedNotice { border-left: 4px solid var(--warning); }
.ma-supplier--expired { opacity: .72; }
.ma-supplier-words { min-width: 0; }
.ma-supplier-name { font: 700 1.125rem/1.3 var(--font-display); color: var(--ink-900); margin: 0 0 3px; }
.ma-supplier-cat { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-600); margin: 0 0 6px; }
.ma-supplier-line { font: 400 .9375rem/1.5 var(--font-body); color: var(--ink-700); margin: 0; }
.ma-supplier-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ma-btn-sm { padding: 8px 14px; font-size: .875rem; }

.ma-supplier-form { border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--ean-green-050); padding: 24px 26px; margin-top: 16px; }
.ma-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.ma-supplier-form .field label { display: block; font: 700 .9375rem/1.4 var(--font-display); margin-bottom: 6px; color: var(--ink-900); }
.ma-supplier-form .field input {
  width: 100%; font: 400 1rem/1.4 var(--font-body);
  padding: 12px 14px; border: 1px solid var(--ink-200); border-radius: var(--r-sm); background: var(--white); color: var(--ink-900);
}
.ma-supplier-form .field input:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }

.ma-order { margin-top: 44px; padding-top: 8px; border-top: 1px solid var(--ink-200); }

/* ---- Referrals ---- */
.ma-referral { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 22px; border: 1px solid var(--ink-200); border-radius: var(--r-md); background: var(--white); margin-bottom: 10px; }
.ma-referral--archived { opacity: .6; }
.ma-referral-words { min-width: 0; }
.ma-referral-client { font: 700 1.125rem/1.3 var(--font-display); color: var(--ink-900); margin: 0 0 3px; }
.ma-referral-partners { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-600); margin: 0 0 3px; }
.ma-referral-date { font: 400 .875rem/1.4 var(--font-body); color: var(--ink-500); margin: 0; }
.ma-referral-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ma-referral-status { display: inline-block; font: 700 .75rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-700); background: var(--ean-green-050); border: 1px solid var(--ean-green-200); border-radius: var(--r-sm); padding: 5px 10px; }
.ma-referrals-toggle { margin-top: 16px; }

/* ---- Account: sign-in, team, directory ---- */
.ma-account-block { padding: 28px 0; border-bottom: 1px solid var(--ink-200); }
.ma-account-block:last-child { border-bottom: 0; }
.ma-field-note { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-600); margin: 0 0 18px; }
.ma-stack-form { max-width: 440px; }
.ma-stack-form .field { margin-bottom: 16px; }
.ma-stack-form .field label { display: block; font: 700 .9375rem/1.4 var(--font-display); margin-bottom: 6px; color: var(--ink-900); }
.ma-stack-form .field input,
.ma-stack-form .field textarea { display: block; width: 100%; font: 400 1rem/1.4 var(--font-body); padding: 10px 14px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: var(--white); }
.ma-stack-form .field input:focus-visible,
.ma-stack-form .field textarea:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-stack-form .note { font: 400 .875rem/1.5 var(--font-body); color: var(--ink-500); margin-top: 12px; }
.ma-inline-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; max-width: 540px; margin-top: 16px; }
.ma-inline-form .field { flex: 1 1 260px; margin: 0; }
.ma-inline-form .field label { display: block; font: 700 .9375rem/1.4 var(--font-display); margin-bottom: 6px; color: var(--ink-900); }
.ma-inline-form .field input { display: block; width: 100%; font: 400 1rem/1.4 var(--font-body); padding: 10px 14px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: var(--white); }
.ma-inline-form .field input:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-form-heading { font: 800 1rem/1.3 var(--font-display); color: var(--ink-800); margin: 24px 0 12px; }
.ma-team-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--ink-200); border-radius: var(--r-md); background: var(--white); margin-bottom: 8px; flex-wrap: wrap; }
.ma-team-name { font: 700 1rem/1.3 var(--font-display); color: var(--ink-900); flex: 1; }
.ma-team-role { font: 700 .75rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ink-500); }
/* Asking for a colleague's address when no invite recorded one. */
.ma-team-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.ma-team-ask-label { font: 400 .875rem/1.3 var(--font-body); color: var(--ink-600); }
.ma-team-ask input { font: 400 1rem/1.4 var(--font-body); padding: 8px 12px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: var(--white); flex: 1 1 220px; }
.ma-team-ask input:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-invites-heading { font: 700 .9375rem/1.4 var(--font-display); color: var(--ink-600); margin: 20px 0 10px; }
.ma-invite-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border: 1px dashed var(--ink-200); border-radius: var(--r-md); margin-bottom: 8px; flex-wrap: wrap; }
.ma-invite-email { font: 700 .9375rem/1.3 var(--font-display); color: var(--ink-800); }
.ma-invite-code { font: 400 .875rem/1.3 var(--font-body); color: var(--ean-green-700); background: var(--ean-green-050); padding: 3px 8px; border-radius: var(--r-sm); }
.ma-invite-expires { font: 400 .8125rem/1.3 var(--font-body); color: var(--ink-500); }

/* ---- Training completion ---- */
.ma-progress { height: 6px; background: var(--ink-200); border-radius: 3px; margin: 10px 0 4px; overflow: hidden; }
.ma-progress-fill { height: 100%; background: var(--ean-green-600); border-radius: 3px; transition: width .3s ease; min-width: 0; }
.ma-progress-label { font: 700 .8125rem/1 var(--font-display); color: var(--ean-green-700); margin: 0; }
.ma-curric-done { flex: 0 0 auto; font: 800 .6875rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--ean-green-700); }
.ma-curric-item--done .ma-curric-link { border-color: var(--ean-green-200); background: var(--ean-green-050); }
.ma-curric-item--done .ma-curric-num { color: var(--white); background: var(--ean-green-600); }
.ma-curric-item--done .ma-curric-done::before { content: "\2713\00a0"; }
.ma-done-btn { margin-top: 20px; }

/* ---- Referral status dropdown ---- */
.ma-referral-status-select {
  font: 700 .75rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--ean-green-700); background: var(--ean-green-050); border: 1px solid var(--ean-green-200); border-radius: var(--r-sm);
  padding: 5px 10px; cursor: pointer; appearance: auto;
}
.ma-referral-status-select:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-referrals-actions { margin-bottom: 16px; }

/* ---- Members directory (browsable) ---- */
.ma-directory-search { margin-bottom: 20px; }
.ma-dir-search {
  display: block; width: 100%; max-width: 480px;
  font: 400 1rem/1.4 var(--font-body); padding: 10px 14px;
  border: 1px solid var(--ink-300); border-radius: var(--r-md); background: var(--white);
}
.ma-dir-search:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }

.ma-dir-card {
  padding: 20px 22px; border: 1px solid var(--ink-200); border-radius: var(--r-md);
  background: var(--white); margin-bottom: 10px;
}
.ma-dir-card-about { font: 400 1.0625rem/1.6 var(--font-body); color: var(--ink-700); margin: 0 0 10px; }
.ma-dir-card-details { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }
.ma-dir-card-details span { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-600); }
.ma-dir-card-address::before { content: "\1F4CD\00a0"; }
.ma-dir-card-phone::before { content: "\260E\00a0"; }
.ma-dir-card-year { font-style: italic; }
.ma-dir-card-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-dir-card-social {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 .8125rem/1 var(--font-display); color: var(--ean-green-700); text-decoration: none;
  background: var(--ean-green-050); border: 1px solid var(--ean-green-200); border-radius: var(--r-pill);
  padding: 7px 13px;
}
.ma-dir-card-social:hover { background: var(--ean-green-100); border-color: var(--ean-green-300); }
.ma-chip-icon { display: inline-flex; }
.ma-chip-icon svg { width: 15px; height: 15px; display: block; }

/* The list view is names only; the popup behind the click carries the rest. */
.ma-dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ma-dir-card--row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; margin-bottom: 0; cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ma-dir-card--row:hover { border-color: var(--ean-green-300); box-shadow: var(--shadow-sm); }
.ma-dir-card--row:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-dir-card-name { font: 700 1.125rem/1.3 var(--font-display); color: var(--ink-900); margin: 0; }
.ma-dir-card-open {
  flex: 0 0 auto; font: 700 .8125rem/1 var(--font-display); color: var(--ean-green-700);
  background: var(--ean-green-050); border: 1px solid var(--ean-green-200); border-radius: var(--r-sm);
  padding: 6px 12px; white-space: nowrap;
}
.ma-dir-card--row:hover .ma-dir-card-open { background: var(--ean-green-100); }

/* The agency profile popup. Built to public-facing standard: header image
 * across the top, the story, a contact block, the gallery, then the team. */
#ma-dir-modal-body { padding: 0; }
.ma-prof-img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; display: block; }
.ma-prof-pad { padding: 24px 30px 34px; }
.ma-prof-est {
  font: 700 .75rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--ean-green-700); margin: 0 0 16px;
}
.ma-prof-about { font: 400 1.0625rem/1.7 var(--font-body); color: var(--ink-700); margin: 0 0 22px; white-space: pre-line; }
.ma-prof-contact {
  display: grid; gap: 12px; padding: 18px 20px;
  background: var(--ean-green-050); border-radius: var(--r-md); margin: 0 0 18px;
}
.ma-prof-contact-row { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; }
.ma-prof-contact-label {
  font: 700 .75rem/1.4 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--ean-green-800);
}
.ma-prof-contact-value { font: 400 1rem/1.5 var(--font-body); color: var(--ink-800); overflow-wrap: anywhere; }
.ma-prof-pad .ma-dir-card-socials { margin: 0 0 6px; }
.ma-prof-gallery { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; margin: 18px 0 0; }
.ma-prof-gallery img { width: 150px; height: 110px; object-fit: cover; border-radius: var(--r-md); display: block; }
.ma-prof-gallery-btn {
  flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-md);
  transition: box-shadow var(--dur) var(--ease);
}
.ma-prof-gallery-btn:hover { box-shadow: var(--shadow-sm); }
.ma-prof-gallery-btn:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }

/* The picture viewer. */
.ma-img-modal {
  width: min(920px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--shadow-lg); overflow: auto;
}
.ma-img-modal::backdrop { background: rgba(14, 62, 34, .75); }
#ma-img-full { display: block; width: 100%; max-height: 76vh; object-fit: contain; background: var(--ink-900); }
.ma-img-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.ma-img-count { font: 700 .875rem/1 var(--font-display); color: var(--ink-600); }

/* Meet the team. */
.ma-prof-team-heading {
  font: 800 1.25rem/1.2 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--ink-900);
  margin: 26px 0 16px; padding-top: 24px; border-top: 1px solid var(--ink-200);
}
.ma-prof-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ma-prof-person {
  text-align: center; border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  background: var(--white); padding: 22px 16px 18px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ma-prof-person:hover { border-color: var(--ean-green-300); box-shadow: var(--shadow-sm); }
.ma-prof-person:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-prof-person-photo {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.ma-prof-person-initial { background: var(--ean-green-100); color: var(--ean-green-800); font: 800 1.75rem/1 var(--font-display); }
.ma-prof-person-name { font: 700 1.0625rem/1.3 var(--font-display); color: var(--ink-900); margin: 0 0 2px; }
.ma-prof-person-role { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-600); margin: 0 0 10px; }
.ma-prof-person-more { font: 700 .8125rem/1 var(--font-display); color: var(--ean-green-700); }

/* One person's page inside the popup. */
.ma-prof-back {
  display: inline-block; font: 700 .9375rem/1 var(--font-display); color: var(--ean-green-700);
  background: none; border: 0; padding: 0; margin: 0 0 20px; cursor: pointer;
}
.ma-prof-back::before { content: "\2190\00a0"; }
.ma-prof-back:hover { color: var(--ean-green-800); }
.ma-prof-person-head { display: flex; align-items: center; gap: 20px; margin: 0 0 20px; }
.ma-prof-person-photo--big { width: 104px; height: 104px; margin: 0; flex: 0 0 104px; font-size: 2.25rem; }
.ma-prof-person-head-words .ma-modal-title { margin: 0 0 4px; font-size: 1.5rem; }
.ma-prof-person-sub { font: 700 .9375rem/1.4 var(--font-display); color: var(--ean-green-800); margin: 0 0 2px; }
.ma-prof-person-agency { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-500); margin: 0; }

/* ---- Agent profiles ---- */
.ma-agent-row {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px;
  border: 1px solid var(--ink-200); border-radius: var(--r-md); background: var(--white); margin-bottom: 10px;
}
.ma-agent-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; }
.ma-agent-words { flex: 1; min-width: 0; }
.ma-agent-name { font: 700 1.125rem/1.3 var(--font-display); color: var(--ink-900); margin: 0 0 3px; }
.ma-agent-location { font: 400 .9375rem/1.4 var(--font-body); color: var(--ink-600); margin: 0 0 4px; }
.ma-agent-bio { font: 400 .9375rem/1.5 var(--font-body); color: var(--ink-700); margin: 0 0 6px; }
.ma-agent-contact { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ma-agent-contact span { font: 400 .875rem/1.3 var(--font-body); color: var(--ink-500); }
.ma-agent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ma-agent-photo-preview { margin-top: 10px; }

/* ---- Picture uploads in the agency profile form ---- */
.field .ma-field-note { font: 400 .875rem/1.5 var(--font-body); color: var(--ink-500); margin: 6px 0 0; }
.ma-dir-header-preview {
  display: block; margin-top: 12px; max-width: 360px; width: 100%;
  aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--ink-200);
}
.ma-gallery-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.ma-gallery-thumb { display: flex; flex-direction: column; gap: 6px; }
.ma-gallery-thumb img {
  width: 108px; height: 108px; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--ink-200);
}
.ma-gallery-remove {
  font: 700 .8125rem/1 var(--font-display); color: var(--ink-600);
  background: var(--white); border: 1px solid var(--ink-300); border-radius: var(--r-sm);
  padding: 6px 0; cursor: pointer;
}
.ma-gallery-remove:hover { color: var(--ink-900); border-color: var(--ink-500); }

/* ---- Supplier forum ----
 * Threads, not reviews. The bar holds search and the start button side by
 * side; each thread is a card with the supplier on a chip, the title doing
 * the talking, and the conversation behind the click.
 */
.ma-forum-bar { display: flex; gap: 12px; align-items: stretch; margin-bottom: 20px; }
.ma-forum-bar .ma-dir-search { max-width: none; flex: 1; }
.ma-forum-bar .btn { flex: 0 0 auto; }

/* The start-a-thread form: one calm green card, everything styled. */
.ma-thread-form {
  border: 1px solid var(--ean-green-200); border-radius: var(--r-lg);
  background: var(--ean-green-050); padding: 28px 30px; margin-bottom: 24px;
}
.ma-thread-form-title { font: 800 1.375rem/1.2 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0 0 6px; }
.ma-thread-form-lede { font: 400 1rem/1.55 var(--font-body); color: var(--ink-700); margin: 0 0 20px; }
.ma-thread-form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.ma-thread-form .field { margin-bottom: 16px; }
.ma-thread-form .field label { display: block; font: 700 .9375rem/1.4 var(--font-display); margin-bottom: 6px; color: var(--ink-900); }
.ma-thread-form .field input,
.ma-thread-form .field select,
.ma-thread-form .field textarea {
  display: block; width: 100%; font: 400 1.0625rem/1.5 var(--font-body); color: var(--ink-900);
  padding: 12px 16px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: var(--white);
}
.ma-thread-form .field select { appearance: auto; cursor: pointer; }
.ma-thread-form .field textarea { min-height: 150px; resize: vertical; }
.ma-thread-form .field input::placeholder,
.ma-thread-form .field textarea::placeholder { color: var(--ink-400); }
.ma-thread-form .field input:focus-visible,
.ma-thread-form .field select:focus-visible,
.ma-thread-form .field textarea:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-thread-form .dp-actions { margin: 4px 0 0; }

/* Thread cards. */
.ma-thread-card {
  padding: 20px 24px; border: 1px solid var(--ink-200); border-radius: var(--r-md);
  background: var(--white); margin-bottom: 12px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ma-thread-card:hover { border-color: var(--ean-green-300); box-shadow: var(--shadow-sm); }
.ma-thread-card:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }
.ma-thread-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ma-thread-supplier {
  display: inline-block; font: 700 .75rem/1 var(--font-display); letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--ean-green-800); background: var(--ean-green-100); border-radius: var(--r-sm); padding: 6px 12px;
}
.ma-forum-review-stars { font-size: 1.0625rem; letter-spacing: 2px; color: var(--ean-green-600); }
.ma-thread-title { font: 800 1.25rem/1.3 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0 0 8px; }
.ma-thread-snippet { font: 400 1rem/1.6 var(--font-body); color: var(--ink-700); margin: 0 0 12px; }
.ma-thread-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--ink-100); padding-top: 12px; }
.ma-thread-meta { font: 400 .875rem/1.3 var(--font-body); color: var(--ink-500); margin: 0; }
.ma-thread-replies { font: 700 .875rem/1.3 var(--font-display); color: var(--ean-green-700); }

/* One open thread: the original post, then the conversation. */
.ma-thread-post {
  border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--white);
  padding: 26px 30px; margin-bottom: 8px;
}
.ma-thread-detail-title { font-size: 1.5rem; margin: 12px 0 4px; }
#ma-forum-thread .ma-thread-card-top { margin: 8px 0 0; }
#ma-forum-thread .ma-forum-review-text { font: 400 1.0625rem/1.7 var(--font-body); color: var(--ink-800); margin: 16px 0 0; white-space: pre-line; }
.ma-replies-wrap { padding: 4px 6px 0; }
.ma-replies-heading { font: 800 1.0625rem/1.3 var(--font-display); color: var(--ink-900); margin: 24px 0 4px; }
.ma-reply { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--ink-100); }
.ma-reply:last-child { border-bottom: 0; }
.ma-reply-badge {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ean-green-100); color: var(--ean-green-800);
  font: 800 1.0625rem/40px var(--font-display); text-align: center;
}
.ma-reply-words { flex: 1; min-width: 0; }
.ma-reply-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ma-reply-who { font: 700 .9375rem/1.3 var(--font-display); color: var(--ink-900); }
.ma-reply-when { font: 400 .8125rem/1.3 var(--font-body); color: var(--ink-500); }
.ma-reply-text { font: 400 1rem/1.65 var(--font-body); color: var(--ink-700); margin: 0; white-space: pre-line; }

/* The reply box. */
.ma-forum-add { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ink-200); }
.ma-reply-form textarea {
  display: block; width: 100%; font: 400 1.0625rem/1.5 var(--font-body); color: var(--ink-900);
  padding: 12px 16px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: var(--white);
  min-height: 110px; resize: vertical; margin-bottom: 14px;
}
.ma-reply-form textarea::placeholder { color: var(--ink-400); }
.ma-reply-form textarea:focus-visible { outline: 2px solid var(--ean-green-600); outline-offset: 2px; }

/* ---- Footer newsletter ---- */
/*
 * ⚠️ THE RULE IS UNDERNEATH, NOT ON TOP. The newsletter moved above the link
 * columns on 2026-09-04, Nick's call, and it is now the FIRST thing inside the
 * footer. A border-top there drew a stray line across the very top of the
 * footer with nothing above it to separate from, and the margin-top pushed
 * against the same nothing. The separator now sits between the newsletter and
 * the columns, which is the join it was always drawing.
 */
footer .newsletter {
  padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.15);
}
footer .newsletter h4 { font: 800 1.125rem/1.3 var(--font-display); color: var(--white); margin: 0 0 6px; }
footer .newsletter p { font: 400 .9375rem/1.5 var(--font-body); color: rgba(255,255,255,.7); margin: 0 0 14px; }
footer .newsletter-thanks { font: 700 1rem/1.4 var(--font-display); color: var(--ean-green-300); margin: 0; }
.newsletter-fields {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
}
.newsletter-fields input {
  flex: 1 1 180px; font: 400 1rem/1.4 var(--font-body);
  padding: 10px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-md);
  background: rgba(255,255,255,.08); color: var(--white);
}
.newsletter-fields input::placeholder { color: rgba(255,255,255,.45); }
.newsletter-fields input:focus-visible { outline: 2px solid var(--ean-green-400); outline-offset: 2px; }
.newsletter-fields .btn { flex: 0 0 auto; }

/*
 * What signing up means, and what happens when it does not work.
 *
 * ⚠️ footer .newsletter p is the intro line above the form and sets its own
 * bottom margin, so both of these are addressed by class rather than inheriting
 * that spacing. Council Audit finding 12.
 */
footer .newsletter-note {
  margin: 14px 0 0; max-width: 60ch;
  font: 400 .875rem/1.55 var(--font-body); color: rgba(255,255,255,.62);
}
footer .newsletter-note a { color: rgba(255,255,255,.85); text-decoration: underline; }
footer .newsletter-note a:hover { color: var(--white); }
footer .newsletter-error {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-sm, 8px);
  background: rgba(255,255,255,.10); border: 1px solid var(--ean-green-300);
  font: 600 .9375rem/1.5 var(--font-body); color: var(--white);
}

@media (max-width: 900px) {
  /* The curriculum drops below the player on a narrow screen. */
  .ma-lesson-layout { grid-template-columns: 1fr; gap: 24px; }
  .ma-lesson-aside { position: static; top: auto; }
}
@media (max-width: 720px) {
  .ma-nav { gap: 2px; overflow-x: auto; flex-wrap: nowrap; }
  .ma-nav a { padding: 10px 12px; font-size: .9375rem; white-space: nowrap; }
  .ma-board, .ma-courses { grid-template-columns: 1fr; }
  .ma-supplier { flex-direction: column; gap: 12px; }
  .ma-supplier-actions { width: 100%; }
  .ma-form-grid { grid-template-columns: 1fr; }
  #ma-modal-body { padding: 0 20px 26px; }
  .ma-lesson-move .btn { flex: 1; justify-content: center; }
  .ma-referral { flex-direction: column; gap: 12px; }
  .ma-referral-meta { width: 100%; }
  .ma-inline-form { flex-direction: column; }
  .ma-inline-form .field { flex: 1 1 auto; }
  .ma-invite-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ma-team-row { align-items: flex-start; }
  .ma-team-name { flex-basis: 100%; }
  .ma-agent-row { flex-direction: column; }
  .ma-agent-actions { width: 100%; }
  .ma-dir-grid { grid-template-columns: 1fr; }
  .ma-prof-pad { padding: 20px 20px 28px; }
  .ma-prof-person-head { gap: 14px; }
  .ma-prof-person-photo--big { width: 84px; height: 84px; flex-basis: 84px; }
  .ma-forum-bar { flex-direction: column; }
  .ma-thread-form { padding: 22px 20px; }
  .ma-thread-form-grid { grid-template-columns: 1fr; }
  .ma-thread-post { padding: 20px 18px; }
  .newsletter-fields { flex-direction: column; }
}

/* ---- The member list, in plain text ----
   The scrolling wall above is a trust band. This is the readable record: every
   name, alphabetical, no motion, no hover, no script, and present at the
   breakpoints where .marquee is display:none. Council Audit finding 11. */
.memberlist { margin: 56px 0 0; padding-top: 40px; border-top: 1px solid var(--ink-200); }
.memberlist-h {
  font: 800 1.25rem/1.3 var(--font-display); color: var(--ink-900); margin: 0 0 24px;
}
.memberlist-names {
  list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: 40px;
}
.memberlist-names li {
  break-inside: avoid; padding: 9px 0;
  font: 400 1.0625rem/1.45 var(--font-body); color: var(--ink-800);
  border-bottom: 1px solid var(--ink-100, rgba(0,0,0,.07));
}
.memberlist-note {
  margin: 28px 0 0; max-width: 62ch;
  font: 400 .9375rem/1.6 var(--font-body); color: var(--ink-500);
}
@media (max-width: 900px) { .memberlist-names { columns: 2; } }
@media (max-width: 560px) { .memberlist-names { columns: 1; } }

/* ---- The coverage checker ----
   Council Audit step 4. It replaced a button to the contact form, which is how
   the one question this page exists to answer used to be answered.

   ⚠️ THE "NO" PANEL IS NOT AN ERROR STATE AND MUST NEVER BE STYLED AS ONE. It
   is the answer most people who use this will get, and 224 districts out of
   roughly 2,900 is a young network rather than a rejection. Same paper, same
   weight and more room than the yes. Red here would undo the copy. */
.checker { margin: 56px 0 0; padding: 34px 34px 36px; background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--r-md); }
.checker-h { font: 800 clamp(1.35rem, 2.2vw, 1.75rem)/1.2 var(--font-display); color: var(--ink-900); margin: 0 0 10px; }
.checker-intro { margin: 0 0 22px; max-width: 58ch; font: 400 1rem/1.6 var(--font-body); color: var(--ink-700); }

.checker-form label { display: block; margin-bottom: 8px; font: 700 .9375rem/1.4 var(--font-body); color: var(--ink-800); }
.checker-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.checker-row input {
  flex: 1 1 220px; min-width: 0;
  font: 400 1.0625rem/1.4 var(--font-body); text-transform: uppercase;
  padding: 13px 16px; border: 1px solid var(--ink-300); border-radius: var(--r-md);
  background: var(--white); color: var(--ink-900);
}
.checker-row input::placeholder { text-transform: none; color: var(--ink-500); }
.checker-row input:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.checker-row .btn { flex: 0 0 auto; }

.checker-invalid { margin: 16px 0 0; font: 600 1rem/1.5 var(--font-body); color: #a4231f; }

.checker-answer { margin: 28px 0 0; padding-top: 26px; border-top: 1px solid var(--ink-200); }
.checker-answer h3 { font: 800 clamp(1.25rem, 2vw, 1.5rem)/1.25 var(--font-display); color: var(--ink-900); margin: 0 0 14px; }
.checker-answer p { margin: 0 0 14px; max-width: 62ch; font: 400 1.0625rem/1.65 var(--font-body); color: var(--ink-800); }
.checker-answer--yes h3 { color: var(--green-800); }

/* The escape hatch sentence, given its own weight because it is the point. */
.checker-hatch {
  padding-left: 18px; border-left: 3px solid var(--green-700);
  font-weight: 600; color: var(--ink-900) !important;
}

.checker-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 22px !important; }
.checker-aside { margin-top: 22px !important; font-size: .9375rem !important; color: var(--ink-500) !important; }

@media (max-width: 560px) {
  .checker { padding: 26px 20px 28px; }
  .checker-row .btn { width: 100%; }
}

/* ---------------------------------------------------------------
   COOKIE CONSENT BANNER
   Built 2026-09-06 alongside inc/consent.php.

   ⚠️ A BAR, NOT A MODAL, AND IT MUST NOT BECOME ONE. No overlay, no scroll
   lock, no dimmed page behind. A visitor who ignores it can still read
   everything, which is the difference between asking and coercing.

   ⚠️ THE TWO BUTTONS ARE DELIBERATELY THE SAME SIZE AND WEIGHT. Refusing has
   to be as easy as agreeing, which is a legal requirement rather than a
   preference. Do not shrink "Reject", turn it into a text link, or push it
   behind a "manage preferences" step.
   --------------------------------------------------------------- */
.cc {
  position: fixed; z-index: 200; inset: auto 0 0 0;
  background: var(--green-900); color: var(--white);
  border-top: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 -10px 30px rgba(0,0,0,.18);
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
}
.cc-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap;
}
.cc-text { margin: 0; flex: 1 1 380px; font-size: .9375rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.cc-text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cc-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
/* ⚠️ THE TWO BUTTONS ARE STYLED IDENTICALLY ON PURPOSE, AND THIS IS THE POINT
   OF THE WHOLE COMPONENT. The first build gave Accept the solid primary and
   Reject the outline, which is what almost every cookie banner does. It is
   defensible and probably compliant, and it is still a thumb on the scale.

   On a site whose entire argument is that this network does not do the sharp
   practice the trade is known for, a banner that visually steers you toward yes
   is the single easiest thing for a competitor to screenshot. So both are the
   same outline, the same size, the same weight, and the only difference between
   them is the word. Nobody can say the choice was nudged.

   ⚠️ Do not "fix" this by restoring a primary button. If someone wants Accept
   emphasised, that is a decision for Nick, not a tidy-up. */
.cc .btn,
.cc .btn-primary,
.cc .btn-secondary {
  border: 1px solid rgba(255,255,255,.55);
  color: var(--white);
  background: transparent;
}
.cc .btn:hover,
.cc .btn-primary:hover,
.cc .btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,.10); }

@media (max-width: 700px) {
  .cc-inner { padding: 0 24px; }
  /* Full width buttons on a phone, still equally weighted. */
  .cc-actions { width: 100%; }
  .cc-actions .btn { flex: 1 1 0; justify-content: center; text-align: center; }
}

/* The footer's "Cookie settings" control. A real button that must read as the
   quiet footer links beside it, so it is stripped back to look like one while
   staying a button for keyboard and screen reader users. */
.cc-settings {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: rgba(255,255,255,.6);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.cc-settings:hover { color: var(--white); }
.cc-settings:focus-visible { outline: 2px solid var(--green-400); outline-offset: 3px; }

/* ---------------------------------------------------------------
   LEGAL PAGES. Privacy, Cookies, Terms.
   Built 2026-09-06. These are long documents that people arrive at with a
   specific question, so the job is scanning rather than reading: a visible
   date, a way across to the other two, and headings that stand off the text.
   --------------------------------------------------------------- */
.legal-stamp { margin: 14px 0 0; color: var(--ink-500); font-size: .9375rem; font-weight: 600; }

/* The three-way switch under the title. A reader who wants the cookie policy
   should never have to go back to the footer to find it. */
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.legal-nav a, .legal-nav .is-here {
  display: inline-flex; align-items: center; padding: 9px 18px;
  border-radius: var(--r-pill); border: 1px solid var(--ink-200);
  font-size: .9375rem; font-weight: 700; text-decoration: none;
}
.legal-nav a { background: var(--white); color: var(--ink-700); }
.legal-nav a:hover { border-color: var(--green-200); background: var(--green-050); color: var(--green-800); }
.legal-nav .is-here { background: var(--green-700); border-color: var(--green-700); color: var(--white); }

/* Numbered headings carry the weight in a document this long, so they are a
   step smaller than an editorial h2 and sit closer to the text they open. */
.article--legal .entry h2 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); margin: 46px 0 14px; }
.article--legal .entry p, .article--legal .entry li { font-size: 1.0625rem; line-height: 1.6; }
.article--legal .entry code {
  font-size: .9375em; background: var(--green-050); border: 1px solid var(--ink-200);
  border-radius: 4px; padding: 1px 5px;
}

/* ⚠️ THE LAWFUL BASIS TABLE SCROLLS RATHER THAN REFLOWS, DELIBERATELY. Three
   columns of legal prose cannot stack into a phone width without losing which
   basis belongs to which purpose, and the alternative to scrolling the table is
   a table that pushes the whole page sideways. tabindex on the wrapper is what
   makes the scroll reachable from a keyboard. */
.legal-table { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--ink-200); border-radius: var(--r-md); }
.legal-table:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.legal-table table { border-collapse: collapse; width: 100%; min-width: 640px; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: 12px 16px;
  border-bottom: 1px solid var(--ink-200); font-size: .9375rem; line-height: 1.5;
}
.legal-table thead th { background: var(--green-050); color: var(--green-900); font-weight: 800; }
.legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------
   ARTICLE SHARING. See single.php for why there are no network widgets.
   --------------------------------------------------------------- */
.share { margin: 54px 0 0; padding: 26px 0 0; border-top: 1px solid var(--ink-200); }
.share-label { margin: 0 0 16px; font-weight: 700; color: var(--ink-900); }
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The buttons are the quiet secondary treatment on purpose: this sits at the
   foot of an article whose real call to action is the valuation block below it,
   and a row of loud buttons here would compete with it. */
.share .btn { font-size: .9375rem; }
/* Reserves the line so the layout does not jump when the copied message
   appears. Empty until the script writes into it. */
.share-said { margin: 12px 0 0; min-height: 1.4em; font-size: .9375rem; color: var(--green-800); font-weight: 600; }

@media (max-width: 560px) {
  .share-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------------
   SOCIAL LINKS + WHATSAPP BUTTON. Added 2026-09-06.
   --------------------------------------------------------------- */
.social { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.social-link {
  color: rgba(255,255,255,.78); text-decoration: none; font-size: .9375rem; font-weight: 600;
  border-bottom: 1px solid transparent;
}
.social-link:hover { color: var(--white); border-bottom-color: var(--green-400); }
/* On a light ground (the contact page) the footer's white would vanish. */
.social--light .social-link { color: var(--green-800); }
.social--light .social-link:hover { border-bottom-color: var(--green-700); }

/* ⚠️ A LINK STYLED AS A BUTTON, NOT A CHAT WIDGET. See inc/social.php for why
   this must not become a third-party embed.

   ⚠️ THE BOTTOM OFFSET CLEARS THE COOKIE BANNER, which is fixed to the bottom of
   the viewport. Without it the two overlap on a phone and the banner wins. If
   the banner's height ever changes, this changes with it. */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 150;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: #25D366; color: #05391b; text-decoration: none;
  font-weight: 800; font-size: .9375rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.wa:focus-visible { outline: 3px solid var(--green-900); outline-offset: 3px; }
.wa-icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* ⚠️ The label is hidden on a phone, not the button. A bare green circle is
   still a recognised WhatsApp affordance, and the aria-label carries the
   meaning for anyone who cannot see it. */
@media (max-width: 560px) {
  .wa { padding: 13px; right: 14px; bottom: 14px; }
  .wa-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* When the cookie banner is on screen the button steps above it. */
body:has(.cc:not([hidden])) .wa { bottom: 128px; }
@media (max-width: 700px) { body:has(.cc:not([hidden])) .wa { bottom: 190px; } }

/* A near-square group photograph in the letterbox .promise-shot slot.
   member/team-property-cloud.jpg is 1.19:1 against the slot's 2.27:1, so only
   52% of the frame is ever on screen. Measured at 1400x616: 45% cuts them off
   at the knees, 62% takes their feet, 100% takes the tops of their heads, and
   78% is the one value that holds all four whole, head to foot, with a strip
   of sky still showing. */
.promise-shot--group img { object-position: center 78%; }

/* The eight promises dialog on the apply funnel. Native <dialog>, so it sits in
   the browser's top layer and no ancestor transform can clip it. */
.ean-dialog { border: 0; border-radius: 12px; padding: 0; max-width: 620px; width: calc(100% - 32px); background: var(--paper, #FAF9F5); color: var(--ink, #1A1A1A); }
.ean-dialog::backdrop { background: rgba(14, 62, 34, .55); }
.ean-dialog-inner { padding: 26px 28px 24px; }
.ean-dialog h2 { margin: 0 0 8px; font-size: 1.5rem; }
.ean-dialog p { margin: 0 0 14px; color: var(--ink-700, #4a4a4a); }
.ean-dialog-list { margin: 0 0 20px; padding-left: 1.2em; }
.ean-dialog-list li { margin-bottom: 9px; line-height: 1.5; }
.field-aside { margin: 6px 0 0 28px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--green, #1F7A47); text-decoration: underline; cursor: pointer; }
.linkish:hover { text-decoration: none; }

/* Show/hide on password fields in the member area.
   Words rather than an eye icon, per the member area's own design rules. */
.ma-pw-wrap { position: relative; display: block; }
.ma-pw-wrap input { width: 100%; padding-right: 74px; }
.ma-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px 10px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 700;
  color: var(--green, #1F7A47); text-decoration: underline;
}
.ma-pw-toggle:hover { text-decoration: none; }
.ma-pw-toggle:focus-visible { outline: 2px solid var(--green, #1F7A47); outline-offset: 2px; border-radius: 4px; }

/* The account forms that share the sign-in panel. */
.ma-links { margin-top: 14px; font-size: 0.9375rem; }
#ma-forgot-form h3, #ma-newpw-form h3, #ma-accept-form h3 { margin: 0 0 6px; font-size: 1.25rem; }