/* MITAR website — hand-written, no framework. One file, no inline styles anywhere (the site runs under a strict CSP).
   Contents: 1 tokens · 2 base · 3 layout · 4 header · 5 buttons · 6 hero + meter simulator · 7 sections · 8 forms · 9 footer
             10 motion · 11 print */

/* ============================== 1 · tokens ============================== */
/* the extended faces come first and the basic Latin faces last: where their ranges overlap (œ, ı) the later rule wins, so a French page never fetches the large extended file for one letter. The naira sign is left to the system font for the same reason. */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ArchivoBlack-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20A5,U+20A7-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ArchivoBlack-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/Inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20A5,U+20A7-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/Inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F6F5F0; --paper-2:#EFEDE4; --paper-3:#E7E4D8; --white:#FFFFFF;
  --ink:#0E1A13; --ink-2:#34403A; --ink-3:#59645D; --line:#DEDBCE; --line-2:#C7C3B2; --ctl:#85816C;
  --g:#0F7A43; --g-2:#27C874; --g-3:#1A9349; --deep:#073B20; --deep-2:#0A5A31; --soft:#E5F2EA;
  --amber:#FF9F1C; --amber-2:#FFB23E; --amber-ink:#8A4B00; --amber-soft:#FFF0D6; --crit:#C23434;
  --f-disp:'Archivo Black','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --wrap:1240px; --gut:clamp(20px,4.2vw,52px);
  --r-s:8px; --r-m:14px; --r-l:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-s:0 1px 0 rgba(14,26,19,.04),0 8px 22px -14px rgba(14,26,19,.28);
  --shadow-l:0 1px 0 rgba(14,26,19,.04),0 38px 70px -34px rgba(7,59,32,.5);
  --top-h:72px;
}

/* ============================== 2 · base ============================== */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(16px,1.05vw + 12px,18px)/1.62 var(--f-body);font-feature-settings:'cv11','ss01','calt';-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-color:rgba(15,122,67,.45);text-underline-offset:.18em}
a:hover{text-decoration-color:currentColor}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.band :focus-visible,.split .give :focus-visible,.lang-hint :focus-visible{outline-color:var(--amber-2)}
::selection{background:var(--amber-2);color:var(--ink)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-s);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}      /* a long word breaks only when it cannot fit (enlarged text on a small phone) */
p,li{text-wrap:pretty}
.disp{font-family:var(--f-disp);font-weight:400;letter-spacing:-.018em;line-height:.98}
.num{font-variant-numeric:tabular-nums lining-nums}
sup{font-size:.62em;line-height:0;vertical-align:baseline;position:relative;top:-.62em;margin-left:.1em;font-weight:800}
sup a{color:var(--amber-ink);text-decoration:none;padding:0 .12em}
sup a:hover{text-decoration:underline}

/* icons: defined once as <symbol>s in the layout */
.i{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ============================== 3 · layout ============================== */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,10vw,148px);position:relative}
.sec--tight{padding-block:clamp(48px,6vw,88px)}
.sec--paper2{background:var(--paper-2)}
.sec--line{border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px)}
.kicker{display:flex;align-items:center;gap:12px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-bottom:20px}
.kicker b{font-family:var(--f-disp);font-weight:400;color:var(--amber-ink);letter-spacing:.02em;font-size:1rem}
.kicker::after{content:"";height:1px;width:56px;background:currentColor;opacity:.35}
.sec-title{font-family:var(--f-disp);font-weight:400;letter-spacing:-.02em;line-height:1;font-size:clamp(2rem,4.3vw,3.6rem);max-width:17ch}
.sec-title--wide{max-width:24ch}
.lede{font-size:clamp(1.05rem,.5vw + .95rem,1.28rem);line-height:1.55;color:var(--ink-2);max-width:56ch}
.sec-title + .lede{margin-top:24px}
.muted{color:var(--ink-3)}
.fine{font-size:.82rem;line-height:1.5;color:var(--ink-3)}
.tick-rule{height:14px;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 8px) bottom/100% 7px no-repeat,repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px 64px) bottom/100% 14px no-repeat;opacity:.55}

/* ============================== 4 · header ============================== */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.top.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(14,26,19,.5)}
.top .wrap{display:flex;align-items:center;gap:clamp(14px,2.5vw,36px);height:var(--top-h)}
.logo{display:block;flex:none;line-height:0}
.logo svg{height:34px;width:auto}
.nav{display:flex;gap:clamp(4px,1.2vw,18px);margin-left:auto;align-items:center}
.nav a{position:relative;text-decoration:none;font-weight:550;font-size:.93rem;padding:10px 6px;color:var(--ink-2)}
.nav a::after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.lang{display:flex;align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.08em;border:1px solid var(--line-2);border-radius:99px;padding:3px}
.lang a{padding:5px 10px;border-radius:99px;text-decoration:none;color:var(--ink-3)}
.lang a[aria-current="true"]{background:var(--ink);color:#fff}
.lang a:not([aria-current]):hover{color:var(--ink)}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--ctl);background:transparent;align-items:center;justify-content:center}
.menu-btn .i{width:22px;height:22px}
.nav a.nav-cta{display:none}      /* only inside the phone menu; the bar has its own button on wide screens */
/* header breakpoints are in em (61.25em = 980 px, 23.4em = 375 px at the default text size) so that a visitor who enlarges
   the browser's text gets the phone header before the links run out of room */
@media (max-width:61.25em){
  .menu-btn{display:inline-flex}
  .no-js .menu-btn{display:none}
  .top .btn--sm{display:none}
  /* --nav-top is set by site.js when the menu opens: the panel starts under the header even when the language bar sits above it */
  .nav{position:fixed;inset:var(--nav-top,var(--top-h)) 0 0 0;background:var(--paper);flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--gut) 40px;margin:0;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s}
  .nav a{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.7rem,7vw,2.4rem);letter-spacing:-.015em;padding:14px 0;border-bottom:1px solid var(--line);width:100%;color:var(--ink)}
  .nav a::after{display:none}
  .nav .lang{margin-top:22px;border-color:var(--line-2)}
  .nav .lang a{font-family:var(--f-body);font-size:.85rem;padding:8px 14px;border:0;width:auto}
  .nav a.nav-cta{display:inline-flex;width:auto;margin-top:28px;padding:16px 24px;border:1.5px solid var(--bg);font:650 .96rem/1 var(--f-body);letter-spacing:0;color:var(--fg)}
  .nav a.nav-cta:hover{color:var(--ink);border-color:var(--amber)}
  .nav-open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}
  .nav-open{overflow:hidden}
}
/* a short call to action stays in the bar on phones and tablets (the smallest phones get it inside the menu) */
@media (min-width:23.4em) and (max-width:61.25em){
  .top .btn--sm{display:inline-flex;order:2;margin-left:auto;flex:none;white-space:nowrap}
  .menu-btn{order:3;margin-left:0;flex:none}
}
@media (min-width:23.4em) and (max-width:26.9em){.top .btn--sm{padding:11px 16px}.top .btn--sm .i{display:none}}
.lang-hint{background:var(--deep);color:#DDEFE4;font-size:.88rem}
.lang-hint .wrap{display:flex;gap:14px;align-items:center;justify-content:center;padding-block:9px}
.lang-hint a{color:#fff;font-weight:700;white-space:nowrap}
.lang-hint button{background:none;border:0;color:#9ADBB5;padding:4px 8px;border-radius:6px}
@media (max-width:499px){
  .lang-hint .wrap{flex-wrap:wrap;column-gap:10px;row-gap:0;padding-block:7px}
  .lang-hint span{flex:1 0 100%;text-align:center}
}
@media (max-width:359px){.lang-hint{font-size:.8rem}}

/* ============================== 5 · buttons ============================== */
.btn{--bg:var(--ink);--fg:#fff;display:inline-flex;align-items:center;gap:12px;color:var(--fg);border:1.5px solid var(--bg);padding:15px 22px 15px 24px;border-radius:99px;font-weight:650;font-size:.96rem;line-height:1;text-decoration:none;background:linear-gradient(var(--amber),var(--amber)) 0 100%/100% 0 no-repeat,var(--bg);transition:background-size .5s var(--ease),color .3s,box-shadow .3s,border-color .3s}
.btn .i{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover{color:var(--ink);background-size:100% 100%;border-color:var(--amber);box-shadow:0 16px 30px -18px rgba(255,159,28,.9)}
.btn:hover .i{transform:translateX(4px)}
.btn--g{--bg:var(--g)}
.btn--paper{--bg:var(--paper);--fg:var(--ink)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-2)}
.btn--sm{padding:11px 16px 11px 18px;font-size:.86rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.btn--g{--bg:var(--g)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:650;text-decoration:none;border-bottom:1.5px solid var(--amber);padding-bottom:3px}
.link-arrow .i{width:17px;height:17px;transition:transform .3s var(--ease)}
.link-arrow:hover .i{transform:translateX(4px)}

/* ============================== 6 · hero + meter simulator ============================== */
.hero{position:relative;padding-block:clamp(28px,4.6vw,64px) clamp(56px,7vw,104px);overflow:hidden}
.hero-map{position:absolute;right:-10%;top:-2%;width:min(74vw,940px);aspect-ratio:1/1.04;background:url(../img/africa-dots.svg) center/contain no-repeat;opacity:.42;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 40%);mask-image:linear-gradient(90deg,transparent 4%,#000 40%)}
.hero .wrap{position:relative}
.hero-grid{align-items:start;row-gap:44px}
.hero-copy{grid-column:1/8;padding-top:clamp(8px,2.4vw,40px)}
.hero-sim{grid-column:8/13}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g);margin-bottom:22px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--amber)}
.h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(2.3rem,4.5vw,4.1rem);line-height:.97;letter-spacing:-.026em}
.h1 > span{display:block;max-width:12.6ch;text-wrap:balance}
.h1 > span + span{margin-top:.14em}
.h1 .hl{display:inline;background:linear-gradient(var(--amber-2),var(--amber-2)) 0 88%/0 .2em no-repeat;transition:background-size 1s .6s var(--ease)}
.js .h1 .hl{background-size:0 .2em}
.js .loaded .h1 .hl,.no-js .h1 .hl{background-size:100% .2em}
.hero .lede{margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;align-items:center}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-2);font-size:.9rem;font-weight:600;color:var(--ink-2)}
.facts li{display:flex;align-items:center;gap:9px}
.facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g-2);box-shadow:0 0 0 4px rgba(39,200,116,.18)}

/* the simulator: a meter you can sell to */
.sim{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-l);padding:clamp(16px,1.9vw,22px);position:relative}
.sim-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.sim-title{font-family:var(--f-disp);font-weight:400;font-size:1.28rem;letter-spacing:-.01em}
.sim-tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber-soft);padding:4px 9px;border-radius:99px;white-space:nowrap}
.meter{position:relative;background:linear-gradient(180deg,#FBFBF8,#EFEEE6);border:1px solid var(--line-2);border-radius:18px;padding:16px 16px 14px;box-shadow:inset 0 1px 0 #fff,inset 0 -10px 18px -14px rgba(14,26,19,.25)}
.meter::before,.meter::after{content:"";position:absolute;top:50%;width:9px;height:34px;margin-top:-17px;background:var(--paper-3);border:1px solid var(--line-2)}
.meter::before{left:-9px;border-radius:6px 0 0 6px;border-right:0}
.meter::after{right:-9px;border-radius:0 6px 6px 0;border-left:0}
.meter-top{display:flex;align-items:center;justify-content:space-between;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.meter-top{gap:12px;align-items:flex-start}
.meter-top .num{white-space:nowrap;flex:none}
@media (max-width:340px){.meter-top{letter-spacing:.08em}}
.meter-top svg{height:15px;width:auto}
.lcd{background:#0B2218;border-radius:10px;padding:14px 16px 12px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 1px 0 #fff;color:#6BF0A6;position:relative;overflow:hidden}
.lcd::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%);pointer-events:none}
.lcd-label{display:flex;justify-content:space-between;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#4FBF82;opacity:.85}
.lcd-label span:last-child{text-transform:none}
.drum{display:flex;align-items:baseline;gap:2px;font-family:var(--f-disp);font-size:clamp(2.1rem,4.4vw,2.9rem);line-height:1;margin:6px 0 2px;text-shadow:0 0 12px rgba(107,240,166,.35);font-variant-numeric:tabular-nums}
.drum .col{display:inline-block;height:1em;overflow:hidden}
.drum .col span{display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.drum .col i{display:block;height:1em;line-height:1;font-style:normal}
.drum .dot{padding:0 1px}
.drum .col.lz{opacity:.2}
.drum .u{font-family:var(--f-body);font-weight:700;font-size:.9rem;letter-spacing:.08em;margin-left:8px;color:#4FBF82}
.leds{display:flex;gap:16px;margin-top:12px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.led{display:inline-flex;align-items:center;gap:7px}
.led::before{content:"";width:9px;height:9px;border-radius:50%;background:#BFC4B8;box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.led.on::before{background:var(--g-2);box-shadow:0 0 0 3px rgba(39,200,116,.22)}
.led.warn::before{background:var(--amber);box-shadow:0 0 0 3px rgba(255,159,28,.25)}
.led.pulse::before{animation:pulse 1s infinite}
.sim-ctl{margin-top:16px;display:grid;gap:12px}
.sim-lbl{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--ctl);background:var(--white);border-radius:99px;padding:9px 14px;font-weight:650;font-size:.88rem;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sim-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sim-row .btn{flex:1 1 auto;justify-content:space-between}
.switch{display:inline-flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .tr{width:38px;height:22px;border-radius:99px;background:var(--ctl);position:relative;transition:background .25s;flex:none}
.switch .tr::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.switch input:checked + .tr{background:var(--amber-ink)}
.switch input:checked + .tr::after{transform:translateX(16px)}
.switch input:focus-visible + .tr{outline:3px solid var(--ink);outline-offset:3px}
.flow{margin-top:14px;border-top:1px dashed var(--line-2);padding-top:10px;display:grid;gap:0}
.flow li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.86rem;color:var(--ink-3);padding:3px 0;transition:color .3s}
.flow li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);margin:4px 0 0 3px;background:#fff;transition:all .3s}
.flow li.act{color:var(--ink);font-weight:600}
.flow li.act::before{border-color:var(--amber);background:var(--amber);box-shadow:0 0 0 5px rgba(255,159,28,.22);animation:pulse 1s infinite}
.flow li.ok{color:var(--ink)}
.flow li.ok::before{border-color:var(--g-2);background:var(--g-2)}
.flow li.wait{color:var(--amber-ink);font-weight:650}
.flow li.wait::before{border-color:var(--amber);background:#fff;box-shadow:0 0 0 5px rgba(255,159,28,.22);animation:pulse 1.4s infinite}
.sim-status{margin-top:10px;padding:11px 14px;border-radius:var(--r-m);background:var(--paper);font-size:.88rem;font-weight:600;min-height:3.2em;display:flex;align-items:center;gap:10px;line-height:1.4}
.sim-status.ok{background:var(--soft);color:var(--deep)}
.sim-status.wait{background:var(--amber-soft);color:var(--amber-ink)}
.sim-note{margin-top:10px}
.sim .fine{font-size:.76rem}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (max-width:1020px){.hero-copy,.hero-sim{grid-column:1/-1}.hero-sim{max-width:560px}.hero-map{right:-30%;opacity:.4}}

/* ============================== 7 · sections ============================== */
/* 7a · the problem: three numbers, staggered */
.problem-head{grid-column:1/8}
.stats{grid-column:1/-1;margin-top:clamp(40px,6vw,76px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);row-gap:44px}
.stat{padding-top:20px;border-top:2px solid var(--ink)}
.stat:nth-child(1){grid-column:1/5}
.stat:nth-child(2){grid-column:5/9;margin-top:clamp(0px,5vw,64px)}
.stat:nth-child(3){grid-column:9/13;margin-top:clamp(0px,10vw,128px)}
.stat .big{font-family:var(--f-disp);font-size:clamp(4rem,9.5vw,8.4rem);line-height:.86;letter-spacing:-.04em;display:flex;align-items:baseline}
.stat .big small{font-size:.44em;color:var(--g);margin-left:.06em;letter-spacing:-.01em}
.stat p{margin-top:16px;font-size:1.02rem;color:var(--ink-2);max-width:30ch}
.problem-note{grid-column:1/-1;margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;max-width:880px;padding:22px 24px;background:var(--amber-soft);border-radius:var(--r-m);color:#4A2A00}
.problem-note .i{width:26px;height:26px;margin-top:3px}
@media (max-width:860px){.problem-head{grid-column:1/-1}.stat:nth-child(n){grid-column:1/-1;margin-top:0}}

/* 7b · the model: switch between buying meters and buying a service */
.model{grid-template-columns:repeat(12,minmax(0,1fr))}
.model-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--paper-3);border-radius:99px;padding:4px;position:relative;font-weight:650;font-size:.92rem}
.seg button{position:relative;z-index:1;background:none;border:0;padding:12px 22px;border-radius:99px;color:var(--ink-3);transition:color .25s;white-space:nowrap}
.seg button[aria-pressed="true"]{color:#fff}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--ink);transition:transform .45s var(--ease),background .3s}
.seg[data-mode="b"]::before{transform:translateX(100%);background:var(--g)}
.model-body{grid-column:1/-1;margin-top:clamp(28px,4vw,52px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.mrows li{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:18px;padding:20px 0;border-top:1px solid var(--line-2)}
.mrows li:last-child{border-bottom:1px solid var(--line-2)}
.mrows b{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.mrows span{display:grid}
.mrows .a,.mrows .b{grid-area:1/1;transition:opacity .35s,transform .45s var(--ease)}
.mrows .a{color:var(--ink-2)}
.mrows .b{color:var(--deep);font-weight:600}
.model[data-mode="a"] .mrows .b{opacity:0;transform:translateY(10px);pointer-events:none}
.model[data-mode="b"] .mrows .a{opacity:0;transform:translateY(-10px);pointer-events:none}
.model[data-mode="a"] .mrows .b,.model[data-mode="b"] .mrows .a{visibility:hidden}
.cash{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,2.4vw,30px);box-shadow:var(--shadow-s)}
.cash h3{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.cash svg{width:100%;height:auto;overflow:visible}
.cash .ax{stroke:var(--line-2);stroke-width:1}
.cash .gridl{stroke:var(--line);stroke-dasharray:3 6}
.cash .pa,.cash .pb{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 1.1s var(--ease),opacity .4s}
.cash .pa{stroke:#9A9F95}
.cash .pb{stroke:var(--g)}
.cash .fill{fill:url(#gradB);transition:opacity .6s}
.cash .t{font:600 11px var(--f-body);fill:var(--ink-3)}
.cash .tb{fill:var(--g);font-weight:800}
.model[data-mode="a"] .pb,.model[data-mode="a"] .fill,.model[data-mode="a"] circle.tb{opacity:.18}
.model[data-mode="b"] .pa,.model[data-mode="b"] circle.ta{opacity:.3}
.model[data-mode="a"] text.tb{fill:var(--ink-3);font-weight:600}
@media (max-width:900px){.model-body{grid-template-columns:1fr}.mrows li{grid-template-columns:1fr;gap:6px}}

/* 7c · how a sale reaches the meter: horizontal on wide screens */
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,72px);counter-reset:s}
.steps li{position:relative;padding:0 18px 0 0}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font-family:var(--f-disp);font-size:.9rem;color:var(--amber-ink);margin-bottom:12px}
.steps li::after{content:"";position:absolute;left:0;right:0;top:34px;height:2px;background:var(--line-2)}
.steps li:last-child::after{right:auto;width:22px}
.steps .node{width:46px;height:46px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink);display:grid;place-items:center;position:relative;z-index:1;margin-bottom:18px;margin-top:-6px;transition:transform .4s var(--ease),background .3s,color .3s}
.steps li:hover .node{transform:translateY(-4px);background:var(--ink);color:#fff}
.steps li:nth-child(5) .node{background:var(--amber);border-color:var(--amber)}
.steps h3{font-size:1.04rem;font-weight:750;line-height:1.2;margin-bottom:8px}
.steps p{font-size:.9rem;color:var(--ink-3);line-height:1.5}
@media (max-width:1020px){.steps{grid-template-columns:1fr 1fr 1fr;row-gap:40px}.steps li::after{display:none}}
/* a title that wraps must not push its text out of line with its neighbours */
@media (min-width:1021px),(min-width:621px) and (max-width:767px){.steps h3{min-height:2.4em}}
@media (max-width:620px){.steps{grid-template-columns:1fr}.steps li{padding:0 0 0 64px}.steps li::before{position:absolute;left:0;top:4px;margin:0}.steps .node{position:absolute;left:0;top:26px;margin:0}.steps li::after{display:block;left:22px;right:auto;top:76px;bottom:-30px;height:auto;width:2px}.steps li:last-child::after{display:none}}

/* 7d · the screens: tabs by role */
.screens-wrap{display:grid;grid-template-columns:minmax(240px,.56fr) minmax(0,1.44fr);gap:clamp(24px,4vw,64px);margin-top:clamp(36px,5vw,64px);align-items:start}
.tablist{display:grid;gap:2px;position:sticky;top:calc(var(--top-h) + 24px)}
.tab{display:grid;grid-template-columns:30px 1fr;gap:6px 12px;text-align:left;background:none;border:0;border-left:2px solid var(--line-2);padding:14px 16px;color:var(--ink-3);transition:color .25s,border-color .25s,background .25s}
.tab .n{font-family:var(--f-disp);font-size:.8rem;color:var(--ink-3);padding-top:3px;transition:color .25s}
.tab strong{font-size:1.02rem;color:inherit}
.tab .d{grid-column:2;font-size:.85rem;line-height:1.45;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-left-color:var(--amber);background:linear-gradient(90deg,rgba(255,159,28,.08),transparent)}
.tab[aria-selected="true"] .n{color:var(--amber-ink)}
.tab[aria-selected="true"] .d{max-height:7em;opacity:1}
.shot{position:relative;background:#E9E7DD;border-radius:16px;box-shadow:var(--shadow-l);overflow:hidden;border:1px solid var(--line-2)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:0 14px;height:30px;background:linear-gradient(#F4F4EF,#E7E6DE);border-bottom:1px solid var(--line-2)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#C9CCC0}
.shot-bar em{margin-left:auto;font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber-soft);padding:3px 10px;border-radius:99px}
.shot-view{position:relative;aspect-ratio:16/10;background:#F1F0EA}
.shot-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.shot-cap{padding:20px 22px 22px;background:var(--white);display:grid;gap:14px;border-top:1px solid var(--line)}
.shot-cap h3{font-size:1.2rem;font-weight:750;letter-spacing:-.01em}
.shot-cap ul{display:grid;gap:8px;font-size:.93rem;color:var(--ink-2)}
.shot-cap li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.shot-cap li::before{content:"";width:8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--g-2)}
.panel[hidden]{display:none}
.panel .shot-cap{animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:940px){.screens-wrap{grid-template-columns:1fr}.tablist{position:static;display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-top:8px;padding-bottom:8px;margin-top:-8px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scrollbar-width:none}.tablist::-webkit-scrollbar{display:none}.tab{border:1.5px solid var(--line-2);border-radius:99px;padding:10px 16px;white-space:nowrap;scroll-snap-align:start;grid-template-columns:1fr}.tab .n,.tab .d{display:none}.tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}}

/* 7e · the honest board */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(36px,5vw,64px);border-top:2px solid var(--ink)}
.board > div{padding:24px 22px 8px 0;border-right:1px solid var(--line)}
.board > div + div{padding-left:22px}
.board > div:last-child{border-right:0}
.board h3{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;margin-bottom:18px}
.board h3::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--g-2)}
.board .test h3::before{background:var(--amber)}
.board .next h3::before{background:transparent;border:2px solid var(--ink-3)}
.board .not h3::before{background:var(--crit)}
.board li{padding:11px 0;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-2);line-height:1.45}
.board li:first-child{border-top:0}
@media (max-width:1100px){.board{grid-template-columns:1fr 1fr}.board > div{border-right:0;padding:24px 20px 8px 0;border-bottom:1px solid var(--line)}.board > div + div{padding-left:0}.board > div:nth-child(even){padding-left:20px;padding-right:0;border-left:1px solid var(--line)}}
@media (max-width:620px){.board{grid-template-columns:1fr}.board > div{padding-right:0}.board > div:nth-child(even){padding-left:0;border-left:0}}

/* 7f · the pilot: four phases on one line */
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(36px,5vw,64px);counter-reset:p}
.phase{position:relative;padding-top:54px}
.phase::before{counter-increment:p;content:counter(p);position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink);display:grid;place-items:center;font-family:var(--f-disp);font-size:.95rem;z-index:1}
.phase::after{content:"";position:absolute;top:19px;left:38px;right:calc(clamp(14px,2vw,24px)*-1);height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px)}
.phase:last-child::after{display:none}
.phase:last-child::before{background:var(--amber);border-color:var(--amber)}
.phase small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:6px}
.phase h3{font-family:var(--f-disp);font-weight:400;font-size:1.55rem;letter-spacing:-.015em;margin-bottom:12px}
.phase li{font-size:.92rem;color:var(--ink-2);padding:7px 0 7px 16px;border-top:1px solid var(--line);position:relative}
.phase li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--g-2)}
@media (max-width:980px){.phases{grid-template-columns:1fr 1fr;row-gap:44px}.phase:nth-child(2)::after{display:none}}
@media (max-width:600px){.phases{grid-template-columns:1fr}.phase::after{display:none}}

/* 7g · the closing band */
.band{background:var(--deep);color:#E6F3EB;border-radius:clamp(22px,3vw,40px);padding:clamp(34px,6vw,84px);position:relative;overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;right:-12%;top:-20%;width:70%;aspect-ratio:1/1;background:url(../img/africa-dots.svg) center/contain no-repeat;opacity:.28;z-index:-1}
.band::after{content:"";position:absolute;left:-10%;bottom:-40%;width:60%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle,rgba(39,200,116,.28),transparent 65%);z-index:-1}
.band h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.96;letter-spacing:-.025em;color:#fff;max-width:14ch}
.band h2 em{font-style:normal;color:var(--amber-2)}
.band p{margin-top:22px;max-width:46ch;font-size:1.1rem;color:#C6DDCF}
.band .hero-cta{margin-top:34px}
.band .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.35)}
@media (max-width:480px){.band{padding:32px 24px}.band h2{font-size:2rem}}
@media (max-width:340px){.btn{gap:8px;padding-left:18px;padding-right:16px}}

/* 7h · inner pages */
.page-head{padding-block:clamp(40px,7vw,104px) clamp(28px,4vw,56px);position:relative;overflow:hidden}
.page-head h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(2.5rem,6vw,5.2rem);line-height:.95;letter-spacing:-.026em;max-width:16ch}
.page-head .lede{margin-top:26px}
/* the continent is sized from the height of the head, so the south is never cut off */
.page-head>.wrap{position:relative}      /* the copy paints above the map, as on the home page and the 404 */
.page-head .hero-map,.nf .hero-map{top:0;right:1%;height:100%;max-height:min(640px,92vw);width:auto;aspect-ratio:1/1.04;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.prose{max-width:68ch}
.prose h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.015em;line-height:1.05;margin:54px 0 16px}
.prose h3{font-size:1.15rem;font-weight:750;margin:30px 0 8px}
.prose p{margin-top:14px;color:var(--ink-2)}
.prose ul{margin:14px 0 0;display:grid;gap:8px}
.prose li{position:relative;padding-left:22px;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--g-2)}
.prose a{color:var(--g);font-weight:600}
.twocol{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,88px);align-items:start}
@media (max-width:900px){.twocol{grid-template-columns:minmax(0,1fr)}}
.cmp{width:100%;border-collapse:collapse;font-size:.96rem}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-top:1px solid var(--line-2)}
.cmp thead th{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-top:0;padding-bottom:12px}
.cmp thead th:last-child{color:var(--g)}
.cmp tbody th{width:19%;font-weight:750}
.cmp td:last-child{color:var(--deep);font-weight:600;background:linear-gradient(90deg,rgba(39,200,116,.1),transparent);padding-left:18px}
@media (max-width:760px){.cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}.cmp thead{display:none}.cmp tr{padding:16px 0;border-top:1px solid var(--line-2)}.cmp th,.cmp td,.cmp tbody th{border:0;padding:3px 0;width:auto}.cmp td:last-child{padding:8px 12px;margin-top:6px;border-radius:var(--r-s)}.cmp td:nth-of-type(1)::before{content:attr(data-k);display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}.cmp td:last-child::before{content:attr(data-k);display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g)}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:26px 24px 24px;position:relative;transition:transform .4s var(--ease),box-shadow .4s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-s)}
.card .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--soft);color:var(--g);margin-bottom:18px}
.card h3{font-size:1.12rem;font-weight:750;line-height:1.25;margin-bottom:8px}
.card p{font-size:.94rem;color:var(--ink-2)}
.card .st{position:absolute;top:22px;right:22px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1020px){.cards,.cards--4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards,.cards--2,.cards--4{grid-template-columns:1fr}}
.st{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px;background:var(--soft);color:var(--g)}
.st--test{background:var(--amber-soft);color:var(--amber-ink)}
.st--next{background:var(--paper-3);color:var(--ink-3)}
.layers{display:grid;gap:10px;counter-reset:l}
.layer{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 20px;transition:transform .35s var(--ease),border-color .3s}
.layer:hover{transform:translateX(6px);border-color:var(--g)}
.layer .n{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--g);color:#fff;position:relative}
.layer .n::after{counter-increment:l;content:counter(l);position:absolute;right:-6px;top:-6px;width:19px;height:19px;border-radius:50%;background:var(--amber);color:#3A2400;font:400 .62rem/19px var(--f-disp);text-align:center}
.layer h2{font-size:1.06rem;font-weight:750}
.layer p{font-size:.9rem;color:var(--ink-3);margin-top:2px}
@media (max-width:640px){.layer{grid-template-columns:46px 1fr}.layer .st{grid-column:2;justify-self:start}}
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-weight:700;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{width:22px;height:22px;transition:transform .35s var(--ease);color:var(--g)}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq .ans{padding:0 0 24px;color:var(--ink-2);max-width:72ch}
.faq .ans p + p{margin-top:10px}
.src-list{display:grid;gap:10px;font-size:.88rem;color:var(--ink-3)}
.src-list li{display:grid;grid-template-columns:34px 1fr;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.src-list li::before{content:attr(data-n);font-family:var(--f-disp);color:var(--amber-ink)}
.src-list li:target{background:var(--amber-soft)}
.callout{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 22px;border-radius:var(--r-m);background:var(--soft);color:var(--deep)}
.callout--amber{background:var(--amber-soft);color:#4A2A00}
.callout .i{width:24px;height:24px;margin-top:2px}
.callout p{font-size:.95rem}
.money{display:grid;gap:0;counter-reset:m}
.money li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:16px 0;position:relative}
.money li::before{counter-increment:m;content:counter(m);width:38px;height:38px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-family:var(--f-disp);font-size:.92rem;position:relative;z-index:1}
.money li:not(:last-child)::after{content:"";position:absolute;left:18px;top:54px;bottom:-16px;border-left:2px dashed var(--line-2)}
.money b{display:block;font-size:1.02rem}
.money span{color:var(--ink-3);font-size:.93rem}

/* how-it-works: sticky diagram + steps that light it up */
.how{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
.diagram{position:sticky;top:calc(var(--top-h) + 28px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,2.6vw,34px);box-shadow:var(--shadow-s)}
.diagram svg{width:100%;height:auto;overflow:visible}
.diagram .node rect,.diagram .node circle{fill:var(--paper);stroke:var(--line-2);stroke-width:1.5;transition:fill .35s,stroke .35s}
.diagram .node .lb{font:700 10.5px var(--f-body);fill:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;transition:fill .3s}
.diagram .node .ic{stroke:var(--ink-3);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.diagram .node.on rect,.diagram .node.on circle{fill:var(--soft);stroke:var(--g)}
.diagram .node.on .lb{fill:var(--deep)}
.diagram .node.on .ic{stroke:var(--g)}
.diagram .node.key.on rect,.diagram .node.key.on circle{fill:var(--amber-soft);stroke:var(--amber)}
.diagram .link{stroke:var(--line-2);stroke-width:2;fill:none;stroke-dasharray:5 7}
.diagram .link.on{stroke:var(--g);stroke-dasharray:none}
.diagram .wave{fill:none;stroke:var(--amber);stroke-width:2;opacity:0}
.diagram[data-step="3"] .wave{animation:wave 1.6s infinite}
.diagram[data-step="3"] .wave:nth-of-type(2){animation-delay:.3s}
.diagram[data-step="3"] .wave:nth-of-type(3){animation-delay:.6s}
@keyframes wave{0%{opacity:0;transform:scale(.7)}35%{opacity:.9}100%{opacity:0;transform:scale(1.25)}}
.diagram .wave{transform-box:fill-box;transform-origin:left center}
.diagram-cap{margin-top:16px;font-size:.92rem;font-weight:600;min-height:3em}
/* the sticky drawing never outgrows a laptop screen: the five nodes and the caption stay in view (floor 22rem) */
@media (min-width:941px){.diagram svg{max-height:max(22rem,calc(100vh - var(--top-h) - 28px - 2*clamp(18px,2.6vw,34px) - 5.5rem - 24px))}}
.hsteps{counter-reset:h}
.hstep{counter-increment:h;display:grid;grid-template-columns:54px 1fr;gap:20px;padding:clamp(36px,7vh,76px) 0;border-top:1px solid var(--line)}
.hstep h2,.hstep p,.hstep::before{transition:opacity .4s,color .3s}
/* only wide screens with scripts dim the steps that are not lit; the words stay readable (4.9:1 or better) */
@media (min-width:941px){.js .hstep:not(.on) h2,.js .hstep:not(.on) p,.js .hstep:not(.on)::before{opacity:.75}}
.hstep::before{content:counter(h,decimal-leading-zero);font-family:var(--f-disp);font-size:1.5rem;color:var(--ink-3)}
.hstep.on::before{color:var(--amber-ink)}
.hstep h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.012em;line-height:1.05;margin-bottom:12px}
.hstep p{color:var(--ink-2);max-width:52ch}
.hstep p + p{margin-top:10px}
.hstep .st{margin-top:14px}
@media (max-width:940px){.how{grid-template-columns:1fr}.diagram{position:static}}

/* ============================== 8 · forms ============================== */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,3.2vw,42px);box-shadow:var(--shadow-s)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.field{display:grid;gap:7px;align-content:start}
.field.full{grid-column:1/-1}
.field label,.field .lab{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.field label i{color:var(--crit);font-style:normal}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--ctl);background:var(--paper);border-radius:12px;padding:14px 15px;font-size:1rem;transition:border-color .2s,background .2s,box-shadow .2s}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--g);background:#fff;box-shadow:0 0 0 4px rgba(39,200,116,.2)}
.field .err{display:none;font-size:.82rem;font-weight:600;color:var(--crit)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--crit);background:#FFF6F5}
.field.bad .err{display:block}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{display:inline-flex}
.radios input{position:absolute;opacity:0;width:1px;height:1px}
.radios span{border:1.5px solid var(--ctl);background:var(--paper);border-radius:99px;padding:10px 16px;font-weight:650;font-size:.9rem;cursor:pointer;transition:all .2s}
.radios input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.radios input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
.hp{position:absolute!important;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-top:26px}
.form-msg{margin-top:20px;padding:16px 18px;border-radius:var(--r-m);font-weight:600;display:none}
.form-msg.ok{display:block;background:var(--soft);color:var(--deep)}
.form-msg.bad{display:block;background:#FFF0EE;color:#7A1D14}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ============================== 9 · footer ============================== */
.foot{background:var(--paper-2);border-top:1px solid var(--line);padding-block:clamp(48px,7vw,96px) 32px;margin-top:clamp(48px,6vw,96px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.foot .logo svg{height:40px}
.foot p{max-width:34ch;margin-top:18px;font-size:.93rem;color:var(--ink-3)}
.foot h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.foot li a{display:inline-block;padding:5px 0;text-decoration:none;font-weight:550}
.foot li a:hover{color:var(--g)}
.foot-base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:clamp(36px,5vw,64px);padding-top:22px;border-top:1px solid var(--line-2);font-size:.82rem;color:var(--ink-3)}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid > :first-child{grid-column:1/-1}}

/* ============================== 10 · motion ============================== */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv{opacity:1;transform:none}
}

/* ============================== 11 · print ============================== */
@media print{
  .top,.hero-map,.lang-hint,.sim,.btn,.menu-btn{display:none!important}
  body{background:#fff;font-size:11pt}
  .sec{padding-block:24pt}
  a{text-decoration:none}
  .js .rv{opacity:1;transform:none}
}

/* small helpers */
.more{margin-top:clamp(28px,4vw,48px)}
.sec-lede{margin-top:22px}
.model-lede{grid-column:1/-1;margin-top:22px}
.js .cash .pa,.js .cash .pb{stroke-dashoffset:1}
.js .cash.drawn .pa,.js .cash.drawn .pb{stroke-dashoffset:0}

/* inner pages, part 2 */
.page-head .eyebrow .st{margin-left:8px;letter-spacing:.08em}
.twocol--form{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
@media (max-width:900px){.twocol--form{grid-template-columns:minmax(0,1fr)}}
.money-note{margin-top:28px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
.split > div{border-radius:var(--r-l);padding:clamp(24px,3.4vw,46px)}
.split .keep{background:var(--white);border:1px solid var(--line)}
.split .give{background:var(--deep);color:#E6F3EB}
.split h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.04;letter-spacing:-.015em;margin-bottom:22px}
.split .give h2{color:#fff}
.split li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.split .give li{border-top-color:rgba(255,255,255,.14)}
.split li .i{width:20px;height:20px;margin-top:2px;color:var(--g)}
.split .give li .i{color:var(--g-2)}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line-2);align-items:start}
.checks li:last-child{border-bottom:1px solid var(--line-2)}
.checks .i{color:var(--g);width:20px;height:20px;margin-top:2px}
.notyet{margin-top:26px}
.notyet b{display:block;margin-bottom:6px}
.notyet li{padding-left:16px;position:relative;font-size:.95rem}
.notyet li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.caps{display:grid;gap:clamp(36px,5vw,64px);margin-top:clamp(36px,5vw,64px)}
.cap{display:grid;grid-template-columns:minmax(140px,.28fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;border-top:2px solid var(--ink);padding-top:22px}
.cap > h3{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.015em}
.cap .card{padding:22px 20px 20px}
.cap .card .st{margin-bottom:12px}
.cap .card h4{font-size:1.04rem;font-weight:750;line-height:1.25;margin-bottom:8px}
@media (max-width:900px){.cap{grid-template-columns:1fr}}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1.5px solid var(--line-2);background:var(--white);border-radius:99px;padding:9px 15px;font-weight:600;font-size:.92rem}
.tags--lang{margin-top:22px}
.tags--lang li{background:var(--ink);border-color:var(--ink);color:#fff}
.roles .fine{margin-top:14px}
.phase h2{font-family:var(--f-disp);font-weight:400;font-size:1.55rem;letter-spacing:-.015em;margin-bottom:12px}
.phases--full .phase h3{font-family:var(--f-body);font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--g);margin:18px 0 4px}
.phases--full .phase h3.you{color:var(--ink-3)}
.phases--full .phase ul.you li::before{background:transparent;border:1.5px solid var(--ink-3);width:7px;height:7px}
.measures{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,3vw,40px);counter-reset:ms}
.measures li{padding:20px 0;border-top:1px solid var(--line-2);display:grid;gap:4px;align-content:start}
.measures li::before{counter-increment:ms;content:counter(ms,decimal-leading-zero);font-family:var(--f-disp);color:var(--amber-ink);font-size:.9rem}
.measures b{font-size:1.04rem}
.measures span{color:var(--ink-3);font-size:.93rem}
.bring{margin-top:36px}
.bring h3{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-bottom:6px}
@media (max-width:640px){.measures{grid-template-columns:1fr}}
.direct{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-2)}
.direct h3{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-bottom:8px}
.direct li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0}
.direct .i{color:var(--g)}
.direct a{font-weight:650}
.interest{border:0;padding:0;margin:0 0 22px;min-width:0}
.interest legend{padding:0;margin-bottom:9px}
.form--sent{display:grid;gap:14px;justify-items:start}
.form--sent h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.02em;line-height:1}
.ok-ico{width:56px;height:56px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center}
.ok-ico .i{width:28px;height:28px}
.nf{position:relative;overflow:hidden;padding-block:clamp(56px,10vw,140px) clamp(64px,9vw,120px)}
.nf .wrap{position:relative}
.nf-code{font-family:var(--f-disp);font-size:clamp(6rem,24vw,17rem);line-height:.8;letter-spacing:-.05em;color:var(--ink);margin-bottom:18px}
.nf h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1;letter-spacing:-.02em;max-width:18ch}
.nf .lede{margin-top:18px}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 32px}
.nf-links a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);border-radius:99px;padding:10px 16px;font-weight:650;text-decoration:none;background:var(--white);transition:border-color .2s}
.nf-links a:hover{border-color:var(--ink)}
/* polish after first review */
.cap .card .st{position:static;display:inline-block}
@media (min-width:761px){.split h2{min-height:2.1em}}
.diagram .node .lb{font-size:12.5px;letter-spacing:.07em}
.diagram-cap{font-size:1rem;line-height:1.45;min-height:3em;margin-top:18px}
.sec-title + .money,.sec-title + .callout{margin-top:28px}
.twocol .sec-title + .money{margin-top:30px}
/* French: longer words, so the headline is a little smaller and may use the full column */
:lang(fr) .h1{font-size:clamp(2.1rem,3.9vw,3.5rem)}
:lang(fr) .h1 > span{max-width:none}
:lang(fr) .stat .big small{margin-left:.16em}
/* the model switch must fit the narrowest phones */
.seg{max-width:100%}
@media (max-width:560px){.model-head .seg{display:grid;grid-template-columns:1fr 1fr;width:100%}.seg button{padding:11px 8px;font-size:.86rem;white-space:normal;line-height:1.2}}
.shot-cap h3{line-height:1.25}
/* phones: the two series names move out of the drawing into a key, so they are not shrunk to 8 px */
.cash-key{display:none}
@media (max-width:560px){
  .cash text.ta,.cash text.tb{display:none}
  .cash .t{font-size:18px}
  .cash-key{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;font-size:.84rem;font-weight:600;color:var(--ink-3)}
  .cash-key li{display:flex;align-items:center;gap:8px}
  .cash-key li:before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#9A9F95}
  .cash-key .kb{color:var(--g);font-weight:800}
  .cash-key .kb:before{background:var(--g)}
}

/* ============================== 12 · refinements after review ============================== */
/* two-column headings: a slightly wider title column and a smaller heading, so no line holds a lone word */
@media (min-width:901px){
  .twocol,.twocol--form{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .twocol .sec-title{font-size:clamp(1.9rem,3.4vw,3rem)}
}
/* the success card is reached by a fragment link: focus lands on it without a ring around the whole column */
#form:focus,#form:focus-visible{outline:0}
/* no scripts (or scripts that failed to load): everything is shown at once */
.no-js .tablist{display:none}
.no-js .panel[hidden]{display:block}
.no-js .screens-wrap{grid-template-columns:1fr}
.no-js .seg,.no-js [data-sim]{display:none}
/* print: the figures, curves and steps the page animates must be on paper */
@media print{
  .cash .pa,.cash .pb{stroke-dashoffset:0!important}
  .hstep h2,.hstep p,.hstep::before{opacity:1!important}
  /* two controls that do nothing on paper, and headings left alone at the foot of a page */
  .tablist,.seg{display:none!important}
  .kicker,.sec-title,.phase small,.phase h2,.phase h3,.board h3,.cash h3{break-after:avoid}
  .sec-title,.phase,.board>div,.steps li,.cash,.shot,.band,.card{break-inside:avoid}
}
/* Windows High Contrast and other forced-colour modes: selected and checked states must not rely on background colour */
@media (forced-colors:active){
  .chip[aria-pressed="true"],.seg button[aria-pressed="true"],.radios input:checked + span,.lang a[aria-current="true"],.tab[aria-selected="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .tab[aria-selected="true"] .n{color:HighlightText}
  .seg::before{display:none}
  .switch .tr{forced-color-adjust:none;background:Canvas;border:2px solid ButtonText;box-sizing:border-box}
  .switch input:checked + .tr{background:Highlight;border-color:Highlight}
  .switch .tr::after{left:1px;top:1px;background:ButtonText;box-shadow:none}
  .switch input:checked + .tr::after{background:HighlightText}
  .led::before{border:2px solid ButtonText;background:transparent;box-shadow:none}
  .led.on::before,.led.warn::before{background:ButtonText}
  .flow li.ok::before,.flow li.act::before{background:ButtonText;box-shadow:none}
  .flow li.wait::before{border-style:dashed;box-shadow:none}
  .nav a[aria-current="page"]{text-decoration:underline 2px;text-underline-offset:6px}
  .logo img{forced-color-adjust:none;box-sizing:content-box;background:#fff;padding:5px 8px;border-radius:8px}
  .cash text.t,.cash text.tb{fill:CanvasText}
  .cash .pb{stroke:Highlight}
}

/* ============================== 13 · refinements after the second review ============================== */
/* the language bar is in the page from the first paint; its close button shows once the script has wired it */
[data-hint-off] .lang-hint{display:none}
.lang-hint button{visibility:hidden}
.lang-hint[data-ready] button{visibility:visible}
/* without scripts (or while a slow script has not arrived) a phone still gets real navigation: the header wraps and the links show */
@media (max-width:61.25em){
  .no-js .top{position:static}
  .no-js .top .wrap{flex-wrap:wrap;height:auto;padding-block:8px;row-gap:0}
  .no-js .nav{order:3;position:static;visibility:visible;opacity:1;transform:none;flex:1 0 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 14px;padding:0;overflow:visible;margin:0}
  .no-js .nav a{font:550 .93rem/1.2 var(--f-body);letter-spacing:0;padding:8px 0;border:0;width:auto}
  .no-js .nav .lang{margin-top:0}
  .no-js .nav .lang a{padding:5px 10px}
  .no-js .nav a.nav-cta{display:none}
}
@media (max-width:23.39em){.no-js .top .btn--sm{display:inline-flex;margin-left:auto}}
/* role tabs on wide screens: every panel sits in the same grid cell, so the section keeps one height whichever tab is open
   (hidden panels keep their image lazy, and their animation restarts when they are shown) */
@media (min-width:941px){
  .js .screens-wrap > div:last-child{display:grid}
  .js .panel,.js .panel[hidden]{grid-area:1/1;display:block}
  .js .panel[hidden]{visibility:hidden}
  .js .panel[hidden] .shot-view{content-visibility:hidden}
  .js .panel[hidden] .shot-cap,.js .panel[hidden] .shot-view img{animation:none}
  .js .panel .shot{height:100%;display:flex;flex-direction:column}
  .js .panel .shot-cap{flex:1;align-content:start}
}
/* ============================== 14 · refinements after the third review ============================== */
/* enlarged text must wrap inside the button, never push it out of the bar; the links stay on one line on wide screens */
.top .btn--sm{white-space:nowrap}
@media (min-width:61.3em){.nav a{white-space:nowrap}}