/* V1-06 — one height, one name. `100vh` is the viewport with the browser
   toolbar hidden, 60-114px taller than the one the visitor has, so anything
   that must fit the screen reads `var(--workspace-visual-height, 100dvh)`
   instead. Legacy line first, live line second. See app.css for the full
   note. */
:root{--workspace-visual-height:100vh;--workspace-visual-height:100dvh}
/* =========================================================================
   LEGAL PAGES — Privacy Policy & Terms of Service
   The website's palette (warm neutrals sampled from the film, the mark's
   bronze ramp) set for long-form reading: a sticky contents rail beside a
   single measured column. Type is larger and looser than the marketing
   page because these are read in sequence, not scanned.
   ========================================================================= */

:root{
  --ink:#0C0705;
  --ink-soft:#3B2F27;
  --canvas:#E1D8CD;
  --canvas-up:#EDE6DC;
  --bz-700:#3E332A;
  --bz-500:#7A6857;
  --bz-300:#B4A292;
  --line:rgba(12,7,5,.12);
  --grad:linear-gradient(118deg,#1C1611 0%,#3E332A 52%,#262019 100%);
  --grad-txt:linear-gradient(118deg,#3A2E24 0%,#6B5A49 100%);
  --pad:clamp(16px,5.2vw,92px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:32px}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--bz-300);color:var(--ink)}
a{color:inherit}

.site-shell{
  min-height:var(--workspace-visual-height, 100dvh);min-height:100dvh;
  overflow-x:clip;
  padding-inline:var(--pad);
  background:radial-gradient(90% 520px at 50% 0%,var(--canvas-up) 0%,rgba(237,230,220,0) 100%),var(--canvas);
}

.legal-page{max-width:1180px;margin:0 auto;padding:clamp(56px,10vh,110px) 0 110px}

/* --- Back link --- */
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(40px,7vh,72px);color:var(--ink);opacity:.62;font-size:.84rem;font-weight:400;text-decoration:none;transition:opacity .25s}
.legal-back:hover{opacity:1}
.legal-back b{font-weight:400;transition:transform .25s}
.legal-back:hover b{transform:translateX(-3px)}

/* --- Header --- */
.legal-head{max-width:760px;margin-bottom:64px}
.legal-eyebrow{display:flex;align-items:center;gap:.85em;margin:0 0 1.6em;font-size:.71rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.legal-eyebrow::after{content:"";flex:0 0 clamp(28px,4vw,64px);height:1px;background:currentColor;opacity:.32}
.legal-head h1{margin:0 0 .45em;font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:500;line-height:1;letter-spacing:-.038em}
.legal-head h1 em{font-style:normal;color:transparent;background:var(--grad-txt);-webkit-background-clip:text;background-clip:text}
/* :not(.legal-eyebrow) matters — the eyebrow is also a <p> in this header. */
.legal-head>p:not(.legal-eyebrow){margin:0;max-width:60ch;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.66;opacity:.74}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:.8rem;opacity:.72}
.legal-meta strong{font-weight:500}

.legal-body{display:grid;grid-template-columns:242px minmax(0,1fr);gap:56px;align-items:start}

/* --- Contents rail --- */
.legal-toc{position:sticky;top:32px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(237,230,220,.72)}
.legal-toc strong{display:block;margin-bottom:14px;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.legal-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:flex;gap:10px;padding:7px 0;font-size:.84rem;line-height:1.4;text-decoration:none;opacity:.7;transition:opacity .2s}
.legal-toc a::before{content:counter(toc);flex:0 0 18px;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;padding-top:2px;color:var(--bz-500)}
.legal-toc a:hover{opacity:1}

/* --- Prose --- */
.legal-content{max-width:72ch;font-size:1rem;line-height:1.74;color:var(--ink-soft)}
.legal-content section{scroll-margin-top:32px;padding-bottom:40px}
.legal-content section+section{padding-top:40px;border-top:1px solid var(--line)}
.legal-content h2{margin:0 0 16px;font-size:clamp(1.35rem,1.9vw,1.6rem);font-weight:500;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.legal-content h3{margin:28px 0 10px;font-size:1.04rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.legal-content p{margin:0 0 15px}
.legal-content p:last-child,.legal-content ul:last-child,.legal-content ol:last-child{margin-bottom:0}
.legal-content a{color:var(--ink);font-weight:400;text-decoration:underline;text-decoration-color:var(--bz-300);text-underline-offset:3px;transition:text-decoration-color .2s}
.legal-content a:hover{text-decoration-color:var(--ink)}
.legal-content strong{color:var(--ink);font-weight:500}
.legal-content ul,.legal-content ol{margin:0 0 15px;padding-left:22px}
.legal-content li{margin-bottom:9px;padding-left:4px}
.legal-content li::marker{color:var(--bz-500)}

/* Definition-style rows for data tables (what we collect / why / how long) */
.legal-table{margin:0 0 18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(237,230,220,.55)}
.legal-table>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.legal-table>div+div{border-top:1px solid var(--line)}
.legal-table dt,.legal-table dd{margin:0;padding:13px 16px;font-size:.88rem;line-height:1.55}
.legal-table dt{font-weight:500;color:var(--ink);border-right:1px solid var(--line)}
.legal-table>div:first-child dt,.legal-table>div:first-child dd{background:rgba(12,7,5,.05);color:var(--ink);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}

/* Callout for the bits people actually need to notice */
.legal-callout{margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--bz-700);border-radius:12px;background:rgba(237,230,220,.8);font-size:.92rem;line-height:1.62}

/* Placeholders the operator must complete before publishing */
.legal-fill{padding:1px 7px;border:1px dashed rgba(123,91,66,.6);border-radius:6px;background:rgba(186,154,129,.18);color:#5B4331;font-size:.92em;font-style:normal}

.legal-footer-note{max-width:72ch;margin:46px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:.84rem;line-height:1.6;opacity:.66}

@media (max-width:940px){
  .legal-body{grid-template-columns:1fr;gap:32px}
  .legal-toc{position:static;order:-1}
  .legal-toc ol{columns:2;column-gap:24px}
}
@media (max-width:620px){
  .legal-content{font-size:.95rem}
  .legal-toc ol{columns:1}
  .legal-table>div{grid-template-columns:1fr}
  .legal-table dt{border-right:0;border-bottom:1px solid var(--line)}
  .legal-meta{gap:8px 18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ── site chrome ───────────────────────────────────────
   The same brand, the same three links, on the cream these pages read on.
   Absolute links: the pages also ship on app.bookessa.com. */
.legal-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1180px; margin:0 auto; padding:18px var(--pad);
}
.legal-nav__brand{ display:inline-flex; align-items:center; gap:.55em; min-height:44px; font-weight:600; letter-spacing:-.02em; color:inherit; text-decoration:none; }
.legal-nav__brand img{ width:28px; height:28px; border-radius:7px; }
.legal-nav__links{ display:flex; align-items:center; gap:clamp(12px,2vw,26px); }
.legal-nav__links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:.9rem; font-weight:400; color:inherit; text-decoration:none; opacity:.82; }
.legal-nav__links a:hover{ opacity:1; }
.legal-nav__in{ padding:0 16px !important; border:1px solid var(--line); border-radius:99px; }

.legal-foot{ max-width:1180px; margin:clamp(56px,8vh,96px) auto 0; padding:32px var(--pad) 36px; border-top:1px solid var(--line); font-size:.9rem; }
.legal-foot__cols{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:space-between; gap:24px; }
.legal-foot__cols div{ display:flex; flex-direction:column; gap:.2em; }
.legal-foot__cols strong{ margin-bottom:.4em; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.55; }
.legal-foot__cols a{ display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none; white-space:nowrap; opacity:.82; }
.legal-foot__cols a:hover{ opacity:1; }
.legal-foot__bottom{ margin:28px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:.8rem; opacity:.6; }
@media (max-width:480px){ .legal-foot__cols{ grid-template-columns:1fr; gap:14px; } }

/* the contents rail never outgrows the screen it is pinned to */
.legal-toc{ max-height:calc(var(--workspace-visual-height, 100dvh) - 48px); overflow-y:auto; overscroll-behavior:contain; }
.legal-toc a{ display:flex; align-items:center; min-height:36px; }
@media (pointer:coarse){ .legal-toc a{ min-height:44px; } .legal-content a{ padding:.2em 0; } }

/* a measure a person can read across */
.legal-content{ max-width:72ch; }

/* Keep the language control available on narrow legal pages. */
.legal-nav__links .language__options a{ display:flex; justify-content:space-between; padding:8px 12px; opacity:1; }
@media (max-width:600px){
  .legal-nav{ flex-wrap:wrap; gap:8px; }
  .legal-nav__links{ flex-wrap:wrap; gap:8px; }
  .legal-nav__links > a:not(.legal-nav__in){ display:none; }
}