/* Oil Database: a wide, product-led laboratory workspace. */
:root {
 color-scheme:light;
 --ink:#173748; --muted:#4e6370; --teal:#176f68; --line:#d9e3e7;
 --surface:#f2f6f8; --navy:#123447; --shell:2000px; --gutter:clamp(24px,4vw,72px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:104px; }
body.landing-page { margin:0; color:var(--ink); background:#fff; font:400 17px/1.65 'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.landing-page a { color:inherit; text-decoration:none; }
.landing-page button { font:inherit; cursor:pointer; }
.landing-page svg { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.landing-page h1,.landing-page h2,.landing-page h3,.landing-page p { margin:0; }
.landing-page a,.landing-page button { -webkit-tap-highlight-color:transparent; }
.landing-page :focus-visible { outline:3px solid #b08320; outline-offset:4px; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.landing-shell { width:min(var(--shell),100%); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:fixed; top:-90px; left:24px; z-index:40; padding:12px 20px; background:#fff; border:1px solid var(--ink); border-radius:6px; }
.skip-link:focus { top:12px; }
.landing-header { position:sticky; top:0; z-index:20; background:#fffffffa; border-bottom:1px solid var(--line); }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; padding-block:12px; }
.landing-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.landing-brand img { width:46px; height:46px; object-fit:contain; flex-shrink:0; }
.landing-brand strong { display:block; font-size:23px; font-weight:650; letter-spacing:-.03em; line-height:1.25; }
.landing-brand small { display:block; color:var(--muted); font-size:13px; line-height:1.5; margin-top:3px; }
.landing-navigation { display:flex; align-items:center; gap:32px; flex-shrink:0; }
.navigation-link { font-size:15px; color:var(--muted) !important; font-weight:550; padding-block:10px; }
.navigation-link:hover { color:var(--teal) !important; }
.landing-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; border:1px solid transparent; border-radius:7px; font-size:16px; font-weight:600; line-height:1.4; transition:background .18s,border-color .18s; }
.landing-button svg { width:20px; height:20px; flex-shrink:0; }
.header-sign-in { min-height:44px; padding:10px 22px; color:var(--ink) !important; background:#fff; border-color:#b9cbd2; white-space:nowrap; }
.header-sign-in:hover { background:var(--surface); border-color:#72979e; }
.primary-button { min-height:52px; padding:14px 22px; color:#fff !important; background:var(--teal); }
.primary-button:hover { background:#105c55; }
.landing-hero { background:var(--surface); }
.hero-content { display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:clamp(36px,4.3vw,82px); padding-block:56px; }
.hero-copy { min-width:0; }
.hero-copy h1 { font-size:clamp(46px,4vw,68px); font-weight:650; line-height:1.08; letter-spacing:-.047em; }
.hero-copy h1 > .hero-organization { display:block; font-size:clamp(38px,3vw,50px); font-weight:700; letter-spacing:-.03em; line-height:1.15; margin-bottom:17px; }
.hero-description { max-width:580px; margin-top:25px !important; font-size:21px; line-height:1.55; color:#344f5e; }
.hero-detail { max-width:560px; margin-top:14px !important; color:var(--muted); font-size:17px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:28px; }
.explore-link { display:inline-flex; align-items:center; font-size:16px; font-weight:550; padding-block:8px; color:#285d61 !important; text-decoration:underline !important; text-underline-offset:5px; text-decoration-color:#8fb5b3 !important; }
.explore-link:hover { color:var(--teal) !important; }
.hero-access { display:flex; align-items:center; gap:10px; color:#345c60; margin-top:26px; font-size:17px; font-weight:600; line-height:1.4; }
.hero-access svg { width:24px; height:24px; color:var(--teal); flex-shrink:0; }
.visual-stage { min-width:0; }
.platform-preview { overflow:hidden; background:#fff; border:1px solid #cad9df; border-radius:13px; box-shadow:0 12px 32px #1c40520b; }
.preview-heading { display:flex; align-items:center; gap:12px; padding:18px 24px; }
.preview-mark { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; color:var(--teal); background:#eaf3f1; border-radius:9px; }
.preview-mark svg { width:24px; height:24px; }
.preview-heading strong { display:block; font-size:21px; font-weight:650; line-height:1.3; letter-spacing:-.025em; }
.preview-heading small { display:block; color:var(--muted); font-size:13px; line-height:1.45; margin-top:2px; }
.preview-badge { margin-left:auto; color:var(--muted); font-size:12px; line-height:1.4; padding:5px 9px; background:#f1f5f7; border-radius:5px; white-space:nowrap; }
.preview-tabs { display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--line); }
.preview-tabs button { flex:1; min-height:47px; padding:11px 12px; border:0; border-bottom:3px solid transparent; color:var(--muted); background:transparent; font-size:15px; font-weight:550; }
.preview-tabs button:hover { color:var(--ink); background:#f5f8f9; }
.preview-tabs button[aria-selected=true] { color:var(--teal); border-bottom-color:var(--teal); font-weight:650; background:#f1f8f6; }
.preview-tabs button:focus-visible { outline-offset:-4px; }
.preview-panel { padding:21px 24px 22px; }
.preview-panel[hidden] { display:none; }
.preview-panel-title { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:30px; margin-bottom:16px; }
.preview-panel-title h2 { font-size:19px; line-height:1.4; font-weight:600; letter-spacing:-.015em; }
.preview-panel-title > span { font-size:12px; color:var(--muted); white-space:nowrap; }
.preview-art { display:block; width:100%; height:clamp(230px,16vw,300px); overflow:hidden; background:var(--navy); border-radius:7px; padding:15px 14px; }
.preview-art .preview-grid { stroke:#4d7082; stroke-opacity:.55; stroke-width:.8; }
.preview-art .preview-axis { stroke:#7796a3; stroke-width:1; }
.preview-art .chromatogram-trace { fill:none; stroke:#82dfc8; stroke-width:2.5; }
.preview-art .comparison-trace { fill:none; stroke-width:2.6; }
.preview-art .spill-trace { stroke:#82dfc8; }
.preview-art .reference-trace { stroke:#e2bd72; stroke-dasharray:6 5; }
.database-record { list-style:none; padding:0 20px; margin:0; min-height:clamp(230px,16vw,300px); display:grid; grid-template-rows:repeat(4,1fr); background:#f5f8fa; border:1px solid var(--line); border-radius:7px; }
.database-record li { display:flex; align-items:center; gap:14px; padding:10px 0; min-width:0; }
.database-record li + li { border-top:1px solid var(--line); }
.database-record li > svg { width:24px; height:24px; flex-shrink:0; color:var(--teal); }
.database-record strong { display:block; font-size:15px; line-height:1.4; font-weight:600; }
.database-record li span { display:block; margin-top:3px; color:var(--muted); font-size:13px; line-height:1.45; }
.chart-key { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; padding-top:11px; color:var(--muted); font-size:12px; line-height:1.5; }
.comparison-key { justify-content:flex-start; gap:22px; }
.comparison-key > span,.analysis-key { display:inline-flex; align-items:center; gap:7px; }
.chart-key i { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.analysis-key i,.spill-dot { background:var(--teal); }
.reference-dot { background:#a57a23; }
.preview-explanation { margin-top:13px !important; font-size:15px; line-height:1.6; color:var(--muted); min-height:3.2em; max-width:73ch; }
.preview-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 24px; color:#586d78; background:#f7f9fa; border-top:1px solid var(--line); font-size:12px; line-height:1.5; }
.hero-scope { border-top:1px solid var(--line); background:#fff; }
.scope-content { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:68px; padding-block:18px; font-size:14px; color:var(--muted); }
.scope-content > span { color:var(--ink); font-weight:550; }
.scope-content > div { display:flex; align-items:center; flex-wrap:wrap; gap:30px; }
.scope-content > div > span { display:flex; align-items:center; gap:9px; }
.scope-content > div > span::before { content:''; width:5px; height:5px; border-radius:50%; background:#60938d; }
.landing-capabilities { padding-block:70px; }
.section-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:64px; margin-bottom:44px; }
.section-heading h2,.workflow-heading h2 { font-size:clamp(32px,2.65vw,44px); line-height:1.18; letter-spacing:-.035em; font-weight:650; }
.section-heading > p { max-width:650px; font-size:18px; line-height:1.65; color:var(--muted); }
.capability-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.capability-item { min-width:0; padding:4px 28px 4px 0; }
.capability-item + .capability-item { border-left:1px solid var(--line); padding-left:28px; }
.capability-item:last-child { padding-right:0; }
.capability-icon { display:grid; place-items:center; width:43px; height:43px; color:var(--teal); background:#edf5f3; border-radius:9px; margin-bottom:20px; }
.capability-icon svg { width:25px; height:25px; }
.capability-item h3 { font-size:22px; line-height:1.35; font-weight:600; letter-spacing:-.02em; margin-bottom:11px; }
.capability-item p { max-width:390px; font-size:16px; line-height:1.75; color:var(--muted); }
.database-application { display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:44px; margin-top:48px; padding:27px 30px; background:#f1f6f7; border-radius:9px; }
.application-heading { display:flex; align-items:center; gap:18px; }
.application-heading > svg { width:30px; height:30px; color:var(--teal); flex-shrink:0; }
.application-heading h3 { font-size:22px; line-height:1.4; font-weight:600; letter-spacing:-.02em; }
.database-application p { max-width:760px; font-size:16px; line-height:1.7; color:var(--muted); }
.landing-workflow { color:#fff; background:var(--navy); }
.workflow-content { padding-block:62px; }
.workflow-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:64px; }
.workflow-heading > p { max-width:600px; color:#c4d5dd; font-size:18px; line-height:1.65; }
.workflow-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px; list-style:none; padding:0; margin:38px 0 0; }
.workflow-steps li { min-width:0; }
.step-track { display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.step-number { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid #789ca7; color:#b7ead8; font-size:15px; font-weight:600; flex-shrink:0; }
.step-track > span:nth-child(2) { flex:1; height:1px; background:#3f6475; }
.workflow-steps h3 { font-size:22px; line-height:1.4; font-weight:600; letter-spacing:-.02em; margin-bottom:10px; }
.workflow-steps p { max-width:360px; font-size:16px; line-height:1.7; color:#c4d5dd; }
.workflow-permissions { display:flex; align-items:start; gap:9px; padding-top:22px; margin-top:30px !important; border-top:1px solid #3f5e6d; color:#c4d5dd; font-size:13px; line-height:1.6; }
.workflow-permissions svg { width:19px; height:19px; margin-top:1px; flex-shrink:0; color:#9dd6c7; }
.entry-section { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-block:62px; }
.entry-copy h2 { font-size:clamp(30px,2.4vw,38px); line-height:1.2; font-weight:650; letter-spacing:-.035em; }
.entry-copy p { margin-top:14px; color:var(--muted); font-size:17px; line-height:1.65; }
.entry-section .primary-button { flex-shrink:0; }
.landing-footer { border-top:1px solid var(--line); color:var(--muted); background:#f8fafb; }
.landing-footer > div { display:flex; align-items:center; justify-content:center; min-height:82px; padding-block:24px; text-align:center; }
.footer-copyright { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 10px; font-size:14px; line-height:1.8; }
.landing-footer strong { font-weight:650; color:var(--ink); }
.footer-affiliation { color:#405c69; }
.footer-rights { font-size:13px; }
@keyframes panel-enter { from { opacity:.65; } to { opacity:1; } }
@keyframes trace-draw { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:no-preference) {
 .preview-panel:not([hidden]) { animation:panel-enter .2s ease-out; }
 .preview-panel:not([hidden]) .trace-reveal { animation:trace-draw .65s ease-out; }
}
@media (max-width:1250px) {
 .hero-content { gap:36px; padding-block:46px; }
 .hero-copy h1 { font-size:clamp(43px,4.5vw,56px); }
 .hero-description { font-size:19px; }
 .hero-detail { font-size:16px; }
 .hero-actions { gap:14px 20px; }
 .preview-heading,.preview-panel { padding-inline:20px; }
 .preview-panel-title > span { display:none; }
 .preview-badge { display:none; }
 .capability-item { padding-right:20px; }
 .capability-item + .capability-item { padding-left:20px; }
 .capability-item h3 { font-size:20px; }
 .database-application { gap:28px; }
}
@media (max-width:1000px) {
 .landing-brand strong { font-size:21px; }
 .landing-navigation { gap:22px; }
 .hero-content { grid-template-columns:1fr; gap:34px; }
 .hero-copy { max-width:720px; }
 .hero-copy h1 { font-size:clamp(46px,6.5vw,64px); }
 .hero-copy h1 > .hero-organization { font-size:42px; }
 .hero-description { max-width:650px; font-size:20px; }
 .hero-detail { max-width:650px; font-size:17px; }
 .visual-stage { width:100%; }
 .preview-art,.database-record { height:280px; min-height:280px; }
 .preview-panel-title > span { display:inline; }
 .preview-badge { display:inline; }
 .preview-explanation { min-height:3.2em; }
 .scope-content { flex-wrap:wrap; gap:12px; }
 .scope-content > div { gap:24px; }
 .section-heading,.workflow-heading { gap:32px; }
 .capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 0; }
 .capability-item { padding:0 28px 0 0; }
 .capability-item + .capability-item { padding-left:28px; }
 .capability-item:nth-child(3) { padding-left:0; border-left:0; }
 .capability-item:nth-child(even) { padding-right:0; }
 .capability-item h3 { font-size:22px; }
 .database-application { grid-template-columns:1fr; gap:15px; }
 .workflow-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
 .entry-section { flex-wrap:wrap; gap:26px; }
}
@media (max-width:700px) {
 :root { --gutter:24px; }
 html { scroll-padding-top:94px; }
 .header-content { min-height:78px; gap:16px; }
 .landing-brand { gap:10px; }
 .landing-brand img { width:40px; height:40px; }
 .landing-brand strong { font-size:19px; }
 .landing-brand small { font-size:12px; }
 .navigation-link { display:none; }
 .header-sign-in { font-size:14px; padding:10px 17px; }
 .hero-content { padding-block:38px; gap:30px; }
 .hero-copy h1 { font-size:clamp(38px,7.5vw,50px); }
 .hero-copy h1 > .hero-organization { font-size:34px; margin-bottom:14px; }
 .hero-description { font-size:19px; margin-top:21px !important; }
 .hero-detail { font-size:16px; }
 .hero-actions { margin-top:23px; gap:14px 22px; }
 .hero-access { font-size:16px; margin-top:22px; }
 .hero-access svg { width:23px; height:23px; }
 .preview-heading { padding:17px 18px; }
 .preview-heading strong { font-size:20px; }
 .preview-tabs { padding-inline:14px; }
 .preview-tabs button { font-size:14px; padding-inline:8px; }
 .preview-panel { padding:19px 18px; }
 .preview-panel-title > span { display:none; }
 .preview-panel-title h2 { font-size:18px; }
 .preview-art { height:210px; min-height:0; padding:10px; }
 .database-record { height:auto; min-height:280px; padding-inline:14px; }
 .preview-explanation { min-height:4.8em; }
 .preview-footer { padding:12px 18px; gap:8px; flex-wrap:wrap; }
 .preview-footer > span:last-child { display:none; }
 .scope-content { font-size:13px; padding-block:18px; gap:12px; }
 .scope-content > div { gap:8px 20px; }
 .landing-capabilities { padding-block:46px; }
 .section-heading,.workflow-heading { grid-template-columns:1fr; gap:18px; }
 .section-heading { margin-bottom:32px; }
 .section-heading h2,.workflow-heading h2 { font-size:34px; }
 .section-heading > p,.workflow-heading > p { font-size:17px; }
 .database-application { margin-top:34px; padding:24px; }
 .application-heading { align-items:start; gap:14px; }
 .application-heading h3 { font-size:21px; }
 .workflow-content { padding-block:46px; }
 .entry-section { padding-block:46px; }
 .entry-copy h2 { font-size:32px; }
 .entry-copy p { font-size:16px; }
 .footer-rights { flex-basis:100%; }
}
@media (max-width:440px) {
 :root { --gutter:20px; }
 .header-content { gap:12px; }
 .landing-brand { gap:9px; }
 .landing-brand img { width:35px; height:40px; }
 .landing-brand strong { font-size:18px; line-height:1.25; }
 .landing-brand small { display:none; }
 .header-sign-in { padding-inline:14px; }
 .hero-copy h1 { font-size:clamp(33px,9.5vw,41px); }
 .hero-copy h1 > .hero-organization { font-size:32px; }
 .hero-description { font-size:18px; }
 .hero-actions .primary-button { width:100%; justify-content:space-between; padding-inline:18px; }
 .explore-link { font-size:15px; }
 .hero-access { font-size:15px; }
 .preview-heading { padding:16px; gap:10px; }
 .preview-mark { width:36px; height:36px; }
 .preview-mark svg { width:22px; height:22px; }
 .preview-heading strong { font-size:19px; }
 .preview-heading small { font-size:12px; }
 .preview-badge { display:none; }
 .preview-tabs { padding-inline:10px; }
 .preview-tabs button { font-size:13px; }
 .preview-panel { padding:17px 14px; }
 .preview-panel-title h2 { font-size:17px; }
 .preview-art { height:190px; padding:8px; }
 .preview-explanation { font-size:15px; }
 .database-record { padding-inline:11px; }
 .database-record li { gap:10px; }
 .database-record li > svg { width:22px; height:22px; }
 .database-record strong { font-size:14px; }
 .database-record li span { font-size:12px; }
 .scope-content > div { column-gap:14px; }
 .section-heading h2,.workflow-heading h2 { font-size:32px; }
 .capability-grid { grid-template-columns:1fr; gap:0; }
 .capability-item,.capability-item + .capability-item { padding:24px 0; border-left:0; border-top:1px solid var(--line); }
 .capability-icon { margin-bottom:15px; }
 .capability-item h3 { font-size:22px; }
 .database-application { padding:21px; margin-top:12px; }
 .application-heading > svg { width:26px; height:26px; }
 .application-heading h3 { font-size:20px; }
 .workflow-steps { grid-template-columns:1fr; gap:26px; margin-top:30px; }
 .step-track { margin-bottom:15px; }
 .entry-copy h2 { font-size:30px; }
 .entry-section .primary-button { width:100%; justify-content:space-between; }
}
@media (max-width:360px) {
 :root { --gutter:17px; }
 .header-sign-in { padding-inline:12px; }
 .landing-brand strong { font-size:17px; }
 .landing-brand img { width:32px; }
 .hero-copy h1 > .hero-organization { font-size:30px; }
 .preview-panel { padding-inline:12px; }
 .preview-tabs button { font-size:12px; }
 .preview-explanation { min-height:6.4em; }
 .database-record { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .landing-page * { transition:none !important; animation:none !important; }
}