/* ==========================================================================
   STEPWISE — product page layer (body.sw) over the golden system.
   The site chrome (nav, footer, enquiry assistant) stays LSS gold. Everything
   inside <main> speaks StepWise: blue #4168E8 and teal #0C8D71 on dark navy.
   Technique (as body.dc does in dc.css): body.sw[data-tree] scopes the layer;
   here it re-points the design tokens on <main>, so the shared components
   (buttons, chips, FAQ, forms, frames, journey steps) follow without copies.
   No canvas, no film, no infinite animation: reveal-on-scroll only.
   Real screenshots arrive as device mockups (laptop, iPhone, iPad; owner
   decision 58) and sit straight on the ground: never edited, no CSS frame.
   Content is wider than the site grid (1320px) so laptops show at ~720-900px.
   ========================================================================== */
body.sw[data-tree]{ background:#060A14; }
body.sw[data-tree] main{
  /* StepWise palette */
  --sw-blue:#4168E8; --sw-blue-deep:#2F55D4; --sw-blue-soft:#9DB2F7; --sw-blue-pale:#DDE5FD;
  --sw-teal:#0C8D71; --sw-teal-soft:#4CC9A6; --sw-teal-pale:#BDEEDF;
  /* shared tokens, re-pointed for the page content only */
  --bg-0:#060A14; --bg-1:#0B1222; --bg-2:#111B31; --bg-3:#04070E;
  --glass:rgba(150,175,255,.045); --glass-2:rgba(150,175,255,.075); --glass-3:rgba(150,175,255,.12);
  --brand:#4168E8; --brand-deep:#2F55D4; --brand-soft:#9DB2F7;
  --cyan:#4CC9A6; --cyan-soft:#8FE0C8;
  --on-brand:#FFFFFF;
  --t-hi:#EEF2FD; --t-body:#A9B6CE; --t-mute:#8391AB;
  --line:rgba(140,162,220,.16); --line-strong:rgba(140,162,220,.30);
  --fill-soft:rgba(65,104,232,.14); --fill-cyan:rgba(12,141,113,.16);
  --grad-brand:linear-gradient(120deg,#2F55D4,#4168E8);
  --grad-brand-soft:linear-gradient(120deg,#2F55D4,#4168E8);
  --grad-text:linear-gradient(92deg,#C9D5FB,#9DB2F7 55%,#6FD6BC);
  --sh-sm:0 2px 14px rgba(1,4,12,.5);
  --sh-md:0 14px 40px rgba(1,4,12,.55),0 0 30px rgba(65,104,232,.10);
  --sh-lg:0 28px 72px rgba(1,4,12,.66),0 0 46px rgba(65,104,232,.12);
  --sh-brand:0 12px 34px rgba(65,104,232,.34);
  /* journey.css components read the gold tokens: on StepWise they read blue */
  --gold:#9DB2F7; --gold-soft:#DDE5FD; --gold-deep:#4168E8; --copper:#4CC9A6;
  --gold-line:rgba(120,150,235,.20); --gold-line-strong:rgba(120,150,235,.40);
  color:var(--t-body);
  display:block;
}
body.sw[data-tree] main ::selection{ background:rgba(65,104,232,.42); color:#fff; }
body.sw[data-tree] main .container{ max-width:1320px; }

/* ---- shared components, StepWise edition (explicit colours in journey.css) ---- */
body.sw[data-tree] main .btn-primary{
  background:linear-gradient(120deg,#2F55D4,#4168E8);
  box-shadow:0 10px 30px rgba(65,104,232,.34);
}
body.sw[data-tree] main .btn-primary:hover{ box-shadow:0 16px 44px rgba(65,104,232,.46); }
body.sw[data-tree] main .btn-primary, body.sw[data-tree] main .btn-primary *{ color:#fff; }
body.sw[data-tree] main .btn-ghost{ border-color:rgba(157,178,247,.38); color:var(--sw-blue-pale); background:rgba(150,175,255,.05); }
body.sw[data-tree] main .btn-ghost:hover{ border-color:var(--sw-blue-soft); background:rgba(65,104,232,.14); }
body.sw[data-tree] main .eyebrow{ color:var(--sw-blue-soft); }
body.sw[data-tree] main .tlink{ color:var(--sw-blue-soft); }
body.sw[data-tree] main .tlink:hover{ color:var(--sw-teal-soft); }
body.sw[data-tree] main p a:not(.btn), body.sw[data-tree] main .fa a, body.sw[data-tree] main .sw-sources a{
  color:var(--sw-blue-soft); text-decoration:underline; text-decoration-color:rgba(157,178,247,.4); text-underline-offset:3px;
}
body.sw[data-tree] main p a:not(.btn):hover, body.sw[data-tree] main .sw-sources a:hover{ color:var(--sw-teal-pale); }
body.sw[data-tree] main .chip{ color:#C6D2F5; }
body.sw[data-tree] main details.faq{ background:rgba(11,18,34,.72); border-color:var(--line); }
body.sw[data-tree] main details.faq[open]{ border-color:var(--line-strong); }
body.sw[data-tree] main .field input:focus,
body.sw[data-tree] main .field select:focus,
body.sw[data-tree] main .field textarea:focus{ border-color:var(--sw-blue); box-shadow:0 0 0 4px rgba(65,104,232,.24); }
body.sw[data-tree] main .alert.ok{ background:rgba(12,141,113,.16); color:var(--sw-teal-pale); }
body.sw[data-tree] main .jsteps li::before{ background:linear-gradient(180deg,#C9D5FB,#4168E8); -webkit-background-clip:text; background-clip:text; }
body.sw[data-tree] main .jsteps b{ color:var(--sw-blue-pale); }
body.sw[data-tree] main .jsteps span{ color:var(--t-body); }

/* ---- type ---- */
.sw-h1{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.03;
  font-size:clamp(2.6rem,6vw,4.7rem); color:#F3F6FE; margin:18px 0 22px; text-wrap:balance;
  text-shadow:0 2px 30px rgba(2,4,10,.8);
}
.sw-h1 em, .sw-h2 em{
  font-style:normal;
  background:linear-gradient(92deg,#B7C7FA,#8BA3F4 58%,#6FD6BC);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sw-h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.1;
  font-size:clamp(1.9rem,3.8vw,2.9rem); color:#EEF2FD; margin:12px 0 0; text-wrap:balance;
}
.sw-h2.sm{ font-size:clamp(1.6rem,3vw,2.3rem); }
.sw-h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.18rem,1.8vw,1.42rem); color:#EEF2FD; letter-spacing:-.015em; margin:0 0 8px; }
.sw-label{ margin:22px 0 0; font-weight:700; color:#EEF2FD; font-size:1rem; }
body.sw[data-tree] main [id]{ scroll-margin-top:84px; }
.sw-lead{ font-size:clamp(1.06rem,1.45vw,1.22rem); line-height:1.68; color:#C3CDE2; max-width:56ch; margin:0; }
.sw-sub-lead{ font-size:1.06rem; line-height:1.7; color:var(--t-body); max-width:62ch; margin:16px 0 0; }
.sw-kick{ display:inline-flex; align-items:center; gap:10px; }
.sw-kick::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--sw-teal-soft); box-shadow:0 0 12px rgba(76,201,166,.7); flex:none; }
.sw-kick svg{ width:18px; height:18px; color:var(--sw-blue-soft); }
.sw-fine{ font-size:.84rem; color:var(--t-mute); }

/* ---- sections: depth, not bands ---- */
.sw-sec{ position:relative; padding:clamp(72px,10vw,128px) 0; }
.sw-sec-tight{ padding:clamp(56px,7vw,88px) 0; }
.sw-raise{ background:linear-gradient(180deg,rgba(13,21,40,.72),rgba(8,13,26,.5)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sw-raise::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 60% at 88% 0%,rgba(65,104,232,.13),transparent 62%),
             radial-gradient(40% 50% at 4% 100%,rgba(12,141,113,.08),transparent 60%); }
.sw-sec > .container{ position:relative; z-index:1; }
.sw-head{ max-width:66ch; margin-bottom:clamp(32px,4.4vw,56px); }
.sw-head.center{ text-align:center; margin-left:auto; margin-right:auto; }
.sw-head.center .sw-sub-lead{ margin-left:auto; margin-right:auto; }
.sw-head .eyebrow{ margin-bottom:4px; }

/* ---- hero (overview) ---- */
.sw-hero{ position:relative; overflow:hidden; min-height:min(100vh,960px); display:flex; align-items:center;
  padding:clamp(120px,14vw,170px) 0 clamp(80px,9vw,120px); }
.sw-hero-bg{ position:absolute; inset:0; z-index:0; margin:0; }
.sw-hero-bg picture{ display:contents; }
.sw-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:66% 50%; }
.sw-hero-bg::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(6,10,20,.9) 0%,rgba(6,10,20,.66) 32%,rgba(6,10,20,.12) 58%,rgba(6,10,20,0) 76%),
             linear-gradient(180deg,rgba(6,10,20,.55) 0%,rgba(6,10,20,0) 22%,rgba(6,10,20,0) 72%,#060A14 100%); }
.sw-hero > .container{ position:relative; z-index:1; width:100%; }
.sw-hero-copy{ max-width:620px; }
.sw-hero .hero-cta{ margin-top:32px; }
.sw-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none; }
.sw-chips li{ font-size:.82rem; font-weight:600; padding:.46em .95em; border-radius:999px; color:#C6D2F5;
  background:rgba(10,16,32,.66); border:1px solid rgba(140,162,220,.26); }
.sw-platforms{ margin:26px 0 0; font-size:.9rem; font-weight:600; line-height:1.6; color:#C6D2F5; }
.sw-platforms [lang="ar"]{ font-family:'Segoe UI',Tahoma,'Noto Naskh Arabic',sans-serif; }
.sw-demo-note{ display:block; margin-top:4px; font-size:.76rem; opacity:.8; }
.sw-chips li[lang="ar"]{ font-family:'Segoe UI',Tahoma,'Noto Naskh Arabic',sans-serif; font-size:.9rem; line-height:1.3; }

/* ---- subpage hero ---- */
.sw-phero{ position:relative; overflow:hidden; padding:clamp(128px,15vw,176px) 0 clamp(52px,7vw,84px); }
.sw-phero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(56% 74% at 86% 0%,rgba(65,104,232,.26),transparent 62%),
             radial-gradient(40% 60% at 2% 104%,rgba(12,141,113,.14),transparent 60%); }
.sw-phero > .container{ position:relative; z-index:1; }
.sw-phero .sw-h1{ font-size:clamp(2.3rem,5vw,3.9rem); max-width:18ch; }
.sw-phero .hero-cta{ margin-top:30px; }
/* subpage hero carrying a still behind the copy (privacy page) */
.sw-phero.has-bg{ min-height:min(88vh,820px); display:flex; align-items:center; }
.sw-phero.has-bg::before{ display:none; }
.sw-phero.has-bg > .container{ width:100%; }
.sw-phero.has-bg .sw-hero-bg img{ object-position:72% 50%; }

/* StepWise sub-navigation (the four pages) */
.sw-sub{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none; }
.sw-sub a{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.02em; padding:.5em 1em; border-radius:999px;
  color:#C6D2F5; border:1px solid var(--line-strong); background:rgba(10,16,32,.6); transition:border-color .2s,background .2s,color .2s; }
.sw-sub a:hover{ border-color:var(--sw-blue-soft); color:#fff; }
.sw-sub a[aria-current="page"]{ background:rgba(65,104,232,.24); border-color:rgba(157,178,247,.6); color:#fff; }

/* ---- real screens: device mockups (laptop 1.52:1, iPhone 1:2.02, iPad 1.39:1), transparent
   WebP with their own soft shadow, placed straight on the dark ground: no CSS frame, no CSS shadow ---- */
.sw-fig{ margin:0; min-width:0; }
.sw-fig figcaption{ margin-top:12px; font-size:.84rem; line-height:1.5; color:var(--t-mute); text-align:center; }
.sw-dev{ display:block; height:auto; max-width:100%; }
.sw-laptop{ width:100%; margin:0 auto; }
.sw-phone{ width:var(--pw,280px); margin:0 auto; }
.sw-tablet{ width:100%; max-width:720px; margin:0 auto; }

/* ---- two apps (web + phone) ---- */
.sw-apps{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(20px,3vw,32px); align-items:stretch; }
.sw-app{ position:relative; display:flex; flex-direction:column; gap:22px; padding:clamp(22px,2.6vw,32px);
  border-radius:22px; background:linear-gradient(165deg,rgba(17,27,49,.82),rgba(8,13,26,.72)); border:1px solid var(--line); }
.sw-app .sw-fig{ margin-top:auto; }
.sw-app-phone .sw-phone{ --pw:260px; }
.sw-tag{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sw-teal-soft); }
.sw-tag svg{ width:16px; height:16px; }
.sw-app p{ margin:0; color:var(--t-body); }
.sw-app .sw-h3{ margin-top:10px; }

/* ---- generic cards ---- */
.sw-card{ position:relative; min-width:0; padding:24px 24px 26px; border-radius:18px;
  background:linear-gradient(165deg,rgba(17,27,49,.8),rgba(8,13,26,.7)); border:1px solid var(--line); }
.sw-card p{ margin:0; color:var(--t-body); font-size:.96rem; line-height:1.62; }
.sw-card p + p{ margin-top:10px; }
.sw-card .sw-h3{ margin-bottom:8px; }
.sw-num{ display:block; font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sw-teal-soft); margin-bottom:10px; }
.sw-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  color:var(--sw-blue-soft); background:radial-gradient(circle at 30% 20%,rgba(65,104,232,.32),rgba(65,104,232,.08)); border:1px solid rgba(120,150,235,.34); }
.sw-ico svg{ width:22px; height:22px; }
.sw-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sw-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sw-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sw-answer{ margin:clamp(28px,4vw,40px) auto 0; max-width:62ch; text-align:center; font-size:1.1rem; line-height:1.65; color:#C9D3E8; }
.sw-answer b{ color:#EEF2FD; }

/* ---- split: text + visual ---- */
/* text column + device column: at the 1320px grid the device side is ~720-730px wide */
.sw-split{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(32px,5vw,72px); align-items:center; }
.sw-split.flip{ grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); }
.sw-split.flip > :first-child{ order:2; }
.sw-split.even{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.sw-split.top{ align-items:start; }
.sw-still{ margin:0; border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-lg); background:#070B16; }
.sw-still img{ display:block; width:100%; height:auto; }

/* check lists */
.sw-checks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.sw-checks li{ position:relative; padding-left:32px; color:var(--t-body); line-height:1.6; }
.sw-checks li::before{ content:''; position:absolute; left:0; top:.2em; width:20px; height:20px; border-radius:50%;
  background:rgba(12,141,113,.2); border:1px solid rgba(76,201,166,.5); }
.sw-checks li::after{ content:''; position:absolute; left:7px; top:calc(.2em + 5px); width:5px; height:9px; border:solid var(--sw-teal-soft); border-width:0 2px 2px 0; transform:rotate(45deg); }
.sw-checks b{ color:#EEF2FD; font-weight:600; }
.sw-checks.two{ grid-template-columns:1fr 1fr; gap:12px 28px; }

/* ---- the 7-step flow ---- */
.sw-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:swstep; }
.sw-step{ position:relative; min-width:0; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:linear-gradient(165deg,rgba(17,27,49,.84),rgba(8,13,26,.74)); border:1px solid var(--line); }
.sw-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%,rgba(65,104,232,.22),rgba(9,14,28,.9) 70%); border-bottom:1px solid var(--line); }
/* a laptop mockup sits whole inside the thumbnail; a phone mockup rises from the bottom edge */
.sw-thumb > img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; padding:8% 7% 3%; }
.sw-thumb.is-phone{ background:radial-gradient(110% 100% at 50% 100%,rgba(12,141,113,.2),rgba(9,14,28,.92) 70%); }
.sw-peek{ position:absolute; left:50%; top:11%; width:46%; transform:translateX(-50%); }
.sw-peek img{ display:block; width:100%; height:auto; }
.sw-step-body{ padding:18px 20px 22px; }
.sw-step-body .sw-num{ margin-bottom:8px; }
.sw-step-body h3{ font-size:1.08rem; margin:0 0 6px; color:#EEF2FD; letter-spacing:-.01em; }
.sw-step-body p{ margin:0; font-size:.92rem; line-height:1.58; color:var(--t-body); }
.sw-step-cta{ display:flex; min-width:0; }
.sw-step-link{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:26px 24px; border-radius:18px; text-decoration:none;
  background:linear-gradient(150deg,rgba(47,85,212,.32),rgba(12,141,113,.16)); border:1px solid rgba(120,150,235,.4); transition:border-color .25s,transform .25s; }
.sw-step-link:hover{ border-color:var(--sw-blue-soft); transform:translateY(-3px); }
.sw-step-link b{ font-family:var(--display); font-size:1.3rem; color:#fff; line-height:1.2; margin-bottom:8px; }
.sw-step-link span{ color:#C9D3E8; font-size:.94rem; }
.sw-step-link .ar{ margin-top:18px; font-weight:700; color:var(--sw-teal-pale); }

/* ---- roles ---- */
.sw-role .sw-devs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0; list-style:none; }
.sw-role .sw-devs li{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.34em .7em; border-radius:999px; color:var(--sw-teal-pale); background:rgba(12,141,113,.16); border:1px solid rgba(76,201,166,.3); }
.sw-lss{ margin-top:18px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:clamp(22px,3vw,32px);
  border-radius:20px; border:1px solid rgba(120,150,235,.34); background:linear-gradient(160deg,rgba(47,85,212,.14),rgba(8,13,26,.7)); }
.sw-lss .sw-ico{ margin:0; width:54px; height:54px; }
.sw-lss .sw-h3{ margin-bottom:6px; }
.sw-lss p{ margin:0; color:var(--t-body); line-height:1.62; }
.sw-lss p + p{ margin-top:8px; }
.sw-scope{ margin-top:18px; text-align:center; color:#C9D3E8; font-size:1rem; }

/* ---- visual stacks (two devices overlapping; the mockups carry their own shadows) ---- */
.sw-stack{ position:relative; padding-bottom:16%; }
.sw-stack .sw-back{ width:92%; margin-left:auto; }
.sw-stack .sw-front{ position:absolute; left:0; bottom:0; width:60%; z-index:1; }
/* phone variant: the phone stands at the bottom-right corner and hangs below the device behind it */
.sw-stack.phone{ padding-bottom:0; padding-right:12%; margin-bottom:clamp(60px,8vw,120px); }
.sw-stack.phone .sw-back{ width:100%; margin-left:0; }
.sw-stack.phone .sw-front{ left:auto; right:0; bottom:calc(-1 * clamp(60px,8vw,120px)); width:auto; }
.sw-stack.phone .sw-front .sw-phone{ --pw:clamp(150px,16vw,230px); }
.sw-stack figcaption{ text-align:left; }

/* ---- duo: two large devices, staggered (laptops ~880/780px, iPad ~720px) ---- */
.sw-duo{ display:grid; }
.sw-duo > .sw-fig{ width:min(100%,880px); }
.sw-duo > .sw-fig:nth-child(2){ justify-self:end; width:min(100%,780px); margin-top:clamp(-100px,-6vw,-24px); position:relative; z-index:1; }
.sw-duo > .sw-fig.is-tablet{ width:min(100%,720px); }
.sw-duo > .sw-fig figcaption{ text-align:left; }
.sw-duo > .sw-fig:nth-child(2) figcaption{ text-align:right; }

/* ---- phone rows (iPhone mockups at ~260-300px) + prompt ladder ---- */
.sw-phones{ display:grid; grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:clamp(18px,4vw,56px); align-items:start; }
.sw-phones .sw-phone{ --pw:100%; }
.sw-phones .sw-fig{ width:100%; }
.sw-phones.two{ grid-template-columns:repeat(2,minmax(0,290px)); }
.sw-ladder{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; counter-reset:swlvl; }
.sw-ladder li{ counter-increment:swlvl; display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:#DDE5FD;
  padding:.5em .9em .5em .6em; border-radius:999px; background:rgba(11,18,34,.8); border:1px solid var(--line-strong); }
.sw-ladder li::before{ content:counter(swlvl); display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:.72rem; font-weight:800; color:#fff; background:var(--lv,#4168E8); }
.sw-ladder li:nth-child(1){ --lv:#0C8D71; border-color:rgba(76,201,166,.5); }
.sw-ladder li:nth-child(2){ --lv:#1F8F95; }
.sw-ladder li:nth-child(3){ --lv:#2F7FC0; }
.sw-ladder li:nth-child(4){ --lv:#3A6FDA; }
.sw-ladder li:nth-child(5){ --lv:#4168E8; }
.sw-ladder li:nth-child(6){ --lv:#5261A8; }
.sw-ladder li:nth-child(7){ --lv:#58627A; }
.sw-ladder-cap{ margin:10px 0 0; font-size:.84rem; color:var(--t-mute); }
.sw-sets{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.sw-sets li{ font-size:.84rem; font-weight:600; color:var(--sw-teal-pale); padding:.44em .9em; border-radius:999px; background:rgba(12,141,113,.14); border:1px solid rgba(76,201,166,.34); }
.sw-sub-block{ margin-top:clamp(56px,7vw,96px); }

/* ---- results: rule tiles ---- */
.sw-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 clamp(32px,4vw,48px); }
.sw-stat{ padding:22px 20px; border-radius:18px; background:linear-gradient(165deg,rgba(17,27,49,.84),rgba(8,13,26,.72)); border:1px solid var(--line); }
.sw-stat b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(2rem,3.6vw,2.8rem); line-height:1; letter-spacing:-.02em;
  background:linear-gradient(92deg,#C9D5FB,#8BA3F4 60%,#6FD6BC); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sw-stat span{ display:block; margin-top:10px; font-size:.9rem; line-height:1.45; color:var(--t-body); }

/* ---- full-bleed still scene (privacy) ---- */
.sw-scene{ position:relative; overflow:hidden; padding:clamp(90px,12vw,150px) 0; }
.sw-scene .sw-hero-bg img{ object-position:74% 50%; }
.sw-scene > .container{ position:relative; z-index:1; }
.sw-scene-copy{ max-width:600px; }
.sw-pillars{ display:grid; gap:12px; margin-top:26px; }
.sw-pillar{ padding:18px 20px; border-radius:16px; background:rgba(8,12,24,.78); border:1px solid var(--line); }
.sw-pillar b{ display:block; color:#EEF2FD; font-size:1.02rem; margin-bottom:4px; }
.sw-pillar span{ color:var(--t-body); font-size:.94rem; line-height:1.58; }
.sw-scene .hero-cta{ margin-top:26px; }

/* ---- setup summary ---- */
.sw-panel{ padding:clamp(26px,3.4vw,44px); border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(17,27,49,.84),rgba(8,13,26,.72)); }
.sw-panel .sw-checks{ margin-top:0; }
.sw-panel-foot{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ---- commitments (setup page) ---- */
.sw-commit{ border-color:rgba(76,201,166,.36); background:linear-gradient(165deg,rgba(12,141,113,.16),rgba(8,13,26,.74)); }
.sw-commit .sw-ico{ color:var(--sw-teal-pale); background:radial-gradient(circle at 30% 20%,rgba(12,141,113,.4),rgba(12,141,113,.1)); border-color:rgba(76,201,166,.4); }

/* ---- timeline (setup page) ---- */
.sw-timeline{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:swt; position:relative; }
/* the rule runs from the first circle's centre to the last one's (5 columns, 14px gaps) */
.sw-timeline::before{ content:''; position:absolute; left:24px; right:calc(20% - 35px); top:23px; height:2px; background:linear-gradient(90deg,#4168E8,#0C8D71); opacity:.55; }
.sw-timeline li{ counter-increment:swt; position:relative; min-width:0; }
.sw-timeline li::before{ content:counter(swt); position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:#fff; background:linear-gradient(135deg,#2F55D4,#4168E8); box-shadow:0 0 0 6px #080D1A,0 0 22px rgba(65,104,232,.5); margin-bottom:16px; }
.sw-timeline li:last-child::before{ background:linear-gradient(135deg,#0C8D71,#2BA886); box-shadow:0 0 0 6px #080D1A,0 0 22px rgba(12,141,113,.5); }
.sw-timeline b{ display:block; color:#EEF2FD; font-size:1.02rem; line-height:1.3; margin-bottom:6px; }
.sw-timeline span{ display:block; color:var(--t-body); font-size:.92rem; line-height:1.55; }

/* ---- walkthrough (how it works) ---- */
.sw-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none; counter-reset:swtoc; }
.sw-toc a{ display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:600; color:#C6D2F5; padding:.46em .9em .46em .5em;
  border-radius:999px; border:1px solid var(--line-strong); background:rgba(10,16,32,.6); transition:border-color .2s,color .2s; }
.sw-toc a:hover{ border-color:var(--sw-blue-soft); color:#fff; }
.sw-toc i{ font-style:normal; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:.7rem; font-weight:800; color:#fff; background:rgba(65,104,232,.6); }
.sw-walk{ scroll-margin-top:84px; }
.sw-walk-head{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; margin-bottom:clamp(28px,3.6vw,44px); max-width:880px; }
.sw-walk-n{ font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,5vw,3.8rem); line-height:.9; letter-spacing:-.03em;
  background:linear-gradient(180deg,#C9D5FB,#4168E8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sw-walk-head .sw-h2{ margin-top:0; }
.sw-walk-head .sw-sub-lead{ margin-top:12px; }
.sw-who{ display:inline-block; margin-top:14px; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sw-teal-pale);
  padding:.36em .8em; border-radius:999px; background:rgba(12,141,113,.16); border:1px solid rgba(76,201,166,.3); }
.sw-stages{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(40px,5vw,64px); }
.sw-note{ margin-top:clamp(28px,3.6vw,40px); padding:18px 22px; border-radius:16px; border:1px dashed rgba(120,150,235,.4); background:rgba(11,18,34,.6); color:#C9D3E8; font-size:.96rem; line-height:1.6; }
.sw-note b{ color:#EEF2FD; }
.sw-year{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; max-width:760px; }
.sw-year .sw-card{ text-align:center; }
.sw-year .sw-arrow{ color:var(--sw-teal-soft); }
.sw-year .sw-arrow svg{ width:40px; height:40px; }

/* ---- tables (privacy page) ---- */
.sw-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.sw-table th, .sw-table td{ text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line); }
.sw-table thead th{ font:700 .7rem/1.2 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--sw-blue-soft); border-bottom:1px solid var(--line-strong); }
.sw-table tbody th{ color:#EEF2FD; font-weight:600; width:26%; }
.sw-table td{ color:var(--t-body); line-height:1.58; }
.sw-table-wrap{ border-radius:18px; border:1px solid var(--line); background:rgba(11,18,34,.62); overflow:hidden; }
.sw-legal{ margin-top:18px; font-size:.9rem; color:var(--t-mute); }
.sw-sources{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sw-sources li{ position:relative; padding:12px 16px 12px 40px; border-radius:14px; background:rgba(11,18,34,.62); border:1px solid var(--line); line-height:1.5; }
.sw-sources li::before{ content:''; position:absolute; left:17px; top:1.15em; width:8px; height:8px; border-radius:50%; background:var(--sw-blue-soft); }
.sw-sources a{ font-weight:600; }

/* ---- FAQ + enquiry ---- */
.sw-faq{ max-width:840px; margin:0 auto; }
.sw-enq{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.sw-form-wrap{ padding:clamp(22px,3vw,34px); border-radius:22px; border:1px solid rgba(120,150,235,.3);
  background:linear-gradient(165deg,rgba(17,27,49,.9),rgba(8,13,26,.82)); box-shadow:var(--sh-lg); }
.sw-form-wrap .form{ gap:16px; }
.sw-form-wrap textarea{ min-height:120px; }
.sw-form-wrap .alert{ grid-column:1/-1; }
.sw-form-wrap .form-note a{ color:var(--sw-blue-soft); }
.sw-related{ margin-top:24px; font-size:.94rem; line-height:1.9; }
.sw-cta{ text-align:center; padding:clamp(34px,5vw,60px) clamp(20px,4vw,48px); border-radius:26px; border:1px solid rgba(120,150,235,.34);
  background:radial-gradient(70% 120% at 50% 0%,rgba(65,104,232,.26),transparent 70%),linear-gradient(180deg,#0D1528,#080D1A); }
.sw-cta .sw-h2{ margin:10px auto 14px; max-width:22ch; }
.sw-cta p{ margin:0 auto; max-width:56ch; color:#C3CDE2; }
.sw-cta .hero-cta{ justify-content:center; margin-top:26px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .sw-flow{ grid-template-columns:repeat(2,1fr); }
  .sw-timeline{ grid-template-columns:1fr; gap:0; }
  .sw-timeline::before{ left:23px; right:auto; top:24px; bottom:24px; width:2px; height:auto; background:linear-gradient(180deg,#4168E8,#0C8D71); }
  .sw-timeline li{ display:grid; grid-template-columns:48px 1fr; gap:0 18px; padding-bottom:22px; }
  .sw-timeline li::before{ grid-row:1 / span 2; margin:0; }
}
@media (max-width:960px){
  .sw-apps{ grid-template-columns:1fr; }
  .sw-split, .sw-split.flip, .sw-split.even, .sw-enq{ grid-template-columns:1fr; }
  .sw-split.flip > :first-child{ order:0; }
  .sw-duo > .sw-fig, .sw-duo > .sw-fig:nth-child(2){ width:100%; justify-self:stretch; margin-top:0; }
  .sw-duo > .sw-fig + .sw-fig{ margin-top:24px; }
  .sw-duo > .sw-fig figcaption, .sw-duo > .sw-fig:nth-child(2) figcaption{ text-align:center; }
  .sw-grid-4, .sw-stats{ grid-template-columns:1fr 1fr; }
  .sw-grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  /* hero still becomes a banner above the copy */
  .sw-hero{ display:block; min-height:0; padding:0 0 64px; }
  .sw-hero .sw-hero-bg, .sw-phero.has-bg .sw-hero-bg, .sw-scene .sw-hero-bg{ position:relative; inset:auto; }
  .sw-hero-bg img{ height:auto; aspect-ratio:1344/752; }
  .sw-hero-bg::after{ background:linear-gradient(180deg,rgba(6,10,20,.55) 0%,rgba(6,10,20,0) 26%,rgba(6,10,20,0) 58%,#060A14 100%); }
  .sw-hero > .container{ margin-top:-8px; }
  .sw-phero.has-bg{ display:block; min-height:0; padding:0 0 52px; }
  .sw-phero.has-bg > .container{ margin-top:-8px; }
  .sw-scene{ padding:0 0 72px; }
  .sw-scene > .container{ margin-top:-8px; }
  .sw-checks.two{ grid-template-columns:1fr; }
  .sw-stack{ padding-bottom:0; display:grid; gap:18px; }
  .sw-stack .sw-back{ width:100%; }
  .sw-stack .sw-front{ position:relative; left:auto; bottom:auto; width:100%; }
  .sw-stack.phone{ padding-right:0; margin-bottom:0; }
  .sw-stack.phone .sw-front{ justify-self:center; width:auto; right:auto; bottom:auto; }
  .sw-stack.phone .sw-front .sw-phone{ --pw:210px; }
  .sw-stack figcaption{ text-align:center; }
  .sw-year{ grid-template-columns:1fr; }
  .sw-year .sw-arrow{ justify-self:center; transform:rotate(90deg); }
  .sw-table thead{ display:none; }
  .sw-table, .sw-table tbody, .sw-table tr, .sw-table th, .sw-table td{ display:block; width:auto; }
  .sw-table tr{ padding:14px 16px; border-bottom:1px solid var(--line); }
  .sw-table tbody th, .sw-table td{ padding:0; border:0; width:auto; }
  .sw-table tbody th{ margin-bottom:6px; }
  .sw-table td + td{ margin-top:6px; }
  .sw-table td[data-l]::before{ content:attr(data-l) ': '; font-weight:700; color:var(--sw-blue-soft); }
}
@media (max-width:640px){
  .sw-flow, .sw-grid-4, .sw-grid-3, .sw-grid-2{ grid-template-columns:1fr; }
  /* phone rows become a swipe strip (CSS only); the strip scrolls, the page never does */
  .sw-phones{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0 -24px; padding:4px 24px 16px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
  .sw-phones .sw-fig{ flex:0 0 64%; max-width:none; scroll-snap-align:center; }
  /* a pair of phones sits side by side instead of in a strip, so neither is cut at the screen edge */
  .sw-phones.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; overflow:visible; margin:0; padding:4px 0 0; }
  .sw-phones.two .sw-fig{ flex:none; }
  .sw-phone{ --pw:240px; }
  .sw-lss{ grid-template-columns:1fr; }
  .sw-walk-head{ grid-template-columns:1fr; gap:6px; }
}
@media (max-width:420px){
  .sw-stats{ grid-template-columns:1fr 1fr; gap:10px; }
  .sw-stat{ padding:18px 14px; }
}
@media (prefers-reduced-motion:reduce){
  .sw-step-link, .sw-sub a, .sw-toc a{ transition:none; }
  .sw-step-link:hover{ transform:none; }
}