/* JoulesCloud — shared styles for legal / utility pages */

:root{
  --ground:#EFF2EE; --paper:#FFFFFF; --paper-2:#F7F9F6;
  --ink:#0F1917; --ink-soft:#48544F; --ink-faint:#727d78;
  --line:#D7DDD5; --line-strong:#c3cbc1;
  --accent:#0B6E5D; --accent-deep:#084C41;
  --maxw:760px;
}
/* Light is the default. Dark only when the user picks it. */
:root[data-theme="dark"]{
  --ground:#0A100F; --paper:#121D1B; --paper-2:#0E1716;
  --ink:#E9EFEC; --ink-soft:#A0ADA8; --ink-faint:#7c8883;
  --line:#243330; --line-strong:#324540;
  --accent:#43C1A8; --accent-deep:#7FDCCB;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
h1,h2,h3{font-family:"Archivo","Arial Narrow",Arial,sans-serif;letter-spacing:-.02em;line-height:1.15;margin:0}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;transition:top .15s}
.skip:focus{top:12px}

.topbar{position:sticky;top:0;z-index:50;background:var(--ground);border-bottom:1px solid var(--line)}
.topbar .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.02em;font-size:16px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .glyph{width:24px;height:24px;flex:0 0 24px;border-radius:6px;background:var(--accent);position:relative;overflow:hidden}
.brand .glyph::before,.brand .glyph::after{content:"";position:absolute;background:var(--paper)}
.brand .glyph::before{left:5px;right:5px;height:3px;top:6px;box-shadow:0 5px 0 var(--paper)}
.brand .glyph::after{top:5px;bottom:5px;width:3px;left:8px;opacity:.55}
.topbar nav{margin-left:auto;display:flex;gap:18px;font-size:14px}
.topbar nav a{color:var(--ink-soft);text-decoration:none}
.topbar nav a:hover{color:var(--ink)}

main{max-width:var(--maxw);margin:0 auto;padding:48px 24px 72px}
.legal-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
main h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;margin-bottom:10px}
main .updated{color:var(--ink-faint);font-size:.86rem;margin-bottom:36px}
main h2{font-size:1.2rem;margin:34px 0 10px}
main h3{font-size:1rem;margin:22px 0 8px}
main p,main li{color:var(--ink-soft)}
main p{margin:0 0 14px}
main ul,main ol{margin:0 0 14px;padding-left:22px}
main li{margin-bottom:6px}
main .box{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:18px 0}
main .box p:last-child{margin-bottom:0}
main .todo{background:color-mix(in srgb,var(--accent) 12%,var(--paper));border-color:var(--accent)}
main strong{color:var(--ink)}
main table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
main th,main td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
main th{background:var(--paper-2);font-weight:600;color:var(--ink)}

.site-footer{border-top:1px solid var(--line);padding:30px 0;color:var(--ink-faint);font-size:.82rem}
.site-footer .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.site-footer a{color:var(--ink-faint);text-decoration:none}
.site-footer a:hover{color:var(--accent)}

.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--paper);border-top:1px solid var(--line-strong);box-shadow:0 -8px 30px -12px rgba(0,0,0,.25);padding:16px 20px}
.consent[hidden]{display:none}
.consent .wrap{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.consent p{font-size:.86rem;color:var(--ink-soft);flex:1 1 300px;margin:0}
.consent .c-actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;font:600 13px/1 "IBM Plex Sans",sans-serif;padding:9px 16px;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{border-color:var(--line-strong);background:transparent;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}