/* Website version of the policy pages (terms, refund, privacy). make_site.py links this after legal.css.
   Screen only: the PDFs (print) are unchanged and always light. */
@media screen{
  :root{--page:#F6F5F1;--card:#FFFFFF;--line-2:#D5D2C8;color-scheme:light}
  /* Dark mode (switch in the studio header, assets/theme.js). Re-colors legal.css's tokens for the screen only. */
  :root[data-theme="dark"]{--ink:#F1F0EB;--ink-2:#D9D7D0;--muted:#ABA9A1;--line:#2E2D2A;--line-2:#45443F;--blue:#93A3FF;--blue-lt:#1F2550;--bg:#1B1B19;--page:#121211;--card:#1B1B19;color-scheme:dark}
  body{background:var(--page);color:var(--ink);padding:0;font-size:16px;line-height:1.6}
  :focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
  .page{max-width:820px;background:transparent;box-shadow:none;padding:36px 24px 56px}
  header{padding-bottom:14px;margin-bottom:18px}
  h1{font-size:52px}
  .studio{font-size:13px}.studio b{font-size:15px}
  .intro{font-size:17px;margin-bottom:16px}
  h2{font-size:19px;margin:26px 0 8px}
  ul{gap:6px}
  .note{font-size:14px}
  .callout{padding:16px 20px;margin:16px 0}
  .qa{grid-template-columns:240px 1fr;gap:10px 22px;margin-top:14px}
  .qa dt,.qa dd{padding-bottom:12px}
  footer{font-size:13px;margin-top:28px;padding-top:14px}
  a{color:var(--blue)}
  .ex{font-size:14px;margin-top:10px}.ex th,.ex td{padding:7px 8px}
}
@media screen and (max-width:640px){
  .page{padding:24px 18px 44px}
  header{flex-direction:column;align-items:flex-start;gap:10px}
  .studio{text-align:left}
  h1{font-size:40px}
  .qa{grid-template-columns:1fr;gap:0}
  .qa dt{border-bottom:0;padding:14px 0 4px}
  .qa dd{padding-bottom:14px}
  footer{flex-direction:column}
  /* refund examples: one card per row on phones */
  .ex,.ex tbody,.ex tr,.ex td{display:block;width:100%}
  .ex tr:first-child{display:none}
  .ex tr{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px;background:var(--card)}
  .ex td{border:0;padding:3px 0}
  .ex td:first-child{font-weight:700}
  .ex td:nth-child(2)::before{content:"2 payments: ";font-weight:600}
  .ex td:nth-child(3)::before{content:"3 payments: ";font-weight:600}
}