/* Global site chrome — header + footer
 *
 * Transferred verbatim from the prototypes' `_shared/prototype-site-chrome.css` (2026-08-25).
 * The `prototype-site-*` class names are KEPT ON PURPOSE, for two reasons:
 *   1. they cannot collide with the older `site-header` / `site-footer` globals still live on 9
 *      pages, so both chromes can coexist during the migration;
 *   2. an identical class set means this file can be re-synced from the prototype with a straight
 *      copy instead of a rename pass every time the prototype chrome changes.
 * Rename them in one deliberate pass once the old chrome is retired.
 *
 * Referenced by the "Global Site Header" and "Global Site Footer" globals via <link>.
 * Depends on design-system tokens only (--color-*, --font-heading, --font-sans, --font-label) plus
 * Font Awesome, both already served by the marketing layout.
 */

.prototype-site-header {
  --prototype-site-header-height: 60px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-inline: 24px;
}

.prototype-site-header-scrolled { --prototype-site-header-height: 52px; }

.prototype-site-header-nav {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1200px;
  height: var(--prototype-site-header-height);
  margin: 0 auto;
  transition: height .3s ease;
}

.prototype-site-header-background {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: var(--prototype-site-header-height);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-ink-deep) 6%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  transform: translateX(-50%);
  transition: height .38s cubic-bezier(.2, .8, .2, 1);
  will-change: height;
}

.prototype-site-header-logo {
  display: flex;
  flex: none;
  align-items: center;
  margin-right: 22px;
}

.prototype-site-header-logo img { width: auto; height: 32px; }

.prototype-site-header-links {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.prototype-site-header-link {
  padding: 8px 13px;
  color: var(--color-ink-soft);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.prototype-site-header-link:hover,
.prototype-site-header-trigger[aria-expanded="true"] { color: var(--color-ink-deep); }

.prototype-site-header-item { display: inline-flex; position: relative; }

.prototype-site-header-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
}

.prototype-site-header-trigger > i { font-size: 10px; opacity: .6; transition: transform .18s ease; }
.prototype-site-header-trigger[aria-expanded="true"] > i { transform: rotate(180deg); }

.prototype-site-header-panel {
  position: fixed;
  top: var(--prototype-site-header-height);
  right: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .2s, top .3s ease;
}

.prototype-site-header-panel-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.prototype-site-header-panel-clip {
  min-height: 0;
  padding-inline: 24px;
  overflow: hidden;
}

.prototype-site-header-menu {
  display: grid;
  align-items: start;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  min-height: 0;
  max-height: calc(100vh - var(--prototype-site-header-height));
  margin: 0 auto;
  padding-block: 36px 44px;
  overflow: auto;
  opacity: 0;
  text-align: left;
  transition: opacity .2s ease;
}

.prototype-site-header-panel-open .prototype-site-header-menu {
  opacity: 1;
  transition-delay: .14s;
}

.prototype-site-header-menu-solutions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prototype-site-header-menu-two-column {
  grid-template-columns: minmax(360px, 560px) 260px;
  justify-content: space-between;
}

.prototype-site-header-menu-resources {
  grid-template-columns: minmax(360px, 560px) 280px;
  justify-content: space-between;
}

.prototype-site-header-menu-label {
  margin: 0 0 12px;
  color: var(--color-ink-mute);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.prototype-site-header-menu-list { display: flex; flex-direction: column; gap: 12px; }

.prototype-site-header-menu-row,
.prototype-site-header-menu-stack,
.prototype-site-header-menu-icon-row {
  text-decoration: none;
}

.prototype-site-header-menu-row { display: block; }
.prototype-site-header-menu-stack { display: block; }

.prototype-site-header-menu-row strong,
.prototype-site-header-menu-stack strong,
.prototype-site-header-menu-icon-row strong {
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  transition: color .15s ease;
}

.prototype-site-header-menu-row:hover strong,
.prototype-site-header-menu-stack:hover strong,
.prototype-site-header-menu-icon-row:hover strong { color: var(--color-coral-500); }

.prototype-site-header-menu-row > span,
.prototype-site-header-menu-stack > span,
.prototype-site-header-menu-icon-row small {
  color: color-mix(in srgb, var(--color-ink-deep) 40%, transparent);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
}

.prototype-site-header-menu-row strong,
.prototype-site-header-menu-row > span,
.prototype-site-header-menu-stack strong,
.prototype-site-header-menu-stack > span,
.prototype-site-header-menu-icon-row strong,
.prototype-site-header-menu-icon-row small { display: block; }

.prototype-site-header-menu-icon-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.prototype-site-header-menu-icon-row > i {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-ink-deep) 4%, transparent);
  color: var(--color-coral-500);
  font-size: 13px;
}

.prototype-site-header-menu-icon-row small { margin-top: 2px; }
.prototype-site-header-menu-icon-row strong i { font-size: 8px; opacity: .5; }
.prototype-site-header-platforms { margin-bottom: 14px; }
.prototype-site-header-menu-feature-column { display: flex; flex-direction: column; }

.prototype-site-header-feature {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--color-dark-band);
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), outline-color .2s ease;
}

.prototype-site-header-feature:hover { transform: translateY(-2px); }
.prototype-site-header-feature-full { height: 100%; padding-inline: 22px; }
.prototype-site-header-feature-full:hover { outline: 1px solid var(--color-coral-500); }

.prototype-site-header-feature-mark,
.prototype-site-header-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-coral-500);
  color: white;
  box-shadow: 0 8px 24px rgba(236, 99, 75, .45);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
}

.prototype-site-header-feature-icon { border-radius: 11px; font-size: 14px; }

.prototype-site-header-feature > strong {
  margin-top: 14px;
  color: white;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.prototype-site-header-feature > span:not(:first-child) {
  margin-top: 5px;
  color: var(--color-on-dark-body);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
}

.prototype-site-header-feature > b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--color-coral-500);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
}

.prototype-site-header-feature > b i { font-size: 10px; }

.prototype-site-header a:focus-visible,
.prototype-site-header button:focus-visible,
.prototype-site-footer a:focus-visible {
  outline: 4px solid var(--color-info-blue);
  outline-offset: 2px;
}

/* Hamburger + drawer CTA. Both are mobile-only affordances, declared here rather than only inside
 * the <992px block so the DESKTOP state is the default and nothing depends on a query matching. */
.prototype-site-header-toggle {
  display: none;
  position: relative;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font-size: 17px;
  cursor: pointer;
  transition: color .15s ease;
}

.prototype-site-header-toggle:hover { color: var(--color-ink-deep); }

/* Both glyphs ship and are STACKED (absolute, same box) rather than display-swapped: `display`
 * cannot be transitioned, so a swap pops. They cross-fade through a quarter turn instead, which
 * is why neither is ever `display: none`. CSS owns this entirely - no JS touches an icon. */
.prototype-site-header-toggle > i {
  position: absolute;
  transition: opacity .18s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
}

.prototype-site-header-toggle [data-prototype-nav-cross] {
  opacity: 0;
  transform: rotate(-90deg) scale(.7);
}

.prototype-site-header-drawer-open .prototype-site-header-toggle [data-prototype-nav-bars] {
  opacity: 0;
  transform: rotate(90deg) scale(.7);
}

.prototype-site-header-drawer-open .prototype-site-header-toggle [data-prototype-nav-cross] {
  opacity: 1;
  transform: none;
}

.prototype-site-header-drawer-cta { display: none; }

/* Scroll lock, held while the drawer is open. Toggled as ONE class on <html> by the JS rather than
 * an inline style, because JavaScript in this project never sets styles - CSS owns visuals.
 * On a phone there is no layout scrollbar, so nothing shifts. A desktop window narrowed under
 * 992px does lose its scrollbar while the drawer is open; that is the accepted cost of not
 * measuring scrollbar width in JS to compensate for it. */
.prototype-nav-locked,
.prototype-nav-locked body {
  overflow: hidden;
}

/* Owns BOTH display and width for the drawer's button, so nothing fights `.btn`'s own flex —
 * which is why the markup does not use the design system's `.btn-block` (it sets display:block,
 * and a second owner for one property is the bug, not the fix). */
.prototype-site-header-drawer-cta .btn {
  display: flex;
  width: 100%;
}

.prototype-site-footer {
  --prototype-footer-copy: #7E8AA6;
  --prototype-footer-link: #98A3C0;
  --prototype-footer-label: #5C688A;
  position: relative;
  z-index: 10;
  padding: 64px 24px 36px;
  background: var(--color-dark-band);
  color: var(--prototype-footer-copy);
}

.prototype-site-footer-inner { max-width: 1200px; margin: 0 auto; }

.prototype-site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px);
}

.prototype-site-footer-logo { width: auto; height: 22px; }

.prototype-site-footer-brand > p {
  max-width: 30ch;
  margin: 16px 0 0;
  color: var(--prototype-footer-copy);
  font-size: 13.5px;
  line-height: 1.6;
}

.prototype-site-footer-socials { display: flex; gap: 8px; margin-top: 20px; }

.prototype-site-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  color: var(--prototype-footer-link);
  font-size: 14px;
  text-decoration: none;
}

.prototype-site-footer-socials a:hover { background: var(--color-coral-500); color: white; }

.prototype-site-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.prototype-site-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--prototype-footer-link);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.prototype-site-footer-contact i { color: var(--color-coral-500); font-size: 11px; }
.prototype-site-footer-column { display: flex; flex-direction: column; gap: 9px; }

.prototype-site-footer-column h2 {
  margin: 0 0 5px;
  color: var(--prototype-footer-label);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.prototype-site-footer-column a,
.prototype-site-footer-legal a {
  color: var(--prototype-footer-link);
  font-size: 13.5px;
  text-decoration: none;
}

.prototype-site-footer-column a:hover,
.prototype-site-footer-contact a:hover,
.prototype-site-footer-legal a:hover { color: white; }

.prototype-site-footer-column a i { font-size: 8px; opacity: .5; }

.prototype-site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--prototype-footer-label);
  font-size: 13px;
}

.prototype-site-footer-legal-spacer { flex: 1; }
.prototype-site-footer-legal a { font-size: 13px; }

@media (max-width: 1120px) {
  /* Kept from the original ladder, and for its original measured reason: with BOTH CTAs in the bar
   * the links row fits at 1120px with exactly 0px to spare, so "Watch demo" has to leave here.
   * Between 1120 and 992 it stays reachable through Resources > Watch a demo; below 992 the drawer
   * surfaces it directly as -drawer-cta. */
  [data-prototype-nav-demo] { display: none; }
  .prototype-site-header-logo { margin-right: 12px; }
  .prototype-site-header-link { padding-inline: 10px; }
}

@media (max-width: 1080px) {
  .prototype-site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── The drawer: a real responsive header below 992px ──────────────────────────────────────────
 * Owner, 2026-09-10. Replaces a degradation ladder that hid BOTH CTAs (<=1120 and <=760), Pricing
 * and Results (<=940), then left the remaining five items in a horizontal scroller with its
 * scrollbar hidden - so nothing on a phone indicated more nav existed. Every item now survives:
 * the bar keeps the logo, the primary CTA and a hamburger; the whole nav, including the three mega
 * panels as inline accordions, moves into a scrollable drawer.
 *
 * 992px is the design system's own `.site-header` breakpoint and one of the brand's tested reflow
 * points (992 / 768 / 480). ONE DOM serves both layouts: the DS duplicates its nav into a separate
 * mobile container, which is cheap in ERB but inside a CMS global would mean two copies of ~40 mega
 * links to keep in sync, so this switches layout in CSS instead. */
@media (max-width: 991.98px) {
  .prototype-site-header-toggle { display: inline-flex; }
  .prototype-site-header-logo { margin-right: auto; }

  /* The drawer covers the whole view below the bar - `bottom: 0`, not a max-height. That is the
   * fix for the panel resizing every time a sub-menu opened: at seven rows it was only ~413px
   * tall, so expanding an accordion grew the sheet under your thumb. A full sheet never changes
   * size; expanding just adds content to scroll. No shadow either, since nothing shows past it.
   *
   * Shown with visibility + opacity + transform, NOT `display`, because `display` cannot be
   * transitioned. `visibility` flips instantly on open and is delayed to the end of the fade on
   * close (the delay lives in the base rule, cancelled by `transition-delay: 0s` when open) -
   * the same idiom `.prototype-site-header-panel` already uses on desktop. */
  .prototype-site-header-links {
    position: fixed;
    top: var(--prototype-site-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 16px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-paper);
    border-top: 1px solid color-mix(in srgb, var(--color-ink-deep) 7%, transparent);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity .2s ease,
      transform .26s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear .26s;
  }

  .prototype-site-header-drawer-open .prototype-site-header-links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  /* Hold the bar at its unscrolled height while the drawer is open. The sheet is anchored to the
   * bar, so letting `-scrolled` shrink it 60->52px would slide the whole drawer up mid-scroll.
   * Same element as `.prototype-site-header-scrolled`, declared later, so this wins. */
  .prototype-site-header-drawer-open { --prototype-site-header-height: 60px; }

  /* Full-width rows. */
  .prototype-site-header-item { display: block; width: 100%; }

  .prototype-site-header-link {
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ink-deep) 8%, transparent);
  }

  .prototype-site-header-trigger { width: 100%; justify-content: space-between; }
  .prototype-site-header-trigger > i { font-size: 12px; }

  /* Panels become inline accordions that OPEN BY HEIGHT: the panel is a one-row grid animated
   * `0fr -> 1fr`, with the existing clip element doing the clipping (`overflow: hidden` plus
   * `min-height: 0`, which the collapse needs). This is why the panel is not `display: none`
   * when closed - a display swap cannot animate. A browser without interpolable grid rows simply
   * snaps, which is the old behaviour, so nothing breaks.
   *
   * Visibility and pointer-events are deliberately NOT set here - the base rule already hides a
   * closed panel and `-panel-open` reveals it, so a closed panel is hidden in BOTH layouts. Forcing
   * `visibility: visible` here (and relying only on the 0fr clip to hide it) caused a real bug:
   * the base rule delays its visibility transition by .2s, so crossing the breakpoint left all
   * three panels visible AT FULL DESKTOP SIZE for ~200ms - three overlapping mega sheets. Measured
   * visible at 0/60/150ms and hidden only at 260ms. `visibility` joins the transition here so the
   * collapse finishes before the panel is hidden on close.
   *
   * A closed panel is 0px tall but still in the document; the JS's existing `inert` on closed
   * panels is what keeps its links out of the focus order and the a11y tree.
   *
   * The growing background sheet is a desktop device, suppressed in the JS, which does not apply
   * its height class below this breakpoint. */
  .prototype-site-header-panel {
    display: grid;
    grid-template-rows: 0fr;
    position: static;
    transition:
      grid-template-rows .28s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear .28s;
  }

  .prototype-site-header-panel-open { grid-template-rows: 1fr; }

  .prototype-site-header-panel-clip {
    padding-inline: 0;
    min-height: 0;
    overflow: hidden;
  }

  .prototype-site-header-menu,
  .prototype-site-header-menu-solutions,
  .prototype-site-header-menu-two-column,
  .prototype-site-header-menu-resources {
    grid-template-columns: minmax(0, 1fr);
  }

  .prototype-site-header-menu {
    gap: 20px;
    max-height: none;
    padding-block: 14px 20px;
    overflow: visible;
    opacity: 1;
    transition: none;
  }

  .prototype-site-header-menu-feature-column { gap: 14px; }
  /* `margin-top: auto` pins this to the FOOT of the full-height sheet, so the space below the nav
   * rows reads as layout rather than as a gap - and on a short, wide viewport (a tablet in
   * landscape) that space is considerable. When an accordion expands past the sheet the auto
   * margin collapses to 0 and the CTA simply flows after the content, which is what you want. */
  .prototype-site-header-drawer-cta {
    display: block;
    margin-top: auto;
    padding-top: 24px;
  }
}

@media (max-width: 767px) {
  .prototype-site-header,
  .prototype-site-header-panel-clip { padding-inline: 16px; }
}

/* Everything the drawer added is motion, so all of it is gated. The drawer still opens and the
 * accordions still expand - they just arrive rather than animate. */
@media (prefers-reduced-motion: reduce) {
  .prototype-site-header-toggle,
  .prototype-site-header-toggle > i,
  .prototype-site-header-links,
  .prototype-site-header-panel {
    transition: none;
  }
}

@media (max-width: 560px) {
  .prototype-site-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .prototype-site-footer-legal { align-items: flex-start; flex-direction: column; }
  .prototype-site-footer-legal-spacer { display: none; }
}