/* Product evidence and distinct marketing sections, using the approved brand tokens. */
[hidden]{display:none!important}.product-capture{margin:0;background:var(--night);border:1px solid #405363;border-radius:10px;overflow:hidden;box-shadow:0 24px 64px #18212b12}.capture-bar{display:flex;justify-content:space-between;padding:18px 24px;color:#d3dfe7;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #ffffff24}.product-capture>a{display:block;padding:24px 24px 0}.product-capture img{display:block;width:100%;height:auto;border:1px solid #ffffff20;border-radius:5px}.product-capture figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px;color:#b5c7d4;font-size:.8125rem}.product-capture figcaption a{color:#e5f0f5;text-decoration:underline;text-underline-offset:4px}
.hero{padding-bottom:48px}.hero-grid{align-items:center}.hero-intro .serif{font-size:clamp(1.25rem,2vw,1.7rem)}.feature-list{margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px}.feature-row{padding:28px 0}.feature-row h3{font-size:1.35rem}.fact-strip{padding-bottom:32px}.product-jumps{display:flex;flex-wrap:wrap;gap:12px 32px;border-bottom:1px solid var(--line);padding-bottom:24px}.product-jumps a{min-height:44px;display:flex;align-items:center;font-size:.875rem}.product-section{padding:var(--section) 0;border-bottom:1px solid var(--line)}.product-section:last-child{border-bottom:0}.product-section .section-head{align-items:start}.capture-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}.capture-notes>div>span{font-size:.75rem;color:var(--blue)}.capture-notes h3{font-size:1.125rem;margin-top:8px}.capture-notes p{color:var(--muted);font-size:.9375rem;margin-bottom:0}.product-end{padding-top:var(--section)}
.workflow-story{background:var(--night);color:#e5f0f5;border-radius:10px;padding:40px}.story-heading{display:flex;justify-content:space-between;align-items:start;gap:24px}.story-heading h3{font-size:1.8rem;max-width:560px}.story-heading .eyebrow{color:#a6d4ec}.story-play{flex-shrink:0;background:transparent;color:inherit;border:1px solid #738a9c;border-radius:4px;padding:8px 14px;min-height:44px;font-size:.875rem}.story-track{height:2px;background:#405363;margin:32px 0 24px;overflow:hidden}.story-track span{display:block;height:100%;width:33.333%;background:#91cbea}.story-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.story-steps button{display:flex;align-items:center;gap:12px;text-align:left;padding:18px 16px;background:#1d2a36;color:#d3dfe7;border:1px solid #596e80;border-radius:4px;min-height:68px;font-size:.9375rem}.story-steps button span{font-size:.75rem;color:#a6d4ec}.story-steps button[aria-pressed=true]{background:#2b4051;border-color:#91cbea;color:white}.story-panels{padding:32px 0 0;min-height:180px}.story-panels p{max-width:75ch;margin:16px 0 0;color:#d3dfe7}.story-status{font-size:1.125rem}.illustration-label{color:var(--muted);font-size:.8125rem;margin:20px 0}.workflow-story .illustration-label{color:#b5c7d4;margin-bottom:0}.lifecycle{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:0;margin:0;counter-reset:steps}.lifecycle li{border-top:2px solid var(--blue);padding-top:24px}.lifecycle p{color:var(--muted);margin:0}.lifecycle h3{font-size:1.5rem}.lifecycle .eyebrow{color:var(--blue);margin-bottom:16px}
@media(prefers-reduced-motion:no-preference){.story-track span{transition:transform .6s ease}.story-steps button{transition:background-color .25s,border-color .25s}}
/* Search and navigation share the generated documentation source. */
.docs-search{margin-bottom:24px}.docs-search label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:8px}.docs-search input{width:100%;min-height:44px;padding:10px;border:1px solid #83929a;border-radius:4px;background:var(--paper);color:var(--ink);font-size:.875rem}.search-status{font-size:.75rem;color:var(--muted);margin:8px 0}.docs-search ul{list-style:none;padding:0;margin:8px 0;background:#fff;border:1px solid var(--line);border-radius:4px}.docs-search li+li{border-top:1px solid var(--line)}.docs-search li a{display:block;padding:12px}.docs-search li strong{display:block;font-size:.875rem;color:var(--ink)}.docs-search li small{display:block;margin-top:4px;line-height:1.5;color:var(--muted)}.doc-group{border-bottom:1px solid var(--line);padding:4px 0}.doc-group summary{font-size:.875rem;font-weight:600;padding:14px 4px;line-height:1.4}.doc-group a{margin:2px 0}.page-outline{position:sticky;top:calc(var(--header) + 24px);align-self:start;max-height:calc(100dvh - var(--header) - 48px);overflow:auto;font-size:.8125rem;min-width:0}.page-outline summary{font-weight:600;min-height:44px}.page-outline nav{display:flex;flex-direction:column;border-left:1px solid var(--line)}.page-outline a{display:block;padding:8px 0 8px 16px;color:var(--muted);line-height:1.5;min-height:36px}.page-outline a[aria-current=location]{border-left:2px solid var(--blue);margin-left:-1px;color:var(--ink)}
/* The active outline entry changes colour and rule only; a weight change would rewrap it and shift the list. */.docs-shell{grid-template-columns:224px minmax(0,1fr) 180px;gap:32px}.docs-article .cards{gap:24px}.docs-article{max-width:100%}.docs-article .source-note{max-width:72ch}
.contact-layout{gap:6%}.contact-panel #contact-status{margin-block:24px}.contact-panel #contact-status[data-state=success]{border-color:#34734f;background:#e3efe7;color:#204d32}.contact-panel #contact-status[data-state=error]{border-color:#9a4d33;color:#763b28}.contact-panel .button{min-width:160px}.contact-panel #contact-verification{margin-top:24px}.contact-panel .contact-hint{margin-top:16px}
@media(max-width:1279px){.docs-shell{grid-template-columns:210px minmax(0,1fr);gap:32px}.page-outline{position:static;max-height:none;grid-column:2;grid-row:1;align-self:start;margin-bottom:0}.docs-article{grid-column:2}.docs-nav{grid-column:1;grid-row:1 / span 2}.page-outline nav{flex-direction:row;flex-wrap:wrap;gap:0 12px;border-left:0;border-bottom:1px solid var(--line);padding-bottom:16px}.page-outline a{padding:8px 0}.page-outline a[aria-current=location]{border-left:0;margin-left:0}}
@media(max-width:800px){.feature-list{grid-template-columns:1fr;gap:0}.product-capture>a{padding:12px 12px 0}.capture-bar,.product-capture figcaption{padding:16px}.product-capture figcaption{font-size:.75rem}.capture-notes{gap:24px}.workflow-story{padding:28px}.story-heading{flex-direction:column;gap:12px}.story-steps{gap:8px}.story-steps button{flex-direction:column;align-items:start;padding:12px;font-size:.8125rem}.story-panels{min-height:235px}.lifecycle{grid-template-columns:1fr;gap:24px}.lifecycle li{padding-top:20px}.docs-shell{display:flex;flex-direction:column;gap:0}.docs-nav{order:0;width:100%;margin-bottom:20px}.page-outline{order:1;width:100%;margin-bottom:28px}.docs-article{order:2;width:100%}.docs-search{margin-top:16px;margin-bottom:0}.page-outline nav{max-height:220px;overflow:auto}.product-section .section-head{gap:20px}.product-jumps{gap:8px 24px}.hero{padding-bottom:32px}.product-section .section-head p{margin-bottom:16px}}
@media(max-width:560px){.capture-notes{grid-template-columns:1fr;gap:20px}.capture-notes>div{padding-left:32px;position:relative}.capture-notes>div>span{position:absolute;left:0;top:4px}.capture-notes h3{margin-top:0}.workflow-story{padding:24px 20px}.story-heading h3{font-size:1.5rem}.story-panels{min-height:285px}.story-steps button{min-height:98px}.capture-bar{font-size:.65rem;letter-spacing:.04em}.hero-intro .serif{font-size:1.25rem}.product-capture img{min-height:0}.page-outline summary{padding-block:8px}}

.task-brief{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px;border:1px solid var(--line);border-radius:6px;margin:24px 0}.task-brief h2{font-size:1rem;margin:0 0 8px}.task-brief p{font-size:.875rem;margin:0}@media(max-width:560px){.task-brief{grid-template-columns:1fr}}

#contact-form[data-delivery=email] .contact-fields,#contact-form[data-delivery=email] #contact-verification,#contact-form[data-delivery=email]>button,#contact-form[data-delivery=email] #contact-verification+.contact-hint,#contact-form[data-delivery=pending] .contact-fields,#contact-form[data-delivery=pending]>button{display:none}

/* Keep recovery actions distinct when they wrap on narrow screens. */
.error-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 24px}

/* Conceptual record illustration replaces the retired inventory screenshot. */
.equipment-context{margin:0;padding:40px;background:var(--night);border:1px solid #405363;border-radius:10px;color:#e5f0f5}.context-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.context-heading .eyebrow{margin:0;color:#b5c7d4}.context-label{font-size:.75rem;color:#b5c7d4}.equipment-context .context-title{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.3;letter-spacing:-.02em;margin:28px 0 36px}.context-records{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0}.context-records li{padding:24px;border:1px solid #627d90;border-top:3px solid #91cbea;border-radius:4px;background:#243442}.context-number{font-size:.75rem;color:#a6d4ec;text-transform:uppercase;letter-spacing:.05em}.context-records h3{font-size:1.125rem;line-height:1.4;letter-spacing:0;margin:20px 0 12px;font-weight:500}.context-records p{font-size:.875rem;color:#d3dfe7;margin:0}.equipment-context figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;font-size:.8125rem;color:#b5c7d4}.equipment-context figcaption a{color:#e5f0f5;text-decoration:underline;text-underline-offset:4px}@media(max-width:800px){.equipment-context{padding:28px}.context-records{grid-template-columns:1fr;gap:16px}.context-records li{padding:20px}.context-records h3{margin:12px 0 8px}.equipment-context .context-title{margin:24px 0}.equipment-context figcaption{margin-top:24px}}

/* Email-only mode is a contact card, not an empty form with status banners. */
.contact-panel .contact-intro{font-size:1rem;line-height:1.6;color:var(--muted);margin:0 0 20px;max-width:52ch}
.contact-panel .contact-direct{margin:20px 0 0}.contact-direct a{display:inline-flex;align-items:center;min-height:44px;font-size:1.125rem;font-weight:500;line-height:1.4;color:var(--blue);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
#contact-form[data-delivery=email] #contact-status{display:none}
#contact-form[data-delivery=email] .contact-direct{margin:0}

/* Public demo introduction; the console retains its own production styles. */
.demo-landing .lead{margin-bottom:24px}.demo-landing .demo-copy{max-width:760px;line-height:1.75;margin-bottom:26px}.demo-landing .demo-footnote{max-width:760px;margin-top:20px;font-size:14px;line-height:1.7;color:#52616b}
/* Closing call to action: one primary action and one self-serve next step. */
.cta-actions{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;flex-shrink:0}
.cta .text-link{color:#e5f0f5}
.cta .text-link:hover{color:#fff}
/* Small blue text uses a darker shade of the brand blue to reach 4.5:1 on paper. */
:root{--blue-text:#2f6f8e}
.capture-notes>div>span,.lifecycle .eyebrow,.contact-direct a{color:var(--blue-text)}
/* Keyboard focus never lands under the sticky header. */
.table-wrap,[tabindex],a,button,summary,input,select,textarea{scroll-margin-top:calc(var(--header) + 16px)}
/* While delivery is being checked the panel already looks like the email card, so nothing shifts when the check ends. */
#contact-form[data-delivery=pending] #contact-status{display:none}
#contact-form[data-delivery=pending] .contact-direct{margin:0}
#contact-form[data-delivery=pending] #contact-verification,#contact-form[data-delivery=pending] #contact-verification+.contact-hint{display:none}
/* Narrow phones: the three monitoring steps stack so long words never overflow their buttons. */
@media(max-width:420px){.story-steps{grid-template-columns:1fr}
.story-steps button{flex-direction:row;align-items:center;min-height:48px;padding:12px 14px}
.story-panels{min-height:250px}
}
@media(min-width:1280px){.page-outline a{border-left:2px solid transparent;margin-left:-1px}}

/* Motion layer. Every rule animates transform or opacity only, sits behind prefers-reduced-motion,
   and leaves content readable without JavaScript. Body copy is never faded in; reveals translate only. */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-press:cubic-bezier(.3,.7,.4,1)}

@media (prefers-reduced-motion:no-preference){
 /* Cross-document page transitions where supported. The header and docs navigation stay still. */
 @view-transition{navigation:auto}
 .site-header{view-transition-name:site-header}
 .docs-nav{view-transition-name:docs-nav}
 ::view-transition-old(root){animation:vt-out 160ms ease both}
 ::view-transition-new(root){animation:vt-in 300ms var(--ease-out) both}
 @keyframes vt-out{to{opacity:0}}
 @keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

 /* Hero entrance: a short staggered rise, translation only, played by CSS from the first frame. */
 .hero>.eyebrow,.hero h1,.hero-intro,.page-hero:not(.demo-landing)>*{animation:rise 720ms var(--ease-out) both}
 .hero h1,.page-hero:not(.demo-landing)>h1{animation-delay:70ms}
 .hero-intro,.page-hero:not(.demo-landing)>.lead{animation-delay:150ms}
 .hero+.equipment-context{animation:rise 820ms var(--ease-out) 220ms both}
 @keyframes rise{from{transform:translateY(14px)}}

 /* Scroll reveals (classes added by site.js only for sections that start below the first screen). */
 .reveal{transform:translateY(22px);transition:transform 760ms var(--ease-out)}
 .reveal.revealed,.reveal.reveal-group{transform:none}
 .reveal .reveal-item{transform:translateY(16px);transition:transform 640ms var(--ease-out) calc(var(--i,0) * 70ms + 90ms)}
 .reveal.revealed .reveal-item{transform:none}

 /* Step reveals: accent rules draw across connected records and lifecycle stages once revealed. */
 .context-records li,.lifecycle li{position:relative}
 .reveal .context-records li::before,.reveal.lifecycle li::before{content:"";position:absolute;left:0;right:0;transform-origin:left center;transform:scaleX(0);transition:transform 700ms var(--ease-out) calc(var(--i,0) * 120ms + 260ms)}
 .reveal .context-records li{border-top-color:#3c5466}
 .reveal .context-records li::before{left:-1px;right:-1px;top:-3px;height:3px;background:#91cbea;border-radius:4px 4px 0 0}
 .reveal.lifecycle li{border-top-color:var(--line)}
 .reveal.lifecycle li::before{top:-2px;height:2px;background:var(--blue)}
 .reveal.revealed .context-records li::before,.reveal.revealed.lifecycle li::before{transform:scaleX(1)}

 /* Hover and press. Presses settle 1px; nothing moves a diagram node away from its connector. */
 .button,.copy,.diagram-toggle,.story-play,.story-steps button,.menu-button,.doc-mobile,.contact-direct a{transition:background-color 160ms ease,transform 140ms var(--ease-press)}
 .button:active,.copy:active,.diagram-toggle:active,.story-play:active,.menu-button:active,.doc-mobile:active{transform:translateY(1px) scale(.985)}
 .story-steps button:active{transform:translateY(1px)}
 .brand img{transition:opacity 180ms ease}
 .brand:hover img{opacity:.86}
 .feature-row .number,.capture-notes>div>span{display:inline-block;transition:transform 220ms var(--ease-out)}
 .feature-row:hover .number{transform:translateX(3px)}
 .card .eyebrow{transition:transform 220ms var(--ease-out)}
 .card:hover .eyebrow{transform:translateX(2px)}
 .docs-nav a{transition:background-color 140ms ease}

 /* Diagram: the active node's glow is a separate layer, faded with opacity from the same clock state. */
 .node::after{content:"";position:absolute;inset:-1px;border:1px solid #91cbea;background:#91cbea14;opacity:0;transition:opacity 260ms ease;pointer-events:none}
 .node[data-active=true]::after{opacity:1}

 /* Workflow story: per-step progress line and a small settle when a panel changes. */
 .story-panels>[data-panel].story-enter{animation:panel-in 420ms var(--ease-out) both}
 @keyframes panel-in{from{transform:translateY(8px)}}

 /* Disclosures and menus open with a brief settle. */
 .js .nav.open{animation:drop-in 200ms var(--ease-out) both}
 .js .docs-nav.expanded nav,#docs-results:not([hidden]){animation:drop-in 180ms var(--ease-out) both}
 .faq[open]>p,.doc-source-disclosure[open]>pre{animation:drop-in 220ms var(--ease-out) both}
 @keyframes drop-in{from{opacity:0;transform:translateY(-4px)}}
}

/* Progress line inside each story step; drawn with scaleX from the shared clock. Hidden under reduced motion. */
.story-steps button{position:relative}
.step-progress{position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:#91cbea;transform:scaleX(0);transform-origin:left center;pointer-events:none}
@media (prefers-reduced-motion:reduce){.step-progress{display:none}}
@media print{.reveal,.reveal .reveal-item{transform:none!important}}