/* Neroonline brand site. Tokens mirror /brand.json. */
:root{
  --ocean:#0e4f6e;      /* primary field */
  --ocean-deep:#0a3a52;
  --ink:#10202b;        /* text */
  --chalk:#f6f7f4;      /* page */
  --sand:#e9dcc6;       /* warm support */
  --leaf:#c9ef8c;       /* signal, shared with NERO Kenya */
  --mute:#4b5d68;
  --rule:#d5dbd8;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--chalk);color:var(--ink);font:18px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--leaf);color:var(--ink);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* header */
.top{background:var(--ocean);color:#eaf3f5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.mark{font:800 22px/1 var(--display);letter-spacing:-.02em;text-decoration:none;color:#fff}
.mark i{font-style:normal;color:var(--leaf)}
.top nav{display:flex;gap:clamp(12px,2.4vw,28px);font-size:16px}
.top nav a{text-decoration:none;opacity:.9}
.top nav a:hover,.top nav a[aria-current]{opacity:1;text-decoration:underline}

/* hero */
.hero{background:var(--ocean);color:#fff;overflow:hidden;padding:clamp(28px,6vw,72px) 0 0}
.word{font:800 clamp(64px,21vw,250px)/.82 var(--display);letter-spacing:-.025em;margin:0 0 0 -.03em;white-space:nowrap;font-variation-settings:"wdth" 75}
.word span{color:var(--leaf)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:end;padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,56px)}
.lede{font:500 clamp(22px,2.6vw,30px)/1.3 var(--display);letter-spacing:-.01em;max-width:30ch;margin:0 0 24px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border-radius:999px;font:700 17px/1 var(--body);text-decoration:none;border:2px solid currentColor}
.btn.solid{background:var(--leaf);color:var(--ink);border-color:var(--leaf)}
.btn:hover{filter:brightness(1.06)}
.clocks{border-top:2px solid rgba(255,255,255,.25)}
.clock{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.clock b{font:700 17px/1.2 var(--body)}
.clock small{display:block;font-size:15px;opacity:.75;font-weight:400}
.clock time{font:700 clamp(30px,4vw,44px)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock.here time{color:var(--leaf)}
.clocks p{font-size:15px;opacity:.75;margin:12px 0 0}

/* sections */
section{padding:clamp(48px,8vw,104px) 0}
h2{font:700 clamp(32px,4.4vw,56px)/1.02 var(--display);letter-spacing:-.035em;margin:0 0 16px;max-width:18ch}
h3{font:700 22px/1.2 var(--display);letter-spacing:-.01em;margin:0 0 6px}
.intro{color:var(--mute);max-width:58ch;margin:0 0 36px}
p{margin:0 0 14px}

/* offers list */
.offers{border-top:2px solid var(--ink)}
.offer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.8fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
.offer p{margin:0;color:var(--mute)}
.offer .who{font-size:16px}
.offer .go{justify-self:end;font-weight:700}

/* paths */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.path{background:var(--chalk);padding:28px;display:flex;flex-direction:column;gap:10px}
.path:nth-child(2){background:var(--sand)}
.path:nth-child(3){background:var(--ocean);color:#fff}
.path:nth-child(3) p{color:#d6e6ec}
.path p{color:var(--mute);margin:0}
.path .btn{margin-top:auto;align-self:flex-start}

/* prices */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,32px)}
.price{border-top:6px solid var(--ocean);padding-top:18px}
.price .amt{font:800 clamp(34px,4vw,48px)/1 var(--display);letter-spacing:-.03em;margin:4px 0 10px}
.price .amt small{font:600 16px var(--body);letter-spacing:0;color:var(--mute)}
.price p{color:var(--mute)}

/* principles */
.band{background:var(--sand)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin:0;padding:0;list-style:none}
.rules li{border-left:4px solid var(--ocean);padding-left:18px}
.rules b{display:block;font:700 21px/1.25 var(--display);margin-bottom:4px}

/* contact */
.contact{background:var(--ink);color:#e7eef0}
.contact h2{color:#fff}
.contact .intro{color:#b9c8ce}
.contact .btn{color:#fff}
.contact .btn.solid{color:var(--ink)}

/* agents */
.code{font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;border:1px solid var(--rule);padding:16px;overflow:auto;border-radius:6px;white-space:pre}
.kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kit a{display:block;padding:18px;border:2px solid var(--ink);text-decoration:none;border-radius:6px}
.kit a:hover{background:#fff}
.kit span{display:block;color:var(--mute);font-size:16px}
.doc{max-width:72ch}
.doc h2{font-size:clamp(28px,3vw,36px);margin-top:40px}

footer{padding:36px 0 48px;font-size:15px;color:var(--mute)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:12px 20px}

@media (max-width:860px){
  .hero-grid,.offer,.paths,.prices,.rules,.kit{grid-template-columns:1fr}
  .offer{gap:8px}
  .offer .go{justify-self:start}
  .top nav{font-size:15px}
}
@media (max-width:520px){
  body{font-size:17px}
  .top nav a.opt{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}