/* Shared styling for the policy pages. Same tokens and same Archivo as the
   landing page, so a visitor who clicks through to the fine print still feels
   like they are inside the same brand rather than on a generic legal page. */

@font-face{
  font-family:"Archivo Black";
  src:url("/assets/archivo-black-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/archivo-var-latin.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Josefin Sans";
  src:url("/assets/josefin-sans-latin.woff2") format("woff2");
  font-weight:100 700;font-style:normal;font-display:swap;
}

:root{
  --ink:#2E2E2E;
  --cream:#EEE9DF;
  --cream-dim:rgba(238,233,223,.62);
  --sans:"Archivo","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --display:"Archivo Black","Archivo","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  position:relative;
  color:var(--cream-dim);
  font-family:var(--sans);font-weight:500;
  -webkit-font-smoothing:antialiased;
  padding:max(32px,env(safe-area-inset-top)) 24px max(48px,env(safe-area-inset-bottom));
}

/* the same centre light and darkened corners as the landing page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(115% 80% at 50% 30%, rgba(238,233,223,.05), transparent 58%),
    radial-gradient(130% 105% at 50% 50%, transparent 42%, rgba(0,0,0,.42) 100%);
}
.doc{position:relative;z-index:1}

/* same grain as the landing page — the fine print should not feel like a
   different website */
body::after{
  content:"";
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
  opacity:.15;
  mix-blend-mode:overlay;
}

.doc{max-width:620px;margin:0 auto;font-size:14px;line-height:1.75}

/* The back link carries the brand name, so it renders in REAL upper- and
   lowercase glyphs — capital P and G only, in the brand face Josefin Sans
   Light (Trumaine, 2026-09-21). Julius Sans One is banned here: it has no
   lowercase glyphs, so the name reads as all caps. Never re-add a
   display/unicase face or text-transform to an element carrying the brand name. */
.back{
  display:inline-block;margin-bottom:38px;
  font-family:"Josefin Sans",var(--sans);font-weight:320;
  font-size:18px;letter-spacing:.08em;text-transform:none;
  color:rgba(238,233,223,.45);text-decoration:none;
}
.back:hover{color:var(--cream)}

h1{
  font-family:var(--display);font-weight:400;
  font-size:22px;letter-spacing:.1em;text-indent:.1em;text-transform:uppercase;
  color:var(--cream);
}
h2{
  font-family:var(--display);font-weight:400;
  font-size:12px;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;
  color:var(--cream);
  margin:34px 0 10px;
}
.updated{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(238,233,223,.35);
  margin-top:10px;margin-bottom:30px;
}
p{margin-bottom:14px}
ul{margin:0 0 14px 18px}
li{margin-bottom:8px}
strong{color:var(--cream);font-weight:500}
a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(238,233,223,.25)}
a:hover{border-bottom-color:var(--cream)}
a:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

.note{
  margin-top:34px;padding-top:18px;
  border-top:1px solid rgba(238,233,223,.14);
  font-size:11px;color:rgba(238,233,223,.4);
}