/* Shared styling for the standalone legal pages (terms.html, privacy.html).
   Kept as its own file so both pages stay identical and the app's CSP needs no inline-style
   allowance beyond what Aurora.html already uses. */
:root{
  --navy:#0d1420; --panel:#131c2e; --panel-2:#1b2740; --line:#26334f;
  --cloud:#e8ecf1; --steel:#b7c0cd; --steel-dim:#7a879c;
  --cyan:#4fd1c5; --amber:#f0b15a; --red:#f06e6e;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--navy); color:var(--cloud);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.7;
  -webkit-text-size-adjust:100%;}
.wrap{max-width:820px; margin:0 auto; padding:32px 22px 80px;}
header{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:26px;}
.mark{font-size:22px; font-weight:900; letter-spacing:1px; text-decoration:none; color:var(--cloud);
  font-family:'Big Shoulders Display',Inter,sans-serif;}
.mark span{color:var(--amber);}
.eyebrow{font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--steel-dim); margin-top:4px;}
h1{font-size:clamp(26px,4vw,34px); line-height:1.2; margin:26px 0 6px; font-weight:800; text-wrap:balance;}
.meta{font-size:12.5px; color:var(--steel-dim); font-family:'IBM Plex Mono',ui-monospace,monospace; margin-bottom:26px;}
h2{font-size:17px; margin:34px 0 10px; color:var(--cyan); font-weight:700;}
h3{font-size:14.5px; margin:22px 0 6px; color:var(--cloud); font-weight:700;}
p,li{font-size:14.5px; color:var(--steel);}
p{margin:10px 0;}
ul{padding-left:22px; margin:10px 0;}
li{margin:6px 0;}
strong{color:var(--cloud);}
a{color:var(--cyan);}
/* The review banner. Deliberately loud — this text must not reach a customer unreviewed. */
.review{background:rgba(240,177,90,.1); border:1px solid rgba(240,177,90,.45); border-radius:10px;
  padding:14px 18px; margin:0 0 8px;}
.review-t{font-weight:800; color:var(--amber); font-size:13px; letter-spacing:.4px; text-transform:uppercase;}
.review p{margin:6px 0 0; font-size:13.5px; color:var(--cloud);}
/* Inline "needs a real answer" markers inside the body copy. */
/* Must wrap: some of these markers are a full sentence, and nowrap pushed the page into
   horizontal scroll on every viewport. */
.todo{background:rgba(240,110,110,.14); border:1px solid rgba(240,110,110,.4); border-radius:4px;
  padding:0 5px; color:var(--red); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.88em;
  overflow-wrap:break-word;}
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px;}
th,td{text-align:left; padding:9px 12px; border:1px solid var(--line); vertical-align:top; color:var(--steel);}
th{background:var(--panel-2); color:var(--cloud); font-weight:700;}
.scroll{overflow-x:auto;}
footer{margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--steel-dim); display:flex; gap:18px; flex-wrap:wrap;}
@media (max-width:520px){ .wrap{padding:22px 16px 60px;} }