/* ChemLib marketing typography and visual restraint.
   Keep this layer separate so the public site follows the product UI without
   duplicating the application stylesheet. */
:root {
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;
  --serif: var(--sans);
}
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Product-like hierarchy: compact, calm and factual. */
.hero h1,
.page-hero h1 {
  font-size: clamp(42px, 4.8vw, 68px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 600;
}

.problem h2,
.section-heading h2,
.tour-copy h2,
.who h2,
.story-head h2,
.page-cta h2,
.home-map-copy h2 {
  font-weight: 600;
  letter-spacing: -.035em;
}

.hero h1 em,
.page-hero h1 em,
.problem h2 em,
.cta h2 em {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  color: var(--blue-dark);
  letter-spacing: inherit;
}

.lead,
.problem-grid > div p,
.section-heading > p:last-child,
.story-head > div > p {
  font-size: 17px;
}

.eyebrow,
.section-number {
  letter-spacing: .1em;
  font-weight: 600;
}

.brand { font-weight: 600; }
.site-header nav a,
.button,
.text-link { font-weight: 500; }

/* Use shadows as depth cues, not decoration. */
.button { box-shadow: none; }
.button:hover { transform: none; }
.screen-shell,
.ui-shot,
.feature-window { box-shadow: 0 12px 32px rgba(43,61,85,.10); }
.story-card,
.module-link { border-radius: 8px; }

/* The interface itself is the visual; avoid decorative dashboard theatre. */
.orbit,
.float-card { display: none; }

.real-product-capture {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d5deea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(43,61,85,.10);
}
.real-product-capture img {
  display: block;
  width: 100%;
  height: auto;
}
.real-product-capture figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border: 1px solid rgba(209,213,219,.9);
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  color: #667085;
  font-size: 9px;
  letter-spacing: .01em;
}

.capture-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.capture-gallery.capture-gallery-single {
  grid-template-columns: minmax(0, 1fr);
}
.capture-gallery .real-product-capture img {
  aspect-ratio: 1.44;
  object-fit: cover;
  object-position: top left;
}
.capture-gallery-single .real-product-capture img {
  aspect-ratio: auto;
}

.values {
  padding-top: 120px;
  padding-bottom: 120px;
  background: #f4f7fb;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.values .section-heading { max-width: 720px; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px;
}
.values-grid article {
  min-height: 280px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.values-grid span {
  font-family: var(--mono);
  color: var(--blue);
  font-size: 11px;
}
.values-grid h3 {
  max-width: 260px;
  margin: 70px 0 14px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.values-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 760px) {
  .capture-gallery,
  .values-grid { grid-template-columns: 1fr; }
  .values-grid article { min-height: auto; }
  .values-grid h3 { margin-top: 36px; }
}

code,
.mono,
.mini-metrics strong { font-family: var(--mono); }

@media (max-width: 560px) {
  .hero h1,
  .page-hero h1 { font-size: 40px; }
  .lead { font-size: 16px; }
}
/* Quiet pilot signal: one ECG trace, not a pulsing whole button. */
.pilot-pulse{display:inline-flex;align-items:center;gap:9px}.pilot-heartbeat{width:30px;height:12px;overflow:visible}.pilot-heartbeat polyline{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:42;stroke-dashoffset:42;animation:pilot-heartbeat 3.8s ease-in-out infinite}
@keyframes pilot-heartbeat{0%,58%{stroke-dashoffset:42;opacity:.55}72%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-42;opacity:.55}}
@media(prefers-reduced-motion:reduce){.pilot-heartbeat polyline{animation:none;stroke-dashoffset:0}}
.experience-line {
  max-width: 650px;
  margin: 20px 0 0;
  padding-left: 15px;
  border-left: 2px solid var(--blue);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* The Cmd+K Brand animation, adapted as a short, dismissible site intro. */
.brand-intro{position:fixed;inset:0;z-index:1000;display:none;place-items:center;overflow:hidden;background:#111827;color:#f8fafc;opacity:1;visibility:visible;transition:opacity .7s ease,visibility .7s}.brand-intro-enabled .brand-intro{display:grid}.brand-intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none}.brand-intro canvas{position:absolute;inset:0;width:100%;height:100%}.brand-intro-lockup{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0;transform:translateY(8px);pointer-events:none}.brand-intro-lockup strong{font:700 clamp(34px,5vw,58px)/1 "IBM Plex Sans",sans-serif;letter-spacing:-.045em}.brand-intro-lockup span{color:#cbd5e1;font:500 11px/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase}.brand-intro-skip{position:absolute;right:clamp(18px,3vw,42px);top:clamp(18px,3vw,36px);padding:9px 12px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(255,255,255,.06);color:#e5e7eb;font:500 12px/1 "IBM Plex Sans",sans-serif;cursor:pointer;transition:background .2s,border-color .2s}.brand-intro-skip:hover,.brand-intro-skip:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);outline:none}.brand-intro-seen .brand-intro{display:none}
.brand-intro-lockup{position:absolute;left:0;top:0;align-items:flex-start;gap:12px;text-align:left;transform:translate(10px,-50%)}.brand-intro-lockup strong{font-size:clamp(52px,8vw,82px);line-height:.92}.brand-intro-lockup span{display:block;max-width:min(43vw,410px);opacity:0;transform:translateY(7px);color:#cbd5e1;font:400 clamp(13px,1.45vw,16px)/1.45 "IBM Plex Sans",sans-serif;letter-spacing:.018em;text-transform:none}
@media(max-width:560px){.brand-intro-lockup strong{font-size:clamp(44px,13vw,52px)}.brand-intro-lockup span{max-width:45vw;font-size:11px}}
@media(prefers-reduced-motion:reduce){.brand-intro{transition:opacity .2s}.brand-intro canvas{display:none}.brand-intro-lockup{opacity:1;transform:translate(0,-50%)}}
@media(prefers-reduced-motion:reduce){.brand-intro-lockup span{opacity:1;transform:none}}

/* ---- Layout refinement (2026-11): rhythm, hero, add-ons, mobile ---------- */
.problem,.workflow,.platform,.product-tour,.principles,.who,.addons{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.cta{padding-top:clamp(64px,8vw,96px);padding-bottom:clamp(72px,9vw,110px)}
.origin{padding-bottom:clamp(64px,8vw,96px)}
.hero{min-height:0;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,4vw,64px);padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(56px,7vw,96px)}
.hero h1,.page-hero h1{font-size:clamp(38px,4.2vw,60px);line-height:1.02}
.hero-visual{padding:0}
.hero .real-product-capture,.hero-visual figure{box-shadow:0 30px 80px rgba(43,61,85,.18),0 3px 10px rgba(43,61,85,.06)}
.page-hero{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(48px,6vw,80px)}
.story{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(56px,7vw,92px)}
.story-head h2,.section-heading h2{text-wrap:balance}
.platform-card{min-height:0}
.card-icon{margin-bottom:36px}
.tour-screen{width:100%;max-width:880px}
.section-heading h2,.problem h2,.tour-copy h2,.who h2{font-size:clamp(32px,3.6vw,50px)}
/* add-ons */
.addons{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.addons-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;margin-top:clamp(32px,4vw,52px);align-items:stretch}
.addon-core{background:#1d293b;color:#fff;border-radius:14px;padding:clamp(24px,3vw,36px)}
.addon-core h3{font-size:24px;margin:14px 0 18px;letter-spacing:-.02em}
.addon-core ul{list-style:none;padding:0;margin:0;border-top:1px solid #3a4657}
.addon-core li{padding:11px 0;border-bottom:1px solid #2f3b4e;font-size:14px;color:#d6e0ec}
.addon-tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:#9fc0e4;border:1px solid #3f5572;border-radius:20px;padding:4px 10px}
.addon-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.addon-list article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;transition:transform .2s,box-shadow .2s}
.addon-list article:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(44,64,88,.08)}
.addon-list article:last-child{grid-column:1/-1}
.addon-list b{font-size:16px}
.addon-list small{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--blue-dark);text-transform:uppercase}
.addon-list p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.addons-foot{margin-top:28px;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.addons-foot .text-link{padding:4px 0}
@media(max-width:900px){.hero{grid-template-columns:1fr}.addons-grid{grid-template-columns:1fr}.hero h1,.page-hero h1{font-size:clamp(34px,9vw,46px)}}
@media(max-width:560px){.addon-list{grid-template-columns:1fr}.addon-list article:last-child{grid-column:auto}.tour-screen{width:100%;margin-left:0}}
@media(prefers-reduced-motion:reduce){.addon-list article{transition:none}}
/* Home hero capture: trim the empty side margins so the interface reads larger */
.hero .real-product-capture{overflow:hidden}
.hero .real-product-capture img{width:120%;max-width:none;margin-left:-10%;display:block}
.page-hero h1{font-size:clamp(34px,3.6vw,52px)}
@media(max-width:900px){.hero .real-product-capture img{width:100%;margin-left:0}}