body{font-family:Poppins,system-ui,sans-serif;margin:0;background:#f2f3f8;color:#0b0b14;line-height:1.6}
main{max-width:680px;margin:0 auto;padding:28px 18px 60px}
h1{font-size:2rem;margin:.4em 0}
h2{font-size:1.1rem;margin:1.6em 0 .4em}
a{color:#2d54d6}
ul{padding-left:1.2em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body{background:#0d0f1e;color:#f4f5fb}:root:not([data-theme="light"]) a{color:#8fa6ff}}
:root[data-theme="dark"] body{background:#0d0f1e;color:#f4f5fb}
:root[data-theme="dark"] a{color:#8fa6ff}

.draft{background:#FFF1D6;border:2px solid #0b0b14;border-radius:12px;padding:10px 14px;font-size:.9rem}
mark.add{background:#FFE98A;padding:0 4px;border-radius:4px;font-weight:600}
nav.legal{margin-top:2.4em;padding-top:1em;border-top:1px solid rgba(0,0,0,.15);font-size:.9rem}

/* on a phone: the links you tap to get around are real buttons, and links inside sentences have room around them */
@media (max-width:720px){
  main{line-height:1.6}
  main>p:first-child a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  nav.legal{display:flex;flex-wrap:wrap;align-items:center}
  nav.legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
}
@media (max-width:720px){main p a,main li a{padding:2px 0}}   /* a link inside a sentence gets a little vertical room, without moving the text */
.draft{color:#3b2500}                 /* its background is always pale, so its text must always be dark (in dark mode it inherited light text and vanished) */
:root .draft a{color:#2d54d6}

/* ---------------------------------------------------------------- Phone (720px and under): a calm, readable document
   A slim "Back" bar that stays on screen, a smaller draft note, a clear title, and every numbered section separated by a hairline.
   Desktop is untouched: everything below is inside the media query. */
:root{--lg-bg:#fff;--lg-line:rgba(11,11,20,.12);--lg-mut:#5a6075}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--lg-bg:#0d0f1e;--lg-line:rgba(244,245,251,.16);--lg-mut:#a5aac6}}
:root[data-theme="dark"]{--lg-bg:#0d0f1e;--lg-line:rgba(244,245,251,.16);--lg-mut:#a5aac6}
@media (max-width:720px){
  body{background:var(--lg-bg);font-size:15px;line-height:1.65}
  main{padding:0 20px 56px}
  main>p:first-child{position:sticky;top:0;z-index:5;margin:0 -20px 14px;padding:0 20px;background:var(--lg-bg);border-bottom:1px solid var(--lg-line)}
  main>p:first-child a{min-height:52px;font-size:.95rem;font-weight:600;text-decoration:none}
  .draft{border:0;border-left:4px solid #E0A100;border-radius:8px;padding:10px 12px;font-size:.8rem;line-height:1.5;margin:0 0 16px}
  h1{font-size:1.65rem;line-height:1.2;letter-spacing:-.01em;margin:.35em 0 .25em}
  h2{font-size:1.05rem;line-height:1.35;margin:1.8em 0 .4em;padding-top:1.1em;border-top:1px solid var(--lg-line)}
  main p{margin:.6em 0}
  ul{padding-left:1.15em}
  li{margin:.4em 0}
  mark.add{font-size:.88em;padding:1px 5px;line-height:1.9}
  nav.legal{margin-top:2.2em;padding-top:1em;border-top:1px solid var(--lg-line);gap:2px 4px}
  nav.legal a{min-height:44px;border:1px solid var(--lg-line);border-radius:999px;padding:0 14px;margin:0 4px 8px 0;text-decoration:none;font-weight:600;font-size:.85rem}
}


/* LAPTOP LOOK: the same aurora backdrop and a glass sheet as the app (721px and up; the phone is untouched) */
@media (min-width:721px){
  :root{--lp-bg:#F3F4FB;--lp-sheet:rgba(255,255,255,.84);--lp-line:rgba(24,30,84,.09)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lp-bg:#0A0C1B;--lp-sheet:rgba(24,28,56,.78);--lp-line:rgba(255,255,255,.09)}}
  :root[data-theme="dark"]{--lp-bg:#0A0C1B;--lp-sheet:rgba(24,28,56,.78);--lp-line:rgba(255,255,255,.09)}
  body{background:radial-gradient(1000px 560px at 6% -10%,rgba(74,104,255,.20),transparent 62%),radial-gradient(900px 560px at 104% 0%,rgba(176,92,246,.15),transparent 62%),var(--lp-bg);background-attachment:fixed;padding:30px 18px 70px}
  main{max-width:840px;background:var(--lp-sheet);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--lp-line);border-radius:32px;box-shadow:0 2px 4px rgba(24,30,84,.04),0 24px 60px rgba(58,78,190,.13);padding:34px 54px 54px}
  h1{font-size:2.6rem;letter-spacing:-.03em;line-height:1.12}
  h2{font-size:1.2rem;margin:1.9em 0 .5em;letter-spacing:-.01em}
  main>p:first-child a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(58,95,230,.10);font-weight:600;text-decoration:none}
  .draft{border:1px solid rgba(180,120,20,.4);border-radius:18px;padding:14px 18px}
  nav.legal{border-top-color:var(--lp-line)}
}