/* ---------------------------------------------------------------
   CREASEPOINT — website design mock
   Direction: "The Folded Sheet" + the tool wall
   --------------------------------------------------------------- */

:root{
  --paper:#F7F4ED; --leaf:#FEFCF7; --sunk:#EFEBE0;
  --ink:#14181B; --ink-soft:#4C5459; --ink-faint:#666E74;
  --teal:#0B4F5A; --teal-wash:#DCEAEA;
  --vermilion:#B4462A; --ochre:#8A6218;
  --rule:#DED8C8; --rule-firm:#8D8269;
  --t-merge:#2C5AA0; --t-split:#6A4A9C; --t-extract:#0F6B5C; --t-unlock:#8A5A00;
  --t-sign:#5B3E96; --t-forms:#2E6B4F; --t-ocr:#9A4A1F; --t-rotate:#0F6B8A;
  --t-remove:#9B2C1C; --t-images:#7A5230; --t-accent:#0B5561;
  --serif:"Source Serif 4",Georgia,Cambria,serif;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Cascadia Mono",Consolas,monospace;
}
body.dark{
  --paper:#131518; --leaf:#1B1E21; --sunk:#101214;
  --ink:#ECEAE3; --ink-soft:#AFB4B8; --ink-faint:#838A8F;
  --teal:#71C9D1; --teal-wash:#123037;
  --vermilion:#E8836A; --ochre:#D8A552;
  --rule:#2A2F33; --rule-firm:#686F76;
  --t-merge:#8FB4E8; --t-split:#C0A6E8; --t-extract:#6FC2AE; --t-unlock:#E8B45C;
  --t-sign:#B9A3E3; --t-forms:#86CBA6; --t-ocr:#EBA57E; --t-rotate:#7FC3DE;
  --t-remove:#F0917F; --t-images:#DDB183; --t-accent:#6FC6CE;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 64px}
a{color:var(--teal);text-decoration:none}

/* --- the strip that says the uncomfortable thing first --- */
.disclaimer{background:var(--sunk);border-bottom:1px solid var(--rule-firm);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);padding:9px 0}
.disclaimer b{color:var(--vermilion);font-weight:500}

/* --- nav --- */
nav{display:flex;align-items:center;gap:34px;padding:20px 0;
    border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:11px;margin-right:6px}
.brand .name{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.005em}
.brand .prov{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule-firm);
  padding:1px 5px;border-radius:3px;margin-left:2px}
nav .links{display:flex;gap:26px;font-size:14.5px;color:var(--ink-soft)}
nav .links .on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--teal)}
nav .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--teal);
  color:var(--paper);font-size:14.5px;font-weight:500;padding:10px 18px;
  border-radius:5px;border:1px solid var(--teal)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-firm)}
.btn.big{font-size:15.5px;padding:13px 24px}

/* --- section seam: a rule broken by its own number --- */
.seam{border-top:1px solid var(--rule-firm);position:relative;margin-top:0}
.seam>.tag{position:absolute;top:-9px;left:0;background:var(--paper);
  padding-right:16px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint)}
.seam>.tag b{color:var(--teal);font-weight:500}
section{padding:74px 0 78px}
section.band{background:var(--sunk)}
section.band .seam>.tag{background:var(--sunk)}

h2{font-family:var(--serif);font-size:40px;line-height:1.16;font-weight:600;
   letter-spacing:-.012em;margin:34px 0 16px;max-width:20ch}
.lede{font-size:17.5px;color:var(--ink-soft);max-width:62ch}
.small{font-size:14.5px;color:var(--ink-soft)}
.mono{font-family:var(--mono)}

/* --- hero --- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;
      align-items:center;padding:62px 0 40px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:26px}
.eyebrow span{color:var(--rule-firm);margin:0 9px}
h1{font-family:var(--serif);font-size:63px;line-height:1.06;font-weight:600;
   letter-spacing:-.021em;margin-bottom:26px}
.claim{border-left:2px solid var(--teal);padding-left:20px;margin:0 0 30px;
  font-size:16.5px;color:var(--ink-soft);max-width:56ch}
.claim b{color:var(--ink);font-weight:500}
.cta{display:flex;gap:13px;align-items:center;margin-bottom:16px}
.undercta{font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.03em}

/* --- readout: measured numbers, instrument style --- */
.readout{margin-top:34px;border-top:1px solid var(--rule);padding-top:20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.readout.wide{margin-top:0;padding:22px 0 62px;border-top:1px solid var(--rule-firm);
  grid-template-columns:repeat(5,1fr);gap:30px}
.readout.wide .n{font-size:31px}
.readout .n{font-family:var(--mono);font-size:27px;color:var(--ink);letter-spacing:-.02em}
.readout .n.z{color:var(--teal)}
.readout .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:3px;line-height:1.45}

/* --- the application window illustration --- */
.app{background:var(--leaf);border:1px solid var(--rule-firm);border-radius:9px;
     overflow:hidden}
.app .bar{display:flex;align-items:center;gap:9px;padding:9px 13px;
  background:var(--sunk);border-bottom:1px solid var(--rule)}
.app .bar .t{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.05em}
.app .bar .win{margin-left:auto;display:flex;gap:7px}
.app .bar .win i{width:11px;height:11px;border:1px solid var(--rule-firm);
  border-radius:2px;display:block}
.app .tabs{display:flex;gap:20px;padding:9px 14px 0;font-size:12.5px;
  color:var(--ink-faint);border-bottom:1px solid var(--rule)}
.app .tabs .on{color:var(--ink);padding-bottom:7px;box-shadow:inset 0 -2px 0 var(--teal)}
.app .rib{display:flex;gap:15px;padding:12px 14px;border-bottom:1px solid var(--rule);
  background:var(--leaf)}
.app .rib .tool{display:flex;flex-direction:column;align-items:center;gap:5px;width:47px}
.app .rib .tool span{font-size:9.5px;color:var(--ink-faint);text-align:center;line-height:1.2}
.app .body{display:grid;grid-template-columns:58px 1fr 152px;min-height:262px}
.app .thumbs{border-right:1px solid var(--rule);padding:10px 0;
  display:flex;flex-direction:column;gap:8px;align-items:center;background:var(--sunk)}
.app .thumbs i{width:34px;height:46px;background:var(--leaf);
  border:1px solid var(--rule-firm);display:block;border-radius:1px}
.app .thumbs i.on{outline:2px solid var(--teal);outline-offset:1px}
.app .canvas{background:var(--sunk);display:flex;align-items:center;
  justify-content:center;padding:16px}
.page{width:158px;height:224px;background:#fff;border:1px solid var(--rule-firm);
  position:relative;padding:19px 15px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.page .ln{height:4px;background:#D8D5CC;margin-bottom:7px;border-radius:1px}
.page .fold{position:absolute;top:0;right:0;width:24px;height:24px;
  background:linear-gradient(225deg,var(--sunk) 0 50%,transparent 50%);
  border-left:1px solid var(--rule-firm);border-bottom:1px solid var(--rule-firm)}
.app .side{border-left:1px solid var(--rule);padding:12px 12px}
.app .side h6{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:9px}
.app .side .f{height:22px;border:1px solid var(--rule-firm);border-radius:4px;
  margin-bottom:8px;background:var(--paper)}
.app .side .go{background:var(--teal);color:var(--leaf);font-size:11px;
  text-align:center;padding:6px;border-radius:4px;margin-top:11px}
.app .status{font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  padding:7px 13px;border-top:1px solid var(--rule);background:var(--sunk);
  letter-spacing:.02em}
.app .status em{color:var(--teal);font-style:normal}

/* --- tool peg (the mark: one square corner) --- */
.peg{width:30px;height:30px;border-radius:7px;border-top-left-radius:0;
  display:flex;align-items:center;justify-content:center;flex:none}
.peg svg{width:17px;height:17px;stroke:var(--leaf);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
body.dark .peg svg{stroke:#131518}

/* --- the wall --- */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:36px}
.wall .cell{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:17px 16px 18px;display:flex;flex-direction:column;gap:11px;background:var(--paper)}
.wall .cell .nm{font-size:14px;font-weight:500;line-height:1.3}
.wall .cell .ds{font-size:12px;color:var(--ink-faint);line-height:1.45}
.wall .grp{grid-column:1/-1;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:11px 16px;background:var(--sunk);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft)}
.wall .grp b{color:var(--ink-faint);font-weight:400;letter-spacing:.05em;
  text-transform:none;margin-left:10px}
.wall .cell.fill{background:var(--paper)}
.wall .cell.absent{background:transparent;justify-content:flex-start}
.wall .cell.absent .box{width:30px;height:30px;border-radius:7px;
  border-top-left-radius:0;border:1.5px dashed var(--vermilion);opacity:.65}
.wall .cell.absent .nm{color:var(--vermilion)}
.wall .cell.absent .ds{color:var(--vermilion);opacity:.85}

/* --- portal preset table --- */
table{width:100%;border-collapse:collapse;margin-top:32px;font-size:14.5px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
   color:var(--ink-faint);text-align:left;font-weight:500;padding:0 16px 10px 0;
   border-bottom:1px solid var(--rule-firm)}
td{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td .band{font-family:var(--mono);font-size:15px;color:var(--ink)}
td .src{font-size:12.5px;color:var(--ink-faint);line-height:1.5;max-width:44ch;margin-top:4px}
.stamp{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;
  border-radius:3px;border:1px solid}
.stamp.ok{color:var(--ochre);border-color:var(--ochre)}
.stamp.no{color:var(--vermilion);border-color:var(--vermilion)}
.caveat{color:var(--vermilion);font-size:12.5px;margin-top:6px;max-width:42ch;line-height:1.5}

/* --- two-up explanatory cards --- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.card{background:var(--leaf);border:1px solid var(--rule-firm);border-radius:8px;
  padding:26px 26px 28px;position:relative}
.card.bad{border-color:var(--rule)}
.card h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;margin-bottom:14px}
.card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.card .verdict{margin-top:16px;font-size:14px;font-weight:500}
.card .verdict.x{color:var(--vermilion)}
.card .verdict.y{color:var(--teal)}
.revs{display:flex;gap:4px;margin:6px 0 4px}
.revs i{height:34px;border-radius:2px;display:block;border:1px solid var(--rule-firm)}
.revs i.keep{background:var(--vermilion);opacity:.28;flex:1}
.revs i.now{background:var(--teal);opacity:.85;flex:1}
.revs i.gone{background:repeating-linear-gradient(45deg,transparent 0 3px,var(--rule) 3px 4px);flex:1}

/* --- honest list --- */
.honest{margin-top:34px;border-top:1px solid var(--rule)}
.honest li{list-style:none;display:grid;grid-template-columns:200px 1fr;gap:30px;
  padding:19px 0;border-bottom:1px solid var(--rule)}
.honest .k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--vermilion);text-transform:uppercase;line-height:1.5}
.honest .v{font-size:15px;color:var(--ink-soft);max-width:72ch}
.honest .v b{color:var(--ink);font-weight:500}

/* --- isolation diagram --- */
.iso{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;
  gap:0;margin-top:38px}
.iso .box{border:1px solid var(--rule-firm);border-radius:8px;padding:22px 22px 24px;
  background:var(--leaf)}
.iso .box.worker{border-style:dashed;border-color:var(--teal);background:var(--teal-wash)}
.iso .box h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;font-weight:500}
.iso .box .ttl{font-size:16px;font-weight:500;margin-bottom:8px}
.iso .box p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.iso .link{text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink-faint)}
.iso .link .l{height:1px;background:var(--rule-firm);margin:7px 0}

/* --- footer --- */
footer{border-top:1px solid var(--rule-firm);padding:44px 0 52px;background:var(--sunk)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
footer h6{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:13px;font-weight:500}
footer li{list-style:none;font-size:14px;color:var(--ink-soft);margin-bottom:8px}
footer .co{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:36ch}
footer .lic{font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  margin-top:24px;padding-top:18px;border-top:1px solid var(--rule);letter-spacing:.04em}

/* --- feature page bits --- */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);padding:22px 0 0}
.crumb a{color:var(--ink-faint)}
.ftr-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:26px 0 68px;
  align-items:start}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.chip{font-family:var(--mono);font-size:11.5px;border:1px solid var(--rule-firm);
  border-radius:4px;padding:5px 10px;color:var(--ink-soft)}
.panel{background:var(--leaf);border:1px solid var(--rule-firm);border-radius:9px;padding:0;
  overflow:hidden}
.panel .ph{padding:14px 20px;border-bottom:1px solid var(--rule);background:var(--sunk);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint)}
.panel .pb{padding:22px 20px 24px}
.slider{height:8px;background:var(--sunk);border:1px solid var(--rule-firm);
  border-radius:5px;position:relative;margin:20px 0 8px}
.slider .fill{position:absolute;left:16%;right:34%;top:-1px;bottom:-1px;
  background:var(--teal-wash);border:1px solid var(--teal);border-radius:5px}
.slider .k{position:absolute;top:-6px;width:2px;height:20px;background:var(--teal)}
.scale{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;color:var(--ink-faint)}
.res{margin-top:20px;border-top:1px solid var(--rule);padding-top:16px;
  display:flex;justify-content:space-between;align-items:baseline}
.res .big{font-family:var(--mono);font-size:24px;color:var(--teal)}

/* ═══════════════════════════════════════════════════════════════════════════
   Beyond the mock.

   The mock was two pages with their styles inline. These are the same rules,
   lifted into the stylesheet so every feature page inherits them, plus what a
   real site needs that a mock does not: documents, dark mode by preference
   rather than by class, and a layout that survives a phone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- feature page: the four things a tool can say --- */
.outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
.oc{border:1px solid var(--rule-firm);border-radius:8px;background:var(--leaf);
    padding:24px 24px 26px;display:flex;flex-direction:column;gap:11px}
.oc .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-faint)}
.oc .h{font-size:17px;font-weight:500;line-height:1.35}
.oc .say{font-size:14px;color:var(--ink-soft);line-height:1.58;
    border-left:2px solid var(--rule-firm);padding-left:14px}
.oc.good{border-color:var(--teal)} .oc.good .say{border-left-color:var(--teal)}
.oc.warn{border-color:var(--ochre)} .oc.warn .say{border-left-color:var(--ochre)}
.oc.stop{border-color:var(--vermilion)} .oc.stop .say{border-left-color:var(--vermilion)}

/* --- a terminal, quoted verbatim --- */
.cli{background:var(--ink);color:#E8E6DF;border-radius:8px;padding:22px 24px;
    font-family:var(--mono);font-size:13.5px;line-height:1.95;margin-top:34px;
    overflow-x:auto}
.cli div,.cli pre{white-space:pre}
.cli pre{font:inherit;color:inherit}
.cli .p{color:#7E8A8C} .cli .fl{color:#8FD3DA} .cli .cm{color:#F0F0EA} .cli .ou{color:#9BA5A6}

/* --- two cards, one contrast --- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.two .card{background:var(--leaf);border:1px solid var(--rule-firm);border-radius:8px;
    padding:22px 24px 24px}
.two .card.teal{border-color:var(--teal);background:var(--teal-wash)}
.two .card h6{font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);
    font-weight:500;margin-bottom:11px}
.two .card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:10px}
.two .card p:last-child{margin-bottom:0}
.two .card b{color:var(--ink);font-weight:500}
.two .card .bad{color:var(--vermilion)}
.two .card .good{color:var(--teal);font-weight:500}

/* --- three verdicts, colour first because colour is what people read --- */
.states{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.state{display:flex;gap:16px;align-items:flex-start;background:var(--leaf);
    border:1px solid var(--rule-firm);border-left-width:3px;border-radius:7px;padding:18px 22px}
.state .dot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:6px}
.state b{font-weight:500}
.state p{font-size:14.5px;color:var(--ink-soft);margin-top:5px;line-height:1.58}
.state.good{border-left-color:var(--teal)} .state.good .dot{background:var(--teal)}
.state.warn{border-left-color:var(--ochre)} .state.warn .dot{background:var(--ochre)}
.state.bad{border-left-color:var(--vermilion)} .state.bad .dot{background:var(--vermilion)}

/* --- the twelve scripts, in their own scripts --- */
.langs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:32px;
    background:var(--rule);border:1px solid var(--rule)}
.langs div{background:var(--leaf);padding:15px 18px;display:flex;
    flex-direction:column;gap:3px}
.langs b{font-size:14px;font-weight:500}
.langs span{font-size:17px;color:var(--teal);line-height:1.4}

/* --- the banner the application itself shows --- */
.banner-good{background:var(--teal-wash);border-bottom:1px solid var(--teal);
    color:var(--ink-soft);font-size:12.5px;line-height:1.55;padding:11px 14px}

/* ── documents: PRIVACY.md, SECURITY.md, NOTICE, rendered ─────────────────── */

.doc{max-width:74ch;padding:52px 0 20px}
.doc h1{font-size:44px;margin-bottom:22px}
.doc h2{font-size:27px;margin:46px 0 14px;padding-top:26px;border-top:1px solid var(--rule);max-width:none}
.doc h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:30px 0 10px}
.doc h4{font-size:15px;font-weight:600;margin:22px 0 8px}
.doc p,.doc li{font-size:16px;color:var(--ink-soft);line-height:1.72}
.doc p{margin-bottom:16px}
.doc ul,.doc ol{margin:0 0 18px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc strong{color:var(--ink);font-weight:600}
.doc a{text-decoration:underline;text-underline-offset:.16em}
.doc hr{border:0;border-top:1px solid var(--rule);margin:38px 0}
.doc blockquote{border-left:3px solid var(--teal);background:var(--teal-wash);
    padding:16px 20px;margin:22px 0;border-radius:0 6px 6px 0}
.doc blockquote p:last-child{margin-bottom:0}
.doc code{font-family:var(--mono);font-size:.86em;background:var(--sunk);
    border:1px solid var(--rule);border-radius:4px;padding:.1em .35em;overflow-wrap:anywhere}
.doc pre{background:var(--leaf);border:1px solid var(--rule-firm);border-radius:7px;
    padding:18px 20px;overflow-x:auto;margin-bottom:20px}
.doc pre code{background:none;border:0;padding:0;font-size:13px;line-height:1.7}
.doc pre.notice{max-height:34rem;overflow:auto;background:var(--sunk);font-size:12px}
.doc table{border-collapse:collapse;font-size:14.5px;width:100%}
.doc th,.doc td{text-align:left;padding:10px 16px 10px 0;
    border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-soft)}
.doc th{color:var(--ink);font-weight:600;border-bottom-color:var(--rule-firm)}
.scroll{overflow-x:auto;margin-bottom:22px}

/* ── accessibility ────────────────────────────────────────────────────────── */

.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:var(--paper);
    padding:10px 16px;z-index:20;border-radius:0 0 5px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
nav .links a{color:var(--ink-soft)}
nav .links a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--teal)}
.brand{text-decoration:none;color:inherit}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--teal)}
.disclaimer a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.2em}

/* ── dark, by the reader preference and not only by a class ───────────────── */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131518; --leaf:#1B1E21; --sunk:#101214;
    --ink:#ECEAE3; --ink-soft:#AFB4B8; --ink-faint:#838A8F;
    --teal:#71C9D1; --teal-wash:#123037;
    --vermilion:#E8836A; --ochre:#D8A552;
    --rule:#2A2F33; --rule-firm:#686F76;
    --t-merge:#8FB4E8; --t-split:#C0A6E8; --t-extract:#6FC2AE; --t-unlock:#E8B45C;
    --t-sign:#B9A3E3; --t-forms:#86CBA6; --t-ocr:#EBA57E; --t-rotate:#7FC3DE;
    --t-remove:#F0917F; --t-images:#DDB183; --t-accent:#6FC6CE;
  }
  /* The page illustration is a sheet of paper. It stays paper-coloured in the dark,
     because a dark page inside a dark window reads as a bug rather than a document. */
  :root:not([data-theme="light"]) .page{background:#E9E6DE;border-color:#4A5155}
  :root:not([data-theme="light"]) .page .ln{background:#B9B5AA}
  :root:not([data-theme="light"]) .cli{background:#0A0C0D}
}

/* ── a layout that survives a phone ───────────────────────────────────────── */

@media (max-width:1080px){
  .wrap{padding:0 32px}
  h1{font-size:46px}
  h2{font-size:32px}
  .hero,.ftr-hero{grid-template-columns:1fr;gap:38px}
  .readout.wide{grid-template-columns:repeat(3,1fr);row-gap:26px}
  .langs{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:720px){
  .wrap{padding:0 20px}
  h1{font-size:34px}
  h2{font-size:26px;max-width:none}
  section{padding:52px 0 54px}
  nav{flex-wrap:wrap;gap:16px}
  nav .links{order:3;width:100%;gap:16px;font-size:13.5px;flex-wrap:wrap}
  nav .right{margin-left:auto}
  .disclaimer{font-size:10px;letter-spacing:.05em}
  .readout,.readout.wide{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .two,.outcomes{grid-template-columns:1fr}
  .langs{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .doc h1{font-size:32px}
  .cli{font-size:12px;padding:16px 18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media print{
  .disclaimer,nav,footer,.skip{display:none}
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
}