/* Shared shell for the legal pages (/privacy, /terms).
   Tokens and chrome match the landing page and the template gallery. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/bricolage-var.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/instrument-var.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
:root{
  --paper:oklch(97.4% 0.009 74);
  --paper-2:oklch(95.3% 0.012 72);
  --paper-3:oklch(92.6% 0.016 70);
  --ink:oklch(23% 0.014 64);
  --ink-2:oklch(41% 0.013 64);
  --ink-3:oklch(56% 0.011 66);
  --hairline:oklch(87% 0.013 72);
  --hairline-2:oklch(90.5% 0.011 72);
  --accent:oklch(53% 0.125 42);
  --accent-deep:oklch(46% 0.125 40);
  --accent-soft:oklch(53% 0.125 42 / .10);
  --good:oklch(56% 0.11 155);
  --card:oklch(99.2% 0.004 74);
  --radius:16px;
  --radius-sm:11px;
  --serif:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --ease:cubic-bezier(.4,.14,.2,1);
}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.62;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
body>*{position:relative;z-index:1}
a{color:var(--accent)}
.wrap{width:min(1120px,100% - 44px);margin-inline:auto}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}


/* legal page body */
.legal{width:min(760px,100% - 44px);margin-inline:auto;padding:var(--s5) 0 var(--s6)}
@media(max-width:760px){.legal{padding:var(--s4) 0 var(--s5)}}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:var(--s3)}
.legal h1{font-family:var(--serif);font-weight:700;letter-spacing:-.03em;font-size:clamp(36px,5.6vw,52px);line-height:1.08;letter-spacing:-.018em}
.legal h1 em{font-style:italic;color:var(--accent)}
.legal .lede{font-size:clamp(17px,2vw,19.5px);color:var(--ink-2);max-width:58ch;margin-top:var(--s3)}
.legal .stamp{margin-top:var(--s2);font-size:14.5px;color:var(--ink-2)}
.legal h2{font-family:var(--serif);font-weight:700;letter-spacing:-.03em;font-size:clamp(24px,3.2vw,30px);line-height:1.2;
  letter-spacing:-.012em;margin-top:var(--s6)}
.legal h3{font-family:var(--sans);font-weight:500;font-size:17.5px;margin-top:var(--s3)}
.legal p{margin-top:var(--s2);color:var(--ink-2);max-width:66ch}
.legal ul{margin-top:var(--s2);padding-left:20px;color:var(--ink-2);max-width:66ch}
.legal li{margin-top:6px}
.legal li::marker{color:var(--ink-2)}
.legal strong{color:var(--ink);font-weight:500}
.callout{margin-top:var(--s3);background:var(--card);border:1px solid var(--hairline);
  border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:var(--s3)}
.callout p:first-child{margin-top:0}
.toc{margin-top:var(--s4);background:var(--paper-2);border:1px solid var(--hairline);
  border-radius:var(--radius-sm);padding:var(--s3)}
.toc p{margin-top:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.toc ul{list-style:none;padding:0;margin-top:var(--s1);
  display:grid;gap:4px 24px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.toc a{text-decoration:none;color:var(--ink-2);font-size:15.5px}
.toc a:hover{color:var(--accent)}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}