/* =====================================================================
   MANIFESTO
   Dark opening, seven editorial arguments, one closing position.
   This page stays on the shared site canvas and uses its typography,
   spacing, buttons, navigation and one-shot reveal system.
   ===================================================================== */

.mf-page{
  --mf-measure:38rem;
  --mf-blue:var(--blue-accent,#3173f6);
  --mf-blue-deep:#1f55bf;
  --mf-blue-pale:#a9c8ff;
  --mf-blue-wash:rgba(49,115,246,.07);
  --mf-rule:rgba(49,115,246,.23);
}

.mf-page ::selection{background:rgba(49,115,246,.2)}
.mf-page main :where(a,button):focus-visible{outline-color:var(--mf-blue)}

/* =====================================================================
   OPENING
   The approved hero structure and proportions are retained. Blue is
   the page's sole editorial accent and ties it to the wider site.
   ===================================================================== */
.mf-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(94svh,940px);
  display:flex;flex-direction:column;justify-content:center;
  padding:180px 0 120px;
  background:
    radial-gradient(120% 80% at 50% 0%,#15161c 0%,transparent 60%),
    linear-gradient(180deg,#0b0b0d 0%,#0e0f13 60%,#0b0b0d 100%);
  color:#f4f5f7;
}
.mf-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  mask-image:radial-gradient(120% 82% at 50% 34%,#000 34%,transparent 80%);
}
.mf-hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:960px}
.mf-hero .eyebrow{color:var(--mf-blue-pale)}

.mf-h1{
  margin:0;font-size:clamp(34px,5.4vw,68px);font-weight:700;
  letter-spacing:-2.4px;line-height:1.04;color:#fff;max-width:17ch;
  text-wrap:balance;
}

.mf-body{display:flex;flex-direction:column;gap:18px;max-width:var(--mf-measure)}
.mf-body p{margin:0;font-size:16.5px;line-height:1.72;color:rgba(244,245,247,.76);text-wrap:pretty}

.mf-scroll{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(244,245,247,.42);
}
.mf-scroll-rail{display:block;width:60px;height:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.mf-scroll-rail i{
  position:absolute;inset:0;background:var(--mf-blue-pale);
  transform:translateX(-100%);animation:mfRun 2.4s var(--ease) infinite;
}
@keyframes mfRun{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}

/* =====================================================================
   SEVEN ARGUMENTS
   Copy remains first in the document for reading order. Even sections
   move the evidence to the left with grid areas only on wider screens.
   ===================================================================== */
.mf-argument{
  position:relative;isolation:isolate;
  padding:clamp(56px,6.5vw,88px) 0;
  border-top:1px solid rgba(17,17,17,.075);
  /* The glow below is deliberately hung off the side of the section, and
     without this it hangs off the side of the document too: 56vw of it
     sat past the right edge and the whole page scrolled sideways by
     exactly that much. Clip rather than hidden, so the section does not
     become a scroll container. */
  overflow:clip;
}
.mf-argument::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(56vw,760px);aspect-ratio:1;right:-20%;top:4%;
  background:radial-gradient(circle,var(--mf-blue-wash) 0%,transparent 68%);
}
.mf-argument:nth-of-type(even)::before{right:auto;left:-22%;top:8%}

.mf-split{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  grid-template-areas:"copy visual";
  align-items:center;gap:clamp(64px,9vw,128px);
}
.mf-even .mf-split{
  grid-template-columns:minmax(320px,.88fr) minmax(0,1.12fr);
  grid-template-areas:"visual copy";
}

.mf-copy{
  grid-area:copy;display:flex;flex-direction:column;align-items:flex-start;
  max-width:640px;
}
.mf-label{
  margin:0 0 18px;color:var(--mf-blue-deep);
  font-size:11.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
}
.mf-h2{
  margin:0;max-width:15ch;color:var(--ink-1);
  font-size:clamp(34px,4.25vw,56px);font-weight:700;
  letter-spacing:-1.9px;line-height:1.045;text-wrap:balance;
}
.mf-body-light{margin-top:28px;gap:14px;max-width:37rem}
.mf-body-light p{color:var(--ink-2);font-size:16.5px;line-height:1.68}

/* Evidence is ruled, never carded. The narrow blue edge aligns every
   figure and process without enclosing either in a generic tile. */
.mf-evidence{
  grid-area:visual;position:relative;min-width:0;
  padding:10px 0 10px clamp(26px,3.5vw,46px);
  border-left:1px solid var(--mf-rule);
}
.mf-evidence::before{
  content:"";position:absolute;left:-1px;top:10px;width:2px;height:48px;
  background:var(--mf-blue);
}
.mf-stat{
  display:block;color:var(--mf-blue);
  font-size:clamp(58px,7.3vw,96px);font-weight:700;
  line-height:.9;letter-spacing:-4px;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mf-stat-compact{font-size:clamp(48px,6vw,78px);letter-spacing:-3.5px}
.mf-evidence>p{
  margin:24px 0 0;max-width:24rem;color:var(--ink-2);
  font-size:15px;line-height:1.55;text-wrap:balance;
}

/* One process component, used by both software and execution. */
.mf-process{padding-top:24px;padding-bottom:24px}
.mf-steps{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.mf-steps-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.mf-steps::before{
  content:"";position:absolute;left:7px;right:7px;top:6px;height:1px;
  background:var(--mf-rule);
}
.mf-steps li{
  position:relative;padding:28px 8px 0 0;
  color:var(--ink-2);font-size:10.5px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;
}
.mf-steps li::before{
  content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--mf-blue);
}
.mf-steps li:last-child::before{background:var(--mf-blue)}

/* =====================================================================
   CLOSING POSITION
   ===================================================================== */
.mf-close{
  position:relative;padding:clamp(60px,7vw,95px) 0 clamp(64px,8vw,108px);
  border-top:1px solid rgba(17,17,17,.075);
}
.mf-close-inner{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.mf-rule{display:block;width:min(100%,180px);height:1px;background:var(--mf-blue)}
/* The requirement on the left, what we do about it on the right. The
   right-hand column is centred against the height of the left one, so
   the two read as one statement rather than two stacked corners. */
.mf-close-grid{
  width:100%;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:28px 32px;align-items:center;
}
.mf-thesis-block{display:flex;flex-direction:column;gap:16px}
.mf-thesis-lead{
  margin:0;font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--mf-blue);
}
/* Set line by line rather than as one running paragraph: the three
   requirements are a list and were only ever a paragraph because they
   were typed as one. Smaller than the page's other display type, and
   bold, so it still lands as the statement it is. */
.mf-thesis{
  /* the grid column is the measure here — a second cap on top of it only
     left a ragged margin of dead space between the two halves */
  color:var(--ink-1);max-width:none;
  font-size:clamp(19px,1.85vw,24px);font-weight:700;
  line-height:1.32;letter-spacing:-.55px;
}
.mf-thesis span{display:block}
.mf-thesis span+span{margin-top:2px}
.mf-lastline{max-width:var(--mf-measure)}
.mf-lastline.mf-body p{font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.mf-mark{height:28px;width:auto;max-width:none;object-fit:contain;margin-top:8px}
.mf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.mf-close .btn-primary{
  background:var(--mf-blue);box-shadow:0 4px 18px rgba(49,115,246,.2);
}
.mf-close .btn-primary:hover{
  background:var(--mf-blue-deep);box-shadow:0 10px 30px rgba(49,115,246,.25);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  .mf-hero{min-height:auto;padding:140px 0 104px}
  .mf-h1,.mf-h2,.mf-thesis{max-width:none}
  .mf-close-grid{grid-template-columns:1fr;gap:34px}
  .mf-body p{font-size:15.5px}
  .mf-scroll{display:none}

  .mf-argument{padding:52px 0}
  .mf-split,.mf-even .mf-split{
    grid-template-columns:1fr;grid-template-areas:"copy" "visual";gap:62px;
  }
  .mf-copy{max-width:700px}
  .mf-body-light{max-width:620px}
  .mf-evidence{width:100%;max-width:720px}
  .mf-stat{font-size:clamp(58px,12vw,88px)}
  .mf-stat-compact{font-size:clamp(48px,10vw,72px)}
}

@media (max-width:640px){
  .mf-hero{padding:128px 0 92px}
  .mf-hero-inner{gap:18px}
  .mf-argument{padding:42px 0}
  .mf-split,.mf-even .mf-split{gap:48px}
  .mf-label{margin-bottom:15px}
  .mf-h2{font-size:clamp(31px,9.5vw,42px);letter-spacing:-1.35px}
  .mf-body-light{margin-top:22px}
  .mf-evidence{padding-left:22px}
  .mf-stat{font-size:clamp(50px,15vw,68px);letter-spacing:-2.8px}
  .mf-stat-compact{font-size:clamp(42px,12.5vw,58px);letter-spacing:-2.2px}
  /* Four or five steps across a phone came to 420 and 520 pixels, so the
     row was put on a sideways scroller. On a page nobody scrolls sideways
     that just cut the last two steps off the screen. The process turns
     and runs down the page instead, rule and all, and every step is
     visible without a gesture nothing else here asks for. */
  .mf-process{overflow:visible;padding-bottom:0}
  .mf-steps,.mf-steps-five{grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
  .mf-steps::before{left:6px;right:auto;top:10px;bottom:10px;width:1px;height:auto}
  .mf-steps li{
    display:flex;align-items:center;min-height:14px;
    padding:0 0 0 26px;white-space:normal;
  }
  .mf-steps li::before{top:50%;margin-top:-6px}
  .mf-close{padding:48px 0 58px}
  .mf-cta{flex-direction:column;align-self:stretch;width:100%}
  .mf-cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .mf-scroll-rail i{animation:none;transform:none}
}