:root { --bg:#090a0b; --surface:#101212; --surface-2:#151817; --text:#edf0ea; --muted:#8f9790; --faint:#5b655e; --line:rgba(210,225,215,.14); --line-soft:rgba(210,225,215,.08); --accent:#f5a623; --signal:#8bd7c6; --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'Instrument Sans',system-ui,sans-serif; --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; } html { background:var(--bg); scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--text); background:var(--bg); font-family:var(--sans); line-height:1.5; overflow-x:hidden; } body:before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 82%); } a { color:inherit; text-decoration:none; } button,input { font:inherit; } .shell { width:min(1180px,calc(100% - 3rem)); margin-inline:auto; } .skip-link { position:fixed; top:-4rem; left:1rem; z-index:20; padding:.65rem .9rem; color:var(--bg); background:var(--accent); font:600 .68rem var(--mono); } .skip-link:focus { top:1rem; }
.sandbox-banner { border-bottom:1px solid var(--line-soft); color:var(--muted); font:.57rem var(--mono); } .banner-inner { min-height:32px; display:flex; align-items:center; gap:1rem; } .banner-inner span { display:inline-flex; align-items:center; gap:.45rem; color:var(--accent); white-space:nowrap; } .banner-inner i,.eyebrow i { width:6px; height:6px; display:inline-block; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(245,166,35,.1); } .banner-inner p { flex:1; margin:0; } .banner-inner a { color:var(--text); white-space:nowrap; } .banner-inner a:hover { color:var(--accent); }
.site-header { min-height:76px; display:flex; align-items:center; gap:2rem; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:.7rem; font:600 .7rem var(--mono); letter-spacing:.13em; } .brand-mark { display:inline-grid; width:23px; height:23px; place-items:center; color:var(--bg); background:var(--accent); font:700 .72rem var(--sans); letter-spacing:0; } nav { display:flex; gap:1.6rem; margin-left:auto; color:var(--muted); font:.61rem var(--mono); } nav a { position:relative; padding:.3rem 0; } nav a:hover,nav a.active { color:var(--text); } nav a.active:after { content:''; position:absolute; left:0; right:0; bottom:-1rem; height:1px; background:var(--accent); } .header-cta { padding:.6rem .8rem; color:var(--bg); background:var(--accent); font:600 .61rem var(--mono); transition:background .2s ease,transform .2s ease; } .header-cta:hover { background:#ffc052; transform:translateY(-1px); }
.hero { min-height:390px; display:grid; grid-template-columns:1.35fr .65fr; align-items:end; gap:4rem; padding:8rem 0 5.5rem; border-bottom:1px solid var(--line); } .eyebrow { display:flex; align-items:center; gap:.55rem; margin:0 0 1rem; color:var(--accent); font:500 .59rem var(--mono); letter-spacing:.13em; } h1,h2 { margin:0; font-weight:500; letter-spacing:-.075em; line-height:.94; } h1 { max-width:760px; font-size:clamp(4rem,8.4vw,8rem); } h1 span,h2 span { color:var(--accent); } .hero-copy { max-width:560px; margin:1.6rem 0 0; color:var(--muted); font-size:.95rem; line-height:1.8; } .hero-side { display:grid; gap:.5rem; padding-left:1.2rem; border-left:1px solid var(--line); } .hero-side span,.hero-side small { color:var(--faint); font:.55rem var(--mono); letter-spacing:.1em; } .hero-side strong { color:var(--text); font:500 .75rem var(--mono); } .hero-side small { letter-spacing:0; line-height:1.6; }
.workspace { display:grid; grid-template-columns:170px minmax(0,1fr) 250px; gap:1px; margin-top:5rem; border:1px solid var(--line); background:var(--line); } .step-rail,.workspace-main,.event-panel { background:var(--surface); } .step-rail { padding:.6rem; } .step { width:100%; display:grid; grid-template-columns:30px 1fr; gap:.15rem .5rem; padding:1rem .7rem; color:var(--muted); text-align:left; background:transparent; border:1px solid transparent; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease; } .step b { grid-row:1 / 3; color:var(--faint); font: .58rem var(--mono); } .step span { font-size:.78rem; } .step small { color:var(--faint); font:.53rem var(--mono); } .step:hover,.step.active { color:var(--text); border-color:var(--line); background:var(--surface-2); } .step.active { box-shadow:inset 2px 0 var(--accent); } .step.active b { color:var(--accent); }
.workspace-main { min-width:0; } .flow-panel { display:none; min-height:550px; padding:2rem; } .flow-panel.active { display:block; animation:panel-in .5s var(--ease) both; } @keyframes panel-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .panel-heading { display:flex; align-items:start; justify-content:space-between; gap:1.5rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line); } .panel-heading h2 { font-size:clamp(2.4rem,5vw,4.5rem); } .panel-heading p:not(.eyebrow) { max-width:450px; margin:.9rem 0 0; color:var(--muted); font-size:.77rem; line-height:1.7; } .panel-heading code { padding:.4rem .5rem; color:var(--accent); border:1px solid var(--line); font:.56rem var(--mono); white-space:nowrap; }
.search-form,.quote-form,.order-form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:.75rem; margin-top:2rem; } .order-form { grid-template-columns:1fr 1fr; } .search-form label,.quote-form label,.order-form label { display:grid; gap:.4rem; } .search-form span,.quote-form span,.order-form span { color:var(--faint); font:.54rem var(--mono); letter-spacing:.1em; } input { width:100%; min-height:45px; padding:.65rem .7rem; color:var(--text); background:rgba(255,255,255,.015); border:1px solid var(--line); outline:0; font-size:.75rem; } input:focus { border-color:var(--accent); background:var(--surface-2); } input::placeholder { color:var(--faint); } .primary-button { display:inline-flex; align-items:center; justify-content:center; min-height:45px; padding:.7rem .85rem; color:var(--bg); background:var(--accent); border:1px solid var(--accent); cursor:pointer; font:600 .62rem var(--mono); transition:background .2s ease,transform .2s ease; } .primary-button:hover { background:#ffc052; transform:translateY(-1px); } .primary-button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.result-list { display:grid; gap:.5rem; margin-top:2rem; } .result-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1rem; border:1px solid var(--line); background:rgba(255,255,255,.015); transition:border-color .2s ease,background .2s ease; } .result-card:hover,.result-card.selected { border-color:var(--accent); background:rgba(245,166,35,.05); } .result-card h3 { margin:.35rem 0; font-size:.95rem; font-weight:500; } .result-card p { margin:0; color:var(--muted); font-size:.68rem; } .result-sku { color:var(--accent); font:.56rem var(--mono); } .result-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem .8rem; color:var(--faint); font:.56rem var(--mono); text-align:right; } .result-meta strong { display:block; color:var(--text); font-weight:500; } .choose-button { margin-top:.65rem; padding:.48rem .6rem; color:var(--muted); background:transparent; border:1px solid var(--line); cursor:pointer; font:.56rem var(--mono); } .choose-button:hover,.result-card.selected .choose-button { color:var(--bg); border-color:var(--accent); background:var(--accent); } .empty-state { padding:2.5rem 1rem; margin:0; color:var(--muted); text-align:center; font:.65rem var(--mono); line-height:1.7; }
.selection-summary { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding:1rem; color:var(--muted); border-left:2px solid var(--accent); background:rgba(245,166,35,.05); font:.62rem var(--mono); } .selection-summary strong { color:var(--text); font-weight:500; } .quote-form { grid-template-columns:180px 1fr auto; } .json-output-wrap { margin-top:1.5rem; border-left:2px solid var(--accent); background:#0b0d0c; } .json-output-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1rem 0; color:var(--faint); font:.52rem var(--mono); letter-spacing:.08em; } .copy-button { padding:.32rem .45rem; color:var(--muted); border:1px solid var(--line); background:transparent; cursor:pointer; font:.52rem var(--mono); } .copy-button:hover:not(:disabled), .copy-button:focus-visible:not(:disabled) { color:var(--accent); border-color:var(--accent); } .copy-button:disabled { opacity:.38; cursor:not-allowed; } .copy-status { display:block; min-height:1rem; padding:0 1rem .7rem; color:var(--accent); font:.52rem var(--mono); } .json-output { min-height:230px; margin:0; padding:1rem; overflow:auto; color:#cfd8cf; background:transparent; border-left:0; font:.61rem/1.65 var(--mono); }
.order-form { margin-top:2rem; } .order-form .primary-button { grid-column:1 / -1; justify-self:start; } .order-result { margin-top:2rem; } .order-card { padding:1.2rem; border:1px solid rgba(139,215,198,.3); background:rgba(139,215,198,.045); } .order-card-head { display:flex; justify-content:space-between; gap:1rem; align-items:start; } .order-card h3 { margin:.4rem 0; font-size:1rem; font-weight:500; } .order-card code { color:var(--signal); font:.57rem var(--mono); } .order-status { color:var(--signal); font:.58rem var(--mono); } .order-card p { margin:.8rem 0 0; color:var(--muted); font:.67rem/1.7 var(--mono); }
.event-panel { min-width:0; padding:1.1rem; border-left:1px solid var(--line); } .event-head { display:flex; align-items:center; gap:.5rem; color:var(--faint); font:.55rem var(--mono); letter-spacing:.1em; } .event-head i { width:5px; height:5px; border-radius:50%; background:var(--signal); } .event-head small { margin-left:auto; color:var(--signal); font:.52rem var(--mono); } .event-list { display:grid; gap:1rem; margin-top:1.7rem; } .event { display:grid; grid-template-columns:24px 1fr; gap:.55rem; align-items:start; color:var(--text); font:.59rem/1.5 var(--mono); } .event b { display:grid; width:20px; height:20px; place-items:center; color:var(--bg); background:var(--accent); font-size:.55rem; } .event small { display:block; margin-top:.2rem; color:var(--faint); font-size:.5rem; } .event.muted { color:var(--faint); } .event.muted b { color:var(--faint); background:var(--surface-2); } .event-foot { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:.8rem; border-top:1px solid var(--line); color:var(--faint); font:.5rem var(--mono); } .event-foot strong { color:var(--accent); font-weight:500; }
.api-note { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; padding:7rem 0 8rem; } .api-note h2 { font-size:clamp(2.8rem,5vw,5rem); } .api-links { display:grid; gap:.7rem; } .api-links a { display:flex; justify-content:space-between; padding:.8rem 0; border-bottom:1px solid var(--line); color:var(--muted); font:.63rem var(--mono); } .api-links a:hover { color:var(--accent); } .api-links span { color:var(--accent); }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:2.5rem; padding-top:6rem; } .hero-side { max-width:500px; } .workspace { grid-template-columns:130px minmax(0,1fr); } .event-panel { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); } .event-list { grid-template-columns:repeat(3,1fr); } .event-foot { margin-top:1.5rem; } }
@media (max-width:700px) { .shell { width:min(100% - 2rem,1180px); } .banner-inner p { display:none; } .banner-inner a { margin-left:auto; } .site-header { min-height:68px; } nav { display:none; } .header-cta { margin-left:auto; } .hero { min-height:auto; padding:5rem 0 4.5rem; } h1 { font-size:clamp(3.5rem,16vw,5.8rem); } .workspace { display:block; margin-top:4rem; } .step-rail { display:flex; gap:.4rem; overflow:auto; } .step { min-width:120px; } .flow-panel { min-height:auto; padding:1.25rem; } .panel-heading { display:block; } .panel-heading code { display:inline-block; margin-top:1.2rem; } .search-form,.quote-form,.order-form { grid-template-columns:1fr; } .search-form .primary-button,.quote-form .primary-button,.order-form .primary-button { justify-self:start; } .result-card { grid-template-columns:1fr; } .result-meta { justify-content:flex-start; text-align:left; } .event-list { grid-template-columns:1fr; } .api-note { grid-template-columns:1fr; padding:5rem 0 6rem; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* BuyingMesh visual pass: make the test flow read like a tool, not a marketing card grid. */
.hero h1, .panel-heading h2, .api-note h2 { letter-spacing: -.045em; }
.hero { min-height: 440px; padding: 7.5rem 0 6rem; }
.workspace { margin-top: 4rem; }
.step-rail { background: #0e1110; }
.step { border-radius: 0; }
.step.active { box-shadow: inset 2px 0 var(--accent); }
.flow-panel { min-height: 570px; }
.panel-heading code { background: transparent; }
.result-card { border-left: 0; border-right: 0; border-radius: 0; background: transparent; }
.result-card:hover, .result-card.selected { background: rgba(245,166,35,.06); }
.event-panel { background: #0e1110; }
.primary-button { transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.primary-button:active { transform: translateY(1px); }
.json-output { border-left: 1px solid var(--accent); }
.mobile-menu-toggle { display:none; width:38px; height:34px; padding:0; border:1px solid var(--line); background:transparent; color:var(--text); }
.mobile-menu-toggle span { display:block; width:15px; height:1px; margin:4px auto; background:currentColor; transition:transform .2s ease; }.mobile-menu-toggle.is-open span:first-child { transform:translateY(2.5px) rotate(45deg); }.mobile-menu-toggle.is-open span:last-child { transform:translateY(-2.5px) rotate(-45deg); }
@media (max-width:700px) { .mobile-menu-toggle { display:block; margin-left:.2rem; } .site-header nav { position:fixed; inset:68px 0 0; z-index:15; display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:1rem; background:#090a0b; border-top:1px solid var(--line); transform:translateX(100%); transition:transform .3s var(--ease); } .site-header nav.is-open { transform:translateX(0); } .site-header nav a { width:100%; padding:1rem 0; border-bottom:1px solid var(--line); font-size:.75rem; } }