:root{
  --paper:#F5F3EC;
  --paper-raised:#FBFAF6;
  --ink:#20242B;
  --ink-soft:#5B6270;
  --ink-faint:#8B8F97;
  --blue:#28495A;
  --blue-deep:#173038;
  --amber:#C98A1A;
  --amber-soft:#EFDCB0;
  --red:#A6402F;
  --red-soft:#F0D2C9;
  --green:#4C6B4F;
  --green-soft:#DCE6D3;
  --purple:#6B5B8A;
  --purple-soft:#E4DEEF;
  --line:#DCD6C7;
  --line-strong:#B9B2A0;
  --radius:2px;
  --shadow: 0 1px 0 rgba(32,36,43,0.06), 0 8px 20px -12px rgba(32,36,43,0.25);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4, nav, .label, .mono, button, input{font-family:'Space Grotesk', sans-serif;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
::selection{background:var(--amber-soft);}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }

header.site{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--line-strong);}
header.site .bar{display:flex; align-items:center; gap:20px; padding:16px 0;}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink); flex-shrink:0;}
.brand .mark{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em; background:var(--blue); color:var(--paper-raised); padding:5px 7px; border-radius:2px;}
.brand .name{font-weight:700; font-size:19px; letter-spacing:-0.01em;}
.brand .name em{font-style:normal; color:var(--amber);}

.search-shell{flex:1; position:relative; max-width:460px;}
.search-shell input{width:100%; padding:10px 14px 10px 34px; border:1px solid var(--line-strong); border-radius:2px; background:var(--paper-raised); font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--ink);}
.search-shell input::placeholder{color:var(--ink-faint);}
.search-shell svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.55; pointer-events:none;}

nav.top-links{display:flex; gap:4px; margin-left:auto; flex-shrink:0;}
nav.top-links a{background:none; border:none; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-soft); padding:8px 10px; cursor:pointer; border-radius:2px; text-decoration:none;}
nav.top-links a:hover, nav.top-links a[aria-current="page"]{color:var(--ink); background:rgba(0,0,0,0.04);}
@media (max-width:760px){ nav.top-links{display:none;} }

main{min-height:70vh; padding-bottom:80px;}

.hero{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin:0 0 14px;}
.hero h1{font-size:clamp(34px,5vw,54px); line-height:1.04; margin:0 0 18px; letter-spacing:-0.015em; max-width:15ch;}
.hero p.sub{font-size:18px; color:var(--ink-soft); max-width:52ch; margin:0 0 26px;}
.hero .stat-row{display:flex; gap:28px; flex-wrap:wrap; margin-top:8px;}
.stat{display:flex; flex-direction:column;}
.stat .n{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; color:var(--blue);}
.stat .l{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; font-family:'IBM Plex Mono',monospace;}

.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:48px 0 18px;}
.section-head h2{font-size:22px; margin:0; letter-spacing:-0.01em;}
.section-head .count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint);}

.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:44px;}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cat-grid{grid-template-columns:1fr;} }

.cat-card{background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius); padding:18px 18px 16px; text-align:left; cursor:pointer; position:relative; overflow:hidden; transition:transform .12s ease, box-shadow .12s ease; text-decoration:none; color:var(--ink); display:block;}
.cat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.cat-card .tab{position:absolute; top:0; left:0; width:34px; height:100%; background:var(--blue); opacity:0.9;}
.cat-card .code{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--blue); font-weight:600; margin-left:16px;}
.cat-card h3{margin:8px 0 4px 16px; font-size:17px;}
.cat-card p{margin:0 0 10px 16px; font-size:13px; color:var(--ink-soft); font-family:'Space Grotesk',sans-serif;}
.cat-card .n{margin-left:16px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint);}

.filter-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:26px; padding:14px 16px; background:var(--paper-raised); border:1px solid var(--line);}
.filter-bar .fb-label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-right:4px;}
.chip{font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:600; padding:6px 11px; border:1px solid var(--line-strong); border-radius:100px; background:var(--paper-raised); cursor:pointer; color:var(--ink-soft);}
.chip.active{background:var(--blue); border-color:var(--blue); color:#fff;}
.chip:hover:not(.active){border-color:var(--ink-soft); color:var(--ink);}

.ticket-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (max-width:760px){ .ticket-grid{grid-template-columns:1fr;} }

.ticket{background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius); padding:16px 18px 14px; cursor:pointer; position:relative; transition:transform .12s ease, box-shadow .12s ease; text-decoration:none; color:var(--ink); display:block;}
.ticket:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--ink-soft);}
.ticket .perf{position:absolute; top:0; left:16px; right:16px; height:0; border-top:2px dashed var(--line-strong);}
.ticket-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;}
.ticket .tid{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint);}
.badge{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:100px; transform:rotate(-1.5deg); display:inline-block;}
.badge.safety{background:var(--red-soft); color:var(--red);}
.badge.preventive{background:var(--amber-soft); color:#8a5c0e;}
.badge.cosmetic{background:var(--green-soft); color:var(--green);}
.badge.upgrade{background:var(--purple-soft); color:var(--purple);}

.ticket h3{margin:0 0 6px; font-size:17.5px; line-height:1.25;}
.ticket .cat-label{font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--blue); font-weight:600; margin-bottom:8px;}
.ticket .meta-row{display:flex; gap:14px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); margin-top:10px;}
.ticket .meta-row span{display:flex; align-items:center; gap:4px;}

.empty-state{padding:60px 20px; text-align:center; color:var(--ink-soft);}
.empty-state h3{font-family:'Space Grotesk',sans-serif; margin-bottom:6px;}

.crumb{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint); margin:30px 0 18px;}
.crumb a{color:var(--blue); text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

.detail-card{background:var(--paper-raised); border:1px solid var(--line-strong); position:relative; padding:0; margin-bottom:26px;}
.detail-card .perf-top{height:0; border-top:2px dashed var(--line-strong); margin:0 22px;}
.detail-head{padding:26px 30px 22px;}
.detail-head .tid-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.detail-head .tid{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint);}
.detail-head h1{font-size:clamp(26px,3.4vw,36px); margin:0 0 6px; letter-spacing:-0.01em; line-height:1.1;}
.detail-head .cat-label{font-family:'Space Grotesk',sans-serif; color:var(--blue); font-weight:600; font-size:14px; text-decoration:none;}

.spec-strip{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
@media (max-width:700px){ .spec-strip{grid-template-columns:repeat(2,1fr);} }
.spec{padding:14px 18px; border-right:1px solid var(--line);}
.spec:last-child{border-right:none;}
.spec .l{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:4px;}
.spec .v{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px;}
.spec .v.mode-diy{color:var(--green);}
.spec .v.mode-pro{color:var(--red);}
.spec .v.mode-either{color:var(--amber);}

.detail-body{padding:26px 30px 30px; display:grid; grid-template-columns:1.5fr 1fr; gap:32px;}
@media (max-width:760px){ .detail-body{grid-template-columns:1fr;} }

.steps-list{list-style:none; margin:0; padding:0; counter-reset:step;}
.steps-list li{counter-increment:step; display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
.steps-list li:last-child{border-bottom:none;}
.steps-list li::before{content:counter(step); flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.steps-list li p{margin:0; padding-top:2px;}

.pro-questions{margin-top:32px; padding-top:24px; border-top:1px solid var(--line);}
.pq-label{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:12px;}
.pro-q-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.pro-q-list li{font-family:'Space Grotesk',sans-serif; font-size:14px; line-height:1.5; padding:9px 12px 9px 14px; background:var(--paper-raised); border:1px solid var(--line); border-left:3px solid var(--amber);}

.side-panel .video-box{border:1px solid var(--line-strong); background:var(--paper); padding:16px 18px; margin-bottom:16px;}
.video-box .l{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:8px;}
.video-box .vt{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:8px; line-height:1.35;}
.video-box a.watch{display:inline-flex; align-items:center; gap:6px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--blue); text-decoration:none; border-bottom:1px solid var(--blue); padding-bottom:1px;}
.video-box .unverified-note{font-size:12px; color:var(--ink-soft); margin-top:8px; line-height:1.5; font-family:'Space Grotesk',sans-serif;}

.contribute-box{border:1px dashed var(--line-strong); padding:16px 18px; background:rgba(201,138,26,0.06);}
.contribute-box .l{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); margin-bottom:8px; font-weight:600;}
.contribute-box p{font-size:13.5px; color:var(--ink-soft); margin:0 0 12px; font-family:'Space Grotesk',sans-serif;}
.btn-suggest{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; background:var(--blue); color:#fff; border:none; padding:9px 14px; border-radius:2px; cursor:pointer;}
.btn-suggest:hover{background:var(--blue-deep);}

.materials-section{padding:20px 30px 26px; border-top:1px solid var(--line);}
.materials-label{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:12px;}
.materials-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.materials-list li a{display:inline-block; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:500; color:var(--blue); text-decoration:none; border:1px solid var(--line-strong); padding:5px 11px; border-radius:2px; background:var(--paper-raised);}
.materials-list li a:hover{background:var(--amber-soft); border-color:var(--amber);}

.modal-overlay{position:fixed; inset:0; background:rgba(23,48,56,0.45); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.show{display:flex;}
.modal{background:var(--paper-raised); max-width:460px; width:100%; padding:26px 26px 22px; border:1px solid var(--line-strong);}
.modal h3{margin:0 0 8px; font-size:19px;}
.modal p{font-size:14px; color:var(--ink-soft); font-family:'Space Grotesk',sans-serif; margin:0 0 16px; line-height:1.5;}
.modal textarea{width:100%; min-height:100px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:2px; font-family:'Source Serif 4',serif; font-size:14px; resize:vertical; margin-bottom:14px;}
.modal .modal-actions{display:flex; justify-content:flex-end; gap:10px;}
.btn-ghost{background:none; border:1px solid var(--line-strong); padding:8px 14px; border-radius:2px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; cursor:pointer; color:var(--ink-soft);}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink-soft);}
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--blue-deep); color:#fff; padding:12px 20px; border-radius:2px; font-family:'Space Grotesk',sans-serif; font-size:13.5px; z-index:200; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px); pointer-events:auto;}

.roadmap{background:var(--blue-deep); color:var(--paper); padding:44px 0; margin-top:60px;}
.roadmap .wrap{display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start;}
@media (max-width:760px){ .roadmap .wrap{grid-template-columns:1fr;} }
.roadmap .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:10px;}
.roadmap h2{font-size:26px; margin:0 0 12px; letter-spacing:-0.01em;}
.roadmap p{color:#CBD6D9; font-size:14.5px; margin:0;}
.roadmap ol{list-style:none; margin:0; padding:0; counter-reset:rm;}
.roadmap ol li{counter-increment:rm; display:flex; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.12);}
.roadmap ol li::before{content:counter(rm,decimal-leading-zero); font-family:'IBM Plex Mono',monospace; color:var(--amber); font-weight:600; font-size:13px; flex-shrink:0; padding-top:2px;}
.roadmap ol li strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:14.5px; margin-bottom:2px;}
.roadmap ol li span{font-size:13.5px; color:#CBD6D9;}

footer{padding:30px 0 50px; border-top:1px solid var(--line); margin-top:10px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'Space Grotesk',sans-serif; font-size:12.5px; color:var(--ink-faint);}

.noscript-note{background:var(--amber-soft); color:#8a5c0e; padding:10px 16px; font-family:'Space Grotesk',sans-serif; font-size:13px; text-align:center;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .ticket, .cat-card, .toast{transition:none;}
}