/* Exolution legal pages — the product's own "Lumen" palette
   (reference/design/mockups/bench2.html) so these read as part of the app,
   not as a bolt-on document. Light and dark are both defined. */
:root{
  --bg:#f3f7f9; --bg-2:#e9f1f5; --card:#ffffff;
  --hair:#dde8ee; --hair2:#eaf1f5;
  --ink:#102331; --ink-2:#3d5666; --ink-3:#6d8495; --ink-4:#9db1bf;
  --navy:#185078; --deep:#0e3a5a; --teal:#267295; --azure:#2e8cb8; --sky:#6fb7dc;
  --ice:#e6f0f5; --mint:#17b8a2; --mint-bg:#e2f6f2;
  --pend:#e08e00; --pend-bg:#fdf3de;
  --r:14px; --r-lg:18px;
  --shadow:0 1px 2px rgba(24,80,120,.05), 0 14px 34px -18px rgba(24,80,120,.22);
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0a1a24; --bg-2:#0e2531; --card:#122c3a;
    --hair:#1d3f52; --hair2:#17323f;
    --ink:#e8f1f6; --ink-2:#adc4d2; --ink-3:#7e97a8; --ink-4:#5d7488;
    --navy:#6fb7dc; --deep:#8ecbe8; --teal:#59a6c4; --azure:#6fc2e6; --sky:#9ad6f0;
    --ice:#16374a; --mint:#3fd8c0; --mint-bg:#0f3a37;
    --pend:#f0b64a; --pend-bg:#3a2c10;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 420px at 82% -12%, rgba(47,198,255,.10), transparent 62%),
    radial-gradient(760px 360px at -8% 8%, rgba(23,184,162,.09), transparent 60%);
  background-attachment:fixed;
}

/* Header — the hexagon wordmark on the product's deep navy. */
/* The brand bar keeps the product's navy in BOTH themes — the white wordmark
   is drawn for this ground, and a brand bar that changes colour with the OS
   setting stops reading as the brand. Literal values, deliberately. */
.masthead{
  background:linear-gradient(135deg,#0e3a5a 0%,#123f61 55%,#267295 130%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.masthead .inner{
  max-width:54rem; margin:0 auto; padding:1.5rem 1.4rem 1.6rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.masthead a.brand{display:block; line-height:0}
.masthead img{height:38px; width:auto; display:block}
.masthead .tag{
  margin-left:auto; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.26); border-radius:999px; padding:.32rem .7rem;
}

.wrap{max-width:54rem; margin:0 auto; padding:2.4rem 1.4rem 5rem}

h1{font-size:clamp(1.7rem,3.6vw,2.15rem); line-height:1.18; margin:0 0 .35rem; letter-spacing:-.01em}
h2{
  font-size:1.12rem; margin:0 0 .7rem; letter-spacing:-.005em;
  display:flex; align-items:center; gap:.6rem;
}
h2::before{
  content:""; width:9px; height:9px; flex:none; border-radius:2px;
  background:linear-gradient(135deg,var(--teal),var(--azure));
  transform:rotate(45deg);
}
p,li,td{color:var(--ink-2)}
.meta{color:var(--ink-3); font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 2rem}

/* Framed sections — the dashboard idiom. */
section{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:1.4rem 1.5rem; margin:0 0 1.1rem;
}
section > *:last-child{margin-bottom:0}
p+p{margin-top:.8rem}
p{margin:0}

.lede{font-size:1.05rem; color:var(--ink-2)}

table{border-collapse:collapse; width:100%; margin:.5rem 0 0; font-size:.94rem}
th,td{text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--hair2); vertical-align:top}
tr:last-child td{border-bottom:0}
th{
  color:var(--ink-3); font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; background:var(--ice);
}
th:first-child{border-top-left-radius:8px; width:38%} th:last-child{border-top-right-radius:8px}
td br{content:""; display:block; margin-bottom:.3rem}

ol,ul{margin:.3rem 0 0; padding-left:1.25rem}
li{margin:.4rem 0}
li::marker{color:var(--azure)}

.note{
  background:var(--mint-bg); border:1px solid rgba(23,184,162,.28);
  border-left:3px solid var(--mint); border-radius:var(--r);
  padding:.95rem 1.1rem; margin:1rem 0 0;
}
.note.warn{background:var(--pend-bg); border-color:rgba(224,142,0,.3); border-left-color:var(--pend)}
.note p{color:var(--ink-2)}
.note strong{color:var(--ink)}

a{color:var(--teal); text-underline-offset:2px}
a:hover{color:var(--azure)}

/* Same reasoning as the brand bar: fixed brand navy so white text always has
   its contrast, whichever theme the reader is in. */
.cta{
  display:inline-block; margin:.9rem 0 .2rem; padding:.78rem 1.3rem;
  background:linear-gradient(135deg,#185078,#267295);
  color:#fff; text-decoration:none; font-weight:700; border-radius:var(--r);
  box-shadow:0 10px 24px -12px rgba(24,80,120,.7);
}
.cta:hover{color:#fff; filter:brightness(1.07)}

footer{
  max-width:54rem; margin:0 auto; padding:0 1.4rem 4rem;
  color:var(--ink-3); font-size:.86rem;
}
footer .bar{
  border-top:1px solid var(--hair); padding-top:1.1rem;
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
}
footer a{color:var(--ink-3)}
footer .sep{color:var(--ink-4)}
:focus-visible{outline:2px solid var(--azure); outline-offset:2px}
@media (max-width:560px){
  .masthead .tag{margin-left:0}
  section{padding:1.15rem 1.1rem}
}