/* ============================================================
   Riser shared chrome — ONE nav, ONE footer, used by every page.
   Class names are r-prefixed so they cannot collide with the
   per-page systems (.nav / .foot / .wrap) that predate this file.
   Colours are existing tokens only; this is scale + consistency.
   ============================================================ */

.rnav{position:sticky;top:0;z-index:60;background:rgba(11,22,34,.86);
      backdrop-filter:blur(10px);border-bottom:1px solid var(--line,#22384A)}
.rnav-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;
         justify-content:space-between;gap:18px;height:68px}
.rnav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.rnav-mk{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;
         border-bottom:15px solid var(--green,#3B9EFF)}
.rnav-nm{font-family:var(--display),sans-serif;font-weight:700;font-size:25px;
         letter-spacing:-.3px;color:var(--ink,#E9F2FB)}
.rnav-links{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:500}
.rnav-links a{text-decoration:none}
.rnav-links .rnav-m{color:var(--ink-soft,#9DB2C4)}
.rnav-links .rnav-m:hover{color:var(--ink,#E9F2FB)}
/* The nav item for the page you are already on. A <span>, not an <a>: a link back to
   the current page is a dead click, and greying an <a> out in CSS alone leaves it
   clickable and focusable. It keeps .rnav-m so the max-width:900px rule below still
   hides it with the rest of the middle nav. */
/* YOU ARE HERE, not a button. It was ink-white and bold, i.e. the most prominent thing on
   the bar -- which reads as the primary action rather than as the current page. Dimmed
   below the clickable items, underlined so the state is legible without relying on colour
   alone, and deliberately inert: no hover response and no pointer cursor, so nothing about
   it invites a click. */
.rnav-links .rnav-here{color:var(--ink-soft,#9DB2C4);font-weight:600;cursor:default;
                       text-decoration:underline;text-underline-offset:5px;
                       text-decoration-thickness:2px;
                       text-decoration-color:var(--green,#3B9EFF);opacity:.75}
.rnav-links .rnav-here:hover{color:var(--ink-soft,#9DB2C4)}
.rnav-signin{color:var(--ink,#E9F2FB);font-weight:700;border:1px solid var(--line,#22384A);
             border-radius:999px;padding:8px 16px}
.rnav-signin:hover{border-color:var(--green,#3B9EFF);color:var(--green,#3B9EFF)}
/* it is a <button>, so the UA background/font must be reset or it renders as a
   light pill with invisible text on the dark nav */
.rnav-cart{color:var(--ink,#E9F2FB);font-weight:700;display:inline-flex;align-items:center;gap:7px;
           border:1px solid var(--line,#22384A);border-radius:999px;padding:8px 15px;cursor:pointer;
           background:none;font-family:inherit;font-size:inherit;line-height:inherit;
           -webkit-appearance:none;appearance:none}
.rnav-cart:hover{border-color:var(--green,#3B9EFF)}
.rnav-cart .cc{background:var(--green,#3B9EFF);color:#fff;border-radius:999px;
               font-size:12px;font-weight:800;padding:1px 8px;line-height:1.5}
.rnav-cta{background:var(--green,#3B9EFF);color:#fff;font-weight:700;font-size:15px;
          border-radius:999px;padding:10px 20px;white-space:nowrap}
.rnav-cta:hover{background:var(--green-dark,#5AA9F5)}
@media(max-width:1080px){.rnav-links{gap:16px;font-size:14.5px}}
@media(max-width:900px){.rnav-links .rnav-m{display:none}}
@media(max-width:560px){
  /* brand + Sign in + Cart + Shop now overflowed 390px by 4px at the old sizes */
  .rnav-in{height:60px;padding:0 14px;gap:8px}
  .rnav-links{gap:7px;font-size:13.5px}
  .rnav-nm{font-size:19px}
  .rnav-brand{gap:7px}
  .rnav-mk{border-left-width:7px;border-right-width:7px;border-bottom-width:13px}
  .rnav-signin{padding:6px 11px;font-size:13.5px}
  .rnav-cart{padding:6px 10px;font-size:13.5px;gap:5px}
  .rnav-cart .cc{font-size:11px;padding:1px 6px}
  .rnav-cta{padding:7px 12px;font-size:13.5px}
}
/* the cart drawer is off-canvas at translateX(100%); clip (not hidden) so it can
   never open a horizontal scrollbar, while position:sticky keeps working */
body{overflow-x:clip}

/* ---- footer ---- */
.rfoot{border-top:1px solid var(--line,#22384A);padding-bottom:216px}
.rfoot-in{max-width:1180px;margin:0 auto;padding:0 24px}
.rfoot-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:30px 0 0}
.rfoot-brand{font-family:var(--display),sans-serif;font-weight:700;font-size:20px;
             color:var(--ink,#E9F2FB)}
.rfoot-tag{font-size:14px;color:var(--ink-soft,#9DB2C4);margin-top:6px}
.rfoot-contact{font-size:14px;color:var(--ink-soft,#9DB2C4);text-align:right;line-height:1.8}
.rfoot-contact a{color:inherit;text-decoration:none}
.rfoot-contact a:hover{color:var(--ink,#E9F2FB)}
.rfoot-mid{border-top:1px solid var(--line,#22384A);margin-top:20px;padding:18px 0;
           display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between}
.rfoot-nav{display:flex;flex-wrap:wrap;gap:9px 18px;font-size:13.5px}
.rfoot-nav a{color:var(--ink-soft,#9DB2C4);font-weight:600;text-decoration:none}
.rfoot-nav a:hover{color:var(--ink,#E9F2FB)}
.rfoot-soc{border-top:1px solid var(--line,#22384A);padding:10px 0 14px;
           display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
/* the .soc sizing used to be scoped to .social-row; without these the anchors
   collapse to zero width and the icons vanish. */
.rfoot-soc .soc{display:inline-flex;padding:7px;color:var(--ink-soft,#9DB2C4);
                transition:color .15s ease;text-decoration:none}
.rfoot-soc .soc:hover,.rfoot-soc .soc:focus-visible{color:var(--ink,#E9F2FB)}
.rfoot-soc .soc:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:8px}
.rfoot-soc .soc svg{width:20px;height:20px;display:block}
.rfoot .disclaimer{font-size:12.5px;color:var(--ink-soft,#9DB2C4);max-width:74ch;
                   line-height:1.65;padding:18px 0 0;margin:0}
@media(max-width:640px){
  .rfoot-top{flex-direction:column;gap:14px}
  .rfoot-contact{text-align:left}
  .rfoot-in{padding:0 16px}
}

/* Delivery-path diagram — shared by learn.html and every product page.
   Lived in learn.html's inline <style> until it was needed in two places. */
.dpath{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}.dcol{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px}.dcol h3{font-family:var(--display);font-size:16px;font-weight:700;margin:0 0 4px;color:var(--ink)}.dcol .dsub{font-size:13px;color:var(--ink-soft);margin-bottom:18px}.dstep{display:flex;align-items:flex-start;gap:13px}.dstep .dic{flex:0 0 40px;width:40px;height:40px;border-radius:999px;background:var(--mint);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}.dstep .dtx b{display:block;font-size:14.5px;color:var(--ink);font-weight:700;line-height:1.35}.dstep .dtx span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:2px}.dlink{height:20px;margin:2px 0 2px 19px;display:flex;align-items:center}.dcap .dic{background:transparent;border-color:var(--line)}.dcap .dic svg{color:var(--ink-soft)}.dstrip .dic svg{color:var(--blue-dark)}.dstrip{border-color:#2C4C67}.dnote{font-size:12.5px;color:var(--ink-soft);margin-top:18px}@media(max-width:760px){.dpath{grid-template-columns:1fr;gap:14px}}