/* 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){
 /* Page transitions (cross-document View Transitions, Chromium 126+ and Safari 18.2+). The rest of the viewport
    (the root snapshot, so a scrolled page leaves from where the reader was) lifts away, then the new page settles in
    from below, starting as the old one is gone so text never doubles up. Back and forward reverse the direction:
    js-flag.js tags a return to an earlier history entry with the "back" type. 420ms in all.
    The header, and the docs navigation where it is sticky, do not animate at all: their new state replaces the old
    one on the first frame (no crossfade, no resize), as a link's current-page mark would on a plain page load. */
 @view-transition{navigation:auto}
 .site-header{view-transition-name:site-header}
 ::view-transition-old(root){animation:vt-out 150ms cubic-bezier(.4,0,.6,1) both}
 ::view-transition-new(root){animation:vt-in 280ms var(--ease-out) 140ms both}
 :active-view-transition-type(back)::view-transition-old(root){animation-name:vt-out-back}
 :active-view-transition-type(back)::view-transition-new(root){animation-name:vt-in-back}
 ::view-transition-group(site-header),::view-transition-group(docs-nav),::view-transition-new(site-header){animation:none}
 ::view-transition-old(site-header){animation:none;opacity:0}
 @keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
 @keyframes vt-in{from{opacity:0;transform:translateY(20px)}}
 @keyframes vt-out-back{to{opacity:0;transform:translateY(12px)}}
 @keyframes vt-in-back{from{opacity:0;transform:translateY(-20px)}}
 /* Above 800px the docs navigation is sticky beside the article, so between docs pages it stays put. Going to or from
    a page without it, it leaves and arrives with the page. Below 800px it scrolls with the article and is not named. */
 @media (min-width:801px){
  .docs-nav{view-transition-name:docs-nav}
  ::view-transition-new(docs-nav){animation:none}
  ::view-transition-old(docs-nav){animation:none;opacity:0}
  ::view-transition-old(docs-nav):only-child{animation:vt-out 150ms cubic-bezier(.4,0,.6,1) both;opacity:1}
  ::view-transition-new(docs-nav):only-child{animation:vt-in 280ms var(--ease-out) 140ms both}
  :active-view-transition-type(back)::view-transition-old(docs-nav):only-child{animation-name:vt-out-back}
  :active-view-transition-type(back)::view-transition-new(docs-nav):only-child{animation-name:vt-in-back}
 }
 /* Fallback where cross-document transitions are missing or skipped (Firefox, Safari before 18.2): js-flag.js marks
    an arrival from another page of this site (never a first visit or a reload) and the page content settles in.
    Translation only, so copy is never faded in; the header and docs navigation stay still. */
 .page-enter main>:not(.docs-shell),.page-enter .docs-shell>:not(.docs-nav){animation:page-enter 300ms var(--ease-out) backwards}
 .page-enter-back main>:not(.docs-shell),.page-enter-back .docs-shell>:not(.docs-nav){animation-name:page-enter-back}
 @keyframes page-enter{from{transform:translateY(20px)}}
 @keyframes page-enter-back{from{transform:translateY(-20px)}}

 /* 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}}

/* Link underline, as in the console's page navigation: a 2px line drawn from the left on hover and focus
   (180ms in, 120ms out), and held for the current page. Header nav and footer links. */
.site-header .nav a,.footer a:not(.brand){position:relative;text-decoration:none}
.site-header .nav a::after,.footer a:not(.brand)::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;opacity:.6;transition:transform 120ms cubic-bezier(.2,.8,.3,1)}
/* The line sits just under the word, as in the console's page navigation: 3px of air below the text. */
.site-header .nav a::after{background:#8ab4ff;bottom:auto;top:calc(50% + .85em)}
@media(max-width:1150px){.site-header .nav a{justify-self:start;align-self:flex-start}}
@media (hover:hover){.site-header .nav a:hover::after,.footer a:not(.brand):hover::after{transform:scaleX(1);transition-duration:180ms}}
.site-header .nav a:focus-visible::after,.footer a:not(.brand):focus-visible::after{transform:scaleX(1);transition-duration:180ms}
.site-header .nav a[aria-current=page]{text-decoration:none}
.site-header .nav a[aria-current=page]::after{transform:scaleX(1);opacity:1}
@media (prefers-reduced-motion:reduce){.site-header .nav a::after,.footer a:not(.brand)::after{transition:none}}