/* ===========================================================================
   SwapLords 4: the second company, and the first LIGHT storefront.

   The look: white pages, near-black type, the operator's accent as the only
   colour, flat surfaces told apart by a pale grey rather than by shadows,
   fully round buttons, big tight headlines, 24px cards. One dark band near the
   foot is the only dark thing on the page.

   Every theme before this one was dark, so base.css's elevation and edge
   variables are re-set below for paper: soft grey shadows and no inner light.
   THE ACCENT STILL WINS: every interactive element ends in var(--a).
   =========================================================================== */
:root{
  --bg:#ffffff;
  --bg1:#f5f7fa;   /* muted bands, inputs, cards */
  --bg2:#ffffff;   /* raised surface */
  --bg3:#eceff3;   /* chips, hovers */
  --bg4:#e1e5ea;
  --sunk:#f5f7fa;
  --ln:#e3e6eb;
  --ln2:#cfd4dc;
  --tx:#0a0b0d;
  --tx2:#32353d;
  --mu:#5b616e;
  --fa:#8a8f98;
  --ok:#098551; --wa:#b7791f; --no:#cf202f;
  --ink:#0a0b0d;   /* the dark band */

  --e1:0 1px 2px rgba(10,11,13,.05);
  --e2:0 1px 2px rgba(10,11,13,.04),0 8px 24px rgba(10,11,13,.06);
  --e3:0 2px 4px rgba(10,11,13,.04),0 16px 40px rgba(10,11,13,.08);
  --e4:0 2px 4px rgba(10,11,13,.04),0 16px 48px rgba(10,11,13,.1);
  --edge:0 0 0 transparent;
  --spark:transparent;--sweep:transparent;--fx:transparent;
  --r:24px;
  --card:#ffffff;
  --head:rgba(255,255,255,.92);
  --err-bg:#fdecee;--err-ln:#f3b4bb;--err-tx:#9b1520;
}

body{background:var(--bg);color:var(--tx);font-family:'PBody',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'PBody',system-ui,sans-serif;font-weight:700;color:var(--tx)}
a{color:var(--a)}
a:hover{color:var(--a-deep)}
::selection{background:var(--a);color:var(--a-ink)}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;padding:0 24px}
.s4-narrow{max-width:860px}
.muted,.sec-lede{color:var(--mu)}
.faint{color:var(--fa)}

/* no atmosphere on paper: every inherited glow, grid and drawing goes */
body::before,body::after,.x-wrap::before,.x-wrap::after,.atmo::before,.grain::after,.gridfield::before{display:none!important}
.fx,.sweep::after{display:none!important}

/* ---- header -------------------------------------------------------------- */
.p-head{background:var(--head);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.p-head.scrolled{border-bottom-color:var(--ln)}
.p-head .wrap{height:72px}
.p-brand{color:var(--tx);font-family:'PBody',sans-serif;font-size:1.2rem;letter-spacing:-.025em;gap:.6rem}
.p-brand:hover{color:var(--tx)}
.s4-mark{display:block;flex:0 0 auto}
.s4-head .p-brand{margin-inline-end:1rem}
.p-nav{gap:.15rem;font-size:.95rem}
.p-nav a{color:var(--tx2);border-radius:999px;padding:.5rem .9rem}
.p-nav a:hover{color:var(--tx);background:var(--bg1)}
.p-nav a.on{color:var(--tx);font-weight:600;background:none}
.p-cta,.p-nav a.p-nav-cta{background:var(--a);color:var(--a-ink);border-radius:999px;height:40px;padding:0 1.15rem;font-weight:600;font-size:.88rem}
.p-cta:hover,.p-nav a.p-nav-cta:hover{background:var(--a-deep);color:var(--a-ink);filter:none}
.s4-tg{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 1rem;border-radius:999px;
  background:var(--bg3);color:var(--tx);font-size:.88rem;font-weight:600;white-space:nowrap}
.s4-tg:hover{background:var(--bg4);color:var(--tx);text-decoration:none}
.s4-tg svg{color:var(--a)}
.p-lang>summary{color:var(--tx2);border-radius:999px}
.p-lang>summary:hover,.p-lang[open]>summary{color:var(--tx);background:var(--bg1)}
.p-lang-pop{background:var(--card);border-color:var(--ln);box-shadow:var(--e3)}
.p-lang-pop a{color:var(--tx2)}
.p-lang-pop a:hover{background:var(--bg1);color:var(--tx)}
.p-lang-pop a.on{color:var(--a);font-weight:600}
.p-burger{border-color:var(--ln);color:var(--tx);border-radius:999px}
.p-burger span{background:currentColor}
@media(max-width:900px){
  .p-nav{background:var(--card);border-color:var(--ln);box-shadow:var(--e3)}
  .p-nav a{border-radius:12px}
}
@media(max-width:1100px){.s4-tg span{display:none}.s4-tg{width:40px;padding:0;justify-content:center}}
@media(max-width:620px){.s4-tg{display:none}}

/* ---- hero ---------------------------------------------------------------- */
.x-wrap.s4-hero{border:0;padding:72px 0 96px;overflow:visible}
.s4-hero .x-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:64px;align-items:center}
.s4-h1{font-size:clamp(2.75rem,5.6vw,4.5rem);line-height:1.02;letter-spacing:-.04em;max-width:12ch;margin:0}
.s4-hero .lede{color:var(--mu);font-size:1.19rem;line-height:1.55;max-width:30rem;margin:1.5rem 0 0}
.s4-points{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.75rem}
.s4-points li{display:flex;align-items:center;gap:.75rem;font-weight:500;color:var(--tx2)}
.s4-tick{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  color:var(--a);background:color-mix(in srgb,var(--a) 9%,transparent)}
.s4-h1,.s4-hero .lede,.s4-points{animation:s4-up .7s var(--ease-out) both}
.s4-hero .lede{animation-delay:.08s}.s4-points{animation-delay:.16s}
.s4-hero .x-box{animation:s4-up .7s var(--ease-out) .12s both}
@keyframes s4-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .s4-hero .x-grid{grid-template-columns:1fr;gap:40px}
  .x-wrap.s4-hero{padding:40px 0 64px}
  .s4-h1{max-width:none}
}
/* the headline stays first on a phone: the box follows it */
@media(max-width:620px){.s4-hero .x-copy{order:0}}

/* ---- the exchange box ---------------------------------------------------- */
.x-box{background:var(--card);border:1px solid var(--ln);border-radius:24px;box-shadow:var(--e4);width:100%;max-width:460px;justify-self:end}
.x-box::before{display:none}
.x-inner{padding:20px}
.x-toggle{background:var(--bg1);border:0;border-radius:999px;padding:4px;box-shadow:none}
.x-toggle button{color:var(--mu);border-radius:999px;font-weight:600}
.x-toggle button:hover{color:var(--tx)}
.x-toggle button[aria-pressed=true]{background:var(--card);color:var(--tx);box-shadow:var(--e1)}
.x-leg{background:var(--bg1);border:1px solid transparent;border-radius:16px;box-shadow:none;padding:14px 16px;
  transition:border-color .15s ease,background .15s ease}
.x-leg:focus-within{background:var(--card);border-color:var(--ln2);box-shadow:none}
.x-leg label{color:var(--mu);font-size:.81rem;font-weight:500;text-transform:none;letter-spacing:0}
.x-amt{color:var(--tx);font-size:1.85rem;font-weight:600;letter-spacing:-.03em;font-family:'PBody',sans-serif}
.x-amt::placeholder{color:var(--fa)}
.x-usd{color:var(--mu)}
.x-pick{background:var(--card);color:var(--tx);border:1px solid var(--ln);border-radius:999px;box-shadow:var(--e1);font-weight:600}
.x-pick:hover{background:var(--card);border-color:var(--ln2)}
.x-pick .net{color:var(--mu)}
.x-flip button{background:var(--card);border:1px solid var(--ln);color:var(--tx);box-shadow:0 0 0 4px var(--card);border-radius:50%}
.x-flip button:hover{border-color:var(--a);color:var(--a)}
.x-rate{color:var(--mu)}
.x-field label{color:var(--tx2);font-weight:500}
.x-field input{background:var(--bg1);border:1px solid transparent;color:var(--tx);border-radius:16px;box-shadow:none;padding:.9rem 1rem}
.x-field input::placeholder{color:var(--fa)}
.x-field input:focus{background:var(--card);border-color:var(--a);box-shadow:none}
.x-field summary{color:var(--a);opacity:1!important;font-weight:600}
.x-hint{color:var(--mu)}
.x-go{background:var(--a);color:var(--a-ink);border-radius:999px;box-shadow:none;font-weight:600;min-height:52px}
.x-go:hover{background:var(--a-deep);filter:none}
.x-go[disabled]{background:var(--bg3);color:var(--fa)}
.x-note{color:var(--mu)}
.x-err{background:var(--err-bg);border-color:var(--err-ln);color:var(--err-tx)}

/* ---- coin picker --------------------------------------------------------- */
.cp-back{background:rgba(10,11,13,.35);backdrop-filter:blur(4px)}
.cp-box{background:var(--card);border:1px solid var(--ln);box-shadow:var(--e4);border-radius:24px}
.cp-search{border-color:var(--ln)}
.cp-search input{background:var(--bg1);border:1px solid transparent;color:var(--tx);border-radius:999px}
.cp-search input:focus{border-color:var(--a);background:var(--card);outline:none}
.cp-item{color:var(--tx);border-radius:12px}
.cp-item:hover{background:var(--bg1)}
.cp-item span{color:var(--mu)}
.cp-item b{color:var(--tx)}

/* ---- sections ------------------------------------------------------------ */
.sec.s4-sec{padding:96px 0}
.s4-alt{background:var(--bg1)}
.sec-h{font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.035em;line-height:1.08;margin-bottom:2.5rem}
.sec-head{margin-bottom:2.5rem;align-items:flex-end}
.sec-head .sec-h{margin-bottom:.75rem}
.sec-lede{font-size:1.12rem;line-height:1.55;max-width:40rem}
.sec-link{color:var(--tx);background:var(--bg3);border-radius:999px;padding:.6rem 1.1rem;font-weight:600;font-size:.9rem}
.sec-link:hover{background:var(--bg4);color:var(--tx);text-decoration:none}
.s4-head-c{text-align:center;margin:0 auto 3rem;max-width:44rem}
.s4-head-c .sec-h{margin-bottom:.75rem}
.s4-head-c .sec-lede{margin:0 auto}
.s4-eye{color:var(--a);font-weight:600;font-size:.9rem;margin:0 0 .75rem}
@media(max-width:620px){.sec.s4-sec{padding:64px 0}.sec-h{margin-bottom:1.75rem}}

/* ---- bento --------------------------------------------------------------- */
.s4-bento{display:grid;grid-template-columns:1.9fr 1fr 1fr;gap:20px}
.s4-bento-3{grid-template-columns:repeat(3,1fr)}
.s4-card{position:relative;overflow:hidden;background:var(--bg1);border-radius:24px;padding:32px;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:280px}
.s4-alt .s4-card,.s4-card-w{background:var(--card)}
.s4-card-w{min-height:0;justify-content:flex-start;border:1px solid var(--ln)}
.s4-card h3{font-size:1.5rem;letter-spacing:-.03em;line-height:1.2;margin:0 0 .5rem}
.s4-card p{color:var(--mu);margin:0;line-height:1.55;max-width:26rem}
.s4-card-big{grid-row:span 2;justify-content:space-between;gap:32px}
.s4-card-big h3{font-size:2rem;letter-spacing:-.04em}
.s4-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:auto;
  color:var(--a);background:var(--card);box-shadow:var(--e1)}
.s4-card .s4-ico + h3{margin-top:2rem}
.s4-corner{position:absolute;top:24px;inset-inline-end:24px;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--tx);color:var(--bg);transition:transform .2s var(--ease-out),background .2s}
.s4-corner:hover{background:var(--a);color:var(--a-ink);transform:rotate(45deg)}
[dir=rtl] .s4-corner svg{transform:scaleX(-1)}

/* the routes card: real pairs on this panel, each with its reference rate */
.s4-routes{display:grid;gap:10px}
.s4-route{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:14px 16px 18px;border-radius:16px;background:var(--card);color:var(--tx);border:1px solid transparent;
  box-shadow:var(--e1);transition:transform .25s var(--ease-out),border-color .2s}
.s4-route:hover{text-decoration:none;color:var(--tx);transform:translateX(4px)}
[dir=rtl] .s4-route:hover{transform:translateX(-4px)}
.s4-route.on{border-color:var(--a)}
.s4-route-ic{display:flex}
.s4-route-ic img{border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--card)}
.s4-route-ic img+img{margin-inline-start:-8px}
.s4-route-n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s4-route-r{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.s4-route.on .s4-route-r{color:var(--a)}
.s4-route-bar{position:absolute;inset-inline:16px;bottom:8px;height:3px;border-radius:3px;background:var(--bg3);overflow:hidden}
.s4-route-bar i{display:block;height:100%;width:calc(100% - var(--i) * 14%);background:var(--ln2);border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) calc(var(--i) * .12s)}
[dir=rtl] .s4-route-bar i{transform-origin:right}
.s4-route.on .s4-route-bar i{background:var(--a)}
.reveal.in .s4-route-bar i,html:not(.js) .s4-route-bar i{transform:scaleX(1)}

/* the coins card: two rails of this panel's own coins drifting past */
.s4-card-coins{justify-content:flex-end}
.s4-rail{position:absolute;inset:28px 0 auto;display:grid;gap:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.s4-rail-row{display:flex;gap:10px;width:max-content;animation:s4-rail 38s linear infinite}
.s4-rail-row.rev{animation-direction:reverse}
.s4-coin{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--card);
  font-weight:600;font-size:.85rem;box-shadow:var(--e1);white-space:nowrap}
.s4-coin img{border-radius:50%}
@keyframes s4-rail{to{transform:translateX(-50%)}}
[dir=rtl] .s4-rail-row{animation-name:s4-rail-rtl}
@keyframes s4-rail-rtl{to{transform:translateX(50%)}}

@media(max-width:1000px){
  .s4-bento{grid-template-columns:1fr 1fr}
  .s4-card-big{grid-column:1/-1;grid-row:auto}
}
@media(max-width:620px){
  .s4-bento,.s4-bento-3{grid-template-columns:1fr}
  .s4-card{padding:24px;min-height:240px}
  .s4-card-w{min-height:0}
  .s4-card-big h3{font-size:1.6rem}
}

/* ---- steps --------------------------------------------------------------- */
.s4-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.s4-step{position:relative;background:var(--card);border:1px solid var(--ln);border-radius:24px;padding:32px}
.s4-step-n{position:absolute;top:34px;inset-inline-end:32px;font-size:.81rem;font-weight:600;color:var(--mu)}
.s4-step-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--a-ink);background:var(--a);margin-bottom:24px}
.s4-step h3{font-size:1.25rem;letter-spacing:-.02em;margin:0 0 .5rem}
.s4-step p{color:var(--mu);margin:0;line-height:1.55}
@media(max-width:900px){.s4-steps{grid-template-columns:1fr}.s4-step{padding:24px}.s4-step-n{top:26px;inset-inline-end:24px}}

/* ---- stats (About) ------------------------------------------------------- */
.s4-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0}
.s4-stats div{background:var(--bg1);border-radius:24px;padding:32px}
.s4-stats dt{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.s4-stats dd{margin:.6rem 0 0;color:var(--mu)}
@media(max-width:620px){.s4-stats{grid-template-columns:1fr}}
.s4-about-hero{padding:88px 0 40px!important}
.s4-about-hero .s4-h1{max-width:none}

/* ---- the markets table --------------------------------------------------- */
.mk-scroll{border:1px solid var(--ln);border-radius:20px;background:var(--card);box-shadow:none}
.mk th{color:var(--mu);border-bottom-color:var(--ln);font-weight:500;background:var(--card)}
.mk td{border-bottom-color:var(--ln);color:var(--tx)}
.mk tbody tr:hover td{background:var(--bg1)}
.mk-asset{color:var(--tx)}
.mk-asset:hover{color:var(--tx)}
.mk-asset b{color:var(--tx)}
.mk-asset em{color:var(--mu)}
.mk-go{background:var(--a);border:0;color:var(--a-ink);border-radius:999px;font-weight:600;box-shadow:none}
.mk-go:hover{background:var(--a-deep);color:var(--a-ink)}
.mk-card{background:var(--card);border:1px solid var(--ln);box-shadow:none;border-radius:20px}
.mk-card:hover{border-color:var(--ln2)}
.mk-card-l{color:var(--mu)}
.mk-find{background:var(--bg1);border:1px solid transparent;color:var(--tx);border-radius:999px;box-shadow:none}
.mk-find:focus{border-color:var(--a);background:var(--card)}
.mk-count,.mk-empty{color:var(--mu)}
.mk-live{color:var(--ok);display:inline-flex;margin-top:.25rem}
.up{color:var(--ok)} .dn{color:var(--no)}

/* ---- questions ----------------------------------------------------------- */
.faq{border-top:1px solid var(--ln)}
.faq details{border:0;border-bottom:1px solid var(--ln);background:none}
.faq summary{color:var(--tx);font-weight:600;font-size:1.1rem;padding:1.5rem 0}
.faq summary:hover{color:var(--a)}
.faq p{color:var(--mu);line-height:1.6;padding-bottom:1.5rem;margin:0;max-width:44rem}
.faq-x{color:var(--tx);opacity:1}

/* ---- the dark band ------------------------------------------------------- */
.s4-band{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;padding:72px 64px;border-radius:28px;
  background:var(--ink);color:#fff}
.s4-band h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.75rem);letter-spacing:-.035em;line-height:1.1;margin:0 0 .75rem}
.s4-band p{color:#a5abb5;font-size:1.06rem;margin:0;max-width:32rem}
.s4-band-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.s4-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:0}
.s4-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:900px){.s4-band{grid-template-columns:1fr;padding:48px 28px}.s4-band-acts{justify-content:flex-start}}

/* ---- shared surfaces (inner pages) --------------------------------------- */
.btn{border-radius:999px;font-weight:600;box-shadow:none;padding:.85rem 1.6rem}
.btn-primary,.btn-go{background:var(--a);color:var(--a-ink);border-color:transparent;box-shadow:none}
.btn-primary:hover,.btn-go:hover{background:var(--a-deep);color:var(--a-ink);text-decoration:none}
.btn-line{background:var(--bg3);border-color:transparent;color:var(--tx)}
.btn-line:hover{background:var(--bg4);color:var(--tx)}
.card,.panel,.stat{background:var(--card);border:1px solid var(--ln);box-shadow:none;border-radius:20px}
.card:hover{border-color:var(--ln2)}
.sec-alt{background:var(--bg1);border:0}
.eyebrow{color:var(--a)}
.x-badge{border-color:var(--ln);color:var(--tx2);background:var(--bg1);box-shadow:none}
.x-stats{border:1px solid var(--ln);background:var(--card);box-shadow:none;border-radius:20px}
.x-stats div{border-right-color:var(--ln)}
.x-stats dt{color:var(--tx)} .x-stats dd{color:var(--mu)}
.statrow{background:var(--ln)}
.stat-l{color:var(--mu)} .stat-v{color:var(--tx)} .stat-s{color:var(--mu)}
.kv{border-color:var(--ln);color:var(--mu)} .kv b{color:var(--tx)}
.addr{background:var(--bg1);border-color:var(--ln);color:var(--tx);box-shadow:none}
.pill{border-color:var(--ln);color:var(--tx2);background:var(--bg1)}
.steps div{background:var(--bg3)}
.steps div.on{background:var(--a)}
.steps-rail li::after{background:var(--ln)}
.step-n{background:var(--a);border-color:transparent;color:var(--a-ink);box-shadow:none}
.steps-rail p{color:var(--mu)}
.why-ico{background:color-mix(in srgb,var(--a) 9%,transparent);border-color:transparent;color:var(--a);box-shadow:none}
.coin-chip{background:var(--card);border-color:var(--ln);color:var(--tx);box-shadow:none;border-radius:999px}
.coin-chip:hover{background:var(--bg1);border-color:var(--ln2);color:var(--tx)}
.coin-chip em{color:var(--mu)}
.cta-band{background:var(--ink);border:0;color:#fff;box-shadow:none;border-radius:28px}
.cta-band .sec-h,.cta-band h2{color:#fff}
.cta-band p,.cta-band .muted{color:#a5abb5}
.p-ticker{background:var(--card);border-color:var(--ln)}
.p-tick{border-right-color:var(--ln);color:var(--mu)}
.p-tick b,.p-tick .px{color:var(--tx)}
.ord-amt{color:var(--tx)}
table th{border-bottom-color:var(--ln);color:var(--mu)}
table td{border-bottom-color:var(--ln)}
input,select,textarea{color:var(--tx)}
.bl-card{background:var(--card);border-color:var(--ln)}
.bl-tag{background:var(--bg1);color:var(--tx2)}
.rv-card{background:var(--card)}
.rv-stars span.on{color:#f5a623}
.rv-score strong{color:var(--tx)}
.po-body{color:var(--tx2)}

/* ---- footer -------------------------------------------------------------- */
.p-foot.s4-foot{background:var(--card);border-top:1px solid var(--ln);color:var(--mu);padding:64px 0 32px}
.s4-foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.s4-foot-brand p{margin:1rem 0 0;max-width:22rem;line-height:1.55}
.s4-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.s4-foot-cols strong{display:block;color:var(--tx);font-size:.9rem;margin-bottom:.9rem}
.s4-foot-cols a{display:block;color:var(--mu);font-size:.94rem;padding:.25rem 0}
.s4-foot-cols a:hover{color:var(--tx);text-decoration:none}
.s4-foot-lang{margin-top:1.25rem;border:1px solid var(--ln);border-radius:999px;background:var(--card);color:var(--tx2);padding:.5rem .9rem;font:inherit;font-size:.88rem}
.s4-foot-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--ln);font-size:.84rem;color:var(--fa)}
@media(max-width:900px){.s4-foot-top{grid-template-columns:1fr}.s4-foot-cols{grid-template-columns:1fr 1fr}}

/* ---- motion off when asked ----------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .s4-h1,.s4-hero .lede,.s4-points,.s4-hero .x-box,.s4-rail-row{animation:none!important}
  .s4-route-bar i{transition:none;transform:scaleX(1)}
}

/* ---- dark mode -----------------------------------------------------------
   Same page, night palette. Only variables change, plus the few places that
   meant "white" literally. Set by _head.ejs before paint and by the switch. */
html[data-mode=dark]{
  color-scheme:dark;
  --bg:#0b0d12; --bg1:#111419; --bg2:#171b23; --bg3:#1e232d; --bg4:#272d39; --sunk:#111419;
  --ln:#232833; --ln2:#343b48;
  --tx:#f3f5f8; --tx2:#c9ced8; --mu:#9aa1ad; --fa:#6b7280;
  --ok:#3ddc97; --no:#ff6b81;
  --card:#171b23;
  --head:rgba(11,13,18,.88);
  --ink:#161a22;
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --e3:0 2px 4px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.45);
  --e4:0 2px 4px rgba(0,0,0,.3),0 16px 48px rgba(0,0,0,.5);
  --err-bg:rgba(255,107,129,.1);--err-ln:rgba(255,107,129,.35);--err-tx:#ffc9d1;
}
html[data-mode=dark] .s4-band,html[data-mode=dark] .cta-band{border:1px solid var(--ln)}
html[data-mode=dark] .s4-tick,html[data-mode=dark] .why-ico{background:color-mix(in srgb,var(--a) 18%,transparent)}
html[data-mode=dark] .cp-back{background:rgba(0,0,0,.6)}

/* the switch: a round button holding a sun and a moon, one shown at a time */
.s4-mode{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:0;cursor:pointer;
  background:var(--bg1);color:var(--tx);transition:background .15s ease}
.s4-mode:hover{background:var(--bg3)}
.s4-mode svg{grid-area:1/1;transition:transform .35s var(--ease-out),opacity .2s}
.s4-mode .moon{opacity:0;transform:rotate(-60deg) scale(.6)}
html[data-mode=dark] .s4-mode .sun{opacity:0;transform:rotate(60deg) scale(.6)}
html[data-mode=dark] .s4-mode .moon{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.s4-mode svg{transition:none}}