/* ═══════════════════════════════════════════════════════════════════════════
   Rover + Roam — legal pages
   Shared stylesheet for privacy.html · terms.html · shipping.html · returns.html

   Same ground as the PACKT page (graphite, grain, Space Grotesk) but a quieter
   register: one column, generous measure, no accents doing work. Per accent
   system C the zone owns the type — these pages sit in the BLUE zone, which is
   the informational register. Acid never appears here, because nothing on a
   legal page buys anything.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Space Grotesk';
  src:url('_assets/direction/fonts/SpaceGrotesk-var.ttf') format('truetype-variations');
  font-weight:300 700;font-display:swap;
}

:root{
  --graphite:#14181D;
  --g2:#181D23;
  --g3:#1F252C;
  --line:#272E36;
  --chrome:linear-gradient(158deg,#F4F6F8 0%,#9AA4AE 26%,#EDF1F4 44%,#6C757E 60%,#D8DEE4 80%,#8B949D 100%);
  --blue:#4F8FD0;
  --ink:#F0F3F6;
  --body:#A2ABB4;
  --mute:#6E7883;
}

*{box-sizing:border-box}
img{display:block;max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--graphite);color:var(--body);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16px;                       /* type floor — phones */
  -webkit-font-smoothing:antialiased;
}
/* grain over everything — same depth cue as the PACKT page */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}

/* The page container is 1080, not the PACKT page's 1500. A legal document is
   one 74ch column; hung inside a 1500px shell it strands half the screen and
   reads like an unfinished layout. Narrowing the shell keeps the wordmark, the
   headline, and the footer on one left edge and the emptiness proportionate. */

/* ═══ header ═══ */
.topbar{
  border-bottom:1px solid var(--line);background:rgba(20,24,29,.9);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:60;
}
.topbar .in{
  max-width:1080px;margin:0 auto;padding:16px clamp(18px,4vw,60px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mark{
  font-size:15px;font-weight:600;letter-spacing:.02em;text-decoration:none;
  white-space:nowrap;
}
.topbar nav{display:flex;gap:22px;flex-wrap:wrap}
.topbar nav a{
  color:var(--mute);text-decoration:none;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:600;
}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a[aria-current="page"]{color:var(--blue)}

/* ═══ document ═══ */
main{max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,60px)}
.doc{max-width:74ch;padding:clamp(44px,7vw,90px) 0 0}

.eyebrow{
  color:var(--blue);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;margin:0 0 18px;
}
h1{
  margin:0;color:var(--ink);font-weight:600;
  font-size:clamp(34px,5.4vw,62px);line-height:1.02;letter-spacing:-.035em;
}
.eff{
  margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line);
  color:var(--mute);font-size:13.5px;letter-spacing:.04em;
}
.eff b{color:var(--body);font-weight:600}

.doc h2{
  margin:56px 0 14px;color:var(--ink);font-weight:600;
  font-size:clamp(19px,2vw,23px);letter-spacing:-.015em;line-height:1.25;
}
.doc h3{
  margin:32px 0 10px;color:var(--ink);font-weight:600;
  font-size:15px;letter-spacing:.01em;
}
.doc p,.doc li{font-size:16px;line-height:1.72}
.doc p{margin:0 0 16px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:9px}
.doc li::marker{color:var(--mute)}
.doc b,.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(79,143,208,.35)}
.doc a:hover{border-bottom-color:var(--blue)}
.doc hr{border:0;border-top:1px solid var(--line);margin:48px 0}

/* the one call-out style — used sparingly, for things a reader must not miss */
.note{
  border-left:2px solid var(--blue);background:var(--g2);
  padding:18px 22px;margin:0 0 20px;
}
.note p:last-child{margin-bottom:0}
.note p{font-size:15px}

/* ═══ cross-links ═══ */
.also{
  margin:70px 0 0;padding-top:30px;border-top:1px solid var(--line);
}
.also h4{
  margin:0 0 16px;color:var(--mute);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:600;
}
.also .row{display:flex;gap:10px;flex-wrap:wrap}
.also a{
  color:var(--body);text-decoration:none;font-size:14px;font-weight:600;
  border:1px solid var(--line);padding:11px 18px;background:var(--g2);
}
.also a:hover{color:var(--ink);border-color:var(--blue)}

/* ═══ footer ═══ */
footer{margin-top:90px;border-top:1px solid var(--line);padding:34px 0 46px}
footer .fl{
  max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,60px);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:var(--mute);font-size:13px;
}
footer a{color:var(--mute);text-decoration:none;margin-left:20px}
footer a:first-child{margin-left:0}
footer a:hover{color:var(--ink)}

.ph{
  border:1px dashed #6B4F26;background:rgba(107,79,38,.09);color:#D9B778;
  padding:16px 20px;margin:26px 0 0;font-size:13.5px;line-height:1.65;
}
.ph b{color:#FFD36E;font-weight:600}
.ph code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:#FFD36E;
}
body.hidesw .ph{display:none}

@media(max-width:620px){
  .topbar .in{flex-direction:column;align-items:flex-start;gap:12px}
  .topbar nav{gap:16px}
  footer .fl{flex-direction:column;gap:10px}
  footer a{margin-left:0;margin-right:18px}
}