/* ActivateDigital global header.

   One component, used by every full-site page. Before this file the header CSS was written out
   again inside each commercial page, Workspace carried a second divergent copy plus two
   overrides, and Knowledge ran an entirely separate header built from its own mark and text. The
   result was a logo that moved 48px and a header that changed height by 7px as you navigated.

   The appearance here is Workspace's, which was the accepted one. The geometry is stated once
   and depends on nothing outside this file. --ad-hdr-gutter reproduces the ramp Workspace used
   to take from --ws-gutter, without depending on the Workspace layout that defined it.

   Two things follow from "the header must not move":
   the active navigation item changes colour and gains an underline but never changes weight,
   because a bolder word is a wider word and every link after it would shift;
   the account slot reserves its width whether or not a control renders into it. */

/* The component states its own box model and typographic baseline.

   The estate carries two CSS vocabularies with different resets. The commercial pages reset
   box-sizing on elements only; Knowledge resets it on pseudo-elements as well. That is invisible
   until a component uses a pseudo-element with a border: the Resources chevron came out 1.5px
   wider on one half of the estate, and every measurement to the left of it moved with it. A
   shared component cannot inherit its geometry from whichever page it happens to land on, so the
   header states the box model and the inherited type baseline for its own subtree. */
.sig-hdr,.sig-drawer,.sig-scrim,
.sig-hdr *,.sig-drawer *,
.sig-hdr *::before,.sig-hdr *::after,
.sig-drawer *::before,.sig-drawer *::after{box-sizing:border-box}
.sig-hdr,.sig-drawer{font-size:14px;line-height:1.55;letter-spacing:normal;font-weight:400}

:root{
  --ad-hdr-gutter:clamp(0px, calc((100vw - 1200px) * 0.14), 112px);
  --ad-hdr-pad-y:9px;
  --ad-hdr-logo-h:28px;
  --ad-hdr-auth-w:69px;   /* the signed-out Subscribe control, so the row is the same width
                             on the pages where the account script cannot run */
}

.sig-hdr{position:sticky;top:0;z-index:2000;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:0;
  /* The header does not use the brand webfont. Inter is embedded in activate-base.css, which
     Knowledge does not load, so naming Inter here made the same three words 4.6px wider on the
     commercial pages than on Knowledge and pushed the whole navigation row sideways. Shipping
     ~195KB of webfont to sixty-six article pages to match three words is the wrong trade, so the
     header states a system stack and resolves identically on every page. */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.sig-hdr-in{max-width:none;margin:0;
  padding:var(--ad-hdr-pad-y) calc(var(--ad-hdr-gutter) + 12px);
  display:flex;align-items:center;gap:18px}

.sig-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#0A1A30;flex:none}
.sig-logo .sig-lockup{height:var(--ad-hdr-logo-h);width:auto;display:block;flex:none}
.sig-logo:focus-visible{outline:2px solid #0B67D0;outline-offset:3px;border-radius:4px}

.sig-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.sig-nav a{position:relative;font-size:0.78125rem;line-height:1;color:#8b93a1;text-decoration:none;
  font-weight:500;letter-spacing:.01em;white-space:nowrap;transition:color .15s}
.sig-nav a:hover{color:#0A1A30}
.sig-nav a:focus-visible{outline:2px solid #0B67D0;outline-offset:4px;border-radius:3px}
/* colour and rule only. Weight is fixed so the row cannot reflow between pages. */
.sig-nav a.on{color:#0A1A30}
.sig-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:#0B67D0;border-radius:2px}

.sig-auth-wrap{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;
  min-width:var(--ad-hdr-auth-w);min-height:20px;flex:none}
.sig-auth-slot{display:inline-flex;align-items:center}
.sig-free{position:absolute;left:50%;bottom:calc(100% - 6px);transform:translateX(-50%);z-index:1;
  display:none;pointer-events:none;white-space:nowrap;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:1;color:#fff;background:#18A558;
  border-radius:999px;padding:2.5px 6.5px;box-shadow:0 2px 6px -2px rgba(20,108,67,.5)}
.sig-auth-wrap[data-signed="out"] .sig-free{display:block}

.sig-burger{display:none;width:44px;height:40px;border:1px solid #E2E7EE;border-radius:12px;
  background:#fff;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  cursor:pointer;padding:0}
.sig-burger span{width:19px;height:2px;background:#0A1A30;border-radius:2px;display:block}
.sig-burger:focus-visible{outline:2px solid #0B67D0;outline-offset:2px}

.sig-scrim{position:fixed;inset:0;background:rgba(10,26,48,.42);z-index:3000;opacity:0;
  transition:opacity .25s}
.sig-scrim.show{opacity:1}
.sig-drawer{position:fixed;top:0;right:0;height:100%;width:min(84vw,320px);max-width:100vw;
  background:#fff;z-index:3001;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow:-24px 0 60px -24px rgba(10,26,48,.5);display:flex;flex-direction:column;
  padding:16px 16px max(24px, env(safe-area-inset-bottom));
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.sig-drawer.open{transform:none}
.sig-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 8px;
  border-bottom:1px solid #F0F2F5}
.sig-drawer .sig-logo-sm{gap:8px}
.sig-drawer .sig-logo-sm .sig-lockup{height:24px}
.sig-drawer-x{width:40px;height:40px;border:0;background:#F4F8FD;border-radius:10px;
  font-size:0.9375rem;line-height:1;cursor:pointer;color:#0A1A30}
/* The drawer is a fixed panel the height of the screen, and the Resources menu opens inside
   it. Expanded, that content runs to about 844px, so on any phone shorter than that — an SE, or
   any handset once the browser chrome takes its share — the last destinations sat below the fold
   with nothing to scroll: the panel was overflow:visible. The links scroll and the top bar does
   not, so the close button never scrolls away, and the scroll does not chain to the page behind. */
.sig-drawer-top{flex:none}
.sig-drawer nav{display:flex;flex-direction:column;gap:2px;margin-top:10px;
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;scrollbar-width:thin}
.sig-drawer nav::-webkit-scrollbar{width:6px}
.sig-drawer nav::-webkit-scrollbar-thumb{background:#E4E4EA;border-radius:3px}
.sig-drawer nav::-webkit-scrollbar-track{background:transparent}
/* The drawer's own rows: Activate, Workspace and the Resources trigger. The child combinator is
   load bearing. Written as a descendant, this rule is one class and an element, which out-ranks
   `.sig-res-lbl a` and `.sig-res-note a` and every rule that gives the Resources card its shape,
   so the whole card inherited a 17px dark row style: the two section headings lost their cobalt,
   the descriptors lost their 12px grey and turned into body copy, and six destinations that are
   30px apart on a desktop sat 47px apart on a phone. The card now keeps its own design here and
   only differs from the desktop one where a thumb requires it. */
.sig-drawer nav > a{font-size:1.0625rem;color:#28303b;text-decoration:none;padding:15px 12px;
  border-radius:11px;font-weight:500}
.sig-drawer nav > a:hover,.sig-drawer nav > a:active{background:#F4F8FD}
.sig-drawer nav > a.on{color:#0A1A30;background:#F4F8FD}

@media (max-width:820px){
  .sig-nav{display:none}
  .sig-burger{display:flex}
  .sig-hdr-in{padding:11px 16px;gap:12px}
  .sig-auth-wrap{margin-left:auto}
}
@media (hover:none){
  .sig-nav>a,.sig-res>summary{display:inline-flex;align-items:center;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .sig-nav a,.sig-scrim,.sig-drawer{transition:none}
}


/* ---------------------------------------------------------------- Resources ----------
   The one Resources menu. It used to exist twice, once as .sig-res inside every commercial
   page and once as .k-res inside knowledge.css, styled differently. */
/* Resources mega-menu. Generated by build/chrome.py. Do not edit here.
   Two conceptual areas in one card: About us on the left, the Knowledge estate on the right.
   Opens from a click and from the keyboard with no JavaScript, because it is a details element
   and every destination is a real anchor in the raw HTML whether it is open or closed. It never
   opens on hover. */
.sig-res{position:relative}
.sig-res>summary{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:0.8125rem;line-height:1;color:#6e6e73;font-weight:500;letter-spacing:.01em;
  white-space:nowrap;padding:2px 0;border-radius:4px;transition:color .15s}
.sig-res>summary::-webkit-details-marker{display:none}
.sig-res>summary::marker{content:""}
.sig-res>summary:hover{color:#0A1A30}
.sig-res>summary::after{content:"";box-sizing:border-box;width:6.5px;height:6.5px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s}
.sig-res[open]>summary{color:#0A1A30}
.sig-res[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
/* Active Resources. Colour and rule only, never weight: see the note at the top of this file.
   The class is set on the summary by site-header.js, matching .sig-nav a.on on the plain links. */
.sig-res>summary.on{color:#0A1A30}
.sig-res>summary.on::before{content:"";position:absolute;left:0;right:11.5px;bottom:-8px;height:2px;
  background:#0B67D0;border-radius:2px}
/* the card. A pad of pointer tolerance sits above it so the menu does not close in the gap
   between the trigger and the panel, which is the classic way a mega-menu becomes unusable. */
/* The marketing header keeps its navigation on one line, and the panel lives inside that
   navigation, so without this the descriptors inherit nowrap and run straight out of the card.

   That was the intent and it did not hold. `.sig-res-p *` is one class and no element, so it
   loses to `.sig-nav a`, which is one class AND an element and sets nowrap directly on every
   link in the row — including the two descriptor links inside the panel. The descriptor sitting
   under KNOWLEDGE measures 289px in the system font against a 257px box, so it ran 32px past the
   right edge of the card on every page in the estate. It is only visible with the real font: a
   headless Linux browser substitutes something narrower and the sentence happens to fit.

   The fix is specificity, not another width. The rule below names the anchor, so it out-ranks the
   navigation rule wherever the panel is used, and the two lines after it mean nothing in this
   card can be wider than the card whatever the string, the font or the future copy. */
.sig-res-p,.sig-res-p *{box-sizing:border-box;white-space:normal;min-width:0}
.sig-nav .sig-res-p a,.sig-drawer .sig-res-p a,.sig-res-p a{white-space:normal}
.sig-res-p *{max-width:100%;overflow-wrap:break-word}
.sig-res-p{position:absolute;top:calc(100% + 16px);right:0;
  width:min(780px,calc(100vw - 32px));background:#fff;border:1px solid #ECECF0;
  border-radius:13px;box-shadow:0 1px 2px rgba(16,22,35,.05),0 30px 74px -36px rgba(10,26,48,.42);
  padding:18px;z-index:2100}
.sig-res-p::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
/* Section and group labels carry meaning, so they are readable rather than decorative. At this
   size ink-subtle sits near 2.5:1 on paper, which is a label a reader has to lean in for. */
.sig-res-lbl{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:0.625rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#6e6e73;margin:2px 0 6px 10px}
.sig-res-feat.on{background:#EBF4FD}
.sig-res-d.is-hub{color:#0A1A30;font-weight:560}
.sig-res-d.is-hub .sig-res-di{color:#0B67D0}
@media (prefers-reduced-motion:reduce){.sig-res *,.sig-res-p *{transition:none!important}}
/* the drawer. Below 820px the primary navigation is hidden and this is the whole menu, so the
   trigger is a full width row at a comfortable tap size and the card becomes a plain section. */
.sig-drawer .sig-res{width:100%}
.sig-drawer .sig-res>summary{font-size:1.0625rem;color:#28303b;padding:15px 12px;border-radius:11px;
  font-weight:500}
.sig-drawer .sig-res>summary:hover{background:#F4F8FD}
.sig-drawer .sig-res-p{position:static;width:auto;border:0;border-top:1px solid #ECECF0;
  border-radius:0;box-shadow:none;padding:12px 0 2px}
.sig-drawer .sig-res-p::before{display:none}
.sig-drawer .sig-res-grid{grid-template-columns:minmax(0,1fr);gap:14px}
.sig-drawer .sig-res-know{border-left:0;padding-left:0;border-top:1px solid #ECECF0;padding-top:14px}
.sig-drawer .sig-res-lbl{margin-left:10px}
.sig-drawer .sig-res-cols{column-count:1}
.sig-drawer .sig-res-fd{max-width:none}
/* Comfortable tap targets. 44px is the smallest a thumb should have to hit, and the compact
   desktop row is 30. */
.sig-drawer .sig-res-d{padding:11px 10px;font-size:0.9375rem;min-height:44px}
/* The card in the drawer is the desktop card at a thumb's scale, and nothing more than that. The
   two headings are the same cobalt links, the descriptor is the same quiet grey line, and the
   destinations keep the 44px they need without keeping the padding that made them look like six
   separate buttons. */
.sig-drawer .sig-res-lbl{font-size:0.6875rem;margin:2px 0 5px 10px}
.sig-drawer .sig-res-note{margin:0 0 9px 10px;font-size:12.5px;line-height:1.45}
.sig-drawer .sig-res-doors{margin:0 0 6px}
.sig-drawer .sig-res-doors a{display:flex;align-items:center;min-height:44px;
  padding:6px 10px;font-size:15px;line-height:1.35;font-weight:500;border-radius:9px}
.sig-drawer .sig-res-sec+.sig-res-sec{margin-top:14px;padding-top:14px}
.sig-drawer .sig-res-feat{padding:12px 10px}
.sig-drawer .sig-res-foot{margin-top:12px}
.sig-res-sec+.sig-res-sec{margin-top:18px;padding-top:18px;border-top:1px solid #E4EAF2}
.sig-res-sec:last-child .sig-res-doors{margin-bottom:0}
@media(hover:none){.sig-nav>a,.sig-res>summary{display:inline-flex;align-items:center;min-height:44px}}
.sig-hdr .sig-res-p,.sig-drawer .sig-res-p{width:min(340px,calc(100vw - 32px));padding:16px}
.sig-drawer .sig-res-p{width:auto}
/* The two section headings are destinations, not decoration, so they read as links. Their
   explanatory line goes to the same place and stays quiet grey, because two blue lines stacked
   would make the menu look busier than it is. */
.sig-res-lbl a{color:#0B67D0;text-decoration:none}
.sig-res-lbl a:hover{color:#0757B8;text-decoration:underline;text-underline-offset:2px}
.sig-res-lbl a:focus-visible{outline:2px solid #0B67D0;outline-offset:2px;border-radius:3px}
.sig-res-note a{display:block;color:inherit;text-decoration:none;transition:color .15s}
.sig-res-note a:hover{color:#0757B8}
.sig-res-note a:focus-visible{outline:2px solid #0B67D0;outline-offset:2px;border-radius:4px}
.sig-res-note{margin:0 0 8px 10px;font-size:12px;line-height:1.5;color:var(--ink-subtle,#8a8a8f);max-width:34ch}
.sig-res-note-last{margin-bottom:0}
.sig-res-doors{list-style:none;margin:0 0 16px;padding:0}
.sig-res-doors a{display:block;padding:8px 10px;border-radius:10px;font-size:13.5px;line-height:1.35;
  color:var(--ink,#1d1d1f);text-decoration:none;transition:background .15s}
.sig-res-doors a:hover{background:var(--surface,#f5f5f7);color:var(--cobalt-dark,#0B67D0)}
.sig-res-doors a:focus-visible{outline:2px solid var(--cobalt,#0B67D0);outline-offset:-2px}
@media(hover:none){.sig-res-doors a{min-height:44px;display:flex;align-items:center;font-size:15px}}

/* The wordmark is 28px tall inside a 46px bar and it is the estate's home link. On a touch
   device the area that answers a tap fills the bar; the mark itself does not move or resize. */
@media(hover:none){.sig-logo{position:relative}
.sig-logo::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}}


/* ================================================================================================
   PAGE TRANSITIONS. Every navigation in this estate is a full document load, and a full document
   load paints white and then paints the next page, which reads as a snap. Nothing about the pages
   is slow; the seam between them is just hard.

   This is the browser's own cross-document view transition. It is a stylesheet rule and no
   JavaScript, it applies to every page that loads this file, which is every page, and it costs
   one paint. A browser that does not implement it ignores the at-rule and navigates exactly as it
   does today, so there is nothing to fall back to and nothing that can leave a page invisible.

   160ms. Long enough that the seam is a fade rather than a cut, short enough that it never reads
   as waiting for something.
   ================================================================================================ */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:160ms;
  animation-timing-function:cubic-bezier(.4,0,.2,1)}
/* A reader who has asked the system for less movement gets the navigation they have now. */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}