/* ============================================================
   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}}
/* ── MOBILE MENU ────────────────────────────────────────────────────────────────────────────
   Below 900px the six nav links were simply hidden and nothing replaced them, so a phone got
   Sign in / Cart / Shop now and no route at all to Learn, Usage & FAQ or Affiliate. The rule
   that hid them is still here, unchanged — this adds the way back to them.

   NO JAVASCRIPT. The 25 pages carrying this header share no script file, so a JS toggle would
   mean either a new file on every page or a copy of the same handler inlined 25 times. A
   checkbox and its label do the whole job in CSS, and the header is `position:sticky`, which
   makes it the containing block for the absolutely-positioned panel with no extra wrapper.

   The checkbox is visually hidden but NOT display:none, so it stays focusable and Space still
   toggles the menu; it carries the accessible name. The label is the visual hamburger and is
   aria-hidden, so the control is announced once rather than twice.

   Desktop is untouched: every rule below is inside the existing 900px breakpoint. */
.rnav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0}
.rnav-burger,.rnav-menu{display:none}

@media(max-width:900px){.rnav-links .rnav-m{display:none}
  .rnav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:38px;height:34px;padding:0 8px;border:1px solid var(--line,#22384A);border-radius:9px;cursor:pointer;flex:none;order:-1}
  .rnav-burger span{display:block;height:2px;border-radius:2px;background:var(--ink,#E9F2FB)}
  .rnav-toggle:focus-visible + .rnav-burger{outline:2px solid var(--green,#3B9EFF);outline-offset:2px}
  /* Opaque, not the header's translucent fill: the panel sits over page content. */
  .rnav-menu{position:absolute;left:0;right:0;top:100%;background:var(--paper,#0B1622);border-bottom:1px solid var(--line,#22384A);padding:4px 16px 12px;z-index:59;box-shadow:0 18px 30px -18px rgba(0,0,0,.6)}
  .rnav-menu a{display:block;padding:13px 2px;font-size:15.5px;font-weight:500;color:var(--ink,#E9F2FB);border-bottom:1px solid var(--line,#22384A)}
  .rnav-menu a:last-child{border-bottom:0}
  /* The burger takes 38px out of a 375px bar, which was enough to wrap "Sign in" onto a second
     line and grow the header from 35px to 56px. These two are short labels that should never
     wrap; pinning them costs nothing and keeps the row one line at 375px. */
  .rnav-signin,.rnav-cta{white-space:nowrap}
  .rnav-toggle:checked ~ .rnav-menu{display:block}
}

/* At 375px the bar cannot hold burger + Sign in + Cart + Shop now: it overflowed by 27px once
   the burger was added (it fits at 414px with 12px to spare, so the cut is only at the narrow
   end). "Shop now" is the item that gives, because the menu this change adds already carries
   Shop and the hero carries "Shop the strips" — it is the only duplicated control in the bar.
   Sign in and Cart have no other route on a phone and stay. */
@media(max-width:400px){.rnav-cta{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}}