/* CameraDuel — long-form document pages (privacy, terms, delete).
   Same system as the home page: black field, cream ink, the teal→mint→gold
   rule, system sans, square corners, hairline grid. Tokens below are the
   ones in index.html's inline :root — keep the two in sync. */
:root{
  --ink:#000000;
  --field:#0B1211;
  --cream:#F2EDE4;
  --teal:#4DE1DC;
  --mint:#83DFA4;
  --gold:#E6C463;
  --mute:#8C8C8C;
  --edge:rgba(242,237,228,.14);
  --body:#BDB7AE;  /* index's .lede grey — running text at document length */
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* One column: nav, prose and footer all share a left edge, unlike the
   home page where the wrap is wide enough to hold a two-up hero. */
.wrap{max-width:768px;margin:0 auto;padding:0 28px;width:100%}
.rule{height:2px;background:linear-gradient(90deg,var(--teal),var(--mint) 55%,var(--gold))}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.04}
p{margin:0}

/* ---------- nav ---------- */
nav{display:flex;justify-content:space-between;align-items:center;gap:10px 18px;padding:22px 0;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.02em;text-decoration:none}
.mark img{width:36px;height:36px}
.navlink{font-size:15px;color:var(--mute);text-decoration:none}
.navlink:hover{color:var(--cream)}

/* ---------- document ---------- */
/* .doc rides on .wrap (as the home page's sections do), so it sets only
   its vertical rhythm and leaves the 28px gutter to .wrap. */
.doc{flex:1;padding-top:clamp(40px,6vw,66px);padding-bottom:clamp(72px,9vw,120px)}
.doc h1{font-size:clamp(34px,5.8vw,52px)}
.doc .date{margin-top:16px;color:var(--mute);font-size:15px}
.doc .lede{font-size:19px;line-height:1.55;color:#CFC9BF;margin-top:26px}
/* Each section opens on a hairline — the same rule that divides the beats,
   modes and price tiers on the home page. */
.doc h2{font-size:22px;line-height:1.26;margin-top:52px;padding-top:26px;border-top:1px solid var(--edge)}
.doc p{margin-top:14px;color:var(--body);font-size:16px;line-height:1.72}
.doc strong{color:var(--cream);font-weight:600}
.doc ul{margin:16px 0 0;padding:0;list-style:none}
.doc li{position:relative;margin-top:10px;padding-left:22px;color:var(--body);font-size:16px;line-height:1.72}
.doc li::before{content:"";position:absolute;left:1px;top:.63em;width:6px;height:6px;background:var(--teal)}
.doc a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(77,225,220,.38)}
.doc a:hover{border-bottom-color:var(--teal)}
.doc .callout{background:var(--field);border:1px solid var(--edge);padding:22px 24px;margin-top:20px}
.doc .callout p:first-child{margin-top:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--edge);padding:34px 0 60px;color:var(--mute);font-size:14px}
footer .mark{font-size:17px}
.flinks{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.flinks a{text-decoration:none}
.flinks a:hover{color:var(--cream)}

@media(max-width:720px){
  nav .mark{font-size:19px}
  nav .mark img{width:30px;height:30px}
  .navlink{font-size:14px}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}