/* PixMedium (main) — legal / policy pages (page.php). Self-contained. */
@font-face{font-family:Inter;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("../fonts/inter-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");font-weight:100 900;font-style:italic;font-display:swap}

:root{--ink:#11130f;--paper:#f4f1eb;--white:#fff;--green:#304720;--green-light:#c5d7b8;--muted:#676c65;--line:rgba(17,19,15,.13)}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;color:var(--ink);background:var(--paper);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65;font-size:16px}
a{color:var(--green)}

.legal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:820px;margin:0 auto;padding:22px 24px}
.legal-brand{display:inline-flex;align-items:center;gap:10px;font-weight:850;
  font-size:18px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.legal-brand svg{width:30px;height:30px;display:block}
.legal-top a.legal-signin{display:inline-flex;align-items:center;min-height:24px;
  font-size:14px;font-weight:650;color:var(--muted);text-decoration:none}
.legal-top a.legal-signin:hover{color:var(--ink)}

.legal-shell{max-width:820px;margin:0 auto;padding:8px 24px 90px}
.legal-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;
  font-size:14px;font-weight:650;color:var(--muted);text-decoration:none}
.legal-back:hover{color:var(--ink)}
.legal-hero h1{margin:0 0 10px;font-family:Fraunces,Georgia,serif;font-weight:460;
  font-size:clamp(30px,6vw,44px);line-height:1.08;letter-spacing:-.02em}
.legal-hero p{margin:0;color:var(--muted);max-width:60ch}
.legal-updated{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;color:var(--muted)}

.draft-banner{margin:26px 0 6px;padding:16px 18px;border-radius:16px;
  border:1px solid #e4b24d;background:#fdf3dc;color:#5c4409;font-size:14px}
.draft-banner strong{color:#7a4f05}

.legal-card{margin-top:26px;padding:14px 4px}
.legal-section{padding:26px 0;border-top:1px solid var(--line)}
.legal-section:first-child{border-top:0}
.legal-section h2{margin:0 0 12px;font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:22px;letter-spacing:-.01em}
.legal-section h3{margin:20px 0 8px;font-size:16px;font-weight:800}
.legal-section p{margin:0 0 12px;color:#2a2d26}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul{margin:0 0 12px;padding-left:20px;color:#2a2d26}
.legal-section li{margin:0 0 7px}
.legal-placeholder{color:#7a4f05;background:#fdf3dc;padding:1px 6px;border-radius:5px;
  font-weight:700;font-size:.92em}

.legal-foot{max-width:820px;margin:0 auto;padding:26px 24px 60px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:var(--muted);font-size:13.5px}
/* The cookie-settings control is a <button> (it opens the consent dialog),
   styled to be indistinguishable from the sibling links. This page loads only
   legal.css, so the reset must live here too. */
.pm-consent-link{border:0;background:none;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
/* Standalone footer controls, not links inside a sentence, so WCAG 2.5.8's
   inline exemption does not apply — they measured 22px on every legal and
   marketing page. app.css gives .pm-consent-link 44px, but these pages load
   only this stylesheet. */
.legal-foot a,.legal-foot .pm-consent-link{display:inline-flex;align-items:center;min-height:24px;
  color:var(--muted);text-decoration:none}
.legal-foot a:hover,.legal-foot .pm-consent-link:hover{color:var(--ink)}
.legal-foot .sep{opacity:.5}

/* ---------------------------------------------------------------------------
   Help centre (/faq). Extends this sheet rather than adding a request; the FAQ
   page loads only legal.css. Behaviour is in assets/faq.js — CSP forbids inline
   script, and the page must stay readable with JS off (answers render open and
   .faq-tools stays hidden until the script reveals it).
   --------------------------------------------------------------------------- */
.faq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.faq-tools{max-width:820px;margin:0 auto 18px;padding:0 24px}
.faq-search{position:relative;display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:0 14px;
  box-shadow:0 1px 2px rgba(17,19,15,.04)}
.faq-search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(48,71,32,.12)}
.faq-search svg{flex:0 0 auto;color:var(--muted)}
.faq-search input{flex:1 1 auto;border:0;background:none;padding:13px 0;font:inherit;
  font-size:16px;color:var(--ink);min-width:0}
.faq-search input:focus{outline:none}
.faq-search input::-webkit-search-cancel-button{display:none}
.faq-clear{flex:0 0 auto;border:0;background:none;color:var(--muted);font-size:22px;
  line-height:1;cursor:pointer;padding:0 2px}
.faq-clear:hover{color:var(--ink)}
.faq-toolbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  justify-content:space-between;margin-top:10px;min-height:22px}
.faq-count{margin:0;color:var(--muted);font-size:13.5px}
.faq-toggle-all{border:0;background:none;padding:0;color:var(--green);font:inherit;
  display:inline-flex;align-items:center;min-height:24px;
  font-size:13.5px;font-weight:700;cursor:pointer}
.faq-toggle-all:hover{text-decoration:underline}

.faq-jump{max-width:820px;margin:0 auto 20px;padding:0 24px;display:flex;flex-wrap:wrap;gap:8px}
.faq-jump a{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--ink);
  text-decoration:none;font-size:13.5px;font-weight:600}
.faq-jump a:hover{border-color:var(--green);color:var(--green)}
.faq-jump span{color:var(--muted);font-weight:500;font-size:12.5px}

.faq-item{border-top:1px solid var(--line)}
.faq-item:first-of-type{border-top:0}
.faq-item h3{margin:0}
.faq-q{display:flex;width:100%;gap:16px;align-items:flex-start;justify-content:space-between;
  border:0;background:none;padding:15px 0;margin:0;font:inherit;font-size:16px;font-weight:800;
  color:var(--ink);text-align:left;cursor:pointer}
.faq-q:hover{color:var(--green)}
.faq-q:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.faq-q svg{flex:0 0 auto;margin-top:2px;color:var(--muted);transition:transform .18s ease}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{padding:0 0 16px}
.faq-a p{margin:0 0 12px}
.faq-a p:last-child{margin-bottom:0}
.faq-a code{background:#f1efe9;border-radius:4px;padding:1px 5px;font-size:.92em}
.faq-empty{max-width:820px;margin:0 auto 20px;padding:0 24px;color:var(--muted)}

@media (max-width:640px){
  .faq-tools,.faq-jump,.faq-empty{padding:0 16px}
  .faq-q{font-size:15.5px;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .faq-q svg{transition:none}
}
