/* Baiyan Pigment — design tokens (P-01 / Inter / material-truth) */
:root{
  --primary:#1A1A1A; --secondary:#6B7280; --accent:#2563EB; --text:#111827;
  --bg:#FFFFFF; --band:#F6F7F9; --line:#E5E7EB;
  --container:1200px; --radius:10px;
  --ease:cubic-bezier(.22,.8,.3,1);
  --font:'Inter',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
section.block{padding:72px 0}
section.block.alt{background:var(--band)}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em;color:var(--primary)}
h1{font-size:clamp(30px,4vw,46px);font-weight:700}
h2{font-size:clamp(24px,3vw,32px);font-weight:700;margin-bottom:14px}
h3{font-size:19px;font-weight:600;margin-bottom:8px}
.lede{font-size:18px;color:var(--secondary);max-width:62ch}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--primary);font-weight:700;font-size:17px}
.brand .swatch{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,#0E3FA3 50%,#00965E 50%);flex:none}
.nav{display:flex;align-items:center;gap:4px}
.nav a.nl{color:var(--text);font-weight:500;font-size:15px;padding:10px 12px;border-radius:8px}
.nav a.nl:hover{background:var(--band)}
.nav .has-drop{position:relative}
.nav .drop{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.12);padding:8px;display:none}
.nav .has-drop:hover .drop,.nav .has-drop:focus-within .drop{display:block}
.nav .drop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text);font-size:14.5px}
.nav .drop a:hover{background:var(--band)}
.nav .drop .dot{width:14px;height:14px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.12)}
.nav-cta{margin-left:10px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;font-size:15.5px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,99,235,.28)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--primary);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--primary);margin:5px 0;border-radius:2px;transition:transform .2s var(--ease)}
/* hero */
.hero{padding:84px 0 64px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.hero h1{margin:6px 0 16px}
.hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.shade-band{height:14px;border-radius:999px;margin:26px 0 0;background:linear-gradient(90deg,#0E3FA3,#2B3BD4,#00965E,#D7E93B,#A63A22,#17181A)}
.shade-hero-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(14,63,163,.14)}
.shade-hero-card .swatches{display:grid;grid-template-columns:1fr 1fr}
.shade-hero-card .sw{height:150px;display:flex;align-items:flex-end;padding:12px;color:#fff;font-family:var(--mono);font-size:12px;font-weight:600}
.shade-hero-card .sw.light{color:var(--text)}
.shade-hero-card .cap{padding:14px 18px;font-size:13.5px;color:var(--secondary)}
/* shade index */
.shade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.shade-card{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s var(--ease),box-shadow .2s var(--ease);color:var(--text)}
.shade-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.12)}
.shade-card:active{transform:scale(.98)}
.shade-card .sw{display:block;height:118px}
.shade-card .meta{display:block;padding:14px 16px}
.shade-card .meta .ci{display:block;font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600}
.shade-card .meta .nm{display:block;font-weight:600;font-size:15.5px;margin:2px 0 4px;color:var(--primary)}
.shade-card .meta p{font-size:13.5px;color:var(--secondary);line-height:1.55}
/* two col */
.cols{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.cols>*{min-width:0}
.cols.rev{grid-template-columns:5fr 7fr}
.side-card{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;padding:26px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.07)}
/* spec table */
.table-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:12px;margin:22px 0}
table.spec{border-collapse:collapse;width:100%;font-size:13.5px;min-width:860px}
table.spec th{background:var(--primary);color:#fff;text-align:left;padding:10px 12px;font-weight:600;white-space:nowrap}
table.spec td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
table.spec tr:nth-child(even) td{background:#FAFAFB}
table.spec td.mono,table.spec th.mono{font-family:var(--mono)}
.spec-notes{font-size:13.5px;color:var(--secondary);margin-top:10px}
.spec-notes li{margin-bottom:6px;margin-left:18px}
/* evidence */
.ev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.ev-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff}
.ev-card .ic{font-size:26px;margin-bottom:10px}
.ev-card h3{font-size:16px;margin-bottom:6px}
.ev-card p{font-size:13.5px;color:var(--secondary)}
/* application band */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.app-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.app-card img{width:100%;height:200px;object-fit:cover}
.app-card .tx{padding:18px 20px}
.app-card .tx p{font-size:14px;color:var(--secondary)}
/* cta band */
.cta-band{background:var(--primary);color:#fff;border-radius:20px;padding:56px;display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.cta-band h2{color:#fff}
.cta-band p{color:#C7CDD6;margin:10px 0 22px}
.cta-band .mini{font-size:13.5px;color:#9AA3B2;margin-top:14px}
/* forms */
.f-row{margin-bottom:16px}
.f-row label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.f-row input,.f-row select,.f-row textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font:inherit;font-size:16px}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.f-row input[aria-invalid="true"]{border-color:#DC2626}
.f-err{color:#DC2626;font-size:13px;margin-top:4px;display:none}
.honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.post-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.post-card .sw{height:120px}
.post-card .tx{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h3{font-size:17px}
.post-card p{font-size:14px;color:var(--secondary);flex:1}
.post-card .more{font-weight:600;font-size:14.5px}
.prose-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.prose-layout>*{min-width:0}
.prose{max-width:68ch;font-size:16.5px}
.prose h2{margin:34px 0 12px;font-size:25px}
.prose h3{margin:26px 0 10px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose table{border-collapse:collapse;width:100%;font-size:14px;margin:18px 0}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--band)}
.toc{position:sticky;top:96px;border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff}
.toc h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--secondary);margin-bottom:10px}
.toc a{display:block;font-size:14px;color:var(--text);padding:9px 0;border-bottom:1px dashed var(--line)}
.toc a:last-child{border:0}
/* breadcrumb */
.crumb{font-size:13.5px;color:var(--secondary);margin-bottom:18px}
.crumb a{color:var(--secondary)}
/* footer */
.site-foot{background:var(--primary);color:#C7CDD6;margin-top:0;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:4fr 3fr 3fr 3fr;gap:40px}
.site-foot h4{color:#fff;font-size:15px;margin-bottom:14px}
.site-foot a{color:#C7CDD6;font-size:14px}
.site-foot a:hover{color:#fff}
.site-foot ul{list-style:none}
.site-foot li{margin-bottom:9px}
.foot-brand{color:#fff;font-weight:700;font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.foot-brand .swatch{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#0E3FA3 50%,#00965E 50%)}
.foot-base{border-top:1px solid #333A44;margin-top:44px;padding-top:22px;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cat-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cat-strip a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 10px;color:var(--text);font-weight:500;font-size:14.5px;background:#fff;transition:border-color .15s var(--ease)}
.cat-strip a:hover{border-color:var(--accent)}
.cat-strip .dot{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.14)}
.cat-strip .ci{font-family:var(--mono);font-size:11.5px;color:var(--secondary)}
/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
html.no-js .reveal{opacity:1;transform:none}
/* misc */
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0}
.kv .cell{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.kv .k{font-size:12.5px;color:var(--secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kv .v{font-weight:600;font-size:16px;margin-top:4px}
.timeline{border-left:3px solid var(--line);margin:26px 0 0 8px;padding-left:26px}
.timeline .t{margin-bottom:22px;position:relative}
.timeline .t::before{content:"";position:absolute;left:-34px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent)}
.timeline .yr{font-family:var(--mono);font-weight:700;color:var(--accent)}
.note-box{background:#EFF4FF;border:1px solid #C9DBFF;border-radius:12px;padding:16px 20px;font-size:14.5px;margin:20px 0}
figure.fig{margin:24px 0}
figure.fig img{border-radius:12px;border:1px solid var(--line)}
figure.fig figcaption{font-size:13px;color:var(--secondary);margin-top:8px}
/* responsive */
@media(max-width:1024px){
  .shade-grid{grid-template-columns:repeat(3,1fr)}
  .ev-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.1)}
  .nav.open{display:flex}
  .nav .drop{position:static;display:block;box-shadow:none;border:0;padding:0 0 0 12px}
  .nav-cta{margin:8px 0 0}
  .nav-toggle{display:block}
  .hero-grid,.cols,.cols.rev,.cta-band,.prose-layout{grid-template-columns:1fr}
  .side-card,.toc{position:static}
  .app-grid,.post-grid{grid-template-columns:1fr}
  .shade-grid{grid-template-columns:repeat(2,1fr)}
  section.block{padding:52px 0}
  .hero{padding:56px 0 44px}
  .cta-band{padding:36px 26px}
}
@media(max-width:640px){
  .shade-grid{grid-template-columns:1fr}
  .ev-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
}
@media (hover: hover){
  .btn{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
  .shade-card{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .nav a.nl{transition:background .15s var(--ease)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}