*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08080a;--bg2:#0b0d14;--panel:#0d1322;--border:rgba(255,255,255,0.09);
  --text:#f4f2ee;--text2:rgba(244,242,238,0.68);--text3:rgba(244,242,238,0.4);
  --blue:#3b82f6;--blue-soft:#93c0fb;
  --grad:linear-gradient(to bottom,#1459d6,#0a2a8c);
  --grad-text:linear-gradient(to bottom,#60a5fa,#1d4ed8);
  --serif:'Playfair Display',Georgia,serif;--sans:'Manrope',system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
em{font-style:italic;background:var(--grad-text);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  display:inline-block;
  padding-top:.3em;margin-top:-.3em;padding-bottom:.34em;margin-bottom:-.34em;
  padding-right:.12em;margin-right:-.12em;padding-left:.08em;margin-left:-.08em}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,8,10,0.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-in{max-width:1040px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:28px}
.brand{font-family:var(--serif);font-size:17px;font-weight:900;letter-spacing:-.02em;text-decoration:none}
.brand span{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav a.lnk{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text3);text-decoration:none;transition:color .2s}
.nav a.lnk:hover{color:var(--text)}
.nav .cta{margin-left:0;background:var(--grad);color:#fff;padding:9px 18px;border-radius:100px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}

/* hero */
.hero{padding:72px 0 0}
.back{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text3);text-decoration:none;margin-bottom:28px}
.back:hover{color:var(--blue-soft)}
.cat{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
h1{font-family:var(--serif);font-size:clamp(36px,6vw,62px);font-weight:900;
  line-height:1.03;letter-spacing:-.03em;margin-bottom:10px}
.co{font-size:14px;font-weight:700;color:var(--text3);letter-spacing:.03em;margin-bottom:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.tags span{font-size:11px;font-weight:700;color:var(--text2);padding:6px 13px;border-radius:100px;
  border:1px solid var(--border);background:rgba(255,255,255,.025)}
.lede{font-size:19px;line-height:1.62;color:var(--text);font-weight:600;max-width:760px;margin-bottom:40px}

/* outcomes up front */
.out{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:40px}
.out div{background:var(--bg2);padding:22px 24px}
.out b{display:block;font-size:15px;font-weight:800;line-height:1.35;margin-bottom:6px}
.out span{display:block;font-size:12px;color:var(--text3);line-height:1.5}

/* meta */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:64px}
.meta div{background:var(--bg2);padding:16px 20px}
.meta dt{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.meta dd{font-size:13.5px;font-weight:700;line-height:1.45}

/* body */
section{margin-bottom:64px}
h2{font-family:var(--serif);font-size:30px;font-weight:900;letter-spacing:-.025em;margin-bottom:18px}
section p{font-size:16px;line-height:1.75;color:var(--text2);margin-bottom:16px;max-width:760px}
section p:last-child{margin-bottom:0}
ol.steps{list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:0 0 22px 52px;margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.055);max-width:820px}
ol.steps li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-size:11.5px;font-weight:800;color:var(--blue);letter-spacing:.04em}
ol.steps b{display:block;font-size:16px;font-weight:800;margin-bottom:7px}
ol.steps span{display:block;font-size:15px;line-height:1.72;color:var(--text2)}
.art{background:rgba(20,89,214,.055);border:1px solid rgba(20,89,214,.22);border-radius:12px;padding:28px 30px}
.art h3{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:12px}
.art>p{font-size:15px;margin-bottom:18px}
.art ul{list-style:none}
.art li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15px;line-height:1.6;color:var(--text2)}
.art li:last-child{margin-bottom:0}
.art li::before{content:'';position:absolute;left:3px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--grad)}

/* screenshots — the spine of the page */
figure{margin:0 0 56px}
figure img{width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid var(--border);background:var(--panel)}
figcaption{margin-top:16px;max-width:720px}
figcaption b{display:block;font-size:14px;font-weight:800;margin-bottom:5px}
figcaption span{display:block;font-size:13.5px;line-height:1.62;color:var(--text3)}
.shots{margin-bottom:64px}

/* cta */
.cta-block{border:1px solid var(--border);border-radius:14px;padding:44px 40px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(20,89,214,.14),transparent 70%),var(--bg2);margin-bottom:56px}
.cta-block h2{font-size:clamp(26px,4vw,38px);margin-bottom:10px}
.cta-block p{color:var(--text2);font-size:15px;margin:0 auto 26px;max-width:460px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:100px;
  font-size:13px;font-weight:800;letter-spacing:.02em;text-decoration:none;transition:all .25s}
.btn-p{background:var(--grad);color:#fff}
.btn-p:hover{transform:translateY(-2px)}
.btn-g{border:1px solid var(--border);color:var(--text2)}
.btn-g:hover{border-color:rgba(59,130,246,.5);color:var(--text)}

/* prev / next */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:56px}
.pn a{padding:22px 24px;border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all .25s}
.pn a:hover{border-color:rgba(59,130,246,.42);background:rgba(20,89,214,.08)}
.pn em{display:block;font-style:normal;background:none;-webkit-text-fill-color:currentColor;
  margin:0 0 6px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;padding:0}
.pn strong{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.pn a:last-child{text-align:right}

footer{border-top:1px solid var(--border);padding:32px 0;font-size:12px;color:var(--text3)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:720px){
  .wrap,.nav-in{padding-left:20px;padding-right:20px}
  .nav-in{gap:14px}
  .nav .cta{padding:9px 14px}
  .hero{padding-top:44px}
  .pn{grid-template-columns:1fr}
  .pn a:last-child{text-align:left}
  section{margin-bottom:48px}
}

figure.narrow{display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.02);border:1px solid var(--border);
  border-radius:12px;padding:30px 24px 24px}
figure.narrow img{width:100%;max-width:var(--nw,760px);border-radius:8px;border:1px solid var(--border)}
figure.narrow figcaption{text-align:center;max-width:620px}
.lede + .lede{margin-top:-24px}
@media(max-width:720px){ figure.narrow{padding:18px 14px 16px} }

/* disclaimer on the simulated operations screens */
.sim-note{
  margin:-36px 0 56px;padding:16px 20px;
  border-left:2px solid rgba(59,130,246,.55);
  background:rgba(20,89,214,.07);border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.62;color:#93c0fb;max-width:760px}
.sim-note span{font-weight:800;color:#bcd6fb}
@media(max-width:720px){ .sim-note{margin:-24px 0 40px;font-size:13px} }

/* very small phones: the nav cannot fit brand + link + button */
@media(max-width:420px){
  .nav-in{gap:10px}
  .nav a.lnk{display:none}
  .nav .cta{padding:8px 13px;font-size:10.5px}
}