/* Simple Smooth Safe — long-form document pages.
 *
 * Used by /legal/, /about/, /security/ and /case-studies/. Lives in /assets/
 * rather than /legal/ because it stopped being legal-specific.
 *
 * The rest of the site inlines its CSS, which is right for pages that are each
 * a different design and are entered cold from search or a shared link. The
 * legal pages are the opposite: seven siblings that must look identical and
 * will be edited together whenever a term changes. Inlining the same 300 lines
 * seven times is how they drift apart. One stylesheet, one request, cached
 * across all of them.
 *
 * Tokens mirror the product pages (docgen/, psa-hub/, dms/) exactly, with one
 * deliberate change: --accent is the darker teal. #0891b2 on white is 3.68:1,
 * which fails WCAG AA for body text, and a legal page is nothing but body text.
 * #0e7490 is 5.36:1. See todo.md P1-2 — the same swap is owed to the rest of
 * the site.
 */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --sss-teal:#0891b2;
  --sss-teal-dark:#0e7490;
  --sss-teal-bright:#22d3ee;   /* dark-theme accent — 9.88:1 on slate-900 */
  --sss-teal-light:#ecfeff;
  --sss-white:#ffffff;
  --sss-slate-50:#f8fafc;
  --sss-slate-200:#e2e8f0;
  --sss-slate-300:#cbd5e1;
  /* Referenced by --fg-muted in both dark blocks below. It was missing, so on
     dark --fg-muted resolved to nothing and every muted element — the kicker,
     the .meta line, table headers, the footer — fell back to inherited body
     colour. Same value the rest of the site uses for slate-400. */
  --sss-slate-400:#94a3b8;
  --sss-slate-500:#64748b;
  --sss-slate-700:#334155;
  --sss-slate-800:#1e293b;
  --sss-slate-900:#0f172a;

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;

  --fs-display:34px; --fs-h2:23px; --fs-h3:18px; --fs-h4:15px;
  --fs-lead:18px; --fs-body:16px; --fs-sm:15px; --fs-detail:14px;
  --fs-xs:13px; --fs-micro:12px;

  --fw-regular:400; --fw-bold:700;
  --radius-md:12px; --radius-pill:9999px;

  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Consolas,'Liberation Mono',monospace;

  --bg:var(--sss-white);
  --bg-card:var(--sss-white);
  --bg-subtle:var(--sss-slate-50);
  --bg-accent-soft:var(--sss-teal-light);
  --fg-primary:var(--sss-slate-800);
  --fg-body:var(--sss-slate-700);
  --fg-muted:var(--sss-slate-500);
  --accent:var(--sss-teal-dark);
  --border-color:var(--sss-slate-200);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08);
  --shadow-card-hover:0 4px 12px rgba(15,23,42,.08);
  color-scheme:light dark;
}

/* Dark theme.
   --bg-subtle deliberately diverges from the product pages, which collapse it
   onto the page background. Here it carries the masthead, the callouts and the
   table headers, so on dark it has to be a step lighter than --bg or all three
   disappear. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--sss-slate-900);
    --bg-card:var(--sss-slate-800);
    --bg-subtle:var(--sss-slate-800);
    --bg-accent-soft:var(--sss-slate-700);
    --fg-primary:var(--sss-slate-50);
    --fg-body:var(--sss-slate-300);
    --fg-muted:var(--sss-slate-400);
    --accent:var(--sss-teal-bright);
    --border-color:var(--sss-slate-700);
    --shadow-sm:0 1px 3px rgba(0,0,0,.40);
    --shadow-card-hover:0 4px 12px rgba(0,0,0,.45);
  }
}
[data-theme="dark"]{
  --bg:var(--sss-slate-900);
  --bg-card:var(--sss-slate-800);
  --bg-subtle:var(--sss-slate-800);
  --bg-accent-soft:var(--sss-slate-700);
  --fg-primary:var(--sss-slate-50);
  --fg-body:var(--sss-slate-300);
  --fg-muted:var(--sss-slate-400);
  --accent:var(--sss-teal-bright);
  --border-color:var(--sss-slate-700);
  --shadow-sm:0 1px 3px rgba(0,0,0,.40);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s-6)}
body{margin:0;background:var(--bg);color:var(--fg-body);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--fg-primary)}
a{color:var(--accent)}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--font-mono);font-size:.92em}
.wrap{max-width:760px;margin:0 auto;padding:0 var(--s-6)}

/* MASTHEAD — every legal page carries a way back to the site it governs */
.masthead{border-bottom:1px solid var(--border-color);background:var(--bg-subtle)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-4);padding-bottom:var(--s-4)}
.masthead .brand{font-weight:var(--fw-bold);color:var(--fg-primary);font-size:var(--fs-sm);
  text-decoration:none}
.masthead .brand span{color:var(--accent)}
.masthead nav{display:flex;gap:var(--s-5);flex-wrap:wrap;font-size:var(--fs-detail)}
.masthead nav a{text-decoration:none}
.masthead nav a:hover{text-decoration:underline}

/* HEAD */
header.doc-head{padding:var(--s-16) 0 var(--s-8);border-bottom:1px solid var(--border-color)}
.kick{color:var(--fg-muted);font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s-4)}
h1{font-size:var(--fs-display);line-height:1.2;margin:0 0 var(--s-4);letter-spacing:-.02em}
.doc-head .sub{font-size:var(--fs-lead);color:var(--fg-body);margin:0 0 var(--s-6)}
.meta{display:flex;gap:var(--s-6);flex-wrap:wrap;font-family:var(--font-mono);
  font-size:var(--fs-micro);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.05em}

/* BODY */
main{padding:var(--s-10) 0 var(--s-16)}
h2{font-size:var(--fs-h2);margin:var(--s-12) 0 var(--s-4);letter-spacing:-.01em}
h2:first-child{margin-top:0}
h3{font-size:var(--fs-h3);margin:var(--s-8) 0 var(--s-3)}
p{margin:0 0 var(--s-4)}
ul,ol{margin:0 0 var(--s-4);padding-left:var(--s-6)}
li{margin-bottom:var(--s-2)}
strong{color:var(--fg-primary)}

/* CALLOUT — the identity block and anything a reader must not skim past */
.callout{background:var(--bg-subtle);border:1px solid var(--border-color);
  border-radius:var(--radius-md);padding:var(--s-5) var(--s-6);margin:0 0 var(--s-6)}
.callout.accent{background:var(--bg-accent-soft)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout .lbl{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--s-3)}

/* TABLES */
.table-wrap{overflow-x:auto;border:1px solid var(--border-color);border-radius:var(--radius-md);
  margin:0 0 var(--s-6);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-muted);font-weight:var(--fw-bold);text-align:left;
  padding:var(--s-3) var(--s-5);background:var(--bg-subtle);border-bottom:1px solid var(--border-color);
  white-space:nowrap}
td{padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--border-color);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num{text-align:right;white-space:nowrap;font-weight:var(--fw-bold);color:var(--fg-primary)}

/* INDEX CARDS */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin:0 0 var(--s-8)}
.doc-card{display:block;background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-md);padding:var(--s-5) var(--s-6);box-shadow:var(--shadow-sm);
  text-decoration:none;transition:.2s}
.doc-card:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;
  box-shadow:var(--shadow-card-hover)}
.doc-card h3{margin:0 0 var(--s-2);font-size:var(--fs-h4);color:var(--fg-primary)}
.doc-card p{margin:0;font-size:var(--fs-detail);color:var(--fg-body)}

/* FOOTER */
footer{border-top:1px solid var(--border-color);padding:var(--s-8) 0 var(--s-16);
  color:var(--fg-muted);font-size:var(--fs-xs)}
footer .links{margin-bottom:var(--s-4);display:flex;gap:var(--s-5);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-detail)}

a:focus-visible,.doc-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:4px}

@media(max-width:720px){
  :root{--fs-display:26px;--fs-h2:20px}
  .doc-grid{grid-template-columns:1fr}
  header.doc-head{padding-top:var(--s-10)}
  .meta{gap:var(--s-3)}
}

/* BEFORE / AFTER — the two-column comparison the product pages use. Added here
   so the case studies can make the same argument in the same shape. */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin:0 0 var(--s-6)}
.ba .card{background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-md);padding:var(--s-5) var(--s-6);box-shadow:var(--shadow-sm)}
.ba .card .lbl{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.05em;
  margin-bottom:var(--s-3)}
.ba .card.before .lbl{color:#b91c1c}
.ba .card.after .lbl{color:#15803d}
.ba .card ul{margin:0;padding-left:var(--s-5);font-size:var(--fs-detail)}
.ba .card li{margin-bottom:var(--s-2)}
tr.total td{border-top:2px solid var(--border-color);font-weight:var(--fw-bold);
  color:var(--fg-primary)}
@media(max-width:720px){.ba{grid-template-columns:1fr}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ba .card.before .lbl{color:#f87171}
  :root:not([data-theme="light"]) .ba .card.after .lbl{color:#4ade80}
}