/* Web-only additions on top of pv.css.
   pv.css is COPIED IN AT DEPLOY TIME from chrome_extension/pages/pv.css — see
   deploy_landing.sh. It is deliberately not edited here: the site and the extension's
   own pages share one palette, and a user crosses between them inside a single click.
   Two hand-maintained copies would drift, and a near-match reads as a phishing page
   rather than as a rough edge. Put site-specific rules in THIS file instead. */

/* The site nav carries auth state, which the extension's nav does not. */
nav .links .who{font-size:13px;color:var(--sec);margin-right:2px}

/* The top-bar logo (emblem + wordmark) links home. It wraps two former flex items into
   one <a>, so it re-creates the emblem-to-wordmark gap internally and inherits its colour
   rather than the default link blue. */
nav .brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
nav .brand:hover .nm{color:var(--navy)}

.hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
               color:var(--brass-dk);margin-bottom:16px}

/* Centred hero, unlike the extension's left-aligned one: this page is read cold by
   someone who has never heard of us, not by someone who just installed something. */
.hero.mid{text-align:center;padding:58px 0 46px}
.hero.mid p{margin-left:auto;margin-right:auto}
.hero.mid .cta{justify-content:center}

.badge{display:inline-block;background:var(--amber-bg);color:var(--amber-fg);
       font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
       padding:5px 11px;border-radius:2px;margin-bottom:18px}

/* Legal pages: narrower measure, because these are read as prose rather than scanned. */
.legal{max-width:720px;margin:0 auto}
/* pv.css styles nav and footer links but not body prose links, so these were falling
   back to the browser's default blue-and-underlined — the one thing on the page that
   did not look like it belonged to us. */
.legal a,
section a:not(.btn):not(.navbtn),
.hero p a{color:var(--brass-dk);text-decoration:none;border-bottom:1px solid var(--rule)}
.legal a:hover,
section a:not(.btn):not(.navbtn):hover,
.hero p a:hover{color:var(--navy);border-bottom-color:var(--brass)}
.legal h2{font-size:20px;margin-top:30px}
.legal p,.legal li{color:var(--sec);font-size:14.5px}
.legal code{background:var(--parch-dp);padding:1px 5px;border-radius:2px;font-size:13px}
.legal .updated{font-size:12.5px;color:var(--ter);margin-top:-4px}
.legal table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px}
.legal th,.legal td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);
                    vertical-align:top}
.legal th{color:var(--navy);font-weight:600;white-space:nowrap}
.legal td{color:var(--sec)}
.back{display:inline-block;font-size:13px;color:var(--brass-dk);text-decoration:none;
      margin:22px 0 0}
.back:hover{color:var(--navy)}

/* ---------- narrow screens ----------
   Two measured overflows at 390px, both of which pushed the whole page sideways:

   1. The nav row could not fit four section links plus the auth button, so it forced the
      document to 503px against a 390px window. It now wraps onto a second line.
   2. The URL patterns in the privacy policy are single unbreakable tokens wider than a
      phone. They now break rather than widen the page — that page is the one a Chrome
      Web Store reviewer opens, quite possibly on a phone.

   Fixed here rather than in pv.css because pv.css is the extension's file, copied in at
   deploy time; the extension's own pages carry the same latent nav overflow, but changing
   them means re-testing and repackaging the extension. Noted, not silently coupled. */
@media (max-width:620px){
  nav .wrap{flex-wrap:wrap;row-gap:12px}
  nav .links{margin-left:0;width:100%;flex-wrap:wrap;gap:14px;row-gap:10px}
}
.legal code{overflow-wrap:anywhere}
/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.legal table{display:block;overflow-x:auto}