/* ============================================================
   CIVISTO - DOCUMENT PAGES
   Shared by the legal pages. Same palette, type and rhythm as the
   landing page, at the one width prose wants; there is no artwork
   here and nothing that needs the landing page's machinery.
   404.html deliberately does NOT use this file - an error page has
   to render even when a stylesheet fails to load, so it carries its
   own styles inline.
   ============================================================ */

@font-face{font-family:'Aspekta';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/aspekta-400.woff2) format('woff2');}
@font-face{font-family:'Aspekta';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/aspekta-500.woff2) format('woff2');}
@font-face{font-family:'Aspekta';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/aspekta-600.woff2) format('woff2');}
@font-face{font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bagel-fat-one-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F;}

:root{
  color-scheme:light;
  --green-900:#073127;
  --green-700:#004838;
  --lime:#E2FB6C;
  --slate:#333F3C;
  --mist:#EBEDE8;
  --white:#FFFFFF;
  --card:#F4F5F1;
  --line:#E4E7DF;
  --muted:#5E6B64;
  --f:"Aspekta","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --fd:"Bagel Fat One","Aspekta","Segoe UI",-apple-system,sans-serif;
  --gut:clamp(18px,4vw,44px);
  --e-out:cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--white); color:var(--slate);
  font-family:var(--f); font-size:16px; line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--green-700); text-underline-offset:2px; }
a:hover{ color:var(--green-900); }
:focus-visible{ outline:2px solid var(--green-700); outline-offset:3px; border-radius:4px; }
a,button{ -webkit-tap-highlight-color:transparent; }

.skip{
  position:absolute; top:10px; left:50%; transform:translate(-50%,-160%); z-index:100;
  background:var(--white); color:var(--green-900); border-radius:10px;
  padding:11px 18px; font-size:14px; font-weight:500; text-decoration:none;
  box-shadow:0 1px 2px rgba(7,49,39,.05), 0 12px 28px -18px rgba(7,49,39,.3);
  transition:transform .2s var(--e-out);
}
.skip:focus{ transform:translate(-50%,0); }

/* ---- bar ---- */
.bar{
  border-bottom:1px solid var(--line); background:rgba(235,237,232,.5);
  position:sticky; top:0; z-index:10; backdrop-filter:blur(18px) saturate(170%);
}
.bar__in{
  max-width:820px; margin-inline:auto; padding:0 var(--gut);
  height:66px; display:flex; align-items:center; gap:20px;
}
.brand{ display:inline-flex; text-decoration:none; }
.brand__w{
  font-family:var(--fd); font-size:22px; font-weight:400;
  letter-spacing:.002em; line-height:1; color:var(--green-900);
}
.bar__back{
  margin-left:auto; font-size:14px; font-weight:500; text-decoration:none; color:var(--green-900);
}
.bar__back:hover{ color:var(--green-700); }

/* ---- prose ---- */
.doc{
  max-width:820px; margin-inline:auto; padding:clamp(44px,7vw,84px) var(--gut) clamp(64px,9vw,110px);
}
.doc__k{
  display:inline-flex; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-900);
}
h1{
  margin:20px 0 0; color:var(--green-900); font-weight:600;
  font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:-.034em; text-wrap:balance;
}
.doc__d{ margin:14px 0 0; color:var(--muted); font-size:15px; }
h2{
  margin:clamp(38px,5vw,56px) 0 0; color:var(--green-900); font-weight:600;
  font-size:clamp(20px,2.6vw,25px); line-height:1.18; letter-spacing:-.019em;
}
h3{
  margin:26px 0 0; color:var(--green-900); font-weight:600;
  font-size:17px; line-height:1.2; letter-spacing:-.015em;
}
p{ margin:14px 0 0; }
ul{ margin:14px 0 0; padding-left:22px; }
li{ margin-top:7px; }
li::marker{ color:var(--green-700); }
strong{ color:var(--green-900); font-weight:600; }

/* A fact the operator still has to supply. Deliberately loud: this is the
   one thing on the page that must not survive to production unnoticed. */
/* These wrap like any other run of text. Holding them on one line pushed the
   longest placeholder past the viewport and put a horizontal scrollbar under
   the whole document; box-decoration-break keeps the highlight's padding and
   corners on every line rather than only the first. */
.todo{
  background:var(--lime); color:var(--green-900);
  padding:1px 7px; border-radius:5px; font-weight:600; font-size:.94em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

.note{
  margin:22px 0 0; padding:18px 20px; background:var(--card);
  border:1px solid var(--line);
  border-radius:12px; font-size:14.5px;
}
.note p{ margin-top:8px; }
.note p:first-child{ margin-top:0; }

table{ width:100%; margin-top:16px; border-collapse:collapse; font-size:14.5px; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ color:var(--green-900); font-weight:600; }
.tw{ overflow-x:auto; }

/* ---- foot ---- */
.foot{
  border-top:1px solid var(--line); background:var(--mist);
}
.foot__in{
  max-width:820px; margin-inline:auto; padding:26px var(--gut) 34px;
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  font-size:13.5px; color:var(--muted);
}
.foot__in a{ text-decoration:none; }
.foot__in a:hover{ text-decoration:underline; }
.foot__sep{ margin-left:auto; }

@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important; } }