/* legal.css — /privacy and /terms, and nothing else.

   ONE FILE FOR BOTH, on purpose: they are the same page with different words,
   and two inline copies would drift the first time one was touched.

   Same ground, same amber, same two faces as the rest of the site, and NO
   photograph: these are read by somebody deciding whether to trust the number
   they are about to hand over, and by a carrier's reviewer looking for three
   sentences. Both want it to open instantly and read cleanly.

   The jokes stop here (docs/voice.md: money and the agreement are where they
   do). Plain, short, and nothing that is not true. */
:root{
  --ink:#070A0F; --paper:#FBFAF7; --dim:#C6CAD1; --muted:#9AA0AA;
  --edge:rgba(251,250,247,.13); --amber:#E8A24A;
}
*{box-sizing:border-box}
*{-webkit-tap-highlight-color:rgba(232,162,74,.22)}
::selection{background:rgba(232,162,74,.32);color:#fff}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:3px}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  background:var(--ink);color:var(--paper);
  font:400 17px/1.65 'Instrument Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100svh;
}
.wrap{width:min(680px,100% - 36px);margin-inline:auto}

header{padding:14px 0 0}
.brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  text-decoration:none;color:var(--paper);
  font-family:'Familjen Grotesk',sans-serif;font-weight:700;font-size:15px}
.brand img{display:block;width:22px;height:22px;border-radius:5px}

h1{font-family:'Familjen Grotesk',sans-serif;font-weight:700;letter-spacing:-.022em;
   font-size:clamp(34px,9vw,54px);line-height:1.04;margin:26px 0 12px}
.lead{margin:0 0 8px;font-size:clamp(18px,4.6vw,20px);line-height:1.5;color:var(--dim)}
.who{margin:0;font-size:15.5px;color:var(--muted)}

h2{font-family:'Familjen Grotesk',sans-serif;font-weight:700;letter-spacing:-.01em;
   font-size:22px;line-height:1.2;margin:44px 0 10px}
p{margin:0 0 14px;color:#E2E4E8}
ul{margin:0 0 14px;padding:0;list-style:none}
li{position:relative;padding-left:18px;margin:0 0 10px;color:#E2E4E8}
li::before{content:'';position:absolute;left:0;top:.74em;width:7px;height:2px;background:var(--amber)}
b{font-weight:600;color:var(--paper)}

/* THE SENTENCE A CARRIER LOOKS FOR. Set apart so a reviewer finds it in one
   glance and a customer cannot miss it — it is the promise on the page. */
.said{margin:18px 0;padding:16px 18px;border-left:3px solid var(--amber);
  background:rgba(232,162,74,.08);border-radius:0 10px 10px 0;
  color:var(--paper);font-weight:500}

/* A link inside a sentence. The padding grows what a thumb can hit to 44px and
   the matching negative margin gives the line back, so nothing moves. */
main p a, main li a{color:var(--amber);text-decoration:underline;
  text-decoration-color:rgba(232,162,74,.45);text-underline-offset:3px;
  display:inline-block;padding-block:11px;margin-block:-11px}
main p a:hover, main li a:hover{text-decoration-color:var(--amber)}

/* The ways to reach him: each its own row, each a full thumb tall. */
.reach{margin:6px 0 0;border-top:1px solid var(--edge)}
.reach a{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  min-height:52px;padding:14px 0;border-bottom:1px solid var(--edge);
  text-decoration:none;color:var(--paper);font-weight:600;font-size:17.5px}
.reach a b{color:var(--amber);font-weight:700}
.reach a small{font-weight:400;font-size:14.5px;color:var(--muted)}
.reach a:hover b{text-decoration:underline}

.dated{margin:34px 0 0;font-size:15px;color:var(--muted)}

footer{margin:34px 0 0;padding:14px 0 30px;border-top:1px solid var(--edge);font-size:15px}
footer nav{display:flex;flex-wrap:wrap;gap:0 24px}
footer a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--muted);text-decoration:none}
footer a:hover{color:var(--amber)}
footer a[aria-current="page"]{color:var(--paper)}