/* peptualpeptides.com - original 'gold-ledge' stylesheet: tuhao gold on charcoal. */
:root{
  --brand:#c9a227; --brand-hi:#f3dc9a; --brand-deep:#8a6212; --brand-tint:#fdf5e1;
  --accent:#171410; --accent-tint:#f6ecd6;
  --ink:#1b1811; --ink-soft:#6d6353; --line:#e9dfc4;
  --paper:#ffffff; --paper-warm:#fbf7ef;
  --promo:#e9b923; --radius:14px; --max:1240px; --head:58px;
  --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:'Iowan Old Style',Charter,'Palatino Linotype','Book Antiqua',Georgia,serif;
  --mono:'Consolas','SF Mono','Courier New',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-warm);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.72}
img{max-width:100%}
a{color:var(--brand-deep);text-decoration:none}
a:hover{color:#6d4c09;text-decoration:underline}
h1,h2,h3,h4{line-height:1.3;color:var(--ink)}
h1{font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.45rem);
  margin:0 0 12px;letter-spacing:-.014em}
h2{font-family:var(--serif);font-size:1.28rem;margin:0 0 12px}
h3{font-size:1.06rem;margin:1.3em 0 .4em}
p{margin:.62em 0}

/* ---------------- masthead: one charcoal bar, brand left + nav right ---------- */
.masthead{position:sticky;top:0;z-index:90;background:var(--accent);
  border-bottom:2px solid var(--brand);box-shadow:0 8px 26px rgba(23,20,16,.22)}
.masthead-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;
  gap:20px;padding:9px 22px}
.masthead-top{display:flex;align-items:center;gap:16px;margin-right:auto;min-width:0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:linear-gradient(150deg,var(--brand-hi) 0%,var(--brand) 52%,#a97c14 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.28),0 4px 12px rgba(201,162,39,.25)}
.brand-mark svg{width:26px;height:26px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-text b{font-family:var(--serif);font-size:1.18rem;color:#fffaf0}
.brand-text i{font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.brand-tag{margin:0;font-size:12px;line-height:1.4;color:#b3a68b;max-width:300px}
.railnav{margin-left:auto}
.railnav-in{display:flex;align-items:center;gap:2px;padding:0}
.railnav a{white-space:nowrap;color:#cbbfa4;font-size:13.8px;padding:14px 14px 12px;
  border-bottom:2px solid transparent}
.railnav a:hover{color:#fffaf0;border-bottom-color:rgba(201,162,39,.55);text-decoration:none}
.railnav a.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.notice{background:linear-gradient(90deg,#fdf5e1 0%,#f6e6b8 52%,#fdf5e1 100%);
  color:#5c4210;font-family:var(--mono);font-size:12.2px;line-height:1.55;padding:9px 22px;
  text-align:center;border-bottom:1px solid var(--line)}

/* ---------------- shell + breadcrumbs ---------------- */
.shell{max-width:var(--max);margin:0 auto;padding:0 22px 70px}
.shell-wide{max-width:1420px}
.crumbs{padding:16px 0 0;font-family:var(--mono);font-size:11.8px;color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--brand-deep)}
.crumbs .sep{padding:0 6px;opacity:.6}
.crumbs .cur{color:var(--ink)}

/* ---------------- entry head: centred, gold rule ---------------- */
.entry-head{max-width:900px;margin:0 auto 24px;padding:26px 0 16px;
  border-bottom:1px solid var(--line)}
.shell-wide .entry-head{max-width:none}
.entry-head .lede{font-size:1.04rem;color:var(--ink-soft);max-width:80ch;margin:.35em 0}
.byline{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);
  font-size:11.8px;color:var(--ink-soft);margin-top:15px;padding-top:12px;
  border-top:1px dashed var(--line)}
.byline b{color:var(--ink);font-weight:600}

/* ---------------- entry body: chapter strip above a centred prose column ----- */
.entry-grid{display:block}
.rail{display:contents}
.railbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;margin:0 0 18px}
.rb-h{font-family:var(--mono);font-size:10.4px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand-deep);margin:0 0 10px}
.railbox.tocbox{position:sticky;top:var(--head);z-index:60;margin:0 -22px 22px;padding:9px 0 0;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper-warm)}
ol.toc{list-style:none;margin:0;padding:0 22px 10px;counter-reset:t;display:flex;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
ol.toc li{counter-increment:t;padding:0;display:flex;align-items:center;gap:6px;
  white-space:nowrap;font-size:13px;line-height:1.2}
ol.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);
  font-size:10px;color:var(--brand-deep);opacity:.8}
ol.toc a{display:inline-block;padding:5px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--paper);color:var(--ink-soft);font-size:12.8px}
ol.toc a:hover{background:var(--brand);border-color:var(--brand);color:#241c08;
  text-decoration:none}
.railbox.railnote{max-width:900px;margin:0 auto 24px;background:var(--brand-tint);
  border:0;border-left:4px solid var(--brand)}
.railnote{font-size:12.8px;line-height:1.6;color:#5c4210}
.prose{max-width:900px;margin:0 auto}
.blk{margin:0 0 34px;scroll-margin-top:calc(var(--head) + 66px)}
.blk > h2{padding-left:14px;border-left:3px solid var(--brand)}
.prose p{color:#2b2620}

/* ---------------- tables ---------------- */
.datatable{margin:20px 0;overflow-x:auto}
.datatable table{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper)}
.datatable caption{caption-side:top;text-align:left;font-family:var(--mono);
  font-size:11.4px;color:var(--ink-soft);padding:0 0 8px;letter-spacing:.02em}
.datatable th{background:var(--brand-tint);text-align:left;padding:9px 12px;
  border-bottom:2px solid var(--brand);font-family:var(--mono);font-size:12px;
  letter-spacing:.03em;color:var(--brand-deep)}
.datatable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.datatable tr:nth-child(even) td{background:#fdfaf3}

/* ---------------- lists ---------------- */
ul.ticks{list-style:none;padding:0;margin:.7em 0}
ul.ticks li{position:relative;padding:5px 0 5px 22px}
ul.ticks li::before{content:"\2014";position:absolute;left:0;color:var(--brand-deep)}
ul.refs{list-style:none;padding:0;margin:.5em 0}
ul.refs li{padding:7px 0;border-bottom:1px dotted var(--line);font-size:13.6px}
.fine{font-size:12.4px;color:var(--ink-soft)}

/* ---------------- faq ---------------- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  margin:9px 0}
.faq summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:14.8px;
  list-style:none;display:flex;gap:11px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"?";font-family:var(--mono);color:#241c08;background:var(--brand);
  width:19px;height:19px;flex:0 0 19px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;margin-top:2px}
.faq details[open] summary::before{background:var(--brand-deep);color:#fff8e6}
.faq .ans{padding:0 16px 14px 46px;color:var(--ink-soft);font-size:14.2px}

/* ---------------- retour strip ---------------- */
.retour{background:var(--brand-tint);border-left:4px solid var(--brand);
  border-radius:0 10px 10px 0;padding:12px 17px;font-size:13.6px;color:#5c4210}

/* ---------------- home: full-bleed charcoal hero + gold cards ---------------- */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#221c14 0%,#171410 58%,#2e2618 100%);
  color:#f7f0df;margin:0 -22px 34px;padding:44px 26px 38px;
  box-shadow:0 18px 40px rgba(23,20,16,.22)}
.hero::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,#c9a227,#f3dc9a 46%,#a97c14)}
.hero h1{color:#fffaf0;font-size:clamp(1.8rem,4.1vw,2.8rem);margin:0 0 14px;max-width:34ch}
.hero .lede{color:#d8cdb4;font-size:1.06rem;max-width:76ch;margin:.4em 0}
.hero .hstats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero .hstat{background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.45);
  border-radius:999px;padding:7px 15px;font-family:var(--mono);font-size:11.6px;
  letter-spacing:.04em;color:var(--brand-hi)}
.hub{margin:40px 0}
.hub > h2{font-family:var(--mono);font-size:11.6px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-deep);border-bottom:1px solid var(--line);
  padding-bottom:9px;margin-bottom:16px}
.hub p{color:var(--ink-soft);max-width:80ch}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;
  margin-top:16px}
.colcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:var(--radius);padding:18px 20px;
  color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.colcard:hover{border-left-color:var(--brand-deep);text-decoration:none;color:var(--ink);
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,20,16,.12)}
.colcard .k{font-family:var(--mono);font-size:10.2px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-deep);margin-bottom:9px}
.colcard b{font-family:var(--serif);font-size:1.05rem;margin-bottom:6px;color:var(--ink)}
.colcard span{font-size:13.3px;color:var(--ink-soft)}
.tiplist{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--radius);padding:20px 24px}

/* ---------------- calculator panel ---------------- */
.calcwrap{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:14px;padding:20px 22px;margin:6px 0 30px;
  box-shadow:0 10px 26px rgba(23,20,16,.07)}
.calchead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.calchead h2{border:0;padding:0;margin:0;font-size:1.14rem}
.calchead .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#241c08;background:var(--brand);border-radius:6px;
  padding:3px 9px}
.calcwrap .calcsub{font-size:13px;color:var(--ink-soft);margin:.2em 0 16px}
.calcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.calcf > span{display:block;font-family:var(--mono);font-size:10.2px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.calcf input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font-family:var(--mono);font-size:15px;color:var(--ink);background:#fdfbf6}
.calcf input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(201,162,39,.22)}
#pc-out{margin-top:18px;background:var(--brand-tint);border-radius:12px;padding:16px 18px}
#pc-out .big{font-family:var(--mono);font-size:23px;font-weight:700;color:var(--brand-deep)}
#pc-out table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13.4px;
  margin-top:10px}
#pc-out td{padding:6px 0;border-bottom:1px solid rgba(138,98,18,.18);vertical-align:top}
#pc-out td:last-child{text-align:right;color:var(--brand-deep)}
#pc-out .calcnote{font-size:12px;color:var(--ink-soft);margin:12px 0 0;line-height:1.5}

/* ---------------- footer ---------------- */
.site-footer{background:var(--accent);border-top:3px solid var(--brand);color:#a89b80;
  margin-top:58px}
.foot-in{max-width:var(--max);margin:0 auto;padding:36px 22px 19px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.foot-in h4{color:var(--brand);font-family:var(--mono);font-size:10.4px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 10px}
.foot-in a{display:block;color:#bdb096;font-size:13.4px;padding:3px 0}
.foot-in a:hover{color:var(--brand-hi);text-decoration:none}
.foot-legal{max-width:var(--max);margin:0 auto;padding:16px 22px 30px;
  border-top:1px solid rgba(201,162,39,.22);font-size:12.3px;line-height:1.65;
  color:#8d8267}
.foot-legal b{color:#e6dcc2}
.foot-legal .fine{color:#7a7060}

/* ---------------- promo bar ---------------- */
#zr-promo{display:none;position:fixed;left:0;right:0;bottom:0;z-index:999;
  background:var(--accent);border-top:2px solid var(--brand);padding:11px 52px 11px 18px;
  text-align:center;font-size:13.6px;font-family:var(--mono)}
#zr-promo .promolink{color:var(--promo);font-weight:700}
#zr-promo .promolink:hover{color:var(--brand-hi);text-decoration:underline}
#zr-promoclose{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:1px solid rgba(201,162,39,.45);color:#cfc4a6;border-radius:6px;
  width:28px;height:28px;cursor:pointer;font-size:13px;line-height:1}
#zr-promoclose:hover{background:rgba(201,162,39,.16)}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){ .brand-tag{display:none} }
@media (max-width:1023px){
  :root{--head:96px}
  .masthead-in{flex-wrap:wrap;gap:0;padding:8px 16px 0}
  .masthead-top{padding-bottom:8px}
  .railnav{width:100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .railnav-in{padding:0 16px}
  .railnav a{padding:9px 12px 8px;font-size:13.2px}
  .prose{max-width:none}
}
@media (max-width:700px){
  body{font-size:16px}
  .shell{padding:0 14px 60px}
  .notice{font-size:11.3px;padding:7px 12px;text-align:left}
  .entry-head{padding:20px 0 14px}
  .railbox.tocbox{margin:0 -14px 18px}
  ol.toc{padding:0 14px 9px}
  .hero{margin:0 -14px 26px;padding:32px 18px 28px}
  .hub{margin:32px 0}
  .datatable table{font-size:13.2px}
  .foot-legal{padding-bottom:26px}
}

/* ---- migrated directory compatibility layer ---- */
table.data{border-collapse: collapse; width: 100%; max-width: 780px; margin: 14px 0 22px;
  font-family: Verdana, Geneva, sans-serif; font-size: 13.5px; background: var(--paper);}
table.data th, table.data td{border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top;}
table.data th{background: var(--brand-tint); color: var(--brand-deep);}
.avatar{width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
  background: linear-gradient(135deg, #6faf5a, #3f7d3a); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: Verdana, Geneva, sans-serif; font-weight: 700; font-size: 17px;}
/* ---------- vendor directory (/vendors/) - layout cloned from the reference
   design (peptidecertify/vendors); colors remapped to the zesty palette ---------- */
.page .subtitle{color: var(--ink-soft); font-size: 16px; margin-top: 8px; max-width: 820px;}
.vd-disclaimer{background: var(--accent-tint); border: 1px solid #ecc98c; border-left: 4px solid #c8862c; border-radius: 8px; padding: 14px 16px; font-size: 13.5px; color: var(--ink); margin: 18px 0;}
.vd-disclaimer p{margin: 0;}
.vd-disclaimer b{color: #8a5a12;}
.vd-tabs{display: flex; gap: 8px; margin: 22px 0 14px; flex-wrap: wrap;}
.vd-tab{border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 8px 18px; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;}
.vd-tab.on{background: var(--ink); border-color: var(--ink); color: #fff;}
.vd-search{position: relative; max-width: 640px; margin: 0 0 12px;}
.vd-search input{width: 100%; padding: 12px 14px 12px 40px; border: none; border-bottom: 2px solid var(--line); background: transparent; font-family: Verdana, Geneva, sans-serif; font-size: 16px; outline: none;}
.vd-search input:focus{border-bottom-color: var(--brand);}
.vd-search svg{position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--ink-soft);}
.vd-chiprow{display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px;}
.vd-chiprow .lbl{font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px;}
.vd-chip{border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 5px 12px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer;}
.vd-chip.on{background: var(--ink); border-color: var(--ink); color: #fff;}
.vd-chip.loc.on{background: var(--brand); border-color: var(--brand);}
.vd-count{font-family: Verdana, Geneva, sans-serif; font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin: 10px 0 6px;}
.vd-list{border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper);}
.vd-cat{padding: 8px 16px; background: var(--brand-tint); font-family: Verdana, Geneva, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep);}
.vd-item{border-top: 1px solid var(--line);}
.vd-row{display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; background: none; border: none; text-align: left; font: inherit; cursor: pointer;}
.vd-row:hover{background: var(--brand-tint);}
.vd-arrow{color: var(--ink-soft); transition: transform .15s; flex-shrink: 0;}
.vd-item.open .vd-arrow{transform: rotate(90deg);}
.vd-name{flex: 1; min-width: 0; font-weight: 600; color: var(--ink); font-size: 15px;}
.vd-name small{color: var(--ink-soft); font-weight: 400; white-space: nowrap; font-size: 13px;}
.vd-sup{font-size: 12px; color: var(--ink-soft); flex-shrink: 0;}
.vd-from{text-align: right; min-width: 86px; flex-shrink: 0;}
.vd-from em{display: block; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);}
.vd-from b{font-size: 15px;}
.vd-detail{display: none; border-top: 1px solid var(--line); background: var(--paper-warm); padding: 12px 16px;}
.vd-item.open .vd-detail{display: block;}
/* neutralize the site-wide table look inside quote tables */
.vd-detail table{width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; border: none; border-radius: 0; margin: 0;}
.vd-detail th{text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); background: transparent; font-weight: 700;}
.vd-detail td{padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top;}
.vd-detail tr:last-child td{border-bottom: none;}
.vd-detail td.p{text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap;}
.vd-detail .none{color: var(--ink-soft); font-size: 13px; padding: 8px 0;}
.vd-vendor{border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 16px 18px;}
.vd-vendor h3{font-size: 16px; margin-bottom: 2px;}
.vd-vendor .loc{font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: var(--brand-deep); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;}
.vd-vendor p{font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px;}
.vd-vendor .contact{font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px; color: var(--ink-soft);}
/* WhatsApp elements (tab bar icon + vendor card footer) */
.vd-tab.wa{display: inline-flex; align-items: center; gap: 7px; color: #25d366; border-color: #25d366; text-decoration: none; font-size: 13px; padding: 8px 14px; font-weight: 700;}
.vd-tab.wa:hover{background: #25d366; color: #fff; text-decoration: none;}
.vd-vfoot{display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px;}
.vd-vfoot .vpl{font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;}
.vd-vfoot .vpl:hover{color: var(--brand-deep);}
.vd-vfoot .vd-wa{display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #25d366; text-decoration: none; white-space: nowrap;}
.vd-vfoot .vd-wa:hover{text-decoration: underline;}
/* vendor filter bar (View price list linkage) */
.vd-vbar{display: flex; align-items: center; gap: 10px; background: var(--brand-tint); border: 1px solid var(--brand); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; flex-wrap: wrap;}
.vd-vbar b{color: var(--brand-deep);}
.vd-vbar-x{border: none; background: var(--ink); color: #fff; border-radius: 5px; padding: 3px 10px; font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; margin-left: auto;}
.vd-vbar-x:hover{background: var(--brand-deep);}
/* quote table WhatsApp column */
.vd-detail th.wac, .vd-detail td.wac{text-align: center; white-space: nowrap;}
.vd-detail td.wac a{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #25d366; background: rgba(37,211,102,.1); transition: background .15s;}
.vd-detail td.wac a:hover{background: #25d366; color: #fff;}
/* prose + sidebar layout under the directory */
.cols{display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 32px; align-items: start; margin-top: 24px;}
.prose h3{font-size: 17px; margin: 20px 0 8px;}
.prose p{margin: 0 0 14px; color: var(--ink-soft);}
aside .side-box{background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px;}
aside .side-box h4{font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin-bottom: 10px; letter-spacing: .2px;}
aside .side-box ul{list-style: none; font-size: 13.5px; padding-left: 0; margin: 0;}
aside .side-box li{margin-bottom: 7px; padding-left: 14px; position: relative;}
aside .side-box li::before{content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand);}
.wa-cta{background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: #fff; border-radius: 10px; padding: 18px; margin-bottom: 16px;}
.wa-cta h4{font-size: 15px; margin-bottom: 6px; color: #fff;}
.wa-cta p{font-size: 13px; opacity: .92; margin-bottom: 12px;}
.wa-cta a{display: inline-block; background: #fff; color: var(--brand-deep); font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 8px; font-family: Verdana, Geneva, sans-serif;}
.wa-cta a:hover{text-decoration: none; background: var(--brand-tint);}
.author-box{display: flex; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 24px 0; font-size: 13.5px;}
.author-box .avatar{width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; font-family: Verdana, Geneva, sans-serif; font-weight: 800; font-size: 15px;}
.author-box b{display: block; font-size: 14px;}
.author-box .role{color: var(--ink-soft); font-size: 12px;}
.updated-line{font-size: 12.5px; color: var(--ink-soft); margin-top: 14px;}
.cols{grid-template-columns: minmax(0,1fr);}
.vd-sup{display: none;}
.vd-name small{display: none;}
.vd-detail{overflow-x: visible;}
.vd-detail table{font-size: 11px;}
.vd-detail th{padding: 6px 5px; font-size: 9px; white-space: normal;}
.vd-detail td{padding: 6px 5px; overflow-wrap: anywhere; word-break: break-word;}
.vd-detail td.p{white-space: normal;}
.vd-detail td.wac a{width: 24px; height: 24px;}
.vd-tab.wa span{display: none;}
.vdmain{max-width:none;padding:0}
.vdmain > h1{font-family:var(--serif)}