:root{
  --ink:#16181d; --ink-soft:#5d636e; --ink-faint:#8b919b;
  --paper:#eef0f3; --card:#fff; --rule:#dde1e7; --rule-strong:#c9ced6;
  --black:#1c1f24; --blue:#17457f; --red:#b3122c; --orange:#f2731f;
  --blue-lift:#2a5fa8; --red-lift:#c9152f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Barlow',-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.6}
a{color:var(--blue)} a:hover{color:var(--red)}
:focus-visible{outline:2px solid #7aa7e6;outline-offset:2px}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

.top{background:var(--ink);color:#fff;padding:14px 0}
.top .wrap{display:flex;align-items:center;gap:16px}
.top img{height:34px;width:auto;display:block}
.top nav{margin-left:auto;display:flex;gap:14px;font-size:14px}
.top nav a{color:#9aa1ac;text-decoration:none}
.top nav a:hover,.top nav a.on{color:#fff}

.hero{background:var(--ink);color:#fff;padding:34px 0 40px}
.eyebrow{font-size:13px;color:#9aa1ac;margin:0 0 10px}
h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:46px;line-height:1.02;
   margin:0 0 16px;max-width:15ch}
.hero p{color:#c5cad2;font-size:17px;margin:0 0 22px;max-width:52ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:3px;text-decoration:none;
  font-weight:600;font-size:16px;border:1px solid transparent}
.btn-main{background:var(--orange);color:#16181d}
.btn-main:hover{background:#ff8330;color:#16181d}
.btn-ghost{border-color:#4a505a;color:#fff}
.btn-ghost:hover{border-color:#fff;color:#fff}

.figs{display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid #2c3138;margin-top:30px;padding-top:22px}
.fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;line-height:1}
.fig span{font-size:13px;color:#9aa1ac}

main{padding:38px 0 10px}
section{margin:0 0 38px}
h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:27px;margin:0 0 14px}
p{margin:0 0 14px;max-width:62ch}
.muted{color:var(--ink-soft)}

.steps{list-style:none;margin:0;padding:0;counter-reset:n}
.steps li{counter-increment:n;display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(n,decimal-leading-zero);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;color:var(--ink-faint);font-size:15px;flex:none;width:26px;padding-top:3px}
.steps b{display:block;font-weight:600}
.steps span{color:var(--ink-soft);font-size:15.5px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.chips li{background:var(--card);border:1px solid var(--rule-strong);border-radius:3px;
  padding:6px 13px;font-size:15px}

.cost{display:flex;gap:14px;flex-wrap:wrap}
.cost div{background:var(--card);border:1px solid var(--rule);padding:16px 20px;flex:1 1 200px}
.cost b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;line-height:1.05}
.cost span{font-size:14px;color:var(--ink-soft)}

.goalie{background:var(--ink);color:#fff;padding:26px 22px;border-left:5px solid var(--orange)}
.goalie h2{color:#fff;margin-top:0}
.goalie p{color:#c5cad2}
.goalie dl{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0 20px}
.goalie dt{font-size:13px;color:#9aa1ac}
.goalie dd{margin:2px 0 0;font-weight:600}

.colours{display:flex;gap:0;margin:18px 0 0;border:1px solid var(--rule-strong)}
.colours span{flex:1;height:34px}
.c-black{background:var(--black)} .c-blue{background:var(--blue)}
.c-red{background:var(--red)} .c-white{background:#fff}

footer{border-top:1px solid var(--rule);margin-top:34px;padding:20px 0 46px;
  color:var(--ink-faint);font-size:14px}
footer a{color:var(--ink-soft)}

@media (max-width:560px){
  h1{font-size:36px} body{font-size:16px}
  .hero{padding:26px 0 32px} .figs{gap:22px}
  .fig b{font-size:28px} .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}