*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #07090f; --bg2: #0d1117; --gold: #c9982a; --gold2: #e8b84b;
  --cyan: #00c8a0; --text: #e8e6e0; --muted: #b8bcc4;
  --border: #1e2530; --danger: #e05a5a;
  --font-main: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}
body { background: var(--bg); color: var(--text); font-family: var(--font-main); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
nav { border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; position: sticky; top: 0; background: var(--bg); z-index: 100; }
.nav-brand { font-family: var(--font-mono); font-size: 14px; color: var(--gold); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.nav-links { display: flex; gap: 20px; font-size: 13px; }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.article-wrap { max-width: 780px; margin: 0 auto; padding: 48px 24px 40px; }
.series-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); border: 1px solid var(--cyan); border-radius: 4px; padding: 4px 10px; margin-bottom: 24px; }
.series-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); display: inline-block; }
h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 600; line-height: 1.2; color: #fff; margin-bottom: 8px; }
.standfirst { font-size: 18px; color: var(--muted); line-height: 1.6; margin-bottom: 4px; }
h2 { font-size: 22px; font-weight: 600; color: #fff; margin: 40px 0 14px; line-height: 1.3; }
p { margin-bottom: 20px; }
strong { color: #fff; }
em { color: var(--gold2); font-style: italic; }
.byline-img { width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); flex-shrink:0; }
.byline-block { display: flex; align-items: flex-start; gap: 16px; background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; padding: 16px 20px; margin: 28px 0 36px; }
.byline-name { font-weight: 600; font-size: 15px; color: #fff; }
.byline-creds { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
blockquote { border-left: 3px solid var(--gold); padding: 8px 20px; margin: 24px 0; font-style: italic; color: var(--text); font-size: 16px; background: var(--bg2); border-radius: 0 8px 8px 0; }
blockquote strong { color: var(--gold2); }
ul { margin: 20px 0; padding-left: 22px; }
li { margin-bottom: 12px; }
li strong { color: #fff; }
.cta-block { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 32px 28px; text-align: center; margin: 40px 0; }
.cta-block h3 { color: #fff; margin: 0 0 10px; font-size: 20px; }
.cta-block p { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn-primary { background: var(--gold); color: #07090f; font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: 6px; display: inline-block; border: 0; cursor: pointer; font-family: var(--font-main); }
.btn-primary:hover { background: var(--gold2); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--cyan); font-size: 14px; font-weight: 500; padding: 12px 24px; border-radius: 6px; border: 1px solid var(--cyan); display: inline-block; cursor: pointer; font-family: var(--font-main); }
.btn-secondary:hover { text-decoration: none; background: rgba(0,200,160,.08); }
.disclaimer { font-size: 12px; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 40px; }
footer { border-top: 1px solid var(--border); padding: 28px 24px; text-align: center; font-size: 12px; color: var(--muted); }
footer a { color: var(--muted); }

/* ---- page-specific: essay beats ---- */
.beat { margin-bottom: 6px; }
.beat + p:not(.beat) { margin-top: 20px; }
.qa { color: var(--muted); font-style: italic; }
.centerpiece { font-size: 20px; font-weight: 600; color: #fff; border-left: 3px solid var(--gold); padding-left: 18px; margin: 28px 0; line-height: 1.45; }
hr.rule { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* ---- discovery cards ---- */
.more-wrap { max-width: 780px; margin: 0 auto; padding: 0 24px 24px; }
.more-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.cards { display: grid; gap: 12px; margin-bottom: 18px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 18px 18px 16px; display: block; transition: border-color .18s ease, transform .18s ease; }
.card:hover { border-color: var(--gold); transform: translateY(-2px); text-decoration: none; }
.card .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: 8px; }
.card h4 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; line-height: 1.35; }
.card p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 10px; }
.card .go { font-size: 12px; color: var(--gold); font-weight: 500; }

/* ---- the tool band ---- */
.tool-wrap { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #05070c; padding: 40px 0 56px; scroll-margin-top: 70px; }
.tool-intro { max-width: 780px; margin: 0 auto 32px; padding: 0 24px; text-align: center; }
.tool-intro .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.tool-intro h3 { font-size: 24px; font-weight: 600; color: #fff; margin: 10px 0 8px; line-height: 1.25; }
.tool-intro p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ============================================================
   Replaces cdn.tailwindcss.com  -  only the utilities this page
   actually uses, with the Fisher Governance palette baked in.
   No build step, no runtime compiler, no console warning.
   ============================================================ */
.brief-scope{--s950:#0E2233;--s900:#0d1117;--s800:#26425C;--s700:#2F4E6B;--s600:#3D6183;
  --t100:#F2F6F9;--t300:#C6D5DF;--t400:#9FB4C4;--t500:#7E93A4;--t600:#63798B;--t700:#4A5F70;
  --mint:#c9982a;--mint-b:#e8b84b}

/* layout */
.brief-scope .block{display:block}.brief-scope .flex{display:flex}.brief-scope .grid{display:grid}
.brief-scope .hidden{display:none}.brief-scope .relative{position:relative}
.brief-scope .absolute{position:absolute}.fixed{position:fixed}.inset-0{inset:0}
.brief-scope .flex-1{flex:1 1 0%}.brief-scope .flex-col{flex-direction:column}
.brief-scope .flex-wrap{flex-wrap:wrap}.brief-scope .shrink-0{flex-shrink:0}
.brief-scope .items-center{align-items:center}.brief-scope .items-start{align-items:flex-start}
.brief-scope .items-end{align-items:flex-end}
.brief-scope .justify-center{justify-content:center}.brief-scope .justify-between{justify-content:space-between}
.brief-scope .overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}
.z-50{z-index:50}.brief-scope .min-w-0{min-width:0}
.brief-scope .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.max-w-6xl{max-width:72rem}.mx-auto{margin-left:auto;margin-right:auto}

/* gaps */
.brief-scope .gap-2{gap:.5rem}.brief-scope .gap-3{gap:.75rem}.brief-scope .gap-4{gap:1rem}.brief-scope .gap-5{gap:1.25rem}
.brief-scope .gap-x-1\.5{column-gap:.375rem}.brief-scope .gap-x-2{column-gap:.5rem}
.brief-scope .gap-x-2\.5{column-gap:.625rem}.brief-scope .gap-x-3{column-gap:.75rem}
.brief-scope .gap-x-4{column-gap:1rem}.brief-scope .gap-x-10{column-gap:2.5rem}
.brief-scope .gap-y-6{row-gap:1.5rem}.brief-scope .gap-y-7{row-gap:1.75rem}

/* spacing */
.brief-scope .p-5{padding:1.25rem}.brief-scope .p-6{padding:1.5rem}.brief-scope .p-7{padding:1.75rem}
.brief-scope .px-1{padding-left:.25rem;padding-right:.25rem}
.brief-scope .px-3{padding-left:.75rem;padding-right:.75rem}
.brief-scope .px-4{padding-left:1rem;padding-right:1rem}
.brief-scope .px-5{padding-left:1.25rem;padding-right:1.25rem}
.brief-scope .px-6{padding-left:1.5rem;padding-right:1.5rem}
.brief-scope .px-7{padding-left:1.75rem;padding-right:1.75rem}
.brief-scope .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.brief-scope .py-3{padding-top:.75rem;padding-bottom:.75rem}
.brief-scope .py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.brief-scope .py-4{padding-top:1rem;padding-bottom:1rem}
.brief-scope .py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.brief-scope .pt-3{padding-top:.75rem}.brief-scope .pt-5{padding-top:1.25rem}.brief-scope .pt-6{padding-top:1.5rem}
.brief-scope .mt-0\.5{margin-top:.125rem}.brief-scope .mt-1{margin-top:.25rem}.brief-scope .mt-1\.5{margin-top:.375rem}
.brief-scope .mt-2{margin-top:.5rem}.brief-scope .mt-3{margin-top:.75rem}.brief-scope .mt-4{margin-top:1rem}
.brief-scope .mt-5{margin-top:1.25rem}.brief-scope .mt-6{margin-top:1.5rem}.brief-scope .mt-7{margin-top:1.75rem}
.brief-scope .mb-1{margin-bottom:.25rem}.brief-scope .mb-2{margin-bottom:.5rem}
.brief-scope .mb-2\.5{margin-bottom:.625rem}.brief-scope .mb-3{margin-bottom:.75rem}
.brief-scope .mb-4{margin-bottom:1rem}.brief-scope .mb-5{margin-bottom:1.25rem}
.brief-scope .mb-8{margin-bottom:2rem}.brief-scope .ml-1{margin-left:.25rem}
.brief-scope .-mt-1{margin-top:-.25rem}.brief-scope .-mb-6{margin-bottom:-1.5rem}
.brief-scope .-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}
.brief-scope .my-3{margin-top:.75rem;margin-bottom:.75rem}
.brief-scope .space-y-1\.5>*+*{margin-top:.375rem}
.brief-scope .space-y-2>*+*{margin-top:.5rem}
.brief-scope .space-y-3>*+*{margin-top:.75rem}
.brief-scope .space-y-4>*+*{margin-top:1rem}
.brief-scope .space-y-6>*+*{margin-top:1.5rem}
.brief-scope .space-y-7>*+*{margin-top:1.75rem}

/* sizing */
.brief-scope .w-full{width:100%}.brief-scope .w-5{width:1.25rem}.brief-scope .w-8{width:2rem}
.brief-scope .w-11{width:2.75rem}.brief-scope .w-36{width:9rem}.brief-scope .w-40{width:10rem}
.brief-scope .h-2\.5{height:.625rem}.brief-scope .h-5{height:1.25rem}.brief-scope .h-8{height:2rem}
.brief-scope .h-11{height:2.75rem}.brief-scope .h-40{height:10rem}
.brief-scope .max-h-\[85vh\]{max-height:85vh}

/* type */
.brief-scope .text-\[9px\]{font-size:9px}.brief-scope .text-\[10px\]{font-size:10px}
.brief-scope .text-\[11px\]{font-size:11px}
.brief-scope .text-xs{font-size:.75rem;line-height:1rem}
.brief-scope .text-sm{font-size:.875rem;line-height:1.25rem}
.brief-scope .text-base{font-size:1rem;line-height:1.5rem}
.brief-scope .text-lg{font-size:1.125rem;line-height:1.75rem}
.brief-scope .text-2xl{font-size:1.5rem;line-height:2rem}
.brief-scope .text-3xl{font-size:1.875rem;line-height:2.25rem}
.brief-scope .text-6xl{font-size:3.75rem;line-height:1}
.brief-scope .font-medium{font-weight:500}.brief-scope .font-semibold{font-weight:600}
.brief-scope .leading-relaxed{line-height:1.625}
.brief-scope .tracking-tight{letter-spacing:-.025em}
.brief-scope .tracking-wide{letter-spacing:.025em}
.brief-scope .tracking-widest{letter-spacing:.1em}
.brief-scope .uppercase{text-transform:uppercase}
.brief-scope .text-center{text-align:center}.brief-scope .text-left{text-align:left}
.brief-scope .text-right{text-align:right}

/* color */
.brief-scope .bg-slate-950{background-color:var(--s950)}
.brief-scope .bg-slate-900{background-color:var(--s900)}
.brief-scope .bg-slate-800{background-color:var(--s800)}
.brief-scope .bg-slate-950\/60{background-color:rgba(7,9,15,.6)}
.brief-scope .bg-slate-950\/70{background-color:rgba(7,9,15,.7)}
.brief-scope .bg-sky-600{background-color:var(--gold);color:#07090f;font-weight:600}
.bg-black\/75{background-color:rgba(0,0,0,.75)}
.brief-scope .text-white{color:#fff}
.brief-scope .text-slate-100{color:var(--t100)}.brief-scope .text-slate-300{color:var(--t300)}
.brief-scope .text-slate-400{color:var(--t400)}.brief-scope .text-slate-500{color:var(--t500)}
.brief-scope .text-slate-600{color:var(--t600)}.brief-scope .text-slate-700{color:var(--t700)}
.brief-scope .text-sky-400{color:var(--mint)}
.brief-scope .text-emerald-400{color:#00c8a0}
.brief-scope .text-amber-400{color:#e8b84b}
.brief-scope .text-red-400{color:#e05a5a}
.brief-scope .text-purple-400{color:#c9982a}
.brief-scope .text-purple-400\/80{color:rgba(201,152,42,.85)}
.brief-scope .accent-sky-500{accent-color:var(--gold)}

/* border + radius */
.brief-scope .border{border-width:1px;border-style:solid}
.brief-scope .border-t{border-top-width:1px;border-top-style:solid}
.brief-scope .border-slate-600{border-color:var(--s600)}
.brief-scope .border-slate-700{border-color:var(--s700)}
.brief-scope .border-slate-800{border-color:#161c26}
.brief-scope .border-amber-900\/40{border-color:rgba(120,53,15,.4)}
.brief-scope .rounded-xl{border-radius:.75rem}
.brief-scope .rounded-2xl{border-radius:1rem}
.brief-scope .rounded-3xl{border-radius:1.5rem}
.brief-scope .rounded-b-3xl{border-bottom-left-radius:1.5rem;border-bottom-right-radius:1.5rem}
.brief-scope .rounded-full{border-radius:9999px}

/* interaction */
.brief-scope .cursor-pointer{cursor:pointer}
.brief-scope .transition-colors{transition:color .15s,background-color .15s,border-color .15s}
.brief-scope .hover\:bg-sky-500:hover{background-color:var(--gold2)}
.brief-scope .hover\:bg-slate-700:hover{background-color:#1e2530}
.brief-scope .hover\:bg-slate-800:hover{background-color:var(--s800)}
.brief-scope .hover\:border-sky-600:hover{border-color:var(--gold)}
.brief-scope .hover\:text-slate-200:hover{color:#fff}
.brief-scope .group:hover .group-hover\:text-white{color:#fff}
.brief-scope .focus\:outline-none:focus{outline:none}
.brief-scope .-rotate-90{transform:rotate(-90deg)}

/* responsive */
@media(min-width:640px){
  .brief-scope .sm\:flex-row{flex-direction:row}
  .brief-scope .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brief-scope .sm\:p-6{padding:1.5rem}.brief-scope .sm\:p-7{padding:1.75rem}
  .brief-scope .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .brief-scope .sm\:px-7{padding-left:1.75rem;padding-right:1.75rem}
  .brief-scope .sm\:-mx-7{margin-left:-1.75rem;margin-right:-1.75rem}
  .brief-scope .sm\:-mb-7{margin-bottom:-1.75rem}
  .brief-scope .sm\:w-44{width:11rem}.brief-scope .sm\:w-auto{width:auto}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
}
@media(min-width:768px){
  .brief-scope .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
  .brief-scope .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brief-scope .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .brief-scope .lg\:col-span-5{grid-column:span 5/span 5}
  .brief-scope .lg\:col-span-7{grid-column:span 7/span 7}
  .brief-scope .lg\:col-span-12{grid-column:span 12/span 12}
}


/* ---- simulator components ---- */
.mode-card { transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.mode-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.mode-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.question-card { transition: border-color .2s ease; }
.question-card:hover { border-color: #2a3341; }
.select-input { transition: box-shadow .2s ease, border-color .2s ease; }
.select-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(201,152,42,.22); border-color: var(--gold); }
.metric-bar { transition: width 1s cubic-bezier(.34,1.56,.64,1); }
#score-circle { transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.step-dot { transition: all .3s ease; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 600px) { h1 { font-size: 24px; } .cta-buttons { flex-direction: column; align-items: stretch; } }