/* ============================================================
   Shared site chrome — NAV + FOOTER
   Single source of truth for the top nav and bottom footer on
   every marketing page. Do NOT redefine .nav / .footer inline
   per page; that is what caused them to drift.

   Per-page accent: the pill uses var(--accent) / var(--accent-dark),
   which each page already defines in its inline :root, so the
   "Schedule a Demo" button is automatically teal / green / blue
   per page with no per-page nav CSS.

   Dark hero (Ana): add class "nav--dark" to the <nav>.
   ============================================================ */

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 200;
  height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(248, 250, 251, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line, #e3e7e8);
}

.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ink, #0d0d0d); text-decoration: none; }
.nav-brand .sukhi-wordmark { color: inherit; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: .87rem; font-weight: 600; color: var(--mid, #555); text-decoration: none; transition: color .2s ease; }
.nav-links a:hover { color: var(--ink, #0d0d0d); }
/* Current page — brand dark green, same on every page regardless of per-page accent */
.nav-links a.active { color: var(--nav-active, #065758); font-weight: 700; }

.nav-right { display: flex; align-items: center; gap: 20px; }

/* Sign In — quiet neutral text link (never accent- or link-blue) */
.nav-right .btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink, #0d0d0d);
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 8px 2px; border-bottom: 2px solid transparent;
  transition: gap .25s ease, border-color .25s ease;
}
.nav-right .btn-text:hover { gap: 10px; border-color: currentColor; }

/* Schedule a Demo — the single filled pill, accent-colored per page */
.nav-right .btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  padding: 12px 26px; border-radius: 999px;
  font-weight: 600; font-size: 14px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(8, 106, 107, 0);
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Same lift + shadow as every other Schedule-a-Demo button on the site. */
.nav-right .btn:hover {
  background: var(--accent-dark, var(--accent));
  border-color: var(--accent-dark, var(--accent));
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .nav-right .btn { transition: background .2s ease; }
  .nav-right .btn:hover { transform: none; box-shadow: none; }
}
.nav-right .btn span.btn-text-short { display: none; }

/* Hamburger (mobile only)
   44px square so it clears the 44pt minimum touch target on its own, and
   the bars are painted from an explicit --nav-fg rather than --ink: pages
   are free to redefine --ink, and a page that sets it light left the bars
   white on a white bar with nothing to see but a working tap area. */
.nav-toggle {
  display: none; position: relative;
  width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  position: absolute; left: 11px; width: 22px; height: 2px;
  background: var(--nav-fg, #0d0d0d); border-radius: 2px;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
/* Bars fold into an X while the drawer is open — the same button closes it,
   so it has to stop reading as "open menu". */
.nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

/* ----- Dark variant (Ana's dark hero) ----- */
.nav.nav--dark {
  background: rgba(10, 25, 30, .7);
  border-bottom-color: rgba(255, 255, 255, .1);
}
.nav.nav--dark .nav-brand,
.nav.nav--dark .nav-brand .sukhi-wordmark { color: #fff; }
.nav.nav--dark .nav-links a { color: rgba(255, 255, 255, .6); }
.nav.nav--dark .nav-links a:hover,
.nav.nav--dark .nav-links a.active { color: #fff; }
.nav.nav--dark .nav-right .btn-text { color: #fff; }
.nav.nav--dark { --nav-fg: #fff; }

/* The drawer's Sign In is a copy of the bar's, appended to .nav-links by
   wireMobileNav. .nav-links is a flex row on desktop, so without this the
   copy showed up as a second "Sign In" in the middle of the bar. */
.nav-drawer-foot { display: none; }

/* ---------- MOBILE DRAWER ----------
   Full-page takeover below the bar, not a dropdown. The old version was a
   12px-padded list of .87rem links — under the 44pt touch minimum on every
   row and easy to mis-tap. Everything here is sized for a thumb.

   The bar itself stays uncovered so the same button that opened the drawer
   closes it, and the brand stays a way out. */
@media (max-width: 900px) {
  .nav { padding: 0 16px 0 24px; }

  /* Absolute, not fixed. .nav carries backdrop-filter, and a filtered
     element becomes the containing block for its fixed descendants — so
     `position: fixed; top: 76px; bottom: 0` resolved against the 76px nav
     box and collapsed the panel to zero height. Absolute resolves against
     the same box deliberately: top:100% is the underside of the bar on
     every page, and the height is taken from the viewport instead. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    /* 74, not 76: top:100% lands under the nav's content box, above its 1px
       border, so subtracting the full 76 left a hairline of page showing
       below the panel. Overshooting is invisible — the body is locked. */
    height: calc(100dvh - 74px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px max(28px, env(safe-area-inset-bottom, 0px));
    background: var(--white, #fff);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* visibility (not display) so the panel can animate; the delayed
       visibility transition holds it painted until the fade-out finishes. */
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .nav.nav-open .nav-links {
    opacity: 1; visibility: visible;
    transition: opacity .25s ease, visibility 0s linear 0s;
  }

  .nav-links a {
    width: 100%;
    display: flex; align-items: center;
    min-height: 60px; padding: 14px 0;
    font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink, #0d0d0d);
    border-bottom: 1px solid var(--line, #eee);
  }
  .nav-links a.active { color: var(--nav-active, #065758); }

  /* Rows rise in behind the fade, staggered, so opening reads as a panel
     being dealt rather than a block appearing. */
  @media (prefers-reduced-motion: no-preference) {
    .nav-links > * { opacity: 0; transform: translateY(14px); }
    .nav.nav-open .nav-links > * {
      opacity: 1; transform: none;
      transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
    }
    .nav.nav-open .nav-links > *:nth-child(1) { transition-delay: .04s; }
    .nav.nav-open .nav-links > *:nth-child(2) { transition-delay: .08s; }
    .nav.nav-open .nav-links > *:nth-child(3) { transition-delay: .12s; }
    .nav.nav-open .nav-links > *:nth-child(4) { transition-delay: .16s; }
    .nav.nav-open .nav-links > *:nth-child(5) { transition-delay: .20s; }
    .nav.nav-open .nav-links > *:nth-child(6) { transition-delay: .24s; }
    .nav.nav-open .nav-links > *:nth-child(n + 7) { transition-delay: .28s; }
  }

  /* Sign In is a different kind of action from the section links, so it
     sits apart at the bottom of the drawer rather than in the list.
     margin-top:auto pins it to the base whenever the links don't fill
     the panel, and it flows normally when they do. */
  .nav-drawer-foot {
    margin-top: auto; padding-top: 28px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .nav-drawer-foot .nav-drawer-signin {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; padding: 0 24px;
    border: 1.5px solid var(--line, #e3e7e8); border-radius: 999px;
    font-size: 1.05rem; font-weight: 600; text-decoration: none;
    color: var(--ink, #0d0d0d);
  }
  /* The bar keeps its own Sign In on desktop; on mobile the drawer copy is
     the only one, so the bar has room for the pill and the hamburger. */
  .nav-right > .btn-text { display: none; }

  .nav-toggle { display: block; margin-right: -8px; }
  .nav-right { gap: 10px; }
  .nav-right .btn { padding: 12px 20px; }
  .nav-right .btn span.btn-text-full { display: none; }
  .nav-right .btn span.btn-text-short { display: inline; }

  .nav.nav--dark .nav-links { background: #0a1a1e; }
  .nav.nav--dark .nav-links a { color: #fff; border-bottom-color: rgba(255, 255, 255, .12); }
  /* --nav-active is the dark brand green, which disappears on the dark
     panel — and this selector has to out-weigh the rule above, which is
     more specific than the shared .nav-links a.active. */
  .nav.nav--dark .nav-links a.active { color: var(--accent-light, #4db6b6); }
  .nav.nav--dark .nav-drawer-foot .nav-drawer-signin { color: #fff; border-color: rgba(255, 255, 255, .3); }
}

/* Set on <body> while the drawer is open so the page behind can't scroll. */
/* The scroll lock goes on <html>, NOT on <body>.
   `overflow: hidden` on body turns body into a scroll container, and
   `position: sticky` then resolves against body's scrollport instead of the
   viewport — so opening the drawer part-way down the page threw the whole nav
   back to its natural document position (top: -3000px, off screen) and the
   menu vanished. Locking <html> leaves body's overflow visible, so the nav
   keeps sticking to the viewport. touch-action stops iOS scrolling the page
   behind, which overflow alone does not; the drawer opts back in so a long
   link list can still scroll. */
html.nav-locked { overflow: hidden; touch-action: none; }
@media (max-width: 900px) {
  html.nav-locked .nav-links { touch-action: pan-y; }
}

/* ---------- FINAL CTA ABOVE THE FOOTER ----------
   The footer's rounded top is pulled up 40px so it reads as a sheet sliding
   over the page. That overlap eats 40px off the bottom of whatever section
   sits above it, so an evenly padded CTA band looks bottom-light. This
   spacer gives the 40px back on top of the section's own padding, whatever
   that padding happens to be — so it stays correct at every breakpoint and
   on every page without hard-coding per-page values. */
.cta-band::after,
#cta::after { content: ""; display: block; height: 40px; }

/* ---------- FOOTER ---------- */
.footer {
  background: #08201f; color: #fff;
  padding: 64px 0 32px;
  position: relative; z-index: 1;
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
}
.footer a { color: rgba(255, 255, 255, .5); font-size: .84rem; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 28px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; margin-bottom: 12px; }
.footer-brand .sukhi-wordmark { color: #fff; }
.footer-col h5 { font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .3); margin-bottom: 14px; }
.footer-col-links { display: flex; flex-direction: column; gap: 10px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- SOURCE REFERENCES ----------
   Injected by site-ui.js into the footer, above the copyright line. The
   inline marks live on light page backgrounds, the list lives on the dark
   footer, so the two halves are coloured independently. */
.ref-mark {
  font-size: .58em;
  line-height: 0;
  vertical-align: super;
  margin-left: .1em;
  font-variant-numeric: tabular-nums;
}
.ref-mark a {
  color: inherit;
  opacity: .55;
  text-decoration: none;
  font-size: inherit; /* keep the .58em shrink set on the mark itself */
}
.ref-mark a:hover,
.ref-mark a:focus-visible { opacity: 1; text-decoration: underline; }

.site-refs {
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-refs-title {
  font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
  margin: 0 0 14px;
}
.site-refs-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 10px;
  max-width: 72ch;
  counter-reset: none;
}
.site-refs-list li {
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .45);
  /* Hanging indent so wrapped lines clear the number, as in a printed
     reference list. */
  padding-left: 1.8em;
  text-indent: -1.8em;
}
.site-refs-list em { font-style: italic; color: rgba(255, 255, 255, .6); }
.site-refs-num {
  display: inline-block;
  width: 1.8em;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .3);
}
.site-refs-back { font-size: .72rem; opacity: .4; margin-left: .3em; }

/* :target only fires when the visitor actually followed a mark, so this
   confirms which line they jumped to without permanently highlighting one. */
.site-refs-list li:target { color: rgba(255, 255, 255, .85); }

/* ─── Line breaking ──────────────────────────────────────────────────────────
   Headings and the short lead paragraphs under them are centred and capped,
   so the browser's default greedy wrapping regularly stranded a single word
   on the last line. `balance` evens out a heading's lines; `pretty` keeps a
   paragraph from ending on an orphan. Both degrade to normal wrapping where
   unsupported, so nothing depends on them. */
h1, h2, h3, .h1, .h2, .h3, .hero-title, .eyebrow {
  text-wrap: balance;
}
p, .lead, .cta-sub, li, figcaption {
  text-wrap: pretty;
}
/* Centred standfirsts read as a shape, not as a column of prose, so they get
   the heading treatment: even lines rather than a long line and a stub. */
.cta-final .sub,
.cta-band .cta-sub,
.cta-band p,
.tc-panel .sub,
.hero-ana .sub,
.hero-light .sub {
  text-wrap: balance;
}