/* Shared styles for Coatables content pages (terms / privacy / about / docs).
   Mirrors the landing brand skin (instrument teal, IBM Plex), light/clinical. */
:root{
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;--font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --text-xs:clamp(0.6875rem,0.66rem + 0.12vw,0.75rem);--text-sm:clamp(0.8125rem,0.77rem + 0.20vw,0.9375rem);--text-base:clamp(0.9375rem,0.88rem + 0.26vw,1.0625rem);--text-lg:clamp(1.0625rem,1.0rem + 0.28vw,1.25rem);--text-2xl:clamp(1.375rem,1.24rem + 0.59vw,1.75rem);--text-3xl:clamp(1.75rem,1.55rem + 0.85vw,2.25rem);
  --leading-normal:1.6;--tracking-tight:-0.025em;--tracking-wide:0.025em;
  --space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --page-x:clamp(20px,5vw,32px);--radius-sm:8px;--radius-md:12px;--radius-full:9999px;
  --ease-soft:cubic-bezier(0.4,0,0.2,1);--dur-fast:150ms;
  --bg:#F4F7F6;--surface:#FFFFFF;--fg:#0B1F26;--fg-muted:#46595f;--fg-dim:#7a8b8f;
  --edge:#E3EAE8;--edge-strong:#cdd8d5;--accent:#0D9488;--accent-hover:#0F766E;
  --ink:#0B1F26;--ink-2:#0F2A32;--ink-muted:#9DB3B5;--ink-dim:#6E8688;--shadow-sm:0 1px 2px rgba(11,31,38,.06);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-soft)}a:hover{color:var(--accent-hover)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.mono{font-family:var(--font-mono)}
code{font-family:var(--font-mono);font-size:.92em;background:#eef3f1;padding:1px 5px;border-radius:6px;color:var(--ink)}

/* nav — matches the app nav (72px light bar) */
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 var(--page-x);border-bottom:1px solid var(--edge);background:rgba(255,255,255,.85);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:var(--space-3)}.brand svg{width:30px;height:30px}.brand b{font-weight:600;font-size:var(--text-lg);letter-spacing:var(--tracking-tight);color:var(--ink)}
.nav .home{display:inline-flex;align-items:center;gap:6px;color:var(--fg-muted);font-size:var(--text-sm);font-weight:500}.nav .home:hover{color:var(--ink)}.nav .home svg{width:15px;height:15px}

/* prose column */
main{flex:1}
.wrap{max-width:760px;margin:0 auto;padding:var(--space-16) var(--page-x)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--accent);margin-bottom:var(--space-3)}
h1{font-size:var(--text-3xl);font-weight:700;letter-spacing:var(--tracking-tight);text-wrap:balance;margin-bottom:var(--space-3)}
.updated{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-dim);margin-bottom:var(--space-10)}
h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:var(--tracking-tight);text-wrap:balance;margin:var(--space-12) 0 var(--space-4)}
h3{font-size:var(--text-lg);font-weight:600;margin:var(--space-8) 0 var(--space-3)}
p{font-size:var(--text-base);color:var(--fg-muted);margin-bottom:var(--space-4)}
.lead{font-size:var(--text-lg);color:var(--fg);margin-bottom:var(--space-8)}
ul,ol{color:var(--fg-muted);font-size:var(--text-base);margin:0 0 var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
strong{color:var(--fg)}
.note{background:var(--surface);border:1px solid var(--edge);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:var(--space-6) 0}
.note p{margin:0;font-size:var(--text-sm)}
table.t{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin:var(--space-4) 0}
table.t th,table.t td{text-align:left;padding:var(--space-3) var(--space-3);border-bottom:1px solid var(--edge);vertical-align:top}
table.t th{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-dim);font-weight:500}
table.t td.k{font-family:var(--font-mono);color:var(--ink);white-space:nowrap}

/* footer — ink, matches landing endcap */
footer{background:var(--ink);color:var(--ink-muted);padding:var(--space-12) var(--page-x) var(--space-10)}
.fwrap{max-width:760px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-6);align-items:center}
footer .links{display:flex;gap:var(--space-5);flex-wrap:wrap}
footer a{color:var(--ink-muted)}footer a:hover{color:#fff}
footer .mk{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-dim)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}