:root {
  --ink: #0d1d2a;
  --ink-soft: #28404e;
  --paper: #f7f4ec;
  --cream: #eeeadf;
  --orange: #f46743;
  --orange-soft: #ffdfd1;
  --blue: #4f70e7;
  --blue-soft: #dde5ff;
  --green: #9ecb7a;
  --green-dark: #367750;
  --line: rgba(13, 29, 42, .15);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Iowan Old Style, "Baskerville", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html.signup-open { overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 20; padding: .6rem 1rem; background: var(--orange); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.site-header { width: min(1220px, calc(100% - 48px)); height: 86px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: .625rem; color: var(--ink); font-size: 1.125rem; font-weight: 750; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.brand-mark, .mini-mark { display: block; flex-shrink: 0; }
.brand-mark { width: 28px; height: 28px; }
.mini-mark { width: 14px; height: 14px; }
.side-title { display: flex; align-items: center; gap: .35rem; }
.site-header > .button { flex-shrink: 0; white-space: nowrap; }
.primary-nav { display: flex; gap: 1.8rem; margin-left: auto; margin-right: 1rem; font-size: .86rem; font-weight: 600; color: #47606c; }
.primary-nav a { transition: color .2s ease; }.primary-nav a:hover { color: var(--orange); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .65rem; border: 1px solid transparent; padding: .85rem 1.15rem; font-size: .87rem; font-weight: 700; line-height: 1; transition: transform .2s ease, background .2s ease; }.button:hover { transform: translateY(-2px); }.button span { font-size: 1.1rem; line-height: .7; }.button-small { padding: .65rem .85rem; font-size: .78rem; }.button-dark { background: var(--ink); color: #fff; }.button-accent { background: var(--orange); color: var(--ink); }.button-accent:hover { background: #ff7855; }

.hero { width: min(1220px, calc(100% - 48px)); min-height: 585px; margin: auto; padding: 90px 0 100px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(2.5rem, 6vw, 7rem); }
.eyebrow { margin: 0 0 1.2rem; display: flex; align-items: center; gap: .55rem; font-family: var(--mono); color: #59727d; font-size: .67rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }.eyebrow > span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
h1, h2, h3, p { margin-top: 0; }h1 { max-width: 660px; margin-bottom: 1.45rem; font-size: clamp(3.35rem, 6vw, 5.45rem); line-height: .91; letter-spacing: -.072em; font-weight: 700; }h1 em, h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }h1 em { color: var(--orange); }
.hero-lede { max-width: 470px; color: #49606b; font-size: 1.13rem; line-height: 1.58; }.hero-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: 2rem; }.text-link { font-size: .9rem; font-weight: 700; text-decoration: underline; text-decoration-color: #b3bab9; text-underline-offset: 5px; }.text-link span { display: inline-block; margin-left: .3rem; color: var(--orange); font-size: 1.2rem; transition: transform .2s ease; }.text-link:hover span { transform: translateY(2px); }

.hero-visual { transform: rotate(1.25deg); box-shadow: 0 28px 52px rgba(13, 29, 42, .17); overflow: hidden; border: 1px solid #243742; background: #f9fbfc; }.window-bar { height: 44px; display: flex; align-items: center; gap: 1rem; padding: 0 .85rem; color: #b7c6cd; background: #182b36; font-family: var(--mono); font-size: .61rem; }.window-controls { display: flex; gap: 5px; }.window-controls i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #ed7152; }.window-controls i:nth-child(2) { background: #edc052; }.window-controls i:nth-child(3) { background: #82bd88; }.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; background: #8ac971; }.console-grid { min-height: 345px; display: grid; grid-template-columns: 126px 1fr; }.console-sidebar { padding: 1.15rem .65rem; background: #edf2f3; color: #66808c; font-size: .62rem; line-height: 1; }.console-sidebar > div:not(.side-title) { padding: .53rem .38rem; margin: .25rem 0; }.console-sidebar b { margin-right: .25rem; color: #5d7782; font-size: .78rem; }.side-title { padding: 0 .38rem .9rem; color: #99acb4; font-family: var(--mono); font-size: .51rem; letter-spacing: .07em; }.side-active { color: #19303c; background: #d5dfe2; border-radius: 3px; font-weight: 700; }.side-bottom { margin-top: 5rem !important; }.console-main { padding: 1.4rem 1.4rem 1.1rem; }.console-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.console-heading p { margin-bottom: .25rem; color: #8ba0a7; font-family: var(--mono); font-size: .49rem; letter-spacing: .06em; }.console-heading h2 { margin: 0; color: #19303c; font-size: 1.14rem; letter-spacing: -.045em; }.mock-button { padding: .55rem .65rem; border: 1px solid #d3dde0; border-radius: 3px; background: white; color: #405966; font-size: .57rem; font-weight: 700; }.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.2rem 0 .8rem; }.stats-row article { min-width: 0; padding: .65rem .68rem; border: 1px solid #e0e7e8; background: #fff; }.stats-row span, .stats-row small { display: block; color: #80959d; font-size: .52rem; }.stats-row strong { display: inline-block; margin: .08rem 0; color: #28414c; font-size: 1.18rem; letter-spacing: -.05em; }.stats-row .positive { color: var(--green-dark); }.workload-card { border: 1px solid #dce4e6; background: #fff; }.workload-head { display: flex; justify-content: space-between; align-items: center; padding: .78rem .85rem; border-bottom: 1px solid #e7eded; }.workload-head > div { display: flex; align-items: center; gap: .35rem; }.workload-head strong { font-size: .69rem; }.workload-head small { color: #81949b; font-family: var(--mono); font-size: .48rem; }.healthy-pill { padding: .23rem .35rem; border-radius: 2px; background: #e2f0dc; color: #43763b; font-size: .49rem; font-weight: 700; }.deployment-layout { display: grid; grid-template-columns: 1fr .7fr; min-height: 103px; }.zone-list { padding: .4rem .8rem; }.zone-list > div { display: flex; align-items: center; gap: .45rem; padding: .25rem 0; }.zone-icon { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: 50%; background: #ffdbce; color: #ae422a; font-family: var(--mono); font-size: .45rem; }.zone-blue { background: #dbe3fd; color: #455eb5; }.zone-list p { flex: 1; margin: 0; font-size: .55rem; line-height: 1.2; }.zone-list p strong, .zone-list p small { display: block; }.zone-list p small { color: #8b9ba1; font-size: .47rem; }.replicas { display: flex; gap: 2px; }.replicas i { width: 5px; height: 5px; border-radius: 50%; background: #7abb75; }.mini-chart { position: relative; padding: .85rem .75rem .25rem; color: var(--orange); background: #fffaf8; }.mini-chart svg { position: absolute; bottom: 10px; left: .75rem; right: .75rem; width: calc(100% - 1.5rem); height: 47px; }.chart-label { color: #7d9299; font-family: var(--mono); font-size: .45rem; }.chart-value { position: absolute; right: .75rem; top: .8rem; color: #6c8189; font-family: var(--mono); font-size: .48rem; }.event-line { margin-top: .75rem; color: #6e858f; font-family: var(--mono); font-size: .53rem; }.event-line span { margin-right: .4rem; color: #99abb0; }.event-line b { margin-right: .25rem; color: var(--green-dark); }

.section { width: min(1220px, calc(100% - 48px)); margin: auto; }.platform-section { padding: 9rem 0 8rem; }.section-heading { max-width: 640px; margin-bottom: 3rem; }.section h2 { margin-bottom: 0; font-size: clamp(2.4rem, 4.3vw, 4rem); line-height: .96; letter-spacing: -.067em; }.section-heading > p { max-width: 520px; margin: 1.4rem 0 0; color: #526a74; font-size: 1rem; }.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.product-card { position: relative; min-height: 360px; padding: 1.5rem; overflow: hidden; border: 1px solid transparent; }.product-card-blue { background: var(--blue-soft); }.product-card-warm { background: var(--orange-soft); }.product-card-ink { background: var(--ink); color: #fff; }.product-icon { height: 67px; margin: 1.3rem 0 3.4rem; display: flex; align-items: center; gap: 5px; }.app-icon i { display: block; width: 18px; height: 35px; border: 2px solid var(--ink); }.app-icon i:nth-child(2) { height: 51px; background: var(--blue); }.app-icon i:nth-child(3) { height: 25px; }.database-icon { position: relative; width: 56px; }.database-icon i { position: absolute; left: 0; width: 56px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; }.database-icon i:nth-child(1) { top: 9px; background: #fff0e8; }.database-icon i:nth-child(2) { top: 24px; background: #ffc7b0; }.database-icon i:nth-child(3) { top: 39px; background: var(--orange); }.access-icon { align-items: flex-end; }.access-icon i { display: block; width: 17px; height: 17px; border-radius: 50%; background: #b6d99b; }.access-icon i:nth-child(2) { width: 35px; height: 35px; background: var(--orange); }.access-icon i:nth-child(3) { background: var(--blue); }.product-card h3 { margin-bottom: .7rem; font-size: 1.55rem; letter-spacing: -.055em; }.product-card p { min-height: 70px; margin-bottom: 1.2rem; color: #405862; font-size: .88rem; }.product-card-ink p { color: #bdccce; }.product-card ul { padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(13,29,42,.17); }.product-card-ink ul { border-color: rgba(255,255,255,.17); }.product-card li { padding: .55rem 0; border-bottom: 1px solid rgba(13,29,42,.17); font-size: .73rem; font-weight: 600; }.product-card-ink li { border-color: rgba(255,255,255,.17); }.product-card li::before { content: "→"; margin-right: .45rem; color: var(--orange); }

.steps-section { width: 100%; padding: 8rem max(24px, calc((100vw - 1220px) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 8vw, 10rem); background: var(--ink); color: #fff; }.steps-intro p { max-width: 400px; margin-top: 1.5rem; margin-bottom: 0; color: #b9c9c8; }.steps-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.27); }.steps-list li { display: grid; grid-template-columns: 82px 1fr; gap: 1rem; padding: 1.35rem 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,.27); }.steps-list > li > span { color: var(--orange); font-family: var(--mono); font-size: .7rem; }.steps-list h3 { margin-bottom: .35rem; font-size: 1.2rem; letter-spacing: -.04em; }.steps-list p { margin: 0; color: #aec0be; font-size: .87rem; }
.observability-section {
  padding: 9rem 0;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
}
.observability-visual { min-width: 0; padding: 2rem; background: #e3efdd; }
.insight-card { border: 1px solid #b5c6ab; background: #fbfaf5; box-shadow: 9px 9px 0 #b3caa7; }
.insight-top { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: 1rem; border-bottom: 1px solid #dce3d6; font-size: .8rem; }
.insight-top > span { margin-left: auto; color: #526759; font-family: var(--mono); font-size: .6rem; }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem 1rem .5rem; }
.signal-grid span, .signal-grid strong, .signal-grid b { display: block; }
.signal-grid span { color: #526759; font-size: .75rem; }
.signal-grid strong { font-size: 2rem; letter-spacing: -.06em; }
.signal-grid small { font-size: 1rem; font-weight: 500; }
.signal-grid b { color: #a03b25; font-size: .65rem; font-weight: 500; }
.signal-chart { padding: .5rem 1rem 1rem; color: #bd462c; }
.signal-chart span { display: block; margin-bottom: .4rem; color: #526759; font-family: var(--mono); font-size: .6rem; }
.signal-chart svg { display: block; width: 100%; height: 75px; border-bottom: 1px solid #cdd7c5; }
.insight-explanation { margin: 0 1rem 1rem; padding: 1rem; background: #eaf0e3; border-left: 3px solid #598645; }
.insight-explanation > span { color: #405e37; font-family: var(--mono); font-size: .65rem; }
.insight-explanation p { margin: .5rem 0; font-size: .85rem; }
.insight-explanation strong { font-size: .75rem; }
.insight-footer { padding: .75rem 1rem; border-top: 1px solid #dce3d6; color: #526759; font-size: .7rem; }
.observability-copy > p { margin-top: 1.4rem; color: #526a74; }
.observability-copy .text-link { display: inline-block; margin-top: .6rem; }
.ai-list { margin: 1.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ai-list li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.ai-list h3 { margin: 0 0 .25rem; font-size: 1.05rem; letter-spacing: -.03em; }
.ai-list p { margin: 0; color: #526a74; font-size: .92rem; }
.dark-link { color: var(--ink); }
.faq-section { width: min(1020px, calc(100% - 48px)); margin: auto; padding: 0 0 9rem; display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; cursor: pointer; font-size: .92rem; font-weight: 700; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--orange); font-size: 1.2rem; font-weight: 400; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-width: 590px; margin: 0 2rem 1.15rem 0; color: #526a74; font-size: .87rem; }
.early-access { padding: 6.5rem max(24px, calc((100vw - 1220px) / 2)); background: #263f4b; color: #fff; }.early-grid { display: grid; max-width: 760px; gap: 2rem; }.early-grid h2 { font-size: clamp(2.7rem, 5vw, 4.7rem); }.early-side p { max-width: 390px; color: #c0cfcc; }.site-footer { width: min(1220px, calc(100% - 48px)); min-height: 106px; margin: auto; display: flex; align-items: center; gap: 2rem; color: #60737a; font-family: var(--mono); font-size: .62rem; }.site-footer .brand { color: var(--ink); font-family: var(--sans); }.site-footer > a:not(.brand) { margin-left: auto; }.site-footer > span { color: #839197; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 60px; }.hero-copy { max-width: 650px; }.hero-visual { max-width: 660px; width: 100%; justify-self: center; }.observability-section { grid-template-columns: 1fr; gap: 3.5rem; }.observability-visual { max-width: 620px; }.steps-section { grid-template-columns: 1fr; }.steps-intro { max-width: 590px; }.faq-section { grid-template-columns: 1fr; gap: 2.5rem; }.faq-heading h2 { max-width: 360px; } }
@media (max-width: 640px) { .site-header { width: min(100% - 32px, 1220px); height: 70px; }.primary-nav { display: none; }.button-small { padding: .58rem .65rem; font-size: .68rem; }.hero, .section { width: min(100% - 32px, 1220px); }.hero { padding: 56px 0 65px; }.hero h1 { font-size: clamp(3.2rem, 14vw, 4.35rem); }.hero-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }.hero-visual { transform: none; }.console-grid { grid-template-columns: 1fr; }.console-sidebar { display: none; }.console-main { padding: 1rem; }.deployment-layout { grid-template-columns: 1fr; }.mini-chart { display: none; }.platform-section { padding: 6rem 0; }.product-grid { grid-template-columns: 1fr; }.product-card { min-height: auto; }.product-card p { min-height: 0; }.steps-section { padding: 5rem 16px; }.observability-section { padding: 6rem 0; }.faq-section { width: min(100% - 32px, 1020px); padding-bottom: 6rem; }.early-access { padding: 5rem 16px; }.early-grid { gap: 1.5rem; }.site-footer { width: min(100% - 32px, 1220px); align-items: flex-start; flex-direction: column; justify-content: center; gap: .65rem; padding: 1.6rem 0; }.site-footer > a:not(.brand) { margin-left: 0; }.js .reveal { opacity: 1; transform: none; } }
/* Keep the logo and signup action on one line before navigation gets cramped. */
@media (max-width: 800px) {
  .site-header { justify-content: space-between; gap: 1rem; }
  .primary-nav { display: none; }
}
@media (max-width: 360px) {
  .site-header .brand { gap: .5rem; font-size: 1rem; }
  .site-header .brand-mark { width: 24px; height: 24px; }
}

/* The main portal remains a resource UI; the assistant is a separate optional panel. */
.hero > *, .console-main { min-width: 0; }
.assistant-preview { margin-top: .8rem; padding: .8rem; border: 1px solid #c2cfc1; background: #edf3e8; }
.assistant-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .65rem; font-weight: 700; }
.assistant-label span { color: #46633d; font-weight: 500; }
.assistant-preview p { margin: .6rem 0; font-size: .75rem; }
.plan-preview { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-top: 1px solid #cdd9c5; padding-top: .6rem; font-size: .6rem; }
.plan-preview b { margin-left: .4rem; }
.plan-preview strong { color: #36552c; font-weight: 600; }

@media (max-width: 640px) {
  .observability-visual { padding: 1rem; }
}

/* Interest collection: shared form, dialog enhancement, and inline fallback. */
.interest-intro {
  max-width: 32rem;
  margin: 1.25rem 0 0;
  color: #d9e3df;
}

.early-side { min-width: 0; }
.early-grid h2 { line-height: 1.05; letter-spacing: -.055em; margin-bottom: 0; }
.interest-form label { display: block; margin-bottom: .5rem; font-weight: 600; }
.interest-fields { display: flex; flex-wrap: wrap; gap: .7rem; }
.interest-fields input {
  flex: 1 1 13rem;
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: .8rem;
  border: 2px solid #d9e3df;
  border-radius: 0;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}
.interest-fields input::placeholder { color: #59717c; }
.interest-fields .button { margin: 0; min-height: 48px; cursor: pointer; }
.interest-fields button:disabled { cursor: default; transform: none; }
.interest-fields input:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.early-side .form-notice { margin: .9rem 0 0; max-width: none; font-size: .8rem; color: #d9e3df; }
.form-notice a, .site-footer > a:last-of-type { text-decoration: underline; text-underline-offset: 3px; }
.early-side .form-status { min-height: 1.5em; margin: .8rem 0 0; max-width: none; font-size: .9rem; color: #f7f4ec; }
.form-status[data-state="error"] { color: #ffcfbf; }
.form-status[data-state="success"] { color: #c6e6b2; }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.message-page { max-width: 760px; margin: 4rem auto; padding: 0 24px; }
.message-page h1 { font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1.1; margin-top: 3rem; }
.message-page h2 { font-size: 1.3rem; margin-top: 2rem; }
.message-page p, .message-page li { color: #405862; }
.message-page .text-link { display: inline-block; margin-top: 1.5rem; }

.interest-dialog {
  width: min(540px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 48px 36px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 90px rgba(13, 29, 42, .3);
}
.interest-dialog:not([open]) { display: none; }
.interest-dialog::backdrop { background: rgba(13, 29, 42, .65); backdrop-filter: blur(4px); }
.dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: 1.9rem;
  line-height: 1;
}
.dialog-close:hover { background: var(--cream); }
.interest-dialog h2 { margin-bottom: 1rem; font-size: clamp(2.1rem, 7vw, 2.8rem); line-height: 1.05; letter-spacing: -.055em; }
.dialog-description { margin-bottom: 1.6rem; color: #405862; }
.interest-dialog .interest-fields { flex-direction: column; gap: 1rem; }
.interest-dialog .interest-fields input { flex-basis: auto; border-color: #879b9f; background: #fffdf8; }
.interest-dialog .interest-fields .button { width: 100%; }
.interest-dialog .form-notice { margin: 1rem 0 0; color: #405862; font-size: .8rem; }
.interest-dialog .form-status { min-height: 1.5em; margin: 1rem 0 0; font-size: .9rem; }
.interest-dialog .form-status[data-state="error"] { color: #a33120; }
.interest-dialog .form-status[data-state="success"] { color: #27623c; }

@media (max-width: 640px) {
  .interest-fields { flex-direction: column; }
  .interest-fields input { flex-basis: auto; }
  .interest-fields .button { width: 100%; }
  .interest-dialog { padding: 48px 24px 20px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; } }