/* Hallmark · macrostructure: Marquee Hero · genre: modern-minimal · theme: Quiet
 * tone: technical · nav: N9 · footer: Ft2 · enrichment: none
 * pre-emit critique: P4 H4 E4 S5 R5 V4 */
@import url('../../tokens.css');
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
html{scroll-padding-top:2rem;scroll-behavior:smooth}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.65}
h1,h2,h3,p,figure,pre,dl{margin:0}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;min-width:0;overflow-wrap:anywhere;letter-spacing:-.04em}
h2{font-size:var(--text-xl);font-weight:500}h3{font-size:var(--text-md);font-weight:600}
p{max-width:65ch}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}
button,select,a{touch-action:manipulation}button,select{cursor:pointer}
button{background:none;border:0}button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
::selection{background:var(--color-ink);color:var(--color-paper)}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding-block:var(--space-lg)}
.brand{display:flex;align-items:center;gap:var(--space-xs);font-weight:600;letter-spacing:-.04em;min-height:44px}
.brand img{object-fit:contain}.header-links{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;min-width:0}.header-docs{white-space:nowrap;min-height:44px;display:flex;align-items:center}
.controls,.actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.controls{gap:var(--space-xs)}select,.theme-button{border:1px solid var(--color-rule);background:var(--color-paper);border-radius:var(--radius-sm);height:44px;padding-inline:var(--space-xs)}
.theme-button{width:44px;display:grid;place-items:center}
.theme-toggle{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--color-rule);border-radius:var(--radius-sm)}
.controls>a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
@media(max-width:39.99rem){.topbar:has(.controls){flex-wrap:wrap}}
@media(max-width:47.99rem){.topbar:has(.header-links){flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.header-links{width:100%;column-gap:var(--space-md);row-gap:0}.header-links .header-docs{font-size:var(--text-sm)}.footer>div{flex-wrap:wrap;row-gap:0}}
.hero{padding-top:var(--space-xl);padding-bottom:var(--space-2xl);min-height:600px;display:flex;flex-direction:column;justify-content:space-between}
.hero-meta,.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-sm)}
.hero h1{font-size:var(--text-display);font-weight:500;line-height:1.07;margin-block:var(--space-2xl);letter-spacing:-.065em;max-width:20ch}
.hero h1 span{display:block}.hero-line{color:var(--color-muted)}
.hero-bottom{padding-bottom:var(--space-lg);border-bottom:2px solid var(--color-ink)}
.intro{padding-block:var(--space-3xl);display:grid;gap:var(--space-xl)}
.lede{font-size:var(--text-md);line-height:1.6}.intro .actions{margin-block:var(--space-lg)}
.button{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);min-height:48px;border:1px solid var(--color-ink);border-radius:var(--radius-sm);white-space:nowrap}
.primary{background:var(--color-accent);color:var(--color-accent-ink)}
.text-link{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;text-decoration:underline;text-underline-offset:5px}
.button,.text-link,.theme-button{transition:transform var(--dur-micro) var(--ease-out),opacity var(--dur-short) var(--ease-out)}
.button:active,.theme-button:active{transform:translateY(1px)}
button:active,a:active{opacity:.8}select:disabled{opacity:.55;cursor:not-allowed}
.small{font-size:var(--text-sm)}.muted{color:var(--color-muted)}
.flow-section{padding-bottom:var(--space-3xl)}.section-head{display:grid;gap:var(--space-md);padding-bottom:var(--space-xl)}
.section-head p{color:var(--color-muted)}
.flow{display:grid;gap:var(--space-lg);border-block:1px solid var(--color-rule);padding-block:var(--space-xl)}
.flow>div{display:flex;flex-direction:column;gap:var(--space-sm)}
.flow>div p{font-size:var(--text-sm);color:var(--color-muted)}
.flow-symbol{font-size:2rem;height:40px;line-height:40px}.connector{color:var(--color-muted);font-size:1.75rem}
.flow-note{font-size:var(--text-sm);color:var(--color-muted);padding-top:var(--space-md)}
.integration{padding-block:var(--space-2xl);display:grid;gap:var(--space-xl);background:var(--color-surface);color:var(--color-ink)}
.integration-copy{display:flex;flex-direction:column;gap:var(--space-lg)}
.protocol-demo{min-width:0}.protocol-controls{display:flex;gap:var(--space-xs);flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--color-rule);padding-bottom:var(--space-md)}
.protocol-controls button{min-height:44px;padding-inline:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-sm)}
.protocol-controls button[aria-pressed=true]{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.protocol-controls .copy-button{margin-inline-start:auto}
.code-label{font-size:var(--text-sm);color:var(--color-muted);margin-block:var(--space-lg) var(--space-sm)}
.code,pre{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.code{min-height:190px}#copy-status{min-height:1.65em;margin-top:var(--space-md)}
code{font-family:var(--font-mono);font-size:.9em;overflow-wrap:anywhere}pre code{font-size:inherit}
.management{display:grid;gap:var(--space-2xl);padding-block:var(--space-3xl)}
.management>div{display:flex;flex-direction:column;gap:var(--space-lg)}
.specs>div{padding-block:var(--space-lg);border-top:1px solid var(--color-rule);display:grid;gap:var(--space-xs)}
dt{font-weight:600}dd{margin:0;color:var(--color-muted)}
.limits{padding-bottom:var(--space-3xl);display:grid;gap:var(--space-xl)}
.limits-body{display:flex;flex-direction:column;gap:var(--space-lg);color:var(--color-muted)}
.final-cta{padding-block:var(--space-2xl);display:flex;align-items:flex-start;flex-direction:column;gap:var(--space-lg);border-top:1px solid var(--color-rule)}
.footer{display:flex;gap:var(--space-lg);flex-wrap:wrap;padding-block:var(--space-lg);border-top:1px solid var(--color-rule);font-size:var(--text-sm)}
.footer>div{display:flex;align-items:center;gap:var(--space-lg)}.footer a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.footer>span{font-weight:600;display:flex;align-items:center}.footer p{color:var(--color-muted);align-self:center}
.footer p,.doc-footer p{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
.footer p a,.doc-footer p a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.skip-link:focus{position:fixed;top:1rem;left:1rem;background:var(--color-paper);color:var(--color-ink);padding:1rem;z-index:var(--z-sticky)}
.docs-layout{display:grid;gap:var(--space-xl);max-width:1200px;margin:auto;padding:var(--space-xl) clamp(1.25rem,5vw,4rem)}
.docs-nav{display:flex;gap:var(--space-xs);flex-wrap:wrap;align-content:start}
.docs-nav a{display:block;padding:var(--space-xs) var(--space-sm);min-height:44px;color:var(--color-muted);white-space:nowrap}
.docs-nav a[aria-current=page]{background:var(--color-surface);color:var(--color-ink);font-weight:600}
.docs-nav>nav{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.doc-footer{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;padding-block:var(--space-lg);border-top:1px solid var(--color-rule);font-size:var(--text-sm)}
.docs-article{min-width:0;max-width:76ch}.docs-article h1{font-size:clamp(2rem,4vw,3rem);font-weight:500;margin-bottom:var(--space-lg)}
.docs-article h2{font-size:1.5rem;margin-top:var(--space-xl);margin-bottom:var(--space-md)}.docs-article h3{margin-block:var(--space-lg) var(--space-sm)}
.docs-article p,.docs-article ol,.docs-article ul{margin-block:var(--space-md)}.docs-article li{padding-bottom:var(--space-xs)}
.docs-article a{text-decoration:underline;text-underline-offset:4px}.docs-article pre{background:var(--color-surface);color:var(--color-ink);padding:var(--space-lg)}
.doc-pager{margin-top:var(--space-2xl);display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;border-top:1px solid var(--color-rule);padding-top:var(--space-md)}
.doc-pager a{display:inline-flex;min-height:44px;align-items:center;white-space:nowrap}
button[data-state=success]{color:var(--color-success)}button[data-state=error]{color:var(--color-error)}
@media(hover:hover){.button:hover,.text-link:hover{opacity:.75}.theme-button:hover{transform:translateY(-1px)}}
@media(min-width:40rem){.flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center}.connector{padding-inline:var(--space-xs)}.specs>div{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
@media(min-width:60rem){.intro{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.integration{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-3xl)}.management,.limits{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.docs-layout{grid-template-columns:220px minmax(0,1fr)}.docs-nav{position:sticky;top:var(--space-lg);flex-direction:column;height:fit-content}.docs-nav>nav{flex-direction:column}.footer p{margin-inline-start:auto}.hero{min-height:620px}}
@media(max-width:39.99rem){.hero{min-height:auto;padding-top:var(--space-lg)}.hero-meta>span{flex-basis:100%}.hero h1{margin-block:var(--space-xl);font-size:clamp(2.4rem,9vw,3.6rem)}.intro{padding-block:var(--space-2xl)}.controls{gap:var(--space-xs)}.protocol-controls .copy-button{margin-inline-start:0}.topbar{gap:var(--space-xs)}.flow{gap:var(--space-sm)}.connector{transform:rotate(90deg);width:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Same snapshot layering as the administration dashboard's circular reveal. */
@supports(view-transition-name:root){
 ::view-transition-image-pair(root){isolation:auto}
 ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;display:block}
 ::view-transition-new(root){z-index:1}::view-transition-old(root){z-index:0}
}
.hero h1{perspective:1000px}
.hero h1 span{transform-origin:left bottom}
.scroll-top-sentinel{position:absolute;top:0;left:0;width:1px;height:480px;pointer-events:none}
.scroll-top{position:fixed;right:max(1.25rem,env(safe-area-inset-right));bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:var(--z-sticky);width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--color-rule);border-radius:50%;background:var(--color-ink);color:var(--color-paper);transition:transform var(--dur-short) var(--ease-out),opacity var(--dur-short) var(--ease-out)}
.scroll-top[aria-hidden=true]{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
.scroll-top:active{transform:translateY(1px)}
@media(hover:hover){.scroll-top:hover{transform:translateY(-3px)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .button:hover{transform:translateY(-2px);opacity:.9}
 .button:active{transform:translateY(1px)}
}