/* ===========================================================================
   Reynard — the first COMPANY (a whole brand, not only a look).

   A crypto exchange with a fox for a face. The 3D mascot and icons are
   Microsoft Fluent Emoji (MIT; the licence sits beside them in img/reynard/3d).

   NO PHOTOGRAPHS (the owner's call, 2026-11-01): the brand is a 3D mascot
   (the fox, with the listed coins in orbit), 3D icons, the coin-fox mark and
   LIVING crypto backgrounds drawn by reynard-live.js. Dusk navy is the page,
   ember orange is the fox. Figures are mono and tabular everywhere; the
   operator's accent still owns every interactive element.

   The generic components (box, picker, market, order, FAQ, footer index) are
   the proven SwapLords 3 coverage, recoloured. Everything rf- is Reynard's own.
   =========================================================================== */
@font-face{font-family:'RFSans';src:url('/_p/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'RFSans';src:url('/_p/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'RFSans';src:url('/_p/fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --bg:#090c11; --bg2:#0e131a; --bg3:#161d27;
  --ln:#1a222d; --ln2:#273241;
  --tx:#f5efe8; --mu:#9ea8b5; --fa:#66717f;
  --ok:#4ade80; --wa:#fbbf24; --no:#fb7185;

  /* the theme's own tones: ember (the fox) on dusk navy */
  --em:#ff7a1a;                         /* ember: the fox */
  --ember:#ff7a1a;
  --em-soft:#ffb072;
  --em-deep:#c2410c;
  --em-line:rgba(255,122,26,.32);
  --em-glow:rgba(255,122,26,.12);
  --dusk:#1d3b52;                       /* the sky behind it */
  --ember-grad:linear-gradient(120deg,#ffd2a8 0%,#ff9a4a 40%,#ff7a1a 70%,#e8590c 100%);
}

body{background:var(--bg);color:var(--tx);
  font-family:'PBody',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 85% -8%,rgba(29,59,82,.34),transparent 64%),
    radial-gradient(900px 600px at 0% 30%,rgba(255,122,26,.05),transparent 62%),
    linear-gradient(180deg,#090c11,#080b10 60%)}
body>*{position:relative;z-index:1}
h1,h2,h3{font-family:'RFSans','PDisplay','PBody',sans-serif;font-weight:700;letter-spacing:-.035em}
a{color:var(--em-soft)}
a:hover{color:#ffd0a6}
@keyframes rf-load{to{transform:rotate(360deg)}}

/* --- the header ----------------------------------------------------------- */
.rf-mark{display:grid;place-items:center;flex:0 0 auto}
.rf-mark{display:grid;place-items:center}
.rf-head .p-brand{gap:.6rem}
.rf-head .p-brand-n{font-family:'RFSans',sans-serif;font-weight:900;font-size:1.22rem;letter-spacing:-.04em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tx)}
.p-cta,.btn-primary,.btn-go,.x-go{background:var(--a);color:var(--a-ink);
  box-shadow:0 14px 34px -14px var(--a),inset 0 1px 0 rgba(255,255,255,.28)}
.p-cta{border-radius:100px;font-weight:700}
.p-nav a.on{color:var(--tx)}
.p-nav a.on::after{background:var(--em)!important;box-shadow:0 0 12px var(--em)!important}

body{background:var(--bg);color:var(--tx);
  font-family:'PBody',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--em)}
.p-head{background:rgba(9,12,17,.72);backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--ln)}
.p-brand{color:var(--tx);font-family:'PDisplay',sans-serif;font-weight:700;letter-spacing:-.045em}
.p-brand-n{background:var(--ember-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-logo{border-radius:50%;background:linear-gradient(150deg,#f4f7fc,#9aa6ba 55%,#5c6578);color:#0b0d12;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 26px -12px rgba(255,122,26,.5)}
.p-nav a{color:var(--mu);font-weight:600;font-size:.87rem;position:relative}
.p-nav a:hover{color:var(--tx)}
.p-nav a.on{color:var(--tx)}
.p-nav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:linear-gradient(90deg,transparent,var(--em),transparent);
  box-shadow:0 0 10px var(--em)}
.p-nav-cta,.p-cta,.p-nav a.p-nav-cta{border-radius:100px;font-weight:700;letter-spacing:.02em;
  color:#1c0c02;background:linear-gradient(135deg,#ffd9b8,var(--em) 45%,var(--a));
  box-shadow:0 12px 30px -14px var(--em),inset 0 1px 0 rgba(255,255,255,.5)}
.p-cta:hover{filter:brightness(1.06)}
.p-burger{border-color:var(--ln2);border-radius:100px;width:36px;height:36px}
.p-burger span{background:var(--tx)}
.p-lang summary{color:var(--mu);border:1px solid var(--ln);border-radius:100px}
.p-lang summary:hover{color:var(--tx);border-color:var(--em-line)}
.p-lang-pop{background:#0d131b;border:1px solid var(--ln2);border-radius:14px;
  box-shadow:0 34px 80px -34px #000}
.p-lang-pop a{color:var(--mu);border-radius:8px}
.p-lang-pop a:hover,.p-lang-pop a.on{background:var(--bg3);color:var(--tx)}
@media(max-width:860px){
  .p-nav{background:#0b1017;border-color:var(--ln)}
}
.x-wrap{position:relative;overflow:hidden;padding-top:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2rem,5vw,4rem)}
.x-wrap .wrap{position:relative;z-index:2}
.x-grid{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(2rem,5vw,4.4rem);align-items:center}
.x-badge{border-radius:100px;border-color:var(--ln2);background:rgba(255,122,26,.06);
  color:var(--em);font-size:.68rem;letter-spacing:.22em;padding:.45rem .9rem}
.x-copy h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.03;letter-spacing:-.04em;max-width:17ch}
.x-claims{color:var(--mu);font-size:.7rem;letter-spacing:.22em;gap:.3rem 1rem;margin:1.2rem 0 1.1rem}
.x-claims span{color:var(--em)}
.x-claims span+span::before{color:var(--ln2);opacity:1}
.x-copy .lede{color:var(--mu);font-size:1.02rem;max-width:44ch;line-height:1.72}
.x-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem;gap:0;
  border:1px solid var(--ln2);border-radius:100px;background:rgba(9,13,19,.82);overflow:hidden;
  backdrop-filter:blur(10px);box-shadow:0 20px 50px -30px #000}
.x-stats div{border:0;border-inline-start:1px solid var(--ln);padding:.9rem 1.1rem;min-width:0;text-align:center}
.x-stats div:first-child{border-inline-start:0}
.x-stats div::before{display:none}
.x-stats dt{font-family:'PMono',monospace;font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:600;
  background:var(--ember-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-stats dd{color:var(--fa);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.25rem}
.x-box{position:relative;border-radius:22px;border:1px solid transparent;
  background:
    linear-gradient(170deg,var(--glass),rgba(9,11,16,.9)) padding-box,
    conic-gradient(from 210deg at 50% 50%,
      rgba(255,122,26,.5),rgba(255,255,255,.22) 22%,rgba(139,92,246,.35) 45%,
      rgba(255,122,26,.14) 62%,rgba(255,255,255,.3) 82%,rgba(255,122,26,.5)) border-box;
  backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:0 60px 120px -50px #000,inset 0 1px 0 rgba(255,255,255,.08)}
.x-box::before{content:'';position:absolute;inset:1px;border-radius:21px;pointer-events:none;
  background:radial-gradient(440px 320px at var(--mx,50%) var(--my,0%),rgba(255,122,26,.10),transparent 70%)}
.x-inner{padding:clamp(1.15rem,2.3vw,1.7rem);position:relative;z-index:1}
.x-toggle{background:rgba(7,10,14,.6);border:1px solid var(--ln);border-radius:100px;padding:.24rem;gap:.2rem}
.x-toggle button{border-radius:100px;font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fa);padding:.5rem}
.x-toggle button[aria-pressed=true]{background:linear-gradient(170deg,#233041,#151d28);color:var(--tx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.x-leg{background:rgba(7,10,14,.55);border:1px solid var(--ln);border-radius:16px;padding:1.05rem 1.1rem;
  transition:border-color .2s ease,background .2s ease}
.x-leg:focus-within{border-color:var(--em-line);background:rgba(11,16,23,.78);
  box-shadow:0 0 0 4px var(--em-glow)}
.x-leg label{color:var(--fa);font-size:.64rem;letter-spacing:.2em}
.x-amt{font-family:'PMono',monospace;font-variant-numeric:tabular-nums;
  font-size:1.6rem;font-weight:600;letter-spacing:-.03em;color:var(--tx)}
.x-amt::placeholder{color:#4d5866}
.x-usd{color:var(--mu);font-family:'PMono',monospace;font-size:.75rem;margin-top:.2rem;opacity:.8}
.x-pick{background:linear-gradient(170deg,#1f2834,#141b25);border:1px solid var(--ln2);
  border-radius:100px;color:var(--tx);padding:.42rem .8rem .42rem .45rem;font-weight:700;font-size:.93rem}
.x-pick:hover{border-color:var(--em-line);box-shadow:0 0 0 4px var(--em-glow)}
.x-pick .net{display:inline-block;margin-inline-start:.42rem;padding:.08rem .36rem;border-radius:100px;
  background:rgba(255,122,26,.12);color:var(--em);font-size:.6rem;font-weight:700;opacity:1;
  letter-spacing:.06em;vertical-align:1px}
.x-flip{position:relative;margin:.65rem 0}
.x-flip::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--ln2) 20%,var(--ln2) 80%,transparent)}
.x-flip button{position:relative;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(170deg,#1f2834,#111821);border-color:var(--ln2);color:var(--em);font-size:1rem}
.x-flip button:hover{border-color:var(--em);box-shadow:0 0 0 5px var(--em-glow),0 0 24px -6px var(--em)}
.x-rate{color:var(--mu);font-size:.8rem;font-family:'PMono',monospace}
.x-rate:empty::after{content:'';display:inline-block;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--ln2);border-top-color:var(--em);animation:rf-load .9s linear infinite;
  vertical-align:-3px}
.x-field label{color:var(--tx);font-weight:600;font-size:.83rem}
.x-field input{background:rgba(7,10,14,.6);border:1px solid var(--ln2);border-radius:13px;
  color:var(--tx);padding:.85rem .95rem;font-family:'PMono',monospace;font-size:.85rem}
.x-field input::placeholder{color:#4d5866;font-family:'PBody',sans-serif}
.x-field input:focus{border-color:var(--em);box-shadow:0 0 0 4px var(--em-glow)}
.x-hint{color:var(--fa)}
.x-go{border-radius:100px;padding:1.1rem;font-size:.9rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#1c0c02;
  background:linear-gradient(135deg,#ffe4cc,var(--em) 42%,var(--a));
  box-shadow:0 18px 40px -16px var(--em),inset 0 1px 0 rgba(255,255,255,.55)}
.x-go:hover{filter:brightness(1.06)}
.x-note{color:var(--fa);text-align:center;font-size:.74rem;margin-top:.9rem}
.x-err{background:rgba(251,113,133,.08);border-color:rgba(251,113,133,.34);color:#fecdd3;border-radius:13px}
.cp-box{background:#0d131b;border:1px solid var(--ln2);border-radius:20px;box-shadow:0 44px 100px -44px #000}
.cp-search input{background:rgba(7,10,14,.6);border:1px solid var(--ln2);border-radius:100px;color:var(--tx)}
.cp-search input:focus{border-color:var(--em)}
.cp-item{color:var(--tx);border-radius:12px}
.cp-item:hover{background:var(--bg3)}
.cp-item span{color:var(--mu)}
.cp-item b{color:var(--tx)}
.sec{position:relative}
.sec::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ln2) 18%,var(--ln2) 82%,transparent)}
.sec:first-of-type::before{display:none}
.sec-alt{background:linear-gradient(180deg,rgba(255,122,26,.022),transparent 62%)}
.sec-h{color:var(--tx);font-size:clamp(1.5rem,3.1vw,2.3rem);letter-spacing:-.038em}
.sec-lede{color:var(--mu);line-height:1.72}
.sec-link{color:var(--em);font-weight:600;font-size:.85rem}
.card{background:linear-gradient(170deg,rgba(22,29,39,.56),rgba(13,18,25,.56));
  border:1px solid var(--ln);border-radius:18px}
.kv{border-color:var(--ln);color:var(--mu)}
.kv b{color:var(--tx)}
.addr{background:rgba(7,10,14,.6);border:1px solid var(--ln2);color:var(--tx);border-radius:13px}
.btn-primary{background:linear-gradient(135deg,#ffe4cc,var(--em) 42%,var(--a));color:#1c0c02;
  border-radius:100px;font-weight:700}
.btn-ghost{background:var(--bg3);border-color:var(--ln2);color:var(--tx);border-radius:100px}
.btn-ghost:hover{border-color:var(--em);color:var(--em)}
.pill{border-color:var(--ln2);color:var(--mu);border-radius:100px}
.pill-ok{color:#86efac;border-color:rgba(74,222,128,.32);background:rgba(74,222,128,.08)}
.pill-wa{color:#fcd34d;border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.08)}
.pill-no{color:#fda4af;border-color:rgba(251,113,133,.32);background:rgba(251,113,133,.08)}
.pill-a{color:var(--em);border-color:var(--em-line);background:var(--em-glow)}
.steps div{background:var(--ln2)}
.steps div.on{background:linear-gradient(90deg,var(--em),var(--a))}
.steps div.done{background:var(--ok)}
th{color:var(--fa);border-color:var(--ln)}
td{border-color:var(--ln)}
.muted{color:var(--mu)}
.faint{color:var(--fa)}
.ord-amt{color:var(--tx);font-variant-numeric:tabular-nums}
.ord-dep{background:rgba(13,18,25,.6);border-color:var(--ln2);border-radius:18px}
.ord-qr{background:#fff;border-radius:14px;padding:10px}
.why-card{position:relative;overflow:hidden;
  background:linear-gradient(170deg,rgba(22,29,39,.6),rgba(12,16,22,.6));
  border-color:var(--ln);border-radius:18px;transition:border-color .22s ease,transform .22s ease}
.why-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--em-line),transparent);opacity:0;transition:opacity .22s ease}
.why-card:hover{border-color:var(--ln2);transform:translateY(-3px)}
.why-card:hover::before{opacity:1}
.why-card h3{color:var(--tx);font-size:1.04rem}
.why-ico{width:42px;height:42px;border-radius:50%;border:1px solid var(--ln2);
  background:radial-gradient(circle at 34% 30%,rgba(255,122,26,.16),rgba(12,15,21,.9));
  color:var(--em);box-shadow:inset 0 0 20px -10px var(--em)}
.why-card:hover .why-ico{border-color:var(--em-line)}
.coin-chip{background:rgba(13,18,25,.6);border-color:var(--ln);color:var(--tx);border-radius:100px;
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.coin-chip:hover{border-color:var(--em-line);background:var(--bg3);transform:translateY(-2px)}
.coin-chip b{color:var(--tx)}
.coin-chip em{color:var(--fa);opacity:1}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{color:var(--tx);font-weight:600;font-size:.97rem;padding:1.15rem 0}
.faq summary:hover,.faq details[open] summary{color:var(--em)}
.faq p{color:var(--mu);line-height:1.72}
.faq-x{color:var(--em);opacity:1}
.cta-band{position:relative;overflow:hidden;border:1px solid var(--ln2);border-radius:22px;
  background:linear-gradient(170deg,rgba(24,31,42,.7),rgba(9,13,19,.85))}
.cta-band::before{content:'';position:absolute;left:50%;bottom:-150%;width:180%;aspect-ratio:2/1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  border-top:1px solid var(--em-line);
  background:radial-gradient(58% 50% at 50% 0,rgba(255,122,26,.12),transparent 72%)}
.btn-go{background:linear-gradient(135deg,#ffe4cc,var(--em) 42%,var(--a));color:#1c0c02;
  border-radius:100px;padding:.95rem 1.8rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 16px 36px -14px var(--em);transition:transform .2s ease,filter .2s ease}
.btn-go:hover{transform:translateY(-1px);filter:brightness(1.06)}
.p-ticker{background:rgba(9,13,19,.8);border-color:var(--ln);backdrop-filter:blur(12px)}
.p-tick{border-color:var(--ln);color:var(--tx)}
.p-tick .px{color:var(--tx);font-family:'PMono',monospace;font-variant-numeric:tabular-nums}
.p-tick .up{color:var(--ok)}
.p-tick .dn{color:var(--no)}
.p-tick .flat{color:var(--fa)}
.mk-live{color:var(--ok)}
.mk-card{background:rgba(13,18,25,.55);border-color:var(--ln);color:var(--tx);border-radius:14px}
.mk-card:hover{border-color:var(--em-line)}
.mk-find{background:rgba(7,10,14,.6);border:1px solid var(--ln2);border-radius:100px;color:var(--tx)}
.mk-find:focus{border-color:var(--em);box-shadow:0 0 0 4px var(--em-glow)}
.mk-find::placeholder{color:var(--fa)}
.mk th{color:var(--fa);border-color:var(--ln2);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase}
.mk th[data-mk-sort]:hover{color:var(--em)}
.mk td{border-color:var(--ln);color:var(--tx)}
.mk tbody tr{transition:background .14s ease}
.mk tbody tr:hover{background:rgba(255,122,26,.04)}
.mk-asset{color:var(--tx)}
.mk-asset em{color:var(--fa)}
.mk .c-price{color:var(--tx);font-family:'PMono',monospace;font-variant-numeric:tabular-nums}
.mk .c-cap,.mk .c-vol{color:var(--mu);font-variant-numeric:tabular-nums}
.mk .up{color:var(--ok)}
.mk .down{color:var(--no)}
.mk .flat{color:var(--fa)}
.mk-spark.up{color:var(--ok)}
.mk-spark.down{color:var(--no)}
.mk-go{background:var(--bg3);border-color:var(--ln2);color:var(--tx);border-radius:100px}
.mk-go:hover{border-color:var(--em);color:var(--em)}
.mk-count{color:var(--fa)}
.bl-card{background:linear-gradient(170deg,rgba(22,29,39,.55),rgba(13,18,25,.55));border-color:var(--ln);border-radius:18px}
.bl-card:hover{border-color:var(--em-line)}
.bl-body h2{color:var(--tx)}
.bl-tag{background:rgba(7,10,14,.72);border:1px solid var(--em-line);color:var(--em)}
.po-body h2,.po-body h3{color:var(--tx)}
.po-cover{border:1px solid var(--ln)}
.rv-card{background:linear-gradient(170deg,rgba(22,29,39,.55),rgba(13,18,25,.55));border-color:var(--ln);border-radius:18px}
.rv-score strong{background:var(--ember-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:'PMono',monospace}
.p-foot{background:#06090d;border-top:1px solid var(--ln);color:var(--fa)}
.p-foot a{color:var(--mu)}
.p-foot a:hover{color:var(--em)}
.p-foot strong{color:var(--em);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase}
.x-go,.p-cta,.btn-go{transition:filter .2s ease,transform .2s ease,box-shadow .2s ease}
.x-pick{transition:border-color .18s ease,box-shadow .18s ease,transform .16s ease}
.x-pick:hover{transform:translateY(-1px)}
.x-flip button{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease}
@media(max-width:980px){
  .x-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .x-copy h1{font-size:clamp(1.95rem,8.6vw,2.5rem);max-width:none}
  .x-stats{border-radius:20px;grid-template-columns:minmax(0,1fr)}
  .x-stats div{border-inline-start:0;border-top:1px solid var(--ln)}
  .x-stats div:first-child{border-top:0}
}
.rf-cmp{margin-top:1.3rem;border:1px solid var(--ln);border-radius:18px;overflow:hidden;
  background:linear-gradient(170deg,rgba(22,29,39,.42),rgba(12,16,22,.48))}
.rf-cmp table{width:100%;border-collapse:collapse;font-size:.91rem}
.rf-cmp th,.rf-cmp td{padding:.95rem 1.15rem;text-align:start;border-bottom:1px solid var(--ln)}
.rf-cmp tbody tr:last-child th,.rf-cmp tbody tr:last-child td{border-bottom:0}
.rf-cmp thead th{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fa);
  border-bottom:1px solid var(--ln2);background:rgba(7,10,14,.4)}
.rf-cmp tbody th{font-weight:500;color:var(--mu);width:42%}
.rf-cmp td{color:var(--mu)}
.rf-cmp .us{color:var(--tx);font-weight:600;background:rgba(255,122,26,.045)}
.rf-cmp thead .us{color:var(--em);background:rgba(255,122,26,.08)}
.rf-foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;padding-bottom:1.6rem;border-bottom:1px solid var(--ln)}
.rf-foot-brand{display:flex;align-items:flex-start;gap:.85rem}
.rf-foot-brand b{color:var(--tx);font-family:'PDisplay',sans-serif;font-size:1rem;letter-spacing:-.035em}
.rf-foot-brand .tiny{color:var(--fa);line-height:1.6}
.rf-foot-lang{font:inherit;font-size:.82rem;padding:.42rem .7rem;border-radius:100px;background:#0d131b;
  color:var(--mu);border:1px solid var(--ln2)}
.rf-foot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem 1.2rem;padding:1.6rem 0}
.rf-foot-grid>div{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.rf-foot-grid strong{margin-bottom:.25rem}
.rf-foot-grid a{font-size:.82rem;color:var(--mu);text-decoration:none;line-height:1.45}
.rf-foot-grid a:hover{color:var(--em)}
.rf-foot-grid .faint{opacity:.5;font-size:.73rem}
.rf-foot-end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.3rem;border-top:1px solid var(--ln);color:var(--fa)}
.grid.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media(max-width:1040px){
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .grid.g4{grid-template-columns:minmax(0,1fr)}
  .rf-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-cmp table{font-size:.83rem}
  .rf-cmp th,.rf-cmp td{padding:.75rem .65rem}
  .rf-cmp tbody th{width:38%}
}
/* ===========================================================================
   Reynard's own blocks
   =========================================================================== */
.x-go{color:var(--a-ink);letter-spacing:.08em}
.x-go:hover,.btn-go:hover,.p-cta:hover{filter:brightness(1.08)}
.x-badge{color:var(--tx);border-color:rgba(255,255,255,.14);background:rgba(9,12,17,.5);
  backdrop-filter:blur(8px);letter-spacing:.16em}
.rf-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(74,222,128,.18),0 0 10px var(--ok)}
.x-copy h1{font-weight:900;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.045em;max-width:12ch;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.x-claims span{color:var(--em-soft)}
.x-copy .lede{color:#c9d0d9}
.x-stats dt{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tx)}
.x-stats{border-color:rgba(255,255,255,.1);background:rgba(9,12,17,.66)}
.x-box{background:linear-gradient(170deg,rgba(18,24,33,.86),rgba(9,13,19,.9))!important;
  border:1px solid rgba(255,255,255,.09)!important}
.x-box::after{content:'';position:absolute;inset:-1px;border-radius:23px;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,122,26,.55),transparent 34%,transparent 70%,rgba(29,59,82,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* --- living backgrounds (reynard-live.js) ------------------------------------
   A canvas fills its section and sits under everything in it. Without script,
   or with reduced motion, the section is simply its own colour or one still
   frame, and nothing depends on it. */
.rf-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.rf-canvas-soft{opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.rf-sec-live{position:relative;overflow:hidden}
.rf-sec-live>.wrap{position:relative;z-index:1}

/* --- the hero ------------------------------------------------------------------ */
.rf-wide{max-width:1240px}
.rf-hero{position:relative;overflow:hidden;padding-top:clamp(1.6rem,4vw,3rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.rf-hero::after{content:'';position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent,var(--bg))}
.rf-hero>.wrap{position:relative;z-index:2}
.rf-grid{grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.rf-hero-top{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem;flex-wrap:wrap}

/* --- the mascot -------------------------------------------------------------------
   One human-drawn fox head (Openclipart 211420, public domain), facing into the
   page. It breathes very slightly and leans toward the pointer (--rx/--ry from
   the script). No sparkles, no props: decoration that tries too hard is what
   makes a page look generated. */
.rf-mascot{--s:120px;position:relative;width:calc(var(--s) * 1.094);height:var(--s);flex:0 0 auto;perspective:700px}
.rf-m-sm{--s:72px}
.rf-m-md{--s:132px}
.rf-m-lg{--s:230px}
.rf-fox{display:block;width:100%;height:100%;filter:drop-shadow(0 0 1.2px rgba(255,232,205,.55)) drop-shadow(0 14px 22px rgba(0,0,0,.5));
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);
  animation:rf-breathe 6s ease-in-out infinite;transform-origin:50% 80%}
@keyframes rf-breathe{50%{scale:1.025}}
[dir=rtl] .rf-fox{scale:-1 1;animation:none}
.rf-mark-img{display:block;height:auto}

/* --- the live price chips (real prices, re-read every 30s) ------------------------- */
.rf-live{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;align-items:center}
.rf-live-h{display:inline-flex;align-items:center;gap:.4rem;font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mu);margin-inline-end:.2rem}
.rf-live-h i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:rf-pulse 2s ease-in-out infinite}
@keyframes rf-pulse{50%{opacity:.35}}
.rf-live-c{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .7rem .42rem .45rem;border-radius:100px;
  background:rgba(13,18,25,.72);border:1px solid var(--ln2);color:var(--tx);text-decoration:none;font-size:.84rem;
  backdrop-filter:blur(8px);transition:border-color .2s ease,background .4s ease}
.rf-live-c:hover{border-color:var(--em-line);color:var(--tx);text-decoration:none}
.rf-live-c img{border-radius:50%}
.rf-live-v{font-family:'PMono',monospace;font-variant-numeric:tabular-nums;font-size:.8rem}
.rf-live-c em{font-style:normal;font-family:'PMono',monospace;font-size:.7rem;font-variant-numeric:tabular-nums}
.rf-live-c em.up{color:#86efac}.rf-live-c em.down{color:#fda4af}.rf-live-c em.flat{color:var(--fa)}
.rf-up{animation:rf-flash-up 1.4s ease}
.rf-dn{animation:rf-flash-dn 1.4s ease}
@keyframes rf-flash-up{0%{background:rgba(74,222,128,.28);border-color:rgba(74,222,128,.6)}}
@keyframes rf-flash-dn{0%{background:rgba(251,113,133,.28);border-color:rgba(251,113,133,.6)}}
.x-stats{margin-top:1.3rem}

/* --- icons: Phosphor duotone (MIT), in ember on a dark tile ----------------------- */
.rf-ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:1rem;border-radius:13px;
  background:linear-gradient(160deg,rgba(255,122,26,.14),rgba(255,122,26,.04));border:1px solid rgba(255,122,26,.28)}
.rf-ic img{width:26px;height:26px;display:block}
.why-card:hover .rf-ic,.rf-steps li:hover .rf-ic{border-color:rgba(255,122,26,.55)}
.why-card .why-ico{display:none}

/* --- section eyebrow ---------------------------------------------------------------------- */
.rf-eye{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;font-size:.68rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--em)}
.rf-eye b{font-family:'PMono',monospace;font-weight:600;color:var(--fa);letter-spacing:.1em;
  padding:.18rem .45rem;border:1px solid var(--ln2);border-radius:6px}
.sec-h{font-weight:700}

/* --- the manifesto band ---------------------------------------------------------------------- */
.rf-band{position:relative;overflow:hidden;margin:1rem 0;padding:clamp(2.4rem,6vw,4rem) 0;
  border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);
  background:linear-gradient(180deg,rgba(13,18,25,.6),rgba(9,12,17,.9))}
.rf-band::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(9,12,17,.92) 0%,rgba(9,12,17,.6) 40%,rgba(9,12,17,.2) 70%,rgba(9,12,17,.5) 100%)}
[dir=rtl] .rf-band::after{transform:scaleX(-1)}
.rf-band-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.rf-quote{margin:0;max-width:30ch}
.rf-quote p{font-family:'RFSans',sans-serif;font-weight:700;font-size:clamp(1.45rem,3vw,2.3rem);line-height:1.18;
  letter-spacing:-.03em;margin:1rem 0 .9rem;color:var(--tx)}
.rf-quote cite{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--em)}

/* --- how it works -------------------------------------------------------------------------------- */
.rf-steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.rf-steps li{position:relative;padding:1.3rem 1.2rem 1.35rem;border-radius:18px;border:1px solid var(--ln);
  background:linear-gradient(170deg,rgba(22,29,39,.55),rgba(12,16,22,.55))}
.rf-step-n{display:block;font-family:'PMono',monospace;font-size:.74rem;font-weight:700;letter-spacing:.14em;color:var(--em);margin-bottom:.5rem}
.rf-steps h3{font-size:1.02rem;margin:0 0 .35rem;color:var(--tx)}
.rf-steps p{margin:0;color:var(--mu);font-size:.9rem;line-height:1.6}

/* --- routes --------------------------------------------------------------------------------------- */
.rf-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.6rem}
.rf-route{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border-radius:16px;text-decoration:none;color:var(--tx);
  border:1px solid var(--ln);background:linear-gradient(170deg,rgba(22,29,39,.55),rgba(12,16,22,.55));
  transition:border-color .2s ease,transform .2s ease;min-width:0}
.rf-route:hover{border-color:var(--em-line);transform:translateY(-2px);color:var(--tx);text-decoration:none}
.rf-route-pair{display:flex;flex:0 0 auto}
.rf-route-pair img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--bg2)}
.rf-route-pair img+img{margin-inline-start:-9px}
.rf-route-tx{min-width:0;flex:1}
.rf-route-tx b{display:block;font-size:.9rem;font-weight:700}
.rf-route-tx em{display:block;font-style:normal;font-family:'PMono',monospace;font-size:.72rem;color:var(--mu);
  margin-top:.2rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rf-route-go{color:var(--fa);transition:color .2s ease,transform .2s ease}
.rf-route:hover .rf-route-go{color:var(--em);transform:translateX(3px)}
.rf-note{margin:1.2rem 0 0;font-size:.8rem;color:var(--fa)}
.rf-mid{max-width:960px}

/* --- comparison: wraps on every screen; on a phone each row becomes a card ---------------------- */
.rf-cmp table{table-layout:fixed}
.rf-cmp th,.rf-cmp td{white-space:normal;overflow-wrap:anywhere}
.rf-cmp thead th:first-child{width:40%}

/* --- the company block: the mascot on its stage ------------------------------------------------------ */
.rf-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.rf-stage{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--ln2);min-height:380px;
  display:grid;place-items:center;
  background:linear-gradient(170deg,#101823,#0a0e14);
  box-shadow:0 50px 100px -50px #000}
.rf-stage .rf-mascot{z-index:1}
@keyframes rf-drift{50%{translate:0 -8px}}
.rf-story-tx .sec-lede{margin:0 0 1rem}
.rf-story-tx .btn{margin-top:.6rem}

/* --- the call to action ------------------------------------------------------------------------------- */
.rf-cta{position:relative;overflow:hidden}
.rf-cta>*{position:relative;z-index:1}
.rf-cta>.rf-canvas{position:absolute;z-index:0;opacity:.7}
.rf-cta-ico{flex:0 0 auto}

/* --- About ------------------------------------------------------------------------------------------------ */
.rf-about-hero{position:relative;overflow:hidden;padding:clamp(2.4rem,7vw,5rem) 0 clamp(2rem,5vw,3.4rem)}
.rf-about-hero::after{content:'';position:absolute;inset:auto 0 0 0;height:100px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg))}
.rf-about-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.rf-about-copy{max-width:600px}
.rf-about-copy h1{font-weight:900;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;margin:0 0 1rem}
.rf-about-copy .lede{color:#c9d0d9;font-size:1.06rem;line-height:1.7;margin:0}
.rf-mid .sec-lede{margin:0 0 1rem;font-size:1.02rem}
.grid.g3.rf-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
.rf-about-stats{max-width:760px;margin:0 auto}

/* --- the footer --------------------------------------------------------------------------------------------- */
.p-foot strong{color:var(--em)}
.rf-foot-brand b{font-family:'RFSans',sans-serif;font-weight:900}

/* --- narrower screens: built phone first, checked at 360, 390 and 430 ---------------------------------------- */
@media(max-width:1040px){
  .rf-grid{grid-template-columns:minmax(0,1fr) minmax(0,430px)}
}
@media(max-width:900px){
  .rf-grid{grid-template-columns:minmax(0,1fr)}
  .rf-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-story{grid-template-columns:minmax(0,1fr)}
  .grid.g3.rf-principles{grid-template-columns:minmax(0,1fr)}
  .rf-band-in{flex-direction:column;align-items:flex-start}
  .rf-band-in .rf-mascot{align-self:center}
  .rf-about-in{flex-direction:column-reverse;align-items:flex-start}
  .rf-about-in .rf-mascot{align-self:center}
}
@media(max-width:620px){
  .x-copy h1{font-size:clamp(2.05rem,9vw,2.6rem);max-width:none}
  .x-stats{border-radius:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .x-stats div{padding:.75rem .4rem}
  .x-stats dt{font-size:1.15rem}
  .x-stats dd{font-size:.55rem;letter-spacing:.1em}
  .rf-routes,.rf-steps{grid-template-columns:minmax(0,1fr)}
  .rf-m-lg{--s:170px}
  .rf-m-md{--s:104px}
  .rf-stage{min-height:300px}
  .rf-live-c{font-size:.8rem}
  .rf-cta{flex-direction:column;align-items:flex-start}
  /* the comparison as cards: the row's question on top, both answers under it,
     each labelled with its column, so nothing is wider than the phone */
  .rf-cmp thead{display:none}
  .rf-cmp table,.rf-cmp tbody{display:block}
  .rf-cmp tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--ln)}
  .rf-cmp tbody tr:last-child{border-bottom:0}
  .rf-cmp tbody th{grid-column:1 / -1;width:auto;border-bottom:0;padding:.85rem .9rem .3rem;
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fa)}
  .rf-cmp td{border-bottom:0;padding:.35rem .9rem .85rem;font-size:.9rem}
  .rf-cmp td::before{content:attr(data-col);display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fa);font-weight:600;margin-bottom:.2rem}
  .rf-cmp td.us::before{color:var(--em)}
}
@media(prefers-reduced-motion:reduce){
  .rf-fox,.rf-live-h i{animation:none!important}
}

/* Buttons last, so they win over the shared coverage above: every filled
   control is the operator's accent (Reynard ships ember as that accent). */
.p-cta,.btn-primary,.btn-go,.x-go{background:var(--a);color:var(--a-ink);
  box-shadow:0 14px 34px -14px var(--a),inset 0 1px 0 rgba(255,255,255,.28)}
.steps div.on{background:var(--a)}