/* VOBOM fastener RFQ guide — light, responsive, versioned */
:root{color-scheme:light;--vbg:#F6F6F6;--vsurface:#FFFFFF;--vred:#D82626;--vmetal:#999999;--vtext:#333333;--vline:#D9DDE1;--vsoft:#F1F2F3;--vred-soft:#FFF1F1;--vmax:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--vbg);color:var(--vtext);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:#A61D1D;text-decoration-thickness:.08em;text-underline-offset:.16em}
a:hover{color:#7F1414}
a:focus-visible,summary:focus-visible{outline:3px solid #D82626;outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:8px;background:#fff;color:#333;padding:10px 14px;z-index:20}.skip-link:focus{left:12px}
.sitebar{background:var(--vsurface);border-bottom:1px solid var(--vline)}
.sitebar-inner{max-width:var(--vmax);margin:auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:800;letter-spacing:.04em;color:var(--vtext);text-decoration:none}
.site-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:.93rem}
.site-nav a{text-decoration:none;font-weight:650}
.site-nav .quote-link{background:var(--vred);color:#fff;padding:9px 14px;border-radius:999px}
.page-shell{width:min(var(--vmax),calc(100% - 32px));margin:28px auto 64px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;color:#626970;font-size:.9rem;margin:0 0 18px}
.hero,.content-card,.page-footer{background:var(--vsurface);border:1px solid var(--vline);border-radius:18px}
.hero{padding:clamp(24px,5vw,56px);border-top:5px solid var(--vred);box-shadow:0 8px 28px rgba(51,51,51,.05)}
.eyebrow{margin:0 0 10px;color:#9F2020;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3{line-height:1.2;color:var(--vtext);text-wrap:balance}
h1{font-size:clamp(2rem,4vw,3.45rem);max-width:850px;margin:0 0 16px;letter-spacing:-.035em}
h2{font-size:clamp(1.4rem,2.7vw,2rem);margin:0 0 14px}
h3{font-size:1.08rem;margin:0 0 8px}
p{margin:0 0 14px}
.lead{max-width:820px;font-size:clamp(1.05rem,1.5vw,1.22rem);color:#454B52}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;color:#646B72;font-size:.88rem}
.quick-answer{margin-top:22px;padding:18px 20px;background:var(--vred-soft);border:1px solid #E9B8B8;border-left:5px solid var(--vred);border-radius:12px}
.quick-answer strong{display:block;margin-bottom:5px;color:#8F1818}
.quick-answer p:last-child{margin:0}
.section{margin-top:22px;padding:clamp(20px,3.2vw,34px);background:var(--vsurface);border:1px solid var(--vline);border-radius:16px}
.section-intro{max-width:800px;color:#555D64}
.ref-grid,.field-grid,.step-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.ref-card,.field-card,.step-card{min-width:0;padding:18px;background:#fff;border:1px solid var(--vline);border-radius:12px}
.ref-card{border-top:3px solid var(--vmetal)}
.ref-label{display:inline-block;margin-bottom:9px;color:#70777E;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.ref-card p:last-child,.field-card p:last-child,.step-card p:last-child{margin-bottom:0}
.ref-source{padding:10px 12px;background:var(--vsoft);border-radius:8px;font-size:.92rem;overflow-wrap:anywhere}
.field-card strong{display:block;margin-bottom:4px}
.step-number{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;margin-bottom:10px;border-radius:50%;background:var(--vred);color:#fff;font-weight:800}
.checklist{padding-left:1.25rem;margin:16px 0 0}
.checklist li{margin:.55rem 0;padding-left:.25rem}
.note{margin-top:16px;padding:14px 16px;border-left:4px solid var(--vmetal);background:var(--vsoft);border-radius:0 9px 9px 0}
.faq-list{margin-top:14px}
details{padding:15px 0;border-top:1px solid var(--vline)}
summary{cursor:pointer;font-weight:750;color:var(--vtext)}
details p{margin:10px 0 0;color:#4F565D}
.cta-panel{margin-top:22px;padding:clamp(22px,4vw,38px);background:#fff;border:1px solid var(--vline);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta-panel p{margin:0;color:#555D64}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:11px 16px;border-radius:8px;border:1px solid var(--vred);background:var(--vred);color:#fff;text-decoration:none;font-weight:800;text-align:center}
.button:hover{background:#A61D1D;color:#fff}
.button.secondary{background:#fff;color:#8D1919}
.page-footer{margin-top:20px;padding:18px 22px;color:#626970;font-size:.9rem}
.page-footer p:last-child{margin-bottom:0}
@media(max-width:700px){.sitebar-inner{align-items:flex-start;flex-direction:column;padding:13px 16px}.site-nav{gap:12px}.page-shell{width:min(100% - 22px,var(--vmax));margin-top:18px}.hero{padding:24px 19px}.section{padding:20px 17px}.ref-grid,.field-grid,.step-grid{grid-template-columns:minmax(0,1fr)}.cta-panel{align-items:stretch;flex-direction:column}.cta-actions{display:grid;grid-template-columns:1fr}.button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.identifier-table-scroll{max-width:100%;overflow-x:auto;margin:16px 0 18px;border:1px solid var(--vline);border-radius:10px;background:var(--vsurface)}
.identifier-table{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.identifier-table caption{padding:12px 14px;text-align:left;font-weight:750;color:var(--vtext)}
.identifier-table th,.identifier-table td{padding:12px 14px;border-top:1px solid var(--vline);vertical-align:top}
.identifier-table thead th{background:var(--vsoft)}
.identifier-guide .note{margin-top:12px}
.related-guides ul{margin-bottom:0}