/* Shared styles for the legal pages (privacy-policy.html, tos.html).
   Tokens and font faces mirror index.html. */

@font-face{
  font-family:"Austin";
  src:url("fonts/austin-light.otf") format("opentype");
  font-weight:300 400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Austin";
  src:url("fonts/austin-medium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Austin";
  src:url("fonts/austin-semibold-.otf") format("opentype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Austin";
  src:url("fonts/austin-bold.otf") format("opentype");
  font-weight:700 900; font-style:normal; font-display:swap;
}

:root{
  /* Austin is a display face — used for the title only. Body copy uses the
     system UI stack so long-form legal text stays readable. */
  --display: "Austin","Playfair Display",Georgia,serif;
  --text: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;

  --ink:        rgb(53,49,49);
  --cream:      rgb(239,228,228);
  --beige:      rgb(234,232,225);
  --orange:     rgb(232,139,63);
  --red:        rgb(224,80,76);
  --paper:      rgb(247,247,247);
  --stroke:     rgb(149,149,149);
  --muted-text: rgb(136,136,136);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the two retro stripes at the very top */
.stripe{ position:fixed; left:0; right:0; height:5px; z-index:10; pointer-events:none; }
.stripe--orange{ top:0;   background:var(--orange); }
.stripe--red   { top:5px; background:var(--red);    }

header.bar{
  position:relative;
  margin-top:10px;
  min-height:85px;
  background:var(--beige);
  display:flex; align-items:center; justify-content:center;
  padding:12px 24px;
}
header.bar .logo{ height:46px; width:auto; display:block; -webkit-user-drag:none; }
header.bar .back{
  position:absolute; left:24px; top:50%; transform:translateY(-50%);
  font-size:14px; letter-spacing:.04em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid transparent;
}
header.bar .back:hover{ border-bottom-color:var(--ink); }

main.doc{
  max-width:760px;
  margin:0 auto;
  padding:48px 24px 96px;
}

h1{
  font-family:var(--display);
  font-size:44px; font-weight:700; line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.effective{
  margin:0 0 32px;
  font-size:14px; color:var(--muted-text);
}
h2{
  font-size:21px; font-weight:600; line-height:1.3;
  letter-spacing:-.01em;
  margin:44px 0 12px;
  padding-top:20px;
  border-top:1px solid rgba(53,49,49,.12);
}
h3{ font-size:17px; font-weight:600; margin:28px 0 8px; }
p{ margin:0 0 18px; }
ul,ol{ margin:0 0 16px; padding-left:22px; }
li{ margin-bottom:8px; }
strong{ font-weight:700; }
a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--red); }
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;
  background:rgba(53,49,49,.06);
  padding:1px 5px; border-radius:4px;
}

/* draft banner — this content is not counsel-reviewed yet */
.notice{
  border:1px solid var(--orange);
  background:rgba(232,139,63,.09);
  border-radius:8px;
  padding:14px 18px;
  margin:0 0 32px;
  font-size:15px;
  line-height:1.55;
}
.notice strong{ letter-spacing:.04em; text-transform:uppercase; font-size:13px; display:block; margin-bottom:4px; }

.table-wrap{ overflow-x:auto; margin:0 0 20px; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; min-width:560px; font-size:15px; }
th,td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid rgba(53,49,49,.12); }
th{ background:var(--beige); font-weight:600; white-space:nowrap; }

footer.doc-foot{
  border-top:1px solid rgba(53,49,49,.12);
  margin-top:56px; padding-top:20px;
  font-size:14px; color:var(--muted-text);
  display:flex; gap:18px; flex-wrap:wrap;
}

@media (max-width:720px){
  body{ font-size:16px; }
  header.bar{ min-height:72px; }
  header.bar .logo{ height:36px; }
  header.bar .back{ left:14px; font-size:13px; }
  main.doc{ padding:32px 18px 72px; }
  h1{ font-size:32px; }
  h2{ font-size:19px; margin-top:36px; }
  h3{ font-size:16px; }
}