/* Cloisa v3 — shared stylesheet. No scripts, no third-party requests anywhere on this site. */
:root{
  --bg:#FAF8F3; --bg-2:#F3EFE6; --ink:#171410; --muted:#5E584C; --faint:#8A8375;
  --rule:#E4DECF; --rule-soft:#ECE7DA;
  --accent:#153F3A; --accent-ink:#0F2F2B; --accent-soft:#E9EFEC; --accent-line:#BFD2CC;
  --card:#FFFFFF; --card-edge:#E7E1D2;
  --warn-soft:#F6F0E2;
  --ok:#1D6B4F; --ok-soft:#E7F2EC;
  --flag:#8A5A12; --flag-soft:#F7EDD8;
  --serif:ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#11100E; --bg-2:#161512; --ink:#F1EEE7; --muted:#A8A193; --faint:#7C766A;
    --rule:#2B2924; --rule-soft:#232119;
    --accent:#8CC3B8; --accent-ink:#A9D6CC; --accent-soft:#18241F; --accent-line:#2E463F;
    --card:#181713; --card-edge:#2B2924;
    --warn-soft:#1C1A14;
    --ok:#7FC8A9; --ok-soft:#172420;
    --flag:#D8A95B; --flag-soft:#241E12;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:10rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 1.0625rem/1.65 var(--serif);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--card); padding:.6rem 1rem; border-radius:8px; font-family:var(--sans)}
.wrap{max-width:72rem; margin:0 auto; padding:0 clamp(1.25rem,4.5vw,2.75rem)}

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--rule-soft);
}
.bar{display:flex; align-items:center; gap:1rem 1.5rem; padding-block:.6rem; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit}
.brand .logo{width:128px; height:128px; display:block; flex:0 0 auto}
@media (max-width:640px){ .brand .logo{width:88px; height:88px} }
@media (prefers-color-scheme:dark){ .brand .logo{filter:brightness(1.9) saturate(.85)} }
.brand b{font:650 1.35rem/1 var(--sans); letter-spacing:.015em}
nav.primary{margin-left:auto; display:flex; gap:1.3rem; font:500 .86rem/1 var(--sans); flex-wrap:wrap}
nav.primary a{color:var(--muted); text-decoration:none; padding:.35rem 0}
nav.primary a:hover{color:var(--ink)}
nav.primary a[aria-current="page"]{color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:.25rem}
.btn{
  display:inline-block; font:600 .88rem/1 var(--sans); letter-spacing:.01em;
  background:var(--accent); color:var(--bg); text-decoration:none;
  padding:.72rem 1.15rem; border-radius:9px; white-space:nowrap;
}
.btn:hover{background:var(--accent-ink); text-decoration:none}
@media (prefers-color-scheme:dark){ .btn{color:#0E1512} }
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent-line)}
.btn.ghost:hover{background:var(--accent-soft); color:var(--accent)}
.top .btn{margin-left:.25rem; padding:.6rem 1rem}
@media (max-width:920px){
  nav.primary{order:3; margin-left:0; width:100%; padding-bottom:.3rem}
  .bar{padding-block:.85rem .55rem}
  .top .btn{margin-left:auto}
}

/* ---------- hero (home) ---------- */
.hero{
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.75rem,6vw,4.5rem);
  background:
    radial-gradient(52rem 30rem at 85% -10%, var(--accent-soft) 0%, transparent 62%),
    var(--bg);
  border-bottom:1px solid var(--rule-soft);
}
.eyebrow{
  font:600 .75rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.2rem;
}
h1{
  font-size:clamp(2.1rem,5vw,3.3rem); line-height:1.08; letter-spacing:-.024em;
  font-weight:500; margin:0 0 1.4rem; max-width:23ch;
}
.lede{font-size:clamp(1.08rem,2vw,1.26rem); line-height:1.6; color:var(--muted); max-width:40rem; margin:0 0 2rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}
.quiet-claims{
  margin:2.4rem 0 0; padding:0; list-style:none;
  display:flex; gap:.6rem 1.8rem; flex-wrap:wrap;
  font:500 .82rem/1.5 var(--sans); color:var(--faint);
}
.quiet-claims li{display:flex; align-items:center; gap:.5rem}
.quiet-claims svg{flex:0 0 auto; color:var(--accent)}

.benefit-row{margin:2.4rem 0 0; padding:0; list-style:none; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); max-width:58rem}
.benefit-row li{background:var(--card); border:1px solid var(--card-edge); border-radius:12px; padding:1.15rem 1.25rem}
.benefit-row b{display:block; font:600 .98rem/1.35 var(--sans); margin-bottom:.35rem}
.benefit-row p{font:400 .88rem/1.55 var(--sans); color:var(--muted); margin:0}

/* ---------- subpage hero ---------- */
.page-hero{
  padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,4vw,2.75rem);
  border-bottom:1px solid var(--rule-soft);
  background:
    radial-gradient(44rem 24rem at 88% -14%, var(--accent-soft) 0%, transparent 60%),
    var(--bg);
}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:1rem}
.page-hero .lede{margin-bottom:0}

/* ---------- sections ---------- */
section{padding:clamp(3rem,6.5vw,5rem) 0}
section + section{border-top:1px solid var(--rule-soft)}
.sec-head{display:grid; grid-template-columns:auto 1fr; gap:1rem 1.5rem; align-items:baseline; margin:0 0 clamp(1.8rem,4vw,2.6rem)}
.sec-num{font:600 .8rem/1 var(--mono); color:var(--faint); letter-spacing:.08em}
h2{
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.2; letter-spacing:-.018em;
  font-weight:500; margin:0;
}
.sec-lede{grid-column:2; color:var(--muted); max-width:44rem; margin:.35rem 0 0; font-size:1.05rem}
h3{font:600 1.02rem/1.35 var(--sans); letter-spacing:-.005em; margin:0 0 .45rem}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

/* problem */
.problem-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3.5rem)}
.big-claim{
  font-size:clamp(1.3rem,2.5vw,1.7rem); line-height:1.35; letter-spacing:-.012em;
  margin:0; max-width:24ch;
}
.big-claim em{font-style:normal; color:var(--accent)}
.problem-copy p{color:var(--muted)}
.problem-copy p b{color:var(--ink); font-weight:600}
@media (max-width:820px){ .problem-grid{grid-template-columns:1fr} }
ul.plain{list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.55rem}
ul.plain li{padding-left:1.5rem; position:relative; color:var(--muted); font-size:1rem}
ul.plain li::before{
  content:""; position:absolute; left:0; top:.62em; width:.5rem; height:.5rem;
  border-radius:2px; background:var(--accent);
}

/* review queue mock */
.queue-card{
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  box-shadow:0 1px 2px rgb(23 20 16 / .04), 0 8px 28px rgb(23 20 16 / .05);
  overflow:hidden; max-width:56rem;
}
.queue-head{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center;
  padding:1rem 1.35rem; border-bottom:1px solid var(--rule-soft); background:var(--bg-2);
  font:500 .83rem/1.4 var(--sans); color:var(--muted);
}
.queue-head b{color:var(--ink); font-weight:650}
.queue-badge{
  font:600 .72rem/1 var(--sans); letter-spacing:.06em; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.4rem .6rem; border-radius:999px; white-space:nowrap;
}
.queue-scroll{overflow:visible}
@media (max-width:760px){ .queue-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch} }
table.queue{border-collapse:collapse; width:100%; min-width:38rem; font:400 .9rem/1.5 var(--sans)}
table.queue th{
  text-align:left; font:600 .72rem/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding:.8rem 1.35rem .5rem; border-bottom:1px solid var(--rule-soft);
}
table.queue td{padding:.85rem 1.35rem; border-bottom:1px solid var(--rule-soft); vertical-align:top}
table.queue tr:last-child td{border-bottom:none}
table.queue td:first-child{font-weight:600; color:var(--ink); white-space:nowrap}
table.queue td{color:var(--muted)}
.pill{display:inline-block; font:600 .76rem/1 var(--sans); padding:.42rem .6rem; border-radius:999px; white-space:nowrap}
.pill.ok{color:var(--ok); background:var(--ok-soft)}
.pill.flag{color:var(--flag); background:var(--flag-soft)}
.pill.draft{color:var(--muted); background:var(--bg-2); border:1px solid var(--rule)}
.queue-foot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.95rem 1.35rem; border-top:1px solid var(--rule-soft); background:var(--bg-2);
  font:400 .8rem/1.5 var(--sans); color:var(--faint);
}
.queue-foot .actions{display:flex; gap:.5rem}
.fakebtn{
  display:inline-block; font:600 .78rem/1 var(--sans); padding:.55rem .8rem; border-radius:8px;
  background:var(--accent); color:var(--bg);
}
@media (prefers-color-scheme:dark){ .fakebtn{color:#0E1512} }
.fakebtn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent-line)}
.mock-note{margin:.9rem .25rem 0; font:400 .85rem/1.55 var(--sans); color:var(--faint); max-width:56rem}

/* stat tiles */
.stat-row{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); margin:0 0 clamp(1.8rem,4vw,2.4rem); padding:0; list-style:none}
.stat-row li{background:var(--card); border:1px solid var(--card-edge); border-radius:14px; padding:1.35rem 1.4rem}
.stat-row b{display:block; font:600 1.7rem/1.15 var(--serif); letter-spacing:-.015em; color:var(--ink); margin-bottom:.4rem}
.stat-row p{font:400 .9rem/1.55 var(--sans); color:var(--muted); margin:0}

/* facts table */
.facts-card{background:var(--card); border:1px solid var(--card-edge); border-radius:14px; overflow:hidden; margin:0 0 .9rem}
.facts-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.facts{border-collapse:collapse; width:100%; min-width:40rem; font:400 .9rem/1.55 var(--sans)}
table.facts th{
  text-align:left; font:600 .72rem/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding:.9rem 1.35rem .55rem; border-bottom:1px solid var(--rule-soft); background:var(--bg-2);
}
table.facts td{padding:.8rem 1.35rem; border-bottom:1px solid var(--rule-soft); color:var(--muted); vertical-align:top}
table.facts tr:last-child td{border-bottom:none}
table.facts td:first-child{font-weight:600; color:var(--ink)}
.sources{font:400 .8rem/1.6 var(--sans); color:var(--faint); max-width:56rem; margin:.4rem 0 0}

/* interactive queue demo — CSS only, no scripts */
.ev{position:relative; border-bottom:1px dashed var(--accent-line); cursor:help}
td .ev{display:inline-block}
.pop{
  display:none; position:absolute; z-index:30; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%); width:17.5rem; white-space:normal; text-align:left;
  background:var(--card); border:1px solid var(--card-edge); border-radius:10px;
  box-shadow:0 10px 30px rgb(23 20 16 / .18); padding:.8rem .95rem;
  font:400 .8rem/1.5 var(--sans); color:var(--muted); letter-spacing:0; text-transform:none;
}
.pop b{color:var(--ink)}
.snip{
  display:block; margin-top:.5rem; padding:.5rem .6rem; border-radius:7px;
  background:var(--bg-2); border:1px dashed var(--rule);
  font:500 .76rem/1.5 var(--mono); color:var(--ink);
}
.ev:hover .pop, .ev:focus .pop, .ev:focus-within .pop, .ev:active .pop{display:block}
.pill.ev{cursor:help}
.ap{position:absolute; width:1px; height:1px; opacity:0}
.pill.approved{display:none; color:var(--ok); background:var(--ok-soft)}
label.approve{cursor:pointer; margin-left:.45rem}
.ap:checked ~ .pill{display:none}
.ap:checked ~ .pill.approved{display:inline-block}
.ap:checked ~ label.approve{display:none}
.ap:focus-visible ~ label.approve{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}
@media (max-width:720px){
  .pop{
    position:static; width:auto; transform:none; box-shadow:none;
    margin-top:.5rem; border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
  }
  td .ev{display:block}
}

/* steps */
.steps{display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; list-style:none; counter-reset:s}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{
  position:relative; background:var(--card); border:1px solid var(--card-edge); border-radius:14px;
  padding:1.5rem 1.4rem 1.55rem; counter-increment:s;
}
.steps li::before{
  content:"0" counter(s);
  font:600 .74rem/1 var(--mono); letter-spacing:.1em; color:var(--accent);
  display:inline-block; background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.42rem .6rem; border-radius:999px; margin-bottom:1rem;
}
.steps p{font-size:.95rem; line-height:1.6; color:var(--muted); margin:0; font-family:var(--sans)}
@media (max-width:980px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .steps{grid-template-columns:1fr} }

/* controls */
.controls-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); margin:0; padding:0; list-style:none}
.controls-grid li{
  background:var(--card); border:1px solid var(--card-edge); border-radius:14px;
  padding:1.35rem 1.35rem 1.4rem;
}
.ctl-icon{
  width:38px; height:38px; border-radius:10px; background:var(--accent-soft);
  border:1px solid var(--accent-line); display:grid; place-items:center; margin-bottom:.95rem;
  color:var(--accent);
}
.controls-grid p{font:400 .93rem/1.6 var(--sans); color:var(--muted); margin:0}
.honesty{
  margin-top:1.6rem; border:1px solid var(--rule); border-left:3px solid var(--accent);
  background:var(--warn-soft); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem;
}
.honesty p{font-size:1rem; color:var(--muted); margin:0}
.honesty b{color:var(--ink)}

/* diagram */
.diagram-card{
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  padding:clamp(1rem,3vw,2rem); margin:0 0 clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 1px 2px rgb(23 20 16 / .04), 0 8px 28px rgb(23 20 16 / .05);
}
.diagram-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.diagram-card svg{display:block; width:100%; height:auto; min-width:660px}
.dg-boundary{fill:var(--accent-soft); fill-opacity:.45; stroke:var(--accent)}
.dg-label-in{fill:var(--accent)}
.dg-label-out{fill:var(--faint)}
.dg-node{fill:var(--card); stroke:var(--card-edge)}
.dg-node-hot{fill:var(--card); stroke:var(--accent); stroke-width:1.4}
.dg-t{font-family:var(--sans); font-size:14px; font-weight:600; fill:var(--ink)}
.dg-s{font-family:var(--sans); font-size:11.5px; fill:var(--muted)}
.dg-lbl{font-family:var(--sans); font-size:12.5px; font-weight:650; letter-spacing:1.8px}
.dg-arrow{stroke:var(--muted); stroke-width:1.6; fill:none}
.dg-mono{font-family:var(--mono); font-size:11.5px; fill:var(--accent)}
.dg-arrhead{fill:var(--muted)}
.diagram-card figcaption{margin:1.1rem .25rem 0; font:400 .88rem/1.55 var(--sans); color:var(--faint)}
figure{margin:0}

/* partner panel */
.start-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3rem); align-items:start}
@media (max-width:900px){ .start-grid{grid-template-columns:1fr} }
.start-copy p{color:var(--muted)}
.start-copy p b{color:var(--ink); font-weight:600}
.partner{
  background:var(--accent); color:#F4F1E9; border-radius:16px;
  padding:clamp(1.6rem,3.5vw,2.25rem);
}
@media (prefers-color-scheme:dark){ .partner{background:#153F3A} }
.partner h3{color:#FFFFFF; font-size:1.25rem; margin-bottom:.7rem}
.partner p{font:400 .98rem/1.65 var(--sans); color:#D4DDD6; margin-bottom:1.4rem}
.partner .btn{background:#F4F1E9; color:#153F3A}
.partner .btn:hover{background:#FFFFFF}
.partner small{display:block; margin-top:1rem; font:400 .8rem/1.5 var(--sans); color:#AFC2BA}

/* not-list (what it is not) */
.not-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); margin:0; padding:0; list-style:none}
.not-grid li{background:var(--card); border:1px solid var(--card-edge); border-radius:14px; padding:1.35rem}
.not-grid p{font:400 .93rem/1.6 var(--sans); color:var(--muted); margin:0}

/* founders */
.founder-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1.25rem; max-width:60rem}
.founder{
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  padding:clamp(1.5rem,3vw,2rem);
}
.founder img{width:112px; height:112px; border-radius:50%; display:block; margin-bottom:1.1rem; background:var(--accent-soft)}
.founder h3{font-size:1.15rem; margin-bottom:.15rem}
.founder .role{font:500 .85rem/1.4 var(--sans); color:var(--accent); margin:0 0 .9rem}
.founder p{font:400 .94rem/1.65 var(--sans); color:var(--muted)}
.founder .links{font:500 .85rem/1 var(--sans); margin-top:1rem}
.recruit{
  margin-top:1.5rem; max-width:60rem; border:1px solid var(--rule); border-left:3px solid var(--accent);
  background:var(--warn-soft); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem;
}
.recruit p{font-size:1rem; color:var(--muted); margin:0}
.recruit b{color:var(--ink)}

/* notes */
.note-list{list-style:none; margin:0; padding:0; max-width:46rem}
.note-list > li{border-top:1px solid var(--rule-soft); padding:1.8rem 0}
.note-list > li:first-child{border-top:none; padding-top:0}
.note-date{font:600 .76rem/1.4 var(--mono); letter-spacing:.08em; color:var(--faint); text-transform:uppercase; margin:0 0 .5rem}
.note-list h3{font-size:1.1rem}
.note-list p{color:var(--muted); font-size:1rem}

/* faq */
.faq{display:grid; gap:.8rem; max-width:52rem}
.faq details{background:var(--card); border:1px solid var(--card-edge); border-radius:12px; padding:0}
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 1.3rem;
  font:600 1rem/1.45 var(--sans); color:var(--ink);
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:500 1.2rem/1 var(--sans); color:var(--accent); flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 1.3rem 1.2rem}
.faq p{font:400 .95rem/1.65 var(--sans); color:var(--muted); margin:0 0 .8rem}
.faq p:last-child{margin-bottom:0}

/* contact block */
.contact-panel{text-align:center; padding:clamp(1rem,2vw,2rem) 0}
.contact-panel h2{margin-bottom:1rem}
.contact-panel p{color:var(--muted); max-width:34rem; margin:0 auto 1.6rem}
.contact-panel .email{font-size:clamp(1.2rem,2.4vw,1.5rem); font-weight:500}

/* footer */
footer{border-top:1px solid var(--rule); background:var(--bg-2); padding:2.25rem 0 3rem; color:var(--muted); font:400 .88rem/1.7 var(--sans)}
.foot{display:flex; gap:1rem 2.5rem; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.foot p{margin:0}
.foot .legal b{color:var(--ink); font-weight:600}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot nav{display:flex; gap:1.2rem; font:500 .85rem/1 var(--sans); flex-wrap:wrap}
.foot nav a{text-decoration:none}