/* Navigate Boats — the legal pages, privacy.html and terms.html, in the board's look
   (SCOPE_2.0.md §6.2, W5; 16 Sep 2026): the sand ground, ink and Bricolage Grotesque
   of index.html and a white card like the setup questions', all from core/tokens.css
   (owned by Common), which each page loads before this file. No literal colour but
   white. Every URL is absolute: the pages are served at /privacy and /terms. */
@font-face{font-family:"Bricolage Grotesque";src:url("/vendor/bricolage/BricolageGrotesque-Variable.woff2") format("woff2-variations");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.55 var(--font);
  -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:10px 14px 60px}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the way back to the board: a 44 px target, heavy like the board's text buttons */
.back{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:800;text-decoration:none}

/* the page is one white card on the sand, like a setup question */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:6px 22px 22px}
h1{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:20px 0 8px}
h2{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:30px 0 8px}
.meta{color:var(--label2);font-size:14px;line-height:1.45;margin-top:0}
ul{padding-left:1.2em}
li{margin:6px 0}

/* the providers table scrolls sideways on a phone rather than squeezing its columns */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
th,td{text-align:left;vertical-align:top;border-top:1px solid rgba(var(--ink-rgb),.14);padding:8px 10px 8px 0}
th{font-weight:700}

/* terms §2, not a substitute for seamanship: set apart on the kit's sun tint with a
   caution edge; the words stay ink */
.safety{border-left:4px solid var(--nb-caution);background:var(--nb-sun-tint);
  border-radius:0 var(--r-field) var(--r-field) 0;padding:2px 16px}
.safety p{margin:12px 0}

@media (max-width:420px){
  .card{padding:4px 16px 18px}
  h1{font-size:28px}
}