/* Ariavel site shell: tokens, base, header, menus, footer, buttons.
   Loaded on every page. Selectors are namespaced (site-*, menu-*) because
   document pages also carry their own component CSS in @layer page. */
/* Preload the local font; on slow connections keep the first rendered font stable. */
@font-face{font-family:Manrope;src:url('/assets/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:optional}

:root{
  color-scheme:light dark;
  --bg:#fafaf7;--surface:#fff;--surface-2:#f0f2ef;
  --ink:#0e1726;--ink-2:#2a3446;--muted:#505c70;
  --line:#e0e5ec;--line-strong:#c9d2de;
  --blue:#2458d3;--blue-hover:#1c47b0;--link:#1f4fc4;--soft:#e9effc;
  --deep:#0b1426;--on-deep:#fff;--on-deep-muted:#c3cee0;--on-deep-accent:#9ebdff;
  --focus:#2458d3;
  --warn-bg:#fdf1dc;--warn-ink:#744300;
  --nav:rgba(250,250,247,.96);--nav-top:rgba(250,250,247,.85);
  --line-accent:color-mix(in srgb,var(--blue) 34%,var(--line));
  --grid:rgba(14,23,38,.045);
  --shadow-sm:0 1px 2px rgba(14,23,38,.05);
  --shadow-md:0 1px 2px rgba(14,23,38,.05),0 14px 32px -18px rgba(14,23,38,.24);
  --shadow-lg:0 1px 2px rgba(14,23,38,.05),0 24px 60px -28px rgba(14,23,38,.28);
  --shadow-hover:0 1px 2px rgba(14,23,38,.06),0 30px 70px -32px rgba(20,48,110,.36);
  --shadow-media:0 1px 2px rgba(14,23,38,.06),0 2px 8px -4px rgba(14,23,38,.08),0 34px 80px -38px rgba(20,48,110,.42);
  --shadow-header:0 1px 0 rgba(14,23,38,.02),0 10px 28px -22px rgba(14,23,38,.35);
  --radius:14px;--header-h:68px;
  /* Motion: one easing family and three durations (hover/focus, components, sections). */
  --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms;--dur:220ms;--dur-slow:420ms;
  --font:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1220;--surface:#111a2b;--surface-2:#17223a;
  --ink:#eef2f8;--ink-2:#d3dbe8;--muted:#a6b2c5;
  --line:#223049;--line-strong:#33445f;
  --blue:#2f63e0;--blue-hover:#3b70f0;--link:#9ab9ff;--soft:#172747;
  --deep:#070d1a;--focus:#9ab9ff;
  --warn-bg:#3a2a0b;--warn-ink:#f6cf7d;
  --nav:rgba(11,18,32,.86);--nav-top:rgba(11,18,32,.5);
  --line-accent:color-mix(in srgb,#5b8cff 40%,var(--line));
  --grid:rgba(158,189,255,.05);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 1px 2px rgba(0,0,0,.4),0 16px 36px -18px rgba(0,0,0,.6);
  --shadow-lg:0 1px 2px rgba(0,0,0,.4),0 24px 60px -28px rgba(0,0,0,.7);
  --shadow-hover:0 1px 2px rgba(0,0,0,.4),0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(91,140,255,.08);
  --shadow-media:0 1px 2px rgba(0,0,0,.4),0 34px 80px -36px rgba(0,0,0,.8),0 0 60px -30px rgba(47,99,224,.35);
  --shadow-header:0 1px 0 rgba(0,0,0,.2),0 12px 30px -22px rgba(0,0,0,.8);
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body > main{flex:1 0 auto}
main:focus{outline:none}
a,button,summary{-webkit-tap-highlight-color:transparent}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{flex:none;display:inline-block;vertical-align:middle}

.site-wrap{width:min(100% - 2rem,1200px);margin-inline:auto}
@media (min-width:720px){.site-wrap{width:min(100% - 3rem,1200px)}}
@media (min-width:1800px){.site-wrap{width:min(100% - 3rem,1320px)}}

.skip-link{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--surface);color:var(--ink);padding:.75rem 1rem;border-radius:10px;font-weight:700;box-shadow:var(--shadow-lg);text-decoration:none}
.skip-link:focus{top:.75rem;outline:3px solid var(--focus);outline-offset:2px}

/* Focus: one visible, high-contrast ring for shell controls. */
.site-header :focus-visible,.site-footer :focus-visible,.menu-panel :focus-visible,.menu-sheet :focus-visible,.button:focus-visible,.breadcrumb a:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:none;border-radius:8px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--nav);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);box-shadow:var(--shadow-header)}
/* At the very top the header sits lightly on the page; within ~72px of scrolling it settles
   into a defined surface. Scroll-linked, so it never moves on its own; elsewhere it stays defined. */
@supports (animation-timeline:scroll()){
  .site-header{animation:header-settle linear both;animation-timeline:scroll(root);animation-range:0 72px}
  @keyframes header-settle{from{background-color:var(--nav-top);border-bottom-color:transparent;box-shadow:none}to{background-color:var(--nav);border-bottom-color:var(--line);box-shadow:var(--shadow-header)}}
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h)}
.site-brand{display:inline-flex;align-items:center;flex:none;min-height:44px;text-decoration:none;border-radius:8px}
.site-brand picture,.site-brand img{display:block}
.site-brand img{width:150px;height:auto}
@media (min-width:720px){.site-brand img{width:164px}}
.site-nav__list{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}
.site-nav__link{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;border:0;border-radius:9px;background:none;color:var(--ink-2);font:650 .94rem/1 var(--font);text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.site-nav__link:hover{background:var(--surface-2);color:var(--ink)}
.site-nav__link[aria-current=page],.site-nav__link.is-active{color:var(--ink);background:var(--soft)}
/* A short accent under the current section, in addition to the tinted pill. */
.site-nav__link[aria-current=page]::after,.site-nav__link.is-active::after{content:'';position:absolute;left:50%;bottom:6px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--blue);opacity:.85}
.site-nav__trigger .icon{transition:transform var(--dur) var(--ease)}
.site-nav__trigger:has(+ .site-nav__fallback + .menu-panel:popover-open) .icon{transform:rotate(180deg)}
.site-nav__fallback{display:none}

/* Products menu (desktop) */
.menu-panel{position:fixed;inset:calc(var(--header-h) + 6px) max(1rem,calc((100vw - 1200px) / 2)) auto auto;width:min(26rem,calc(100vw - 2rem));margin:0;padding:.6rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);max-height:calc(100dvh - var(--header-h) - 24px);overflow:auto}
.menu-panel:has(.menu-products--many){width:min(40rem,calc(100vw - 2rem))}
.menu-panel::backdrop{background:transparent}
/* Menus fade in place (no slide-in from off-screen); closing is instant where allow-discrete is unsupported. */
.menu-panel,.menu-sheet{transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),overlay var(--dur) allow-discrete,display var(--dur) allow-discrete}
.menu-panel{transform-origin:top right}
.menu-panel:not(:popover-open){opacity:0;transform:translateY(-6px) scale(.985)}
.menu-sheet:not(:popover-open){opacity:0;transform:translateY(-8px)}
@starting-style{.menu-panel:popover-open{opacity:0;transform:translateY(-6px) scale(.985)}.menu-sheet:popover-open{opacity:0;transform:translateY(-8px)}}
.menu-panel__label{margin:.35rem .6rem .5rem;color:var(--muted);font-size:.74rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.menu-products{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.menu-products--panel.menu-products--many{grid-template-columns:1fr 1fr}
.menu-product{display:grid;grid-template-columns:32px minmax(0,1fr);gap:.8rem;align-items:center;min-height:56px;padding:.6rem;border-radius:11px;color:inherit;text-decoration:none;transition:background-color var(--dur-fast) var(--ease)}
.menu-product:hover{background:var(--surface-2)}
.menu-product[aria-current=page]{background:var(--soft)}
.menu-product__text{display:grid;gap:.1rem;min-width:0}
.menu-product__name{font-weight:720;font-size:.96rem;line-height:1.3}
.menu-product__meta{color:var(--muted);font-size:.8rem;line-height:1.35}
.menu-panel__all{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:48px;margin-top:.4rem;padding:.5rem .75rem;border-top:1px solid var(--line);color:var(--link);font-weight:720;font-size:.92rem;text-decoration:none;border-radius:0 0 10px 10px}
.menu-panel__all:hover{background:var(--surface-2)}
.menu-panel__all .icon,.menu-sheet__more .icon{transition:transform var(--dur) var(--ease)}
.menu-panel__all:hover .icon,.menu-sheet__more:hover .icon{transform:translateX(3px)}
.product-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none}
img.product-icon{object-fit:contain}
.product-icon--letter{background:var(--soft);color:var(--blue);font-weight:800;font-size:.95rem}

/* Mobile menu */
.site-menu-toggle{display:none;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:700 .92rem/1 var(--font);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.site-menu-toggle:hover,.menu-sheet__close:hover{border-color:var(--ink-2)}
.site-menu-toggle:active,.menu-sheet__close:active{background:var(--surface-2)}
.menu-sheet{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0 1rem 2rem;border:0;background:var(--bg);color:var(--ink);overflow:auto}
.menu-sheet::backdrop{background:rgba(7,13,26,.4)}
.menu-sheet nav{width:min(100%,640px);margin-inline:auto}
.menu-sheet__head{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);border-bottom:1px solid var(--line)}
.menu-sheet__title{font-weight:750;color:var(--muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.menu-sheet__head .site-brand img{width:132px}
.menu-sheet__more{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin:0 0 .75rem .5rem;color:var(--link);font-weight:720;text-decoration:none}
.menu-sheet__close{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.menu-sheet__list{margin:0;padding:.5rem 0;list-style:none}
.menu-sheet__list > li{border-bottom:1px solid var(--line)}
.menu-sheet__link{display:flex;align-items:center;min-height:56px;color:var(--ink);font-weight:750;font-size:1.15rem;text-decoration:none}
.menu-sheet__link[aria-current=page]{color:var(--link)}
.menu-products--sheet{padding:0 0 .75rem}
.menu-products--sheet .menu-product{padding:.55rem .5rem}
.menu-sheet__contact{margin:1.5rem 0 0}
.menu-sheet__contact a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:var(--link);font-weight:700;text-decoration:none}

@media (max-width:759.98px){
  .site-nav{display:none}
  .site-menu-toggle{display:inline-flex}
}
/* Without popover support the menus degrade to plain links. */
@supports not selector(:popover-open){
  [popover]{display:none}
  .site-nav__trigger{display:none}
  .site-nav__fallback{display:inline-flex}
  .site-menu-toggle{display:none}
  .site-nav{display:block}
  @media (max-width:759.98px){.site-header__inner{flex-wrap:wrap;padding-block:.5rem;gap:.25rem}.site-nav__link{padding:0 .6rem}}
}

/* Buttons and calls to action */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.2rem;border:1px solid transparent;border-radius:10px;font:720 .95rem/1.2 var(--font);text-decoration:none;text-align:center;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.button--primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(14,23,38,.14),inset 0 1px 0 rgba(255,255,255,.14)}
.button--primary:hover{background:var(--blue-hover);box-shadow:0 8px 18px -10px rgba(28,71,176,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.button--secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.button--secondary:hover{border-color:var(--ink-2);background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}
.button--inverse{background:#fff;color:#0b1426}
.button--inverse:hover{background:#e6ecf8}
.button--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.button--ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
/* Feedback, not decoration: at most a 1px lift on hover-capable devices; none while pressed. */
@media (hover:hover){.button:not(:disabled):not([aria-disabled=true]):hover{transform:translateY(-1px)}}
.button:active{transform:none;transition-duration:60ms}
.button:disabled,.button[aria-disabled=true]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.pending-cta{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;min-height:30px;padding:.25rem .8rem .25rem .6rem;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink);font-weight:700;font-size:.84rem;line-height:1.3;cursor:default}
.pending-cta .icon{width:15px;height:15px}
.badge{display:inline-flex;align-items:center;min-height:24px;padding:.1rem .6rem;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:.75rem;font-weight:700;line-height:1.3;white-space:nowrap}
.badge--pending{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
.badge--accent{background:var(--soft);border-color:transparent;color:var(--link)}
/* Pre-release product status (registry `status`): an accent pill with a leading dot, never colour alone. */
.badge--status{gap:.4rem;background:var(--soft);border-color:var(--line-accent);color:var(--link)}
.badge--status::before{content:"";flex:none;width:.42rem;height:.42rem;border-radius:50%;background:currentColor}
.badge--available{background:#e4f3ed;color:#175e49;border-color:#a5cdbd}
@media(prefers-color-scheme:dark){.badge--available{background:#153c32;color:#a8e5ca;border-color:#356859}}

/* Breadcrumb */
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none;font-size:.86rem;color:var(--muted)}
.breadcrumb li+li::before{content:'/';margin-right:.35rem;color:var(--line-strong)}
.breadcrumb a,.breadcrumb [aria-current]{display:inline-flex;align-items:center;min-height:28px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current]{color:var(--ink);font-weight:650}

/* Footer */
.site-footer{margin:0;padding:clamp(3rem,6vw,4.5rem) 0 2rem;border-top:1px solid var(--line);background:radial-gradient(40rem 16rem at 0% 0%,color-mix(in srgb,var(--blue) 5%,transparent),transparent 70%),var(--surface);color:var(--muted);font-size:.92rem}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:2.5rem}
.site-footer__brand p{margin:.9rem 0 0;max-width:30ch;color:var(--ink-2);font-weight:600}
.site-footer__contact a{color:var(--link);font-weight:700;text-decoration:none}
.site-footer__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;font-weight:inherit}
.site-footer__heading{margin:0 0 .6rem;color:var(--ink);font-size:.78rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.site-footer ul{margin:0;padding:0;list-style:none}
.site-footer li a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease)}
.site-footer li a:hover{color:var(--ink);text-decoration-color:var(--line-accent)}
.site-footer li a[aria-current=page]{color:var(--ink);font-weight:700}
.site-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(2rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line);font-size:.82rem}
.site-footer__base p{margin:0;max-width:none}
@media (max-width:759.98px){
  .site-footer__grid{grid-template-columns:1fr;gap:2rem}
  .site-footer__nav{grid-template-columns:1fr 1fr}
}
@media (max-width:359.98px){.site-footer__nav{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{transition:none!important;animation:none!important}.button:hover{transform:none!important}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media print{.site-header,.site-footer__nav,.skip-link{display:none!important}}
/* Very narrow viewports (a phone at 200% zoom): the header, buttons and badges still fit. */
@media (max-width:339.98px){
  .button{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .badge{white-space:normal}
  h1,h2{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
}
@media (max-width:299.98px){
  .site-header__inner{gap:.5rem}
  .site-brand img{width:108px}
  .site-menu-toggle{padding:0 .75rem}
  .site-menu-toggle span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Support, legal and embedded guide pages. The page's own component CSS is in
   @layer page; these unlayered rules align it with the Ariavel design system. */
:root{--fg:var(--ink);--accent:var(--link);--accent-soft:var(--soft);--navy:var(--deep);--nav-bg:var(--nav)}
.doc-page{font-family:var(--font)}
.doc-page main{display:block}

/* Page hero: the same light, calm treatment as marketing pages (dark in dark mode). */
.doc-page{--grad:linear-gradient(var(--blue),var(--blue))}
.doc-page .hero{background:radial-gradient(56rem 28rem at 92% -8%,color-mix(in srgb,var(--blue) 13%,transparent),transparent 70%),var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.doc-page .hero::after{display:none}
.doc-page .hero .wrap{padding-top:clamp(1.75rem,4vw,2.75rem)}
.doc-page--legal .hero .wrap{padding-bottom:clamp(5rem,9vw,6.5rem)}
.doc-page .hero h1{color:var(--ink);font-weight:750;letter-spacing:-.035em}
.doc-page .hero h1 em{background:none;-webkit-text-fill-color:currentColor;color:var(--link)}
.doc-page .hero p.sub{color:var(--muted)}
.doc-page .hero .eyebrow{padding:0;border:0;background:none;color:var(--link);font-size:.76rem;font-weight:750;letter-spacing:.13em}
.doc-page .hero .eyebrow i{display:none}
.doc-page .hero .breadcrumb{margin-bottom:clamp(1.25rem,3vw,2rem)}
.doc-page .hero .breadcrumb ol{justify-content:center}
.doc-page .jump{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm);color:var(--ink)}
.doc-page .jump-head{color:var(--muted)}
.doc-page .jump-head svg{display:none}
.doc-page .chips a{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
.doc-page .chips a:hover{background:var(--soft);color:var(--link);border-color:transparent}
.doc-page .contact a:not(.email){color:#b5ccff}
.doc-page--help main{padding-bottom:clamp(3rem,6vw,5rem)}
/* Align document content with the site container. */
.doc-page .wrap{width:min(100% - 2rem,1200px);max-width:none;padding-inline:0}
@media (min-width:720px){.doc-page .wrap{width:min(100% - 3rem,1200px)}}
/* Back-to-top stays in the page gutter on wide screens, away from content. */
@media (min-width:1360px){.doc-page .totop{right:max(20px,calc((100vw - 1200px) / 2 - 72px))}}
@supports (animation-timeline:scroll()){
  .doc-page .totop{animation:totop-reveal linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes totop-reveal{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
}

.doc-products{border-bottom:1px solid var(--line);background:var(--surface);font-size:.9rem}
.doc-products .site-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;min-height:48px}
.doc-products span{color:var(--muted)}
.doc-products ul{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:0;padding:0;list-style:none}
.doc-products a{display:inline-flex;align-items:center;min-height:40px;color:var(--link);font-weight:700}

/* Legal document card */
.doc-page .doc{box-shadow:var(--shadow-lg)}
.doc-page .doc h2{letter-spacing:-.02em}

/* Embedded guide (framed by monday.com): branded, no site navigation. */
.embed-header{position:sticky;top:0;z-index:50;background:var(--nav);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.embed-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px}
.embed-brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.embed-brand img{flex:none;padding:3px;border:1px solid var(--line);border-radius:9px;background:#fff}
.embed-brand strong{display:block;color:var(--ink);font-size:.96rem;line-height:1.2}
.embed-brand span span{display:block;color:var(--muted);font-size:.8rem;line-height:1.2}
.embed-header__link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--link);font-weight:720;font-size:.9rem;text-decoration:none;white-space:nowrap}
.embed-header__link:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:none;border-radius:6px}
.embed-footer{margin-top:3rem;padding:1.5rem 0 2.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
.embed-footer p{margin:0}
@media (max-width:420px){.embed-header__link{font-size:.84rem}}
/* Wide legal tables scroll inside the card instead of widening the page. */
.doc-page .doc{min-width:0;overflow-wrap:break-word}
.doc-page .doc table{max-width:100%}
.doc-page .doc th,.doc-page .doc td{overflow-wrap:anywhere;min-width:7rem}
.doc-page--embed main h1{margin:clamp(1.75rem,4vw,2.5rem) 0 .75rem;color:var(--ink);font-size:clamp(2rem,1.5rem + 2vw,2.9rem);line-height:1.08;font-weight:780;letter-spacing:-.035em}
@media (prefers-color-scheme:dark){.doc-page{--navy:#111b31}}
/* Legal "On this page" list: wide screens only, in the gutter beside the document. */
.doc-toc{display:none}
@media (min-width:1280px){
  .doc-page .doc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,860px) minmax(0,1fr);column-gap:2rem;align-items:start}
  .doc-page .doc-layout > .doc{grid-column:2;grid-row:1;margin-inline:0}
  .doc-toc{display:block;grid-column:1;grid-row:1;justify-self:end;position:sticky;top:calc(var(--header-h) + 1.5rem);width:min(100%,15rem);margin-top:2.5rem}
}
.doc-toc__title{margin:0 0 .6rem .6rem;color:var(--muted);font-size:.74rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.doc-toc ol{display:grid;gap:.1rem;margin:0;padding:0;list-style:none}
.doc-toc a{display:block;padding:.35rem .6rem;border-radius:8px;color:var(--muted);font-size:.86rem;line-height:1.35;text-decoration:none}
.doc-toc a:hover{background:var(--surface-2);color:var(--ink)}
.doc-toc a:focus-visible{outline:3px solid var(--focus);outline-offset:1px;box-shadow:none}
/* Documents stay still: only hover/focus feedback on links and chips, no scroll motion. */
.doc-page main a{transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}

/* Sourcing guide: the core workflow at the top of How to use. */
.core-workflow{margin:1.5rem 0 3rem}
.core-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:.75rem;margin:0;padding:0;list-style:none;counter-reset:core}
.core-flow li{position:relative;padding:1rem 1.1rem 1rem 3.4rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);counter-increment:core}
.core-flow li::before{content:counter(core);position:absolute;left:1rem;top:1rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--soft);color:var(--link);font-weight:800;font-size:.85rem}
.core-flow h3{margin:0 0 .3rem;color:var(--ink);font-size:1rem;line-height:1.3}
.core-flow p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.5}
.core-flow a{color:var(--link);font-weight:700;white-space:nowrap}
.core-workflow .note{margin-top:1rem}