/* ==========================================================================
   MIRR - the-mirr.com
   Palette, type and layout are the approved v20 design.
   Motion is additive and degrades to nothing without JS or with
   prefers-reduced-motion.
   ========================================================================== */

:root{
  --ground:#E5EAEF; --ink:#0E1A24; --muted:#566573; --rule:#BCC6D0;
  --inset:#D6DEE6; --body:#24333F; --soft:#3D4A57; --faint:#7C8B99;
  --accent:#0C6FC4; --accent-hover:#08508F; --signal:#8A5A12;
  --band:#0E1A24; --card:#16293B; --card-border:#294056;
  --on-dark:#E9EFF4; --on-dark-muted:#A9BBC9; --on-dark-soft:#93A7B6;
  --on-dark-faint:#7E94A6; --on-dark-mid:#C2D2DE; --accent-on-dark:#4FB3F0;
  --amber:#E0A94A;

  --sans:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --serif:'Literata',Georgia,serif;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;

  --gutter:96px;
  --gap:56px;
  --step:104px;
  --fs-body:19px;
  --fs-body-sm:17px;
  --fs-body-md:18px;

  --ease:cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
svg{display:block;max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.band :focus-visible{outline-color:var(--accent-on-dark)}

.page{max-width:1280px;margin:0 auto;background:var(--ground);overflow-x:clip}
.sec{position:relative;z-index:1;padding-left:var(--gutter);padding-right:var(--gutter);display:flex;flex-direction:column}
.step{margin-top:var(--step)}

/* --------------------------------------------------------------------------
   The spine: a centre rule drawn by two-column sections only.
   Absolutely positioned so it never becomes a grid item.
   -------------------------------------------------------------------------- */
.spine{position:relative}
.spine::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  margin-left:-.5px;background:var(--rule);pointer-events:none;
}

/* ---- grids ---- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.col-l{padding-right:var(--gap)}
.col-r{padding-left:var(--gap)}

/* ---- type ---- */
.lbl{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lbl-sm{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.mono-note{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--muted)}

.h2{margin:16px 0 0;font-family:var(--sans);font-size:clamp(34px,5.1vw,60px);font-weight:700;letter-spacing:-.038em;line-height:.99;color:var(--ink);text-wrap:balance}
.h3{margin:0;font-family:var(--sans);font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.028em;line-height:1.04;color:var(--ink)}

.body{margin:0;font-family:var(--serif);font-size:var(--fs-body);line-height:1.64;color:var(--body)}
.body-md{margin:0;font-family:var(--serif);font-size:var(--fs-body-md);line-height:1.62;color:var(--body)}
.body-sm{margin:0;font-family:var(--serif);font-size:var(--fs-body-sm);line-height:1.6;color:var(--body)}

.headbar{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  padding:6px 11px;border:1px solid var(--rule);border-radius:2px;background:var(--inset);
  font-family:var(--mono);font-size:12px;color:var(--soft);
  transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.chip:hover{border-color:var(--accent);background:#CFDAE5;color:var(--ink)}
.chip-open{
  padding:9px 15px;border:1px solid var(--ink);border-radius:2px;
  font-family:var(--mono);font-size:13px;color:var(--ink);
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.chip-open:hover{background:var(--ink);color:var(--ground)}

/* ---- masthead ---- */
.topbar{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.topbar span{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--muted)}
.topbar .tag{text-transform:uppercase}

.wordmark-wrap{margin-top:clamp(48px,7.5vw,96px);display:flex;flex-direction:column;align-items:center}
.wordmark{width:100%;max-width:700px}
.wordmark svg{width:100%;height:auto}
.wordmark-echo{
  width:100%;max-width:700px;aspect-ratio:700/84;overflow:hidden;line-height:0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.26),rgba(0,0,0,0));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.26),rgba(0,0,0,0));
}
.wordmark-echo > div{transform:scaleY(-1);transform-origin:top;line-height:0}
.wordmark-echo svg{width:100%;height:auto}

/* the I stroke of the M, drawn last */
.js .stroke-i{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.js .wordmark.lit .stroke-i{transform:scaleY(1);transition:transform 1s var(--ease) .35s}

.pullquote{margin:38px auto 0;max-width:940px;text-align:center}
.pullquote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.6vw,29px);font-weight:400;line-height:1.42;color:var(--ink);text-wrap:balance}

.cmdstrip{
  margin:40px auto 0;display:inline-grid;grid-template-columns:repeat(4,auto);
  gap:1px;background:var(--ink);border:1px solid var(--ink);border-radius:2px;overflow:hidden;
}
.cmdstrip span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;background:var(--ground);
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.cmdstrip span:hover{background:var(--ink);color:var(--ground)}
.cmdcaption{margin:16px 0 0;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--muted)}

.intro{margin-top:56px;column-gap:var(--gap);row-gap:34px;padding-top:28px;border-top:1px solid var(--rule)}
.intro > div{display:flex;flex-direction:column;gap:11px}

/* ---- the cycle ---- */
.cycle-cell{padding:40px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:13px}
.cycle-cell.col-l{padding-right:var(--gap)}
.cycle-cell.col-r{padding-left:var(--gap)}
.cycle-fill{border-bottom:1px solid var(--rule)}
.cycle-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cycle-head .num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent)}
.cycle-head .name{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)}
.cycle-head .flag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint)}
.cycle-head .flag.gated{color:var(--signal)}

/* ---- impact rows ---- */
.row{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.row .t{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.row .d{font-family:var(--serif);font-size:var(--fs-body-sm);line-height:1.55;color:var(--soft)}

.callout{margin-top:30px;padding:22px 26px;border-left:3px solid var(--accent);background:var(--inset);display:flex;flex-direction:column;gap:7px}
.callout .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.callout .v{font-family:var(--serif);font-size:var(--fs-body-md);line-height:1.6;color:var(--body)}

/* ---- the gate (dark band) ---- */
.band{
  position:relative;z-index:1;margin-top:var(--step);
  padding:clamp(56px,7vw,84px) var(--gutter) clamp(60px,7.5vw,92px);
  background:var(--band);display:flex;flex-direction:column;
}
.band .lbl{color:var(--accent-on-dark)}
.band h2{margin:18px 0 0;max-width:940px;font-family:var(--sans);font-size:clamp(32px,5.1vw,60px);font-weight:700;letter-spacing:-.038em;line-height:.99;color:var(--on-dark);text-wrap:balance}
.band .lede{margin:26px 0 0;max-width:820px;font-family:var(--serif);font-size:clamp(18px,1.8vw,20px);line-height:1.62;color:var(--on-dark-muted)}

.gaterow{margin-top:46px;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.gatecard{flex:1 1 420px;max-width:700px;background:var(--card);border:1px solid var(--card-border);border-radius:3px;overflow:hidden}
.gatecard .hd{padding:15px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--card-border)}
.gatecard .hd .n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--on-dark-faint)}
.gatestate{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--amber);
  transition:color .3s var(--ease);
}
.gatestate .dot{
  width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none;
  transition:background-color .3s var(--ease);
}
.js .gatestate .dot{animation:pulse 2.4s var(--ease) infinite}
.gatestate[data-state="verified"]{color:var(--accent-on-dark)}
.gatestate[data-state="rejected"]{color:var(--on-dark-faint)}
.gatestate[data-state="rejected"] .dot,
.gatestate[data-state="verified"] .dot{animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.gatecard .bd{padding:24px;display:flex;flex-direction:column;gap:17px}
.gatecard .title{font-family:var(--sans);font-size:clamp(20px,1.9vw,23px);font-weight:600;letter-spacing:-.02em;color:var(--on-dark)}
.kv{display:grid;grid-template-columns:104px minmax(0,1fr);row-gap:9px;column-gap:18px;font-family:var(--mono);font-size:13px;line-height:1.5}
.kv .k{color:var(--faint)}
.kv .v{color:var(--on-dark-mid)}
.kv .v.added{color:var(--accent-on-dark)}

.btns{display:flex;gap:9px;padding-top:4px;flex-wrap:wrap;align-items:center}
.btns button{
  min-height:44px;padding:0 22px;border-radius:2px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease);
}
.btns .primary{border:0;background:var(--accent-on-dark);color:#06192B;font-weight:600}
.btns .primary:hover{background:#7CC8F6}
.btns .ghost{border:1px solid #3A5168;background:transparent;color:var(--on-dark-mid);font-weight:500}
.btns .ghost:hover{border-color:var(--on-dark-mid);color:var(--on-dark)}
.btns button[disabled]{opacity:.32;cursor:default}
.btns .reset{
  min-height:44px;padding:0 6px;border:0;background:transparent;color:var(--on-dark-faint);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
}
.btns .reset:hover{color:var(--on-dark-mid)}
[hidden]{display:none!important}

.gatenote{margin:0;flex:1 1 260px;max-width:308px;padding-top:6px;font-family:var(--serif);font-size:var(--fs-body);line-height:1.6;color:var(--on-dark-muted)}

.guarantees{margin-top:62px;border-top:1px solid var(--card-border)}
.guarantees > div{padding:30px 40px 0;display:flex;flex-direction:column;gap:11px}
.guarantees > div:first-child{padding-left:0}
.guarantees > div:last-child{padding-right:0}
.guarantees .g{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--accent-on-dark)}
.guarantees .t{font-family:var(--sans);font-size:clamp(20px,1.9vw,23px);font-weight:600;letter-spacing:-.02em;color:var(--on-dark)}
.guarantees p{margin:0;font-family:var(--serif);font-size:var(--fs-body-sm);line-height:1.6;color:var(--on-dark-soft)}

/* ---- governance ---- */
.gov-cell{padding:32px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:9px}
.gov-cell.col-l{padding-right:var(--gap)}
.gov-cell.col-r{padding-left:var(--gap)}
.gov-cell.last{border-bottom:0}
.gov-cell .t{font-family:var(--sans);font-size:clamp(20px,1.8vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}

/* ---- limits ---- */
.failbox{margin-top:36px;padding:24px 26px;background:var(--band);border-radius:3px;display:flex;flex-direction:column;gap:14px}
.failbox .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark)}
.faillist{display:flex;flex-direction:column;gap:11px}
.failrow{display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:16px;row-gap:3px}
.failrow .m{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--on-dark)}
.failrow .w{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--on-dark-soft)}

.limitrow{padding:22px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.limitrow .t{font-family:var(--sans);font-size:clamp(19px,1.7vw,21px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.limitrow .d{font-family:var(--serif);font-size:var(--fs-body-sm);line-height:1.55;color:var(--soft)}

/* ---- portability ---- */
.port{margin-top:36px;gap:44px}
.port > div{display:flex;flex-direction:column;gap:11px}
.port .t{font-family:var(--sans);font-size:clamp(20px,1.8vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}

/* ---- pilot ---- */
.pilot-h2{margin:38px auto 0;max-width:1000px;text-align:center;font-family:var(--sans);font-size:clamp(30px,4.4vw,52px);font-weight:700;letter-spacing:-.034em;line-height:1.02;color:var(--ink);text-wrap:balance}
.pilot-lede{margin:22px auto 0;max-width:820px;text-align:center}
.phases{margin-top:40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.phases > div{padding:28px 40px;display:flex;flex-direction:column;gap:11px}
.phases > div:first-child{padding-left:0}
.phases > div:last-child{padding-right:0}
.phases .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--accent)}

.pilot-foot{margin-top:28px;display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.metrics{display:flex;flex-direction:column;gap:13px;flex:1 1 380px}
.metrics .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.exit{flex:1 1 300px;max-width:366px;padding:19px 22px;border-left:3px solid var(--accent);background:var(--inset);display:flex;flex-direction:column;gap:6px}
.exit .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.exit .v{font-family:var(--serif);font-size:var(--fs-body-sm);line-height:1.55;color:var(--body)}

/* ---- close ---- */
.close{margin-top:var(--step);padding:clamp(52px,6vw,72px) var(--gutter) clamp(52px,5.5vw,68px);border-top:2px solid var(--ink);display:flex;flex-direction:column}
.close h2{margin:0 auto;max-width:1040px;text-align:center;font-family:var(--sans);font-size:clamp(28px,3.9vw,46px);font-weight:700;letter-spacing:-.034em;line-height:1.08;color:var(--ink);text-wrap:balance}
.closecols{margin-top:26px;column-gap:var(--gap);row-gap:20px}
.cta{margin-top:40px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.cta a{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:54px;padding:0 30px;border-radius:2px;background:var(--accent);color:#F7FAFC;
  text-decoration:none;font-family:var(--sans);font-size:16px;font-weight:600;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.cta a:hover{background:var(--accent-hover);color:#F7FAFC;transform:translateY(-2px)}
.cta a:active{transform:none}
/* The write-up link: same shape, outlined, so the LinkedIn button stays the primary action. */
.cta a.secondary{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cta a.secondary:hover{background:var(--accent);color:#F7FAFC}
.colophon{margin-top:56px;padding-top:26px;border-top:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.colophon p{margin:0;max-width:960px;font-family:var(--serif);font-size:var(--fs-body-sm);line-height:1.68;color:var(--muted)}
.colophon strong{font-weight:600;color:var(--ink)}
.colophon .dom{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--faint)}

/* ==========================================================================
   Motion. Applied only when JS is on, and only via the .js hook so the
   page is fully readable with JS disabled or still loading.
   ========================================================================== */

.js .reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .reveal.in{opacity:1;transform:none}

/* section rules sweep in rather than simply appearing */
.js .headbar,.js .topbar{border-bottom-color:transparent}
.js .headbar::after,.js .topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);
}
.js .headbar.in::after,.js .topbar.in::after{transform:scaleX(1)}

/* the spine grows downward as its section arrives */
.js .spine::before{transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease)}
.js .spine.in::before{transform:scaleY(1)}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .headbar,.js .topbar{border-bottom-color:var(--ink)}
  .js .headbar::after,.js .topbar::after{display:none}
  .js .spine::before{transform:none;transition:none}
  .js .stroke-i{transform:none}
  .js .gatestate .dot{animation:none}
  .cta a:hover{transform:none}
  *{scroll-behavior:auto!important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  :root{--gutter:64px;--gap:44px;--step:88px}
}

@media (max-width:880px){
  :root{--gutter:32px;--gap:0px;--step:72px;--fs-body:17px;--fs-body-md:17px}

  /* one column, so the spine has no column boundary to fall on */
  .spine::before{display:none}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .col-l{padding-right:0}
  .col-r{padding-left:0}

  .problem-head{margin-bottom:22px}

  /* the alternating spacer cells exist only to offset across the spine */
  .cycle-fill{display:none}
  .cycle-cell{padding:30px 0}
  .cycle-cell.col-l,.cycle-cell.col-r{padding-left:0;padding-right:0}

  .impact-col{padding:0!important}
  .impact-col + .impact-col{margin-top:34px}

  .gov-cell{padding:26px 0}
  .gov-cell.col-l,.gov-cell.col-r{padding-left:0;padding-right:0}
  .gov-cell.last{border-bottom:1px solid var(--rule)}
  .gov-grid > .gov-cell:last-child{border-bottom:0}

  .limits-right{padding-top:0;border-top:0;margin-top:30px}

  .guarantees > div{padding:26px 0 0}
  .guarantees > div + div{border-top:1px solid var(--card-border);margin-top:24px}

  .phases > div{padding:24px 0}
  .phases > div + div{border-top:1px solid var(--rule)}

  .port{gap:30px}
  .intro{margin-top:40px}
  .gaterow{gap:26px}
  .gatenote{max-width:none}
  .colophon{margin-top:40px}
}

@media (max-width:560px){
  :root{--gutter:16px;--step:60px}
  .cmdstrip{grid-template-columns:repeat(2,1fr);width:100%}
  .cmdstrip span{padding:13px 10px}
  .kv{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .kv .k{margin-top:8px}
  .failrow{grid-template-columns:minmax(0,1fr)}
  .btns button{flex:1 1 auto}
  .btns .reset{flex:1 1 100%}
  .cta a{width:100%}
  .topbar .dom{display:none}
}