/* ==========================================================================
   0xPeerHold — shared stylesheet
   --------------------------------------------------------------------------
   System fonts only. No CDN, no @import, no external requests anywhere.
   Our products claim zero network calls; this site has to hold the same line.

   To use a custom typeface later: drop the .woff2 files in this folder and
   add @font-face rules here. Never add a <link> to a font CDN.
   ========================================================================== */

:root{
  --paper:#f1efec;
  --paper-2:#e7e4df;
  --paper-3:#dcd8d1;
  --ink:#191a1c;
  --ink-2:#232529;
  --ink-soft:#5c5f66;
  --rule:#cfcbc4;

  --verify:#0d6b57;   /* trust / confirmed */
  --warn:#a8501a;     /* destructive */
  --btc:#f7931a;

  --lit-verify:#5fd3ac;
  --lit-warn:#ff8a5c;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --gap:clamp(20px,4vw,26px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,1.4vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verify)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--verify);
  outline-offset:2px;
}
h1,h2,h3,h4{margin:0;letter-spacing:-0.028em;line-height:1.08;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
code,kbd{font-family:var(--mono);font-size:.92em}
kbd{
  border:1px solid var(--rule);border-bottom-width:2px;
  padding:1px 5px;background:var(--paper-2);
}

.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 var(--gap)}

/* ---------------- masthead ---------------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:22px 0 0;
}
.wordmark{
  font-size:1.1rem;font-weight:700;letter-spacing:-0.045em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
}
.wordmark b{color:var(--verify)}
.masthead nav{display:flex;gap:clamp(14px,3vw,22px);font-size:.9rem;flex-wrap:wrap}
.masthead nav a{
  color:var(--ink-soft);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;
}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------------- buttons ---------------- */
.btn{
  font:inherit;font-size:.95rem;font-weight:600;
  padding:22px 22px;min-height:46px;
  border:1.5px solid var(--ink);
  background:var(--paper);color:var(--ink);
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s ease,color .12s ease;
}

.btn:hover{background:var(--ink);color:var(--paper)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--verify);border-color:var(--verify);color:#fff}
.btn-sm{font-size:.88rem;padding:10px 16px;min-height:42px}
.btn-btc{background:var(--btc);border-color:var(--btc);color:#1b1206}
.btn-btc:hover{background:#d97e10;border-color:#d97e10;color:#1b1206}

.btn-vertical {
  flex-direction: column;
  gap: 8px; /* Controls space between the image and text */
}

.btn-vertical img {
  height: 3.5rem; /* Adjust image size as needed */
  padding: 8px; /* Adjust this value for more or less space around the image */
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- hero ---------------- */
.hero{padding:clamp(48px,9vw,80px) 0 8px}
.hero h1{font-size:clamp(2.1rem,6.2vw,4rem);max-width:18ch}
.hero .lede{
  margin-top:clamp(18px,3vw,26px);
  font-size:clamp(1.02rem,2.1vw,1.18rem);
  color:#3a3d43;max-width:60ch;
}
.cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;align-items:center}
.cta-note{font-size:.85rem;color:var(--ink-soft);max-width:36ch}

/* ---------------- section frame ---------------- */
section{padding:clamp(44px,8vw,66px) 0}
.band{
  display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:clamp(20px,4vw,38px);
  border-top:1.5px solid var(--ink);padding-top:20px;
}
.band > h2{font-size:clamp(1.25rem,3vw,1.5rem);align-self:start}
.band-sub{
  display:block;font-size:.86rem;color:var(--ink-soft);
  margin-top:9px;font-weight:400;letter-spacing:0;line-height:1.5;
}
@media(min-width:900px){.band > h2{position:sticky;top:22px}}
@media(max-width:899px){.band{grid-template-columns:1fr}}

/* ---------------- benefit blocks ---------------- */
.benefit{padding-bottom:clamp(28px,5vw,38px);margin-bottom:clamp(28px,5vw,38px);border-bottom:1px solid var(--rule)}
.benefit:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.benefit h3{font-size:clamp(1.15rem,2.6vw,1.35rem);margin-bottom:12px;max-width:26ch}
.benefit .example{
  border-left:2px solid var(--rule);padding-left:14px;
  margin-bottom:16px;max-width:58ch;
  font-family:var(--mono);font-size:.84rem;line-height:1.7;
  color:var(--ink-soft);
}
.benefit .example b{color:var(--ink);font-weight:600}
.benefit p{max-width:62ch;color:#33363b}

/* ---------------- screenshot component ----------------
   DROP-IN:
     <figure class="shot">
       <img src="shots/NAME.png" alt="Describe what is happening, for screen readers">
       <figcaption>One line of caption.</figcaption>
     </figure>
   Empty placeholder (delete the class once the image is in):
     <figure class="shot shot-empty"><div>shots/NAME.png</div></figure>
------------------------------------------------------- */
.shot{margin:20px 0 0;padding:0}
.shot img{
  width:100%;border:1px solid var(--rule);background:var(--paper-2);
}
.shot figcaption{
  font-size:.83rem;color:var(--ink-soft);margin-top:9px;max-width:56ch;
}
.shot-empty div{
  border:1.5px dashed var(--rule);background:var(--paper-2);
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);padding:16px;
}

/* ---------------- audience cards ---------------- */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3.5vw,30px)}
.who > div{border-top:2px solid var(--ink);padding-top:14px}
.who h3{font-size:1.02rem;margin-bottom:8px}
.who p{font-size:.95rem;color:#33363b}

/* ---------------- absence list ---------------- */
.absence{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(20px,4vw,38px)}
.absence li{
  padding:12px 0 12px 26px;position:relative;
  border-bottom:1px solid var(--rule);font-size:.97rem;
}
.absence li::before{
  content:"\2715";position:absolute;left:0;top:12px;
  color:var(--verify);font-size:.8em;
}

/* ---------------- terms list (licence sections) ----------------
   Not a variant of .absence, deliberately. That list means "we don't do this"
   and stamps a ✕ on every row, which is wrong on a list where most items are
   things the licence GRANTS. Here the marker carries the meaning: ✓ for a
   permission, ✕ for a restriction.

   Single column too. .absence is a two-up grid because its items are three or
   four words; licence clauses are sentences and read badly in narrow columns.

   The 26px left padding reserves space for the absolutely positioned marker.
   Do not zero it out on the li — that is what puts the glyph underneath the
   text. If you want a flush-left row, use .terms li.plain. */
.terms{list-style:none;margin:0;padding:0}
.terms li{
  padding:12px 0 12px 26px;position:relative;
  border-bottom:1px solid var(--rule);font-size:.97rem;
}
.terms li::before{
  position:absolute;left:0;top:12px;font-size:.8em;font-weight:700;
}
.terms li.yes::before{content:"\2713";color:var(--verify)}
.terms li.no::before{content:"\2715";color:var(--warn)}
.terms li.plain{padding-left:0}
.terms li.plain::before{content:none}

/* ---------------- product cards (home) ---------------- */
.product{
  border:1.5px solid var(--ink);background:var(--paper-2);
  padding:clamp(20px,4vw,28px);margin-bottom:20px;
}
.product h3{font-size:clamp(1.3rem,3.2vw,1.6rem);margin-bottom:6px}
.product .status{
  font-family:var(--mono);font-size:.72rem;color:var(--verify);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;
}
.product p{max-width:60ch}
.product .cta-row{margin-top:20px}
.product-soon{
  border:1.5px dashed var(--rule);background:none;
  padding:clamp(20px,4vw,28px);color:var(--ink-soft);
}
.product-soon h3{color:var(--ink-soft);font-size:1.15rem;margin-bottom:8px}

/* ---------------- dark statement block ---------------- */
.slab{
  background:var(--ink);color:var(--paper);
  padding:clamp(22px,4.5vw,34px);margin-top:clamp(30px,5vw,46px);
}
.slab h2{font-size:clamp(1.1rem,2.6vw,1.35rem);margin-bottom:16px}
.slab ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px clamp(20px,4vw,34px)}
.slab li{font-size:.95rem;color:#c3c8cf;padding-left:22px;position:relative;line-height:1.5}
.slab li::before{content:"\2715";position:absolute;left:0;top:1px;color:var(--lit-verify);font-size:.82em}
.slab li b{color:var(--paper);font-weight:600}

/* ---------------- FAQ ---------------- */
.faq{border-bottom:1px solid var(--rule)}
.faq:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  cursor:pointer;padding:18px 0;font-weight:600;
  font-size:clamp(1rem,2.2vw,1.06rem);list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--verify);font-weight:400;font-size:1.3em;line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 20px;max-width:64ch;color:#33363b;font-size:.97rem}

/* ---------------- install ---------------- */
.plat{padding:20px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px clamp(18px,3vw,30px)}
.plat:first-child{border-top:1px solid var(--rule)}
@media(max-width:700px){.plat{grid-template-columns:1fr}}
.plat h3{font-size:1rem}
.plat .platnote{display:block;font-size:.79rem;color:var(--ink-soft);margin-top:4px;font-weight:400;letter-spacing:0}
.cmd{
  font-family:var(--mono);font-size:.82rem;
  background:var(--ink);color:var(--paper);
  padding:12px 14px;overflow-wrap:anywhere;
}
.cmd a{color:var(--lit-verify)}
.plat p{font-size:.89rem;color:var(--ink-soft);margin:9px 0 0}

/* ---------------- support / donate ---------------- */
.support{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(24px,4vw,44px);align-items:start}
@media(max-width:860px){.support{grid-template-columns:1fr}}
.donate{background:var(--paper-2);border:1.5px solid var(--ink);padding:clamp(18px,3.5vw,24px)}
.donate h3{font-size:1.06rem;margin-bottom:12px}
.addr{
  font-family:var(--mono);font-size:.78rem;background:var(--paper);
  border:1px solid var(--rule);padding:12px 13px;
  overflow-wrap:anywhere;user-select:all;
}
.btn-row{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap;align-items:center}
#copied,.copied-flag{font-family:var(--mono);font-size:.77rem;color:var(--verify)}
.qr{
  margin-top:16px;width:148px;height:148px;border:1px solid var(--rule);
  display:grid;place-items:center;background:var(--paper);
  font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);
  text-align:center;padding:10px;
}
.qr-toggle{
  display:none;background:none;border:0;padding:8px 0;margin-top:8px;
  font:inherit;font-size:.85rem;color:var(--verify);
  text-decoration:underline;cursor:pointer;
}
@media(max-width:860px){
  .qr-toggle{display:inline-block}
  .qr{display:none}
  .qr.qr-open{display:grid}
}
.note{font-size:.8rem;color:var(--ink-soft);margin-top:13px}

/* ---------------- footer ---------------- */
footer{
  border-top:1.5px solid var(--ink);padding:24px 0 48px;
  font-size:.85rem;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
footer a{color:var(--ink-soft)}
footer .hosting{font-family:var(--mono);font-size:.73rem;line-height:1.6}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   In-page CmdVault demo (cmdvault.html)
   --------------------------------------------------------------------------
   Ported from the app's own stylesheet in ui.go rather than approximated.
   The custom properties below are that file's :root block verbatim, renamed
   with a --cv- prefix so they can't collide with the site's tokens:

     --bg #07100D   --surface #101B17  --elevated #141F1A  --border #20302A
     --divider #16211C  --primary #00F5A0  --primary-muted #4DBE93
     --primary-dim #16332A  --on-primary #04120C  --cyan #4FC7F3
     --red #FF5C6C  --amber #FFB454  --text #EAFBF3  --text-2 #8FA79C
     --text-3 #4A5D56

   Structure follows too. Rows are flat with a divider underneath and a 2px
   left border that lights up when selected — not cards. There are no
   per-project accent colours anywhere in the app, so there are none here.
   ========================================================================== */
.cvframe{
  margin-top:clamp(24px,4vw,34px);
  border:1.5px solid var(--ink);
  background:#07100d;
}
.cvframe-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 14px;background:#323030;color:#e6e4e2;
  font-family:var(--mono);font-size:.76rem;
}
.cvframe-bar .name{font-weight:700;letter-spacing:.02em}
.cvframe-bar .said{color:#a49f9b;font-size:.72rem;text-align:right}

.cv{
  --cv-bg:#07100D;
  --cv-surface:#101B17;
  --cv-elevated:#141F1A;
  --cv-border:#20302A;
  --cv-divider:#16211C;
  --cv-primary:#00F5A0;
  --cv-primary-muted:#4DBE93;
  --cv-primary-dim:#16332A;
  --cv-on-primary:#04120C;
  --cv-cyan:#4FC7F3;
  --cv-violet:#9C8CFF;
  --cv-red:#FF5C6C;
  --cv-amber:#FFB454;
  --cv-text:#EAFBF3;
  --cv-text-2:#8FA79C;
  --cv-text-3:#4A5D56;

  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  color:var(--cv-text);
  background:var(--cv-bg);
  display:flex;flex-direction:column;
  height:clamp(560px,80vh,780px);
}
.cv *{box-sizing:border-box}
.cv button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.cv .sp{flex:1;min-width:0}
.cv-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.cv :focus-visible{outline:2px solid var(--cv-primary);outline-offset:-2px}
.cv ::-webkit-scrollbar{width:9px;height:9px}
.cv ::-webkit-scrollbar-thumb{background:var(--cv-border);border-radius:6px}
.cv ::-webkit-scrollbar-track{background:transparent}

/* ── header ─────────────────────────────────────────────────────────── */
.cv-head{
  display:flex;align-items:center;gap:14px;flex:none;
  min-height:46px;padding:0 14px;
  border-bottom:1px solid var(--cv-border);background:var(--cv-surface);
}
.cv-brand{color:var(--cv-primary);font-weight:700;letter-spacing:.04em}
.cv-tools{display:flex;gap:7px;flex-wrap:wrap}
.cv .cv-tool{
  border:1px solid var(--cv-border);border-radius:5px;
  padding:5px 11px;font-size:12.5px;color:var(--cv-text-2);
}
.cv .cv-tool:hover{color:var(--cv-text);border-color:var(--cv-primary-muted)}
.cv .cv-tool.accent{
  color:var(--cv-on-primary);background:var(--cv-primary);
  border-color:var(--cv-primary);font-weight:600;
}
.cv .cv-tool.accent:hover{background:var(--cv-primary-muted)}

/* ── panes ──────────────────────────────────────────────────────────── */
.cv-panes{
  display:grid;
  grid-template-columns:232px minmax(280px,1fr) minmax(300px,1.15fr);
  flex:1 1 auto;min-height:0;
}
.cv-side{
  overflow-y:auto;min-height:0;
  background:var(--cv-surface);padding:12px 0 30px;
  border-right:1px solid var(--cv-border);
}
.cv-listpane{
  display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--cv-border);
}
.cv-detail{
  overflow-y:auto;min-height:0;
  background:var(--cv-surface);padding:18px 20px 40px;
}

/* ── sidebar ────────────────────────────────────────────────────────── */
.cv-label{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cv-text-3);padding:14px 14px 6px;
}
.cv-label.first{padding-top:2px}
.cv-sidehead{display:flex;align-items:center;justify-content:space-between;padding-right:12px}
.cv .cv-mini{
  border:1px solid var(--cv-border);border-radius:4px;color:var(--cv-text-2);
  width:20px;height:20px;line-height:1;padding:0;font-size:13px;
}
.cv .cv-mini:hover{color:var(--cv-primary);border-color:var(--cv-primary)}
.cv-side ul{list-style:none;margin:0;padding:0}
.cv .cv-item{
  display:flex;align-items:center;gap:8px;width:100%;
  border-left:2px solid transparent;
  padding:6px 14px;font-size:13px;color:var(--cv-text-2);text-align:left;
}
.cv .cv-item:hover{color:var(--cv-text);background:var(--cv-divider)}
.cv .cv-item[aria-current="true"]{
  color:var(--cv-primary);background:var(--cv-primary-dim);
  border-left-color:var(--cv-primary);
}
.cv .cv-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv .cv-item .n{margin-left:auto;font-size:11px;color:var(--cv-text-3)}
.cv .cv-item.depth1{padding-left:28px}
.cv .cv-item.depth2{padding-left:42px}
.cv-tagwrap{display:flex;flex-wrap:wrap;gap:5px;padding:4px 12px 10px}
.cv .cv-tag{
  border:1px solid var(--cv-border);border-radius:999px;
  padding:2px 9px;font-size:11.5px;color:var(--cv-text-2);
}
.cv .cv-tag:hover{border-color:var(--cv-primary-muted);color:var(--cv-text)}
.cv .cv-tag[aria-pressed="true"]{
  background:var(--cv-primary-dim);border-color:var(--cv-primary);color:var(--cv-primary);
}
.cv-none{padding:2px 14px 6px;font-size:12px;color:var(--cv-text-3)}

/* ── search + list ──────────────────────────────────────────────────── */
.cv-searchbar{padding:12px 14px 10px;border-bottom:1px solid var(--cv-divider);flex:none}
.cv-searchrow{display:flex;gap:8px}
.cv .cv-q{
  flex:1;min-width:0;background:var(--cv-elevated);border:1px solid var(--cv-border);
  border-radius:6px;padding:9px 12px;color:var(--cv-text);
  font-family:var(--mono);font-size:14px;
}
.cv .cv-q:focus-visible{outline:none;border-color:var(--cv-primary)}
.cv .cv-q::placeholder{color:var(--cv-text-3)}
.cv select{
  background:var(--cv-elevated);border:1px solid var(--cv-border);border-radius:6px;
  color:var(--cv-text-2);padding:4px 8px;font-family:var(--mono);font-size:12px;
}
.cv-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:8px;font-size:11.5px;color:var(--cv-text-3);
}
.cv .cv-chip{
  border:1px solid var(--cv-border);border-radius:4px;
  padding:2px 8px;font-size:11.5px;color:var(--cv-text-2);
}
.cv .cv-chip:hover{color:var(--cv-text)}
.cv .cv-chip[aria-pressed="true"]{border-color:var(--cv-amber);color:var(--cv-amber)}
.cv-stat{margin-left:auto;white-space:nowrap}

.cv-results{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 0 30px;list-style:none;margin:0}
.cv .cv-row{
  display:block;width:100%;text-align:left;
  border-left:2px solid transparent;
  padding:9px 14px;border-bottom:1px solid var(--cv-divider);
}
.cv .cv-row:hover{background:var(--cv-divider)}
.cv .cv-row[aria-current="true"]{background:var(--cv-primary-dim);border-left-color:var(--cv-primary)}
.cv-row-top{display:flex;align-items:baseline;gap:8px}
.cv-row-title{color:var(--cv-text);font-size:13.5px;font-weight:500}
.cv-row-star{color:var(--cv-amber);font-size:11px}
.cv-row-danger{color:var(--cv-red);font-size:11px}
.cv-row-cmd{
  display:block;color:var(--cv-primary-muted);font-size:12.5px;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cv-row-sub{
  display:block;color:var(--cv-text-3);font-size:11px;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cv-empty{color:var(--cv-text-3);font-size:13px;padding:26px 16px;text-align:center}
.cv-empty b{display:block;color:var(--cv-text-2);margin-bottom:5px;font-weight:500}

/* ── detail ─────────────────────────────────────────────────────────── */
.cv-blank{color:var(--cv-text-3);font-size:13px;padding:26px 4px;text-align:center}
.cv-dtitle{font-size:17px;font-weight:600;margin:0 0 4px;color:var(--cv-text)}
.cv-dpath{color:var(--cv-text-3);font-size:11.5px;margin:0 0 14px}
.cv-dactions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;align-items:center}
.cv-cmdbox{
  background:var(--cv-bg);border:1px solid var(--cv-border);border-radius:7px;
  padding:12px 13px;margin-bottom:14px;
}
.cv-cmdbox pre{
  margin:0;white-space:pre-wrap;word-break:break-word;
  color:var(--cv-primary);font-size:13.5px;line-height:1.6;font-family:var(--mono);
}
.cv-ph{color:var(--cv-amber)}
.cv-ph.set{color:var(--cv-text)}
.cv-ph.secret{color:var(--cv-text-3)}
.cv-danger{
  border:1px solid var(--cv-red);border-radius:6px;padding:9px 12px;
  margin-bottom:14px;color:var(--cv-red);font-size:12.5px;
  background:rgba(255,92,108,.07);line-height:1.55;
}
.cv-danger b{font-weight:600}
.cv-danger .fine{display:block;margin-top:7px;color:#d99aa2;font-size:11.5px}
.cv-sec{margin-bottom:15px}
.cv-sec h4{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cv-text-3);margin:0 0 5px;font-weight:500;
}
.cv-sec p{margin:0;font-size:13px;color:var(--cv-text-2);white-space:pre-wrap;word-break:break-word}
.cv-fill{border:1px solid var(--cv-border);border-radius:7px;padding:12px 13px;margin-bottom:14px}
.cv-fill h4{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cv-text-3);margin:0 0 9px;font-weight:500;
}
.cv-field{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.cv-field label{
  width:104px;flex:none;font-size:12.5px;color:var(--cv-text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cv-field input,.cv-field select{
  flex:1;min-width:0;background:var(--cv-bg);border:1px solid var(--cv-border);
  border-radius:5px;padding:5px 9px;color:var(--cv-text);
  font-family:var(--mono);font-size:12.5px;
}
.cv-field input:focus-visible,.cv-field select:focus-visible{outline:none;border-color:var(--cv-primary)}
.cv-field .occ{font-size:10.5px;color:var(--cv-text-3);flex:none;width:44px;text-align:right}
.cv-secretnote{
  border-left:2px solid var(--cv-amber);background:rgba(255,180,84,.06);
  padding:8px 11px;margin:0 0 11px;font-size:11.5px;color:var(--cv-text-2);line-height:1.55;
}
.cv-resolved{margin-top:9px;padding-top:9px;border-top:1px solid var(--cv-divider)}
.cv-resolved pre{
  margin:0;color:var(--cv-cyan);font-size:12.5px;font-family:var(--mono);
  white-space:pre-wrap;word-break:break-word;min-height:1.3em;
}
.cv-stats{
  display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--cv-text-3);
  border-top:1px solid var(--cv-divider);padding-top:11px;margin-top:18px;
}
.cv-hint{font-size:11px;color:var(--cv-text-3);margin-left:auto}
.cv-hint .k{
  border:1px solid var(--cv-border);border-radius:3px;padding:0 4px;
  margin:0 1px;color:var(--cv-text-2);
}
.cv-flag{color:var(--cv-primary)}
.cv-say{
  padding:0 14px 8px;font-size:11.5px;color:var(--cv-amber);
  min-height:1.2em;flex:none;
}

/* ── footer ─────────────────────────────────────────────────────────── */
.cv-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:none;
  padding:9px 16px;border-top:1px solid var(--cv-border);
  background:var(--cv-surface);font-size:11.5px;color:var(--cv-text-3);
}
.cv-foot .lk{color:var(--cv-primary);padding:2px 4px}
.cv-foot .lk:hover{color:var(--cv-primary-muted)}

/* ── narrow ─────────────────────────────────────────────────────────── */
.cv-stoggle{display:none}
@media(max-width:980px){
  .cv{height:min(660px,86vh)}
  .cv-panes{grid-template-columns:1fr}
  .cv-side{
    display:none;position:absolute;z-index:3;width:232px;
    top:0;bottom:0;box-shadow:0 0 0 100vw rgba(0,0,0,.55);
  }
  .cv-panes{position:relative}
  .cv.side-open .cv-side{display:block}
  .cv .cv-stoggle{display:inline-flex;align-items:center}
  .cv-detail{display:none}
  .cv.detail-open .cv-detail{display:block}
  .cv.detail-open .cv-listpane{display:none}
}
@media(min-width:981px){.cv-back{display:none}}
.cv .cv-back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--cv-text-2);font-size:12px;margin-bottom:12px;
}
.cv .cv-back:hover{color:var(--cv-primary)}

/* ==========================================================================
   In-page pastebridge demo (pastebridge.html)
   --------------------------------------------------------------------------
   Ported from the app's stylesheet in pastebridge.go. Its :root block, with a
   --pb- prefix:

     --paper #e9edf0  --card #ffffff  --ink #161a1e  --muted #616b74
     --line #cfd6dc   --log-hue #a4432b  --cmd-hue #235f46  --ok #1f7a4d

   pastebridge is a LIGHT interface — sans-serif chrome, monospace only where
   content is. It is not a dark terminal, and styling it as one was the main
   thing wrong with the previous version of this demo.

   Layout is the app's: two lanes side by side, each with a 3px top border in
   its own hue, collapsing to tabs under 720px. The demo uses that responsive
   behaviour deliberately — the laptop pane shows the split view, the phone
   pane shows the tab view, and both are real app layouts rather than an
   invention for the page.

   --hue is set per lane and drives the top border, the lane title and the
   send button, exactly as it does in the app.
   ========================================================================== */
.pbframe{
  margin-top:clamp(24px,4vw,34px);
  border:1.5px solid var(--ink);
  background:#e9edf0;
}
.pbframe-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 14px;background:#323030;color:#e6e4e2;
  font-family:var(--mono);font-size:.76rem;
}
.pbframe-bar .name{font-weight:700;letter-spacing:.02em}
.pbframe-bar .said{color:#a49f9b;font-size:.72rem;text-align:right}

.pb{
  --pb-paper:#e9edf0;
  --pb-card:#ffffff;
  --pb-ink:#161a1e;
  --pb-muted:#616b74;
  --pb-line:#cfd6dc;
  --pb-log-hue:#a4432b;
  --pb-cmd-hue:#235f46;
  --pb-ok:#1f7a4d;
  --pb-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  font-family:var(--pb-sans);
  font-size:14px;line-height:1.55;
  color:var(--pb-ink);background:var(--pb-card);
  display:flex;flex-direction:column;
}
.pb *{box-sizing:border-box}
.pb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.pb .sp{flex:1;min-width:0}
.pb-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.pb :focus-visible{outline:2px solid var(--pb-ok);outline-offset:1px}

/* ── one device ─────────────────────────────────────────────────────── */
.pb-dev{display:flex;flex-direction:column;min-width:0;background:var(--pb-card)}
.pb-dev + .pb-dev{border-top:1px solid var(--pb-line)}

.pb-devbar{
  display:flex;align-items:baseline;gap:9px;
  padding:6px 16px;background:#dfe5ea;
  border-bottom:1px solid var(--pb-line);
  font-family:var(--mono);font-size:11.5px;
}
.pb-devname{font-weight:700;color:var(--pb-ink)}
.pb-devnote{color:var(--pb-muted)}

.pb-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--pb-line);background:var(--pb-card);
}
.pb-brand{font-weight:700;font-size:15px;letter-spacing:-.01em}
.pb-status{display:inline-flex;align-items:center;gap:6px;color:var(--pb-muted);font-size:13px}
.pb-dot{width:8px;height:8px;border-radius:50%;background:#b6bfc7;flex:none}
.pb-dot.live{background:var(--pb-ok)}
.pb .pb-headlink{color:var(--pb-muted);font-size:13px}
.pb .pb-headlink:hover{color:var(--pb-ink)}

/* ── share strip ────────────────────────────────────────────────────── */
.pb-share{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--pb-line);
}
.pb-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}
.pb-switch input{position:absolute;opacity:0;width:0;height:0}
.pb-track{
  width:36px;height:20px;border-radius:11px;flex:none;
  background:#c3ccd4;position:relative;transition:background .14s ease;
}
.pb-track::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .14s ease;
}
.pb-switch input:checked + .pb-track{background:var(--pb-ok)}
.pb-switch input:checked + .pb-track::after{transform:translateX(16px)}
.pb-switch input:focus-visible + .pb-track{outline:2px solid var(--pb-ok);outline-offset:2px}
.pb-share-on{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px}
.pb-addr{font-family:var(--mono);color:var(--pb-ok);overflow-wrap:anywhere}
.pb-pinwrap{color:var(--pb-muted)}
.pb-pinwrap b{font-family:var(--mono);color:var(--pb-ink);letter-spacing:.14em;font-size:15px}
.pb .pb-unlock{color:var(--pb-log-hue);text-decoration:underline;font-size:13px}
.pb-share-off{color:var(--pb-muted);font-size:13px}

/* ── pairing gate ───────────────────────────────────────────────────── */
.pb-gate{display:grid;place-items:center;padding:34px 20px;background:var(--pb-paper);min-height:230px}
.pb-gate-in{max-width:42ch;text-align:center;color:var(--pb-muted);font-size:13.5px}
.pb-gate-in p{margin:0 0 10px}
.pb-gate-h{color:var(--pb-ink);font-weight:600;font-size:16px}
.pb-gate-fine{font-size:12.5px;color:#8b959d}
.pb-pinrow{display:flex;gap:8px;justify-content:center;margin:16px 0 8px}
.pb .pb-pin{
  width:9ch;font-family:var(--mono);font-size:15px;letter-spacing:.22em;text-align:center;
  color:var(--pb-ink);background:var(--pb-card);
  border:1px solid var(--pb-line);border-radius:8px;padding:9px 8px;min-height:42px;
}
.pb .pb-pin:disabled{opacity:.5}
.pb .pb-join{
  border:1px solid var(--pb-ok);background:var(--pb-ok);color:#fff;
  font-weight:500;border-radius:8px;padding:8px 18px;min-height:42px;
}
.pb .pb-join:disabled{opacity:.4;cursor:default}
.pb-err{min-height:1.4em;color:var(--pb-log-hue);font-size:12.5px;margin:0}

/* ── lanes ──────────────────────────────────────────────────────────── */
.pb-tabs{display:none;gap:0;border-bottom:1px solid var(--pb-line)}
.pb .pb-tab{
  flex:1;padding:9px 12px;font-size:13.5px;font-weight:500;
  color:var(--pb-muted);border-bottom:3px solid transparent;
}
.pb .pb-tab[aria-selected="true"]{color:var(--hue,var(--pb-ink));border-bottom-color:var(--hue,var(--pb-ink))}
.pb-tab[data-tab="log"]{--hue:var(--pb-log-hue)}
.pb-tab[data-tab="cmd"]{--hue:var(--pb-cmd-hue)}

.pb-lanes{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--pb-line);min-height:300px;
}
.pb-lane{background:var(--pb-paper);display:flex;flex-direction:column;min-width:0}
.pb-lane[data-lane="log"]{--hue:var(--pb-log-hue)}
.pb-lane[data-lane="cmd"]{--hue:var(--pb-cmd-hue)}
.pb-lane-head{
  display:flex;align-items:baseline;gap:10px;
  padding:14px 16px 10px;border-top:3px solid var(--hue);
}
.pb-lane-title{font-size:14px;font-weight:600;color:var(--hue)}
.pb-lane-note{font-size:12.5px;color:var(--pb-muted)}
.pb .pb-clear{font-size:12.5px;color:var(--pb-muted);margin-left:auto}
.pb .pb-clear:hover{color:var(--pb-ink)}

.pb-composer{padding:0 16px 12px}
.pb .pb-input{
  width:100%;min-height:76px;resize:vertical;display:block;
  font-family:var(--mono);font-size:13px;color:var(--pb-ink);
  background:var(--pb-card);border:1px solid var(--pb-line);
  border-radius:8px;padding:11px 13px;
}
.pb .pb-input::placeholder{color:#9aa4ad}
.pb .pb-input:focus{outline:none;border-color:var(--hue)}
.pb-composer-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.pb .pb-send{
  font-size:13.5px;font-weight:500;padding:8px 18px;border-radius:8px;
  border:1px solid var(--hue);background:var(--hue);color:var(--pb-card);
}
.pb .pb-send:hover{filter:brightness(1.1)}
.pb-hint{font-size:12px;color:var(--pb-muted)}
/* Transient feedback beside the send button. The permanent safety notices
   below the composer are the app's; this line is the demo telling you what
   just happened, so it fades on its own rather than competing with them. */
.pb-flash{font-size:12px;color:var(--pb-ok);flex:1;min-width:0}

.pb-note{
  margin:0 16px 12px;padding:9px 12px;
  border-left:3px solid var(--hue);background:#dfe5ea;
  color:#41484f;font-size:12.5px;line-height:1.55;
}

/* ── feed ───────────────────────────────────────────────────────────── */
.pb-feed{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 16px 18px;display:flex;flex-direction:column;gap:10px;
}
.pb-empty{margin:14px 0;color:var(--pb-muted);font-size:13.5px}
.pb-entry{
  border:1px solid var(--pb-line);border-radius:8px;
  background:var(--pb-card);overflow:hidden;
}
.pb-entry-bar{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px;border-bottom:1px solid var(--pb-line);
  color:var(--pb-muted);font-size:12px;
}
.pb-time{font-family:var(--mono)}
.pb-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb .pb-copy{
  border:1px solid var(--pb-line);border-radius:6px;
  padding:4px 12px;font-size:12.5px;color:var(--pb-ink);flex:none;
}
.pb .pb-copy:hover{border-color:var(--hue);color:var(--hue)}
.pb .pb-copy.done{border-color:var(--pb-ok);color:var(--pb-ok)}
.pb-entry pre{
  margin:0;padding:11px 13px;white-space:pre-wrap;overflow-wrap:anywhere;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--pb-ink);
}
.pb-entry.clipped pre{max-height:9.5em;overflow:hidden}
.pb-entry.expanded pre{max-height:none}
.pb .pb-more{
  display:none;width:100%;padding:7px;font-size:12.5px;
  color:var(--pb-muted);border-top:1px solid var(--pb-line);
}
.pb-entry.clipped .pb-more,.pb-entry.expanded .pb-more{display:block}
.pb .pb-more:hover{color:var(--pb-ink);background:var(--pb-paper)}

.pb-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 16px;border-top:1px solid var(--pb-line);
  font-size:12px;color:var(--pb-muted);
}
.pb-foot .lk{color:var(--pb-muted)}
.pb-foot .lk:hover{color:var(--pb-ink)}

/* ── narrow: the app's own 720px breakpoint ─────────────────────────── */
.pb-dev[data-layout="tabs"] .pb-tabs{display:flex}
.pb-dev[data-layout="tabs"] .pb-lanes{grid-template-columns:1fr;min-height:0}
.pb-dev[data-layout="tabs"] .pb-lane[hidden]{display:none}
.pb-dev[data-layout="tabs"] .pb-lane-head{border-top:0;padding-top:12px}

@media(max-width:720px){
  .pb-lanes{grid-template-columns:1fr}
  .pb-dev[data-layout="split"] .pb-lane + .pb-lane{border-top:1px solid var(--pb-line)}
  .pb .pb-input{font-size:16px;min-height:92px}
}

/* ==========================================================================
   Download table with checksums (both product pages)
   --------------------------------------------------------------------------
   The hash is the point of the row, so it gets its own line at full width and
   is allowed to wrap anywhere rather than being squeezed into a column and
   truncated. user-select:all means one click selects the whole digest.
   ========================================================================== */
.dl{border-top:1px solid var(--rule);margin-top:26px}
.dl-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:4px 18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.dl-file{font-family:var(--mono);font-size:.95rem;font-weight:700;overflow-wrap:anywhere}
.dl-for{font-size:.85rem;color:var(--ink-soft);text-align:right;white-space:nowrap}
.dl-hash{
  grid-column:1/-1;font-family:var(--mono);font-size:.76rem;line-height:1.7;
  color:var(--ink-soft);overflow-wrap:anywhere;user-select:all;
  background:var(--paper-2);border-left:2px solid var(--rule);padding:6px 10px;
}
.dl-hash b{color:var(--ink);font-weight:400}
.dl-note{font-size:.86rem;color:var(--ink-soft);max-width:62ch;margin:16px 0 0}
@media(max-width:560px){
  .dl-row{grid-template-columns:1fr}
  .dl-for{text-align:left}
}

/* ---------------- downloads: files, curl, per-file sums ---------------- */
.dl-file a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--verify)}
.dl-file a:hover{color:var(--verify)}
.dl-size{font-weight:400;color:var(--ink-soft);font-size:.82rem;letter-spacing:0}
.dl-hash + .dl-hash{margin-top:2px}
.dl-hash a{color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.dl-hash a:hover{color:var(--verify);border-bottom-color:var(--verify)}
.dl-hash .lbl{display:inline-block;min-width:9.5em;color:var(--ink)}
.cmd-block{white-space:pre-wrap;line-height:1.95}
.cmd-block .c{opacity:.6}
@media(max-width:560px){
  .dl-hash .lbl{display:block;min-width:0;margin-bottom:2px;font-weight:600}
  .cmd-block{font-size:.76rem}
}