/* process page — the "route" family (1 page: how ordering and technical support work).
   Loads after tokens.css, chrome.css and service.css; service.css supplies the shared
   body scaffolding (svcbody/svcmain/svcsec, related, endband). This sheet owns the
   route hero strip, the numbered step panels with send/get splits, the WhatsApp band
   and the full-width enquiry checklist band. */

/* ---------- hero: route ---------- */
.routehero{position:relative;overflow:clip;border-bottom:1px solid var(--line);background:
  radial-gradient(760px 440px at 76% 22%,rgba(29,130,198,.15),transparent 62%),var(--bg)}
.routehero .wrap{padding-top:64px;padding-bottom:64px}
.routehero .intro{max-width:780px}
.routehero h1{margin-top:20px}
.routehero p.lede{margin:22px 0 0;color:var(--mut);font-size:15.5px;line-height:1.7;max-width:72ch}
.routehero .intro .btns{margin-top:28px}

/* the route page carries no sticky rail either — the closing prose column centres */
.svcbody--solo .svcmain{margin-inline:auto}

/* the five steps as a horizontal numbered mono strip — the page's own contents */
.routestrip{display:grid;grid-template-columns:repeat(5,1fr);margin-top:44px;
  border:1px solid var(--line2);border-radius:var(--rad-s);overflow:hidden;
  background:linear-gradient(180deg,rgba(18,33,61,.55),rgba(12,24,48,.35))}
.routestrip a{display:block;padding:20px 20px 22px;border-left:1px solid var(--line);transition:background .2s}
.routestrip a:first-child{border-left:0}
.routestrip a:hover{background:rgba(41,170,227,.07)}
.routestrip .rnum{display:block;font:500 12px var(--mono);letter-spacing:.2em;color:var(--cyan);margin-bottom:9px}
.routestrip .rlab{display:block;font:600 13.5px/1.35 var(--disp);color:var(--ink)}
@media (max-width:900px){
  .routestrip{grid-template-columns:1fr}
  .routestrip a{display:flex;align-items:baseline;gap:var(--g2);padding:15px 20px;border-left:0;border-top:1px solid var(--line)}
  .routestrip a:first-child{border-top:0}
  .routestrip .rnum{margin-bottom:0}
}

/* ---------- the step panels ---------- */
.steps{display:grid;gap:var(--g4);padding:72px 0}
.steps--tail{padding-top:0}
.step{position:relative;border:1px solid var(--line2);border-radius:var(--rad);padding:36px 38px;
  background:linear-gradient(180deg,rgba(18,33,61,.55),rgba(12,24,48,.35));
  scroll-margin-top:140px}
.step.alt{background:var(--bg2);border-color:var(--line2);margin-right:0}
@media (min-width:1121px){
  .step{margin-right:64px}
  .step.alt{margin-right:0;margin-left:64px}
}
.stephead{display:flex;align-items:baseline;gap:var(--g3);margin-bottom:14px}
/* The step numeral sits in the margin the 70ch measure leaves free, instead of an
   L-shaped void top-right on five consecutive panels (design review R3-09). */
.stephead .snum{position:absolute;top:26px;right:32px;font:500 clamp(34px,4.4vw,54px)/1 var(--mono);
  color:var(--cyan2);opacity:.5;text-shadow:0 0 30px rgba(76,196,255,.4);pointer-events:none}
@media (max-width:700px){.stephead .snum{position:static;font-size:30px;opacity:1}}
.stephead h2{font:600 clamp(22px,2.5vw,29px)/1.22 var(--disp);letter-spacing:-.01em}
.step>p{color:var(--mut);margin-bottom:14px;max-width:70ch}
.step>p:last-child{margin-bottom:0}

/* the send / get split inside each step */
.sendget{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2);margin-top:24px}
.sendget>div{border:1px solid var(--line);border-radius:var(--rad-s);padding:20px 22px;background:rgba(6,13,26,.45)}
.sendget .sgtag{display:block;font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;margin-bottom:13px}
.sendget .send .sgtag{color:var(--mut2)}
.sendget .get .sgtag{color:var(--cyan)}
.sendget ul{display:grid;gap:var(--g1)}
.sendget li{position:relative;padding-left:22px;font-size:14px;line-height:1.55;color:var(--mut)}
.sendget li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:2px;background:var(--cyan)}
@media (max-width:700px){.sendget{grid-template-columns:1fr}}

/* photo inside a step */
.stepphoto{margin-top:24px}
.stepphoto img{aspect-ratio:16/7;object-fit:cover}

/* ---------- WhatsApp band between steps ---------- */
.waband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--g3);
  border:1px solid var(--line2);border-radius:var(--rad);padding:28px 32px;
  background:radial-gradient(520px 260px at 12% 50%,rgba(29,130,198,.2),transparent 70%),var(--panel)}
.waband b{display:block;font:600 17px/1.3 var(--disp);margin-bottom:5px}
.waband p{font-size:13.5px;color:var(--mut);max-width:52ch;margin:0}

/* ---------- full-width checklist band ---------- */
.checkband{background:var(--bg2);border-block:1px solid var(--line);padding:var(--band) 0}
.checkband .kicker{margin-bottom:14px}
.checkband h2{font:600 clamp(24px,2.8vw,32px)/1.2 var(--disp);margin-bottom:12px}
.checkband>.wrap>p{color:var(--mut);max-width:70ch}
.checkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g2);margin-top:28px}
.checkgrid li{border:1px solid var(--line);border-radius:var(--rad-s);background:rgba(12,24,48,.5);padding:18px 20px}
.checkgrid .cnum{display:block;font:500 12px var(--mono);letter-spacing:.18em;color:var(--cyan);margin-bottom:7px}
.checkgrid b{display:block;font:600 14.5px var(--disp);color:var(--ink);margin-bottom:5px}
.checkgrid span{display:block;font-size:13px;line-height:1.55;color:var(--mut)}
@media (max-width:1120px){.checkgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.checkgrid{grid-template-columns:1fr}}