/* Shared stylesheet for the ShotDetect document pages: the five legal ones
   plus /performance, which is where the measured figures moved to when the
   marketing pages stopped carrying them.

   index.html deliberately does NOT use this file. Its layout — phone frames,
   the top bar, the screenshot grid — is bespoke and nothing else wants it, and
   inlining keeps the landing page a single file that renders without a second
   request. These pages are the same prose document several times over, so they
   share one stylesheet rather than several copies that drift apart. */

/* Type is shared with the marketing pages even though the layout is not: the
   same Archivo headings, Instrument Sans body and IBM Plex Mono labels. Someone
   arriving here from the landing page should be in no doubt they are still on
   the same product's site — but this is a document, so it keeps its paper
   ground and its single measure rather than borrowing the dark shell. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..900&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@400..700&display=swap');

:root{
  --paper:#FAFAF7;
  --ink:#12161C;
  --quiet:#6B7280;
  --grid:#E3E5DF;
  /* The marketing pages' electric blue, so links match across the site. */
  --signal:#2B62FF;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --measure:68ch;
  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:760px;margin:0 auto;padding:0 var(--pad)}

header.doc{padding:clamp(48px,8vw,88px) 0 0}
h1{
  margin:0 0 12px;font-family:var(--display);font-stretch:112%;
  font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.032em;line-height:1.06;
}
.dateline{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--quiet);margin:0}

main{padding:clamp(32px,5vw,52px) 0 clamp(48px,7vw,72px)}
section{margin:0 0 34px}
h2{
  margin:0 0 10px;font-family:var(--display);font-stretch:106%;
  font-size:20px;font-weight:700;letter-spacing:-.018em;line-height:1.3;
}
h2 .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--signal);letter-spacing:.08em;margin-right:10px}

p{margin:0 0 14px;max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul{margin:0 0 14px;padding-left:22px;max-width:var(--measure)}
li{margin:0 0 7px}
strong{font-weight:700}

/* Hostnames, permission names and filenames are quoted exactly so a reader can
   check them against what their phone reports. Wrapping is allowed because a
   long hostname must not push the measure wider on a narrow screen. */
code{
  font-family:var(--mono);font-size:.88em;
  background:#F1F2ED;border-radius:4px;padding:1px 5px;
  overflow-wrap:anywhere;
}

a{color:var(--signal)}
a:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* The same footer information as the rest of the site, in this stylesheet's
   document voice rather than its four-column layout — these pages are 68ch of
   prose, so columns would be wider than the thing they sit under. */
footer{border-top:1px solid var(--grid);padding:40px 0 64px;color:var(--quiet)}
.wordmark{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;display:inline-block;margin-bottom:12px;
}
footer p{font-size:14px;margin:0 0 10px;max-width:var(--measure)}
footer nav{font-size:14px;margin:0 0 14px;line-height:2}
.foot-desc{max-width:56ch}
.legal{font-size:13px;line-height:1.6}
.legal strong{color:#B4460F}
footer hr{border:0;border-top:1px solid var(--grid);margin:18px 0 16px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}