/* ==========================================================================
   Bimbel App — situs pemasaran
   Palet: ink navy + kuningan (insignia) + pita kertas (dokumen resmi)
   Tipografi: Plus Jakarta Sans (Tokotype, Indonesia) + Newsreader (editorial)
   ========================================================================== */

:root{
  /* dasar */
  --ink:        #0C1220;
  --ink-2:      #131B2E;
  --ink-3:      #1B2540;
  --line:       rgba(206,218,242,.12);
  --line-2:     rgba(206,218,242,.22);

  /* teks */
  --text:       #EEF1F7;
  --text-2:     #A9B4CC;
  --text-3:     #7C88A3;

  /* kuningan (aksen utama) */
  --brass:      #C8A44D;
  --brass-hi:   #E3C87E;
  --brass-dim:  rgba(200,164,77,.14);

  /* semantik ambang batas */
  --pass:       #4ADE80;
  --fail:       #F1685E;

  /* pita kertas */
  --paper:      #F5F2EA;
  --paper-ink:  #1A1F2B;
  --paper-2:    #5A6270;
  --paper-line: rgba(26,31,43,.14);

  /* ukuran */
  --wrap:       1180px;
  --wrap-narrow: 760px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

::selection{ background: var(--brass); color: #14100A; }

:focus-visible{
  outline: 2px solid var(--brass-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- tata letak ---------- */
.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: 22px; }
.narrow{ max-width: var(--wrap-narrow); }
.band{ padding: 84px 0; position: relative; }
.band-tight{ padding: 64px 0; }

@media (max-width: 760px){
  .band{ padding: 64px 0; }
  .band-tight{ padding: 48px 0; }
}

/* ---------- tipografi ---------- */
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.028em; line-height:1.08; }

.h-display{ font-size: clamp(2.2rem, 5.3vw, 3.55rem); text-wrap: balance; }
.h-1{ font-size: clamp(1.8rem, 3.6vw, 2.55rem); letter-spacing:-.03em; text-wrap: balance; }
.h-2{ font-size: clamp(1.35rem, 2.5vw, 1.75rem); letter-spacing:-.022em; }
.h-3{ font-size: 1.08rem; font-weight:700; letter-spacing:-.012em; }

p{ margin: 0 0 1.05em; }
.lead{ font-size: clamp(1.03rem, 1.7vw, 1.19rem); color: var(--text-2); line-height:1.7; max-width: 62ch; }
.muted{ color: var(--text-2); }
.dim{ color: var(--text-3); }
.small{ font-size:.875rem; line-height:1.6; }
.tnum{ font-variant-numeric: tabular-nums; }

.serif{ font-family: var(--serif); font-weight:400; font-style:normal; }

.marker{ color: var(--brass); }

/* ---------- tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family: var(--sans); font-size:.965rem; font-weight:700; letter-spacing:-.01em;
  padding: 13px 24px; border-radius: 999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{ background: var(--brass); color:#171203; }
.btn-primary:hover{ background: var(--brass-hi); }

.btn-ghost{ background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover{ border-color: var(--brass); color: var(--brass-hi); }

.btn-paper{ background: var(--paper-ink); color: var(--paper); }
.btn-paper:hover{ background:#000; }

.btn-lg{ padding: 16px 30px; font-size: 1.01rem; }
.btn-sm{ padding: 9px 17px; font-size: .875rem; }

/* ---------- navigasi ---------- */
.nav{
  position: sticky; top:0; z-index: 90;
  background: rgba(12,18,32,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.nav.scrolled{ border-bottom-color: var(--line); }
.nav-in{ display:flex; align-items:center; gap: 26px; height: 68px; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.03em; font-size:1.09rem; }
.brand-mark{
  width:27px; height:27px; flex:0 0 auto; border-radius:7px;
  background: linear-gradient(150deg, var(--brass-hi), var(--brass) 55%, #8C6F26);
  display:grid; place-items:center; color:#171203; font-size:.82rem; font-weight:800;
}
.nav-links{ display:flex; gap:24px; margin-left:auto; }
.nav-links a{
  text-decoration:none; font-size:.925rem; font-weight:600; color: var(--text-2);
  transition: color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--text); }
.nav-cta{ display:flex; gap:10px; align-items:center; }

.nav-toggle{
  display:none; margin-left:auto; background:transparent; border:1px solid var(--line-2);
  color:var(--text); width:40px; height:38px; border-radius:10px; cursor:pointer; font-size:1rem;
}
.nav-mobile{ display:none; border-top:1px solid var(--line); padding: 14px 0 20px; }
.nav-mobile.open{ display:block; }
.nav-mobile a{ display:block; padding:11px 0; text-decoration:none; font-weight:600; color:var(--text-2); border-bottom:1px solid var(--line); }
.nav-mobile .btn{ width:100%; margin-top:14px; }

@media (max-width: 880px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding: 74px 0 84px; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:-30% 40% 40% -20%;
  background: radial-gradient(closest-side, rgba(200,164,77,.13), transparent 72%);
  pointer-events:none;
}
.hero-grid{
  position:relative; display:grid; gap: 54px;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items:center;
}
@media (max-width: 560px){
  .hero-actions .btn{ width:100%; }
}
@media (max-width: 940px){
  .hero{ padding: 46px 0 62px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 38px; }
}

.hero h1{ margin-bottom: 20px; }
.hero-sub{ font-size: clamp(1.02rem, 1.75vw, 1.16rem); color: var(--text-2); max-width: 52ch; margin-bottom: 30px; line-height:1.68; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-note{ margin-top:20px; font-size:.86rem; color: var(--text-3); }

/* kartu hasil SKD (elemen tanda tangan) */
.skd{
  background: linear-gradient(168deg, var(--ink-2), #0F1626);
  border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px 22px;
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.9);
}
.skd-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:22px; }
.skd-title{ font-weight:800; font-size:1.02rem; letter-spacing:-.02em; }
.skd-sub{ font-size:.78rem; color: var(--text-3); }

.skd-row{ margin-bottom: 19px; }
.skd-row:last-of-type{ margin-bottom: 14px; }
.skd-meta{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.skd-name{ font-size:.88rem; font-weight:700; color: var(--text-2); }
.skd-val{ font-size:1.02rem; font-weight:800; font-variant-numeric: tabular-nums; }
.skd-val.ok{ color: var(--pass); }
.skd-val.no{ color: var(--fail); }

.skd-track{ position:relative; height:12px; border-radius:999px; background: rgba(206,218,242,.09); overflow:visible; }
.skd-fill{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:999px;
  background: linear-gradient(90deg, #3A4A6B, #7E8EB0);
  transition: width 1.15s cubic-bezier(.22,.75,.3,1);
}
.skd-fill.ok{ background: linear-gradient(90deg, #2E7D53, var(--pass)); }
.skd-fill.no{ background: linear-gradient(90deg, #8E3A34, var(--fail)); }
.skd-limit{
  position:absolute; top:-7px; bottom:-7px; width:2px; border-radius:2px;
  background: var(--brass); opacity:.95;
}
.skd-limit::after{
  content: attr(data-label);
  position:absolute; top:-19px; left:50%; transform:translateX(-50%);
  font-size:.66rem; font-weight:700; color: var(--brass); white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

.skd-foot{
  margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.skd-total{ font-size:.86rem; color: var(--text-2); }
.skd-total b{ color: var(--text); font-variant-numeric: tabular-nums; }
.skd-verdict{
  font-size:.78rem; font-weight:800; padding:6px 13px; border-radius:999px;
  background: rgba(241,104,94,.13); color: var(--fail); border:1px solid rgba(241,104,94,.35);
  opacity:0; transform: translateY(4px);
  transition: opacity .4s ease .2s, transform .4s ease .2s;
}
.skd.run .skd-verdict{ opacity:1; transform:none; }

.skd-explain{
  margin-top:14px; font-size:.82rem; line-height:1.6; color: var(--text-3);
  opacity:0; transition: opacity .5s ease .5s;
}
.skd.run .skd-explain{ opacity:1; }

/* ---------- pita kertas ---------- */
.paper{
  background: var(--paper); color: var(--paper-ink);
  border-block: 1px solid rgba(0,0,0,.2);
}
.paper .lead, .paper .muted{ color: var(--paper-2); }
.paper .dim{ color:#7A8290; }
.paper .marker{ color:#8A6A17; }

.stakes{ display:grid; grid-template-columns: 1.15fr 1fr; gap:52px; align-items:center; }
@media (max-width: 860px){ .stakes{ grid-template-columns:1fr; gap:30px; } }

.stake-fig{ font-size: clamp(3.1rem, 8vw, 5.1rem); font-weight:800; letter-spacing:-.045em; line-height:.95; font-variant-numeric: tabular-nums; }
.stake-cap{ font-size:.94rem; color: var(--paper-2); margin-top:10px; max-width:34ch; }
.stake-list{ list-style:none; margin:0; padding:0; }
.stake-list li{
  padding: 15px 0; border-bottom:1px solid var(--paper-line);
  display:flex; gap:16px; align-items:baseline; font-size:.985rem;
}
.stake-list li:first-child{ border-top:1px solid var(--paper-line); }
.stake-list b{ font-variant-numeric: tabular-nums; font-weight:800; min-width:78px; }

/* ---------- bagian umum ---------- */
.sec-head{ max-width: 58ch; margin-bottom: 40px; }
.sec-head p{ margin-top:14px; }

.rule{ height:1px; background: var(--line); border:0; margin:0; }

/* masalah: daftar bernomor hanya bila memang urutan; ini bukan → pakai garis */
.probs{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; }
@media (max-width: 860px){ .probs{ grid-template-columns:1fr; } }
.prob{ background: var(--ink); padding: 28px 26px; }
.prob h3{ margin-bottom:10px; }
.prob p{ color: var(--text-2); font-size:.945rem; margin:0; }

/* pilar produk — tata letak asimetris, bukan kartu seragam */
.pillar{ display:grid; grid-template-columns: 1fr 1.12fr; gap:48px; align-items:center; padding: 46px 0; border-bottom:1px solid var(--line); }
.pillar:last-child{ border-bottom:0; }
.pillar.flip .pillar-vis{ order:-1; }
@media (max-width: 900px){
  .pillar{ grid-template-columns:1fr; gap:26px; padding: 34px 0; }
  .pillar.flip .pillar-vis{ order:0; }
}
.pillar h3{ font-size: clamp(1.3rem,2.3vw,1.6rem); font-weight:800; letter-spacing:-.025em; margin-bottom:12px; }
.pillar p{ color: var(--text-2); font-size:.985rem; }
.pillar-list{ list-style:none; margin:16px 0 0; padding:0; }
.pillar-list li{ position:relative; padding-left:20px; margin-bottom:8px; font-size:.925rem; color: var(--text-2); }
.pillar-list li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:2px; background: var(--brass); }

.vis{
  background: linear-gradient(168deg, var(--ink-2), #0E1523);
  border:1px solid var(--line); border-radius: var(--r-lg); padding:20px;
  box-shadow: 0 22px 50px -32px rgba(0,0,0,.9);
}

/* cuplikan UI ujian */
.q-chip{ display:inline-block; font-size:.7rem; font-weight:800; color: var(--brass); background: var(--brass-dim); padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.q-text{ font-size:.98rem; font-weight:600; line-height:1.55; margin-bottom:14px; }
.q-opt{ display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:11px; margin-bottom:8px; font-size:.88rem; color:var(--text-2); }
.q-opt .k{ width:22px; height:22px; border-radius:6px; background: var(--ink-3); display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--text-2); flex:0 0 auto; }
.q-opt.pick{ border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.08); color: var(--text); }
.q-opt.pick .k{ background: var(--pass); color:#08240F; }
.q-grid{ display:grid; grid-template-columns: repeat(10, 1fr); gap:5px; margin-top:16px; max-width:280px; }
.q-cell{ aspect-ratio:1; border-radius:5px; background: rgba(206,218,242,.08); border:1px solid var(--line); }
.q-cell.done{ background: rgba(74,222,128,.22); border-color: rgba(74,222,128,.45); }
.q-cell.flag{ background: rgba(200,164,77,.24); border-color: rgba(200,164,77,.5); }

/* cuplikan kelas live */
.live-bar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.live-dot{ width:8px; height:8px; border-radius:50%; background: var(--fail); }
.live-tag{ font-size:.72rem; font-weight:800; color: var(--fail); }
.live-stage{ aspect-ratio: 16/9; border-radius:12px; background: #0A0F1B; border:1px solid var(--line); display:grid; place-items:center; color: var(--text-3); font-size:.8rem; margin-bottom:12px; }
.live-tools{ display:flex; gap:7px; flex-wrap:wrap; }
.tool{ font-size:.76rem; font-weight:600; color: var(--text-2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
.tool.on{ border-color: rgba(200,164,77,.5); color: var(--brass-hi); background: var(--brass-dim); }

/* cuplikan kesamaptaan */
.samap{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.samap > div{ text-align:center; border:1px solid var(--line); border-radius:12px; padding:14px 8px; }
.samap .n{ font-size:1.32rem; font-weight:800; font-variant-numeric: tabular-nums; }
.samap .l{ font-size:.72rem; color: var(--text-3); margin-top:3px; }

/* ---------- percabangan audiens ---------- */
.fork{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width: 820px){ .fork{ grid-template-columns:1fr; } }
.fork-card{
  border:1px solid var(--line); border-radius: var(--r-lg); padding: 32px 30px;
  background: linear-gradient(170deg, var(--ink-2), #0E1524);
  display:flex; flex-direction:column;
}
.fork-card.lead-card{ border-color: rgba(200,164,77,.42); background: linear-gradient(170deg, #1A1608, #121826 60%); }
.fork-card h3{ margin-bottom:10px; }
.fork-card p{ color: var(--text-2); font-size:.955rem; }
.fork-card .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- catatan pendiri ---------- */
.founder{ display:grid; grid-template-columns: 108px 1fr; gap:26px; align-items:start; }
@media (max-width: 640px){ .founder{ grid-template-columns:1fr; gap:18px; } }
.founder-mark{
  width:108px; height:108px; border-radius:50%;
  background: linear-gradient(150deg, #223055, #131B2E);
  border:1px solid var(--line-2); display:grid; place-items:center;
  font-family: var(--serif); font-size:2.1rem; color: var(--brass);
}
.founder blockquote{
  margin:0; font-family: var(--serif); font-size: clamp(1.12rem, 2.1vw, 1.42rem);
  line-height:1.55; color: var(--text); letter-spacing:-.01em;
}
.founder cite{ display:block; margin-top:16px; font-family: var(--sans); font-style:normal; font-size:.87rem; color: var(--text-3); }

/* ---------- batch perdana / bukti ---------- */
.proof{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width: 820px){ .proof{ grid-template-columns:1fr; } }
.proof-slot{
  border:1px dashed var(--line-2); border-radius: var(--r-md); padding: 24px 22px;
  background: rgba(206,218,242,.02);
}
.proof-slot .q{ font-size:.95rem; color: var(--text-3); line-height:1.6; min-height:3em; }
.proof-slot .who{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:.8rem; color: var(--text-3); }

/* ---------- harga ---------- */
.plans{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; align-items:start; }
@media (max-width: 900px){ .plans{ grid-template-columns:1fr; } }
.plan{
  border:1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px;
  background: linear-gradient(172deg, var(--ink-2), #0E1524); display:flex; flex-direction:column;
}
.plan.feature{ border-color: rgba(200,164,77,.45); box-shadow: 0 24px 60px -34px rgba(200,164,77,.5); }
.plan-name{ font-size:1.06rem; font-weight:800; letter-spacing:-.02em; }
.plan-for{ font-size:.83rem; color: var(--text-3); margin-top:4px; }
.plan-price{ margin: 20px 0 4px; font-size: 2.05rem; font-weight:800; letter-spacing:-.035em; font-variant-numeric: tabular-nums; }
.plan-price span{ font-size:.9rem; font-weight:600; color: var(--text-3); letter-spacing:0; }
.plan ul{ list-style:none; margin:20px 0 24px; padding:0; }
.plan li{ position:relative; padding-left:22px; margin-bottom:10px; font-size:.92rem; color: var(--text-2); }
.plan li::before{ content:''; position:absolute; left:2px; top:.52em; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--brass); }
.plan .btn{ margin-top:auto; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding: 21px 40px 21px 0; position:relative;
  font-weight:700; font-size:1.01rem; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color: var(--brass); font-size:1.3rem; font-weight:400; transition: transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq .ans{ padding: 0 0 22px; color: var(--text-2); font-size:.955rem; max-width: 70ch; }
.faq .ans p:last-child{ margin-bottom:0; }

/* ---------- cta penutup ---------- */
.closer{
  border:1px solid rgba(200,164,77,.3); border-radius: var(--r-lg);
  background: linear-gradient(150deg, #1A1608 0%, #101725 62%);
  padding: 54px 44px; text-align:center;
}
@media (max-width:640px){ .closer{ padding: 38px 24px; } }
.closer h2{ margin-bottom:14px; }
.closer .lead{ margin-inline:auto; margin-bottom:26px; }
.closer .hero-actions{ justify-content:center; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding: 46px 0 40px; }
.foot-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:34px; }
@media (max-width: 820px){ .foot-grid{ grid-template-columns: 1fr 1fr; gap:26px; } }
.foot h4{ font-size:.82rem; font-weight:700; color: var(--text-3); margin-bottom:12px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:9px; }
.foot a{ text-decoration:none; font-size:.9rem; color: var(--text-2); }
.foot a:hover{ color: var(--brass-hi); }
.foot-note{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-size:.82rem; color: var(--text-3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- gerak: satu sekuens, hormati preferensi ---------- */
.rise{ opacity:0; transform: translateY(14px); }
.rise.in{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.75,.3,1); }

@media (prefers-reduced-motion: reduce){
  .rise, .rise.in{ opacity:1; transform:none; transition:none; }
  .skd-fill{ transition:none; }
  .skd-verdict, .skd-explain{ transition:none; opacity:1; transform:none; }
}

/* ── halaman dokumen (syarat, privasi) ─────────────────────────────── */
.doc{ max-width: 74ch; }
.doc h2{ font-size: 1.3rem; margin: 44px 0 12px; letter-spacing:-.022em; scroll-margin-top: 90px; }
.doc h2:first-of-type{ margin-top: 30px; }
.doc h3{ font-size: 1.02rem; margin: 24px 0 8px; font-weight:700; }
.doc p, .doc li{ color: var(--text-2); font-size: .975rem; line-height:1.72; }
.doc ul, .doc ol{ margin: 0 0 1.05em; padding-left: 22px; }
.doc li{ margin-bottom: 8px; }
.doc strong{ color: var(--text); font-weight:700; }
.doc a{ color: var(--brass-hi); }
.doc table{ width:100%; border-collapse: collapse; margin: 6px 0 20px; font-size:.9rem; }
.doc th, .doc td{ text-align:left; padding: 11px 12px; border-bottom:1px solid var(--line); vertical-align: top; }
.doc th{ color: var(--text); font-weight:700; font-size:.84rem; }
.doc td{ color: var(--text-2); }

.doc-meta{ font-size:.86rem; color: var(--text-3); margin-bottom: 26px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.doc-toc{ background: var(--ink-2); border:1px solid var(--line); border-radius: var(--r-md); padding: 20px 24px; margin-bottom: 34px; }
.doc-toc h4{ font-size:.84rem; color: var(--text-3); margin:0 0 10px; font-weight:700; }
.doc-toc ol{ margin:0; padding-left:20px; columns:2; column-gap:28px; }
@media (max-width:640px){ .doc-toc ol{ columns:1; } }
.doc-toc li{ margin-bottom:6px; font-size:.9rem; }
.doc-toc a{ text-decoration:none; color: var(--text-2); }
.doc-toc a:hover{ color: var(--brass-hi); }

.callout{
  border-left:3px solid var(--brass); background: var(--brass-dim);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 20px; margin: 20px 0;
}
.callout p{ margin:0; color: var(--text); font-size:.94rem; }
.callout.warn{ border-left-color: var(--fail); background: rgba(241,104,94,.09); }