/* The public pages (privacy, terms, methodology), in one stylesheet.
 *
 * Each page carried this in a <style> block, which is what kept 'unsafe-inline'
 * in the site's style-src. Served from here, style-src is 'self' and an injected
 * <style> or stylesheet is refused everywhere (HawkScan, 30 Sep 2026).
 *
 * The app's palette, kept in step with css/app.css: a page a shade off reads as
 * a different site, the last thing a privacy policy should do. Ratios on
 * --surface: text 16.5:1, dim 11.2:1, faint 6.8:1. */
  :root{ --bg:#0A0906; --surface:#221D14; --text:#FFFDF7; --dim:#DCD2BE; --faint:#B3A488;
         --border:#6E6247; --accent:#E2703A; --warn:#E5C14C; --good:#7CE38B; }
  *{box-sizing:border-box}
  body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter', 'IBM Plex Sans Arabic', system-ui,sans-serif;
        -webkit-font-smoothing:antialiased; line-height:1.65; }
  .wrap{ max-width:720px; margin:0 auto; padding:48px 22px 96px; }
  .brand{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
          padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:36px;
          display:flex; justify-content:space-between; align-items:baseline; }
  /* The way back is a 44px target with a drawn arrow, as in the app (29 Oct). */
  .brand a{ color:var(--accent); text-decoration:none; font-size:15px; letter-spacing:0; text-transform:none;
            display:inline-flex; align-items:center; gap:6px; min-block-size:44px; }
  .brand a::before{ content:""; inline-size:16px; block-size:16px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4.5M8.75 5.75 4.5 10l4.25 4.25'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4.5M8.75 5.75 4.5 10l4.25 4.25'/%3E%3C/svg%3E") center / contain no-repeat; }
  h1{ font-family:'Inter', 'IBM Plex Sans Arabic', system-ui,sans-serif; font-weight:800; letter-spacing:-0.025em; font-size:32px; margin:0 0 8px; }
  .updated{ font-size:13px; color:var(--faint); margin-bottom:28px; }
  h2{ font-size:18px; font-weight:600; margin:34px 0 10px;
      padding-top:14px; border-top:1px solid var(--border); }
  h3{ font-size:17px; font-weight:600; margin:22px 0 8px; color:var(--text); }
  /* The app's scale (--t-*): body 17px, nothing read under 13 (14 Oct rule). */
  p, li{ font-size:17px; color:var(--dim); }
  li{ margin-bottom:7px; }
  strong{ color:var(--text); font-weight:500; }
  /* Tinted, not railed, and rounded from the app's scale (--r-md, 14px):
     the same callout the app draws, so the page reads as the same product. */
  .notice{ background:color-mix(in srgb, var(--warn) 9%, var(--surface));
           box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 26%, transparent);
           padding:14px 16px; border-radius:14px; margin:0 0 32px; font-size:15px; }
  .notice.good{ background:color-mix(in srgb, var(--good) 9%, var(--surface));
                box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--good) 26%, transparent); }
  table{ width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:15px; }
  th,td{ text-align:start; padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
  th{ color:var(--faint); font-size:13px; font-weight:600; }
  td{ color:var(--dim); }
  td:first-child{ color:var(--text); }
  .formula{ font-family:'IBM Plex Mono',monospace; font-size:13px; white-space:nowrap; background:var(--surface);
            border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin:14px 0;
            color:var(--text); overflow-x:auto; line-height:1.8; }
  .formula .c{ color:var(--faint); }
  code{ font-family:'IBM Plex Mono',monospace; font-size:.92em; color:var(--text); }
  footer{ margin-top:48px; padding-top:20px; border-top:1px solid var(--border);
          font-size:13px; color:var(--faint); }