@charset "UTF-8";
/* Gript Theme -- Shared Styles */

:root {
  --bg:       #fafafa;
  --surface:  #ffffff;
  --ink:      #111111;
  --ink-2:    #666666;
  --ink-3:    #999999;
  --line:     #e5e5e5;
  --accent:   #111111;
  --green:    #16a34a;
  --blue:     #2563eb;
  --amber:    #d97706;
  --purple:   #7c3aed;
  --rose:     #e11d48;
  --cyan:     #0891b2;
  --font:     'Space Grotesk', system-ui, sans-serif;
  --body:     'Inter', system-ui, sans-serif;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Page hero — central control for top position & typography ──
     Change here to update every standard page hero at once.
     (home, blog, register are intentionally bespoke and don't read these.) */
  --hero-pad-top:     clamp(80px, 10vw, 140px);
  --hero-pad-x:       clamp(20px, 5.6vw, 48px);
  --hero-h1-size:     clamp(32px, 5vw, 56px);
  --hero-h1-tracking: -0.045em;
  --hero-h1-leading:  1.05;
  --hero-sub-size:    clamp(15px, 1.5vw, 18px);
  --hero-sub-leading: 1.6;

  /* Breadcrumb + eyebrow stack that sits above the H1 on /vs/ and /use-cases/ detail pages.
     Subtracted from --hero-pad-top so those pages' H1 lands at the same vertical position
     as a standard .page-hero H1. */
  --vs-pre-h1-stack:  74px;

  /* ── Logo — shared by nav and footer ── */
  --logo-height: clamp(26px, 3.5vw, 45px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Page transition: fade page content + footer in/out. Nav, mobile menu, overlays, toasts, and cookie banner stay stable. */
body > *:not(#nav):not(.mobile-menu):not(.mobile-cta-bar):not(.modal-overlay):not(.toast):not(.gfr-auth-overlay):not(#cmplz-cookiebanner-container):not(#cmplz-manage-consent) {
  animation: page-fade-in .22s ease both;
}
body.is-leaving > *:not(#nav):not(.mobile-menu):not(.mobile-cta-bar):not(.modal-overlay):not(.toast):not(.gfr-auth-overlay):not(#cmplz-cookiebanner-container):not(#cmplz-manage-consent) {
  animation: page-fade-out .14s ease both;
}
@keyframes page-fade-in  { from { opacity:0 } to { opacity:1 } }
@keyframes page-fade-out { from { opacity:1 } to { opacity:0 } }
@media (prefers-reduced-motion: reduce) {
  body > *:not(#nav):not(.mobile-menu):not(.mobile-cta-bar):not(.modal-overlay):not(.toast):not(.gfr-auth-overlay):not(#cmplz-cookiebanner-container):not(#cmplz-manage-consent),
  body.is-leaving > *:not(#nav):not(.mobile-menu):not(.mobile-cta-bar):not(.modal-overlay):not(.toast):not(.gfr-auth-overlay):not(#cmplz-cookiebanner-container):not(#cmplz-manage-consent) { animation: none }
}

/* Force Complianz banner above all page stacking contexts */
#cmplz-cookiebanner-container {
  position: relative !important;
  z-index: 1000000 !important;
  animation: none !important;
}
#cmplz-manage-consent {
  animation: none !important;
}

/* --- NAV --------------------------------------------------------------- */
/* Flex, not `1fr auto 1fr` grid. The old grid centred the nav-links
   between logo and actions, so a 1614px viewport wasted ~450px of empty
   space on each side of the middle column while the actions still had
   to squeeze into the right 1fr. Flex + margin-left:auto on the
   actions puts links right next to the logo and gives every remaining
   pixel to the space between links and actions — the buttons stop
   getting squeezed until that whole gap is gone. */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 48px;
  height: 64px;
  background: rgba(250,250,250,0.8);
  backdrop-filter: blur(30px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
nav .nav-actions { margin-left: auto; }
nav.scrolled { border-bottom-color: var(--line); }
.nav-logo {
  font-family: var(--font);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
  color: var(--ink);
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

/* Features nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active { color: var(--ink); }
.nav-dropdown-caret {
  width: 10px; height: 6px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.nav-dropdown:hover .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12), 0 1px 8px 0 rgba(0,0,0,.2);
  padding: 6px;
  min-width: 210px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0.15s;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0; right: 0;
  height: 14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0s;
}
.nav-dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s;
}
.nav-dropdown-item:hover { background: #f5f5f5; }
.nav-dropdown-item-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.nav-dropdown-item-desc {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.4;
}
/* --- LANGUAGE SWITCHER --------------------------------------------------- */
.lang-switcher { position: relative; }
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
  white-space: nowrap;
}
.lang-switcher-btn:hover { color: var(--ink); }
.lang-current-text { line-height: 1; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.lang-caret { flex-shrink: 0; transition: transform 0.2s var(--ease); }
.lang-switcher:hover .lang-caret,
.lang-switcher:focus-within .lang-caret { transform: rotate(180deg); }
.lang-switcher-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12), 0 1px 8px 0 rgba(0,0,0,.2);
  padding: 6px;
  min-width: 160px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0.15s;
}
.lang-switcher-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0; right: 0;
  height: 8px;
}
.lang-switcher:hover .lang-switcher-dropdown,
.lang-switcher:focus-within .lang-switcher-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0s;
}
.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 7px;
  text-decoration: none;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.lang-switcher-item:hover { background: var(--bg); color: var(--ink); }
.lang-switcher-item.active { background: var(--bg); color: var(--ink); font-weight: 600; }
.lang-check { margin-left: auto; color: var(--ink-3); flex-shrink: 0; }
.lang-flag { font-size: 14px; line-height: 1; }

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
nav .nav-signin {
  position: relative;
  margin-left: 10px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: border-color 0.15s, background 0.15s;
}
nav .nav-signin:hover { border-color: var(--ink); background: var(--surface); }
nav .nav-signin::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--line);
}
/* Secondary nav action. Matches .nav-signin deliberately: both are secondary,
   and the dark .nav-cta beside them stays the only primary. */
nav .nav-demo {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
nav .nav-demo:hover { border-color: var(--ink); background: var(--surface); }
nav .nav-demo[aria-current="page"] { border-color: var(--ink); }
nav .nav-demo:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav-cta {
  padding: 8px 20px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-cta:hover { background: #333; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: all 0.2s;
}

/* Mobile menu */
/* Full-screen takeover rather than a dropdown panel. The old menu was a strip
   hanging below the header with 15px grey links, which read as an afterthought
   on a device where it is the only navigation. Full height, ink background,
   display-size labels, and the two actions pinned to the bottom in thumb reach. */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--ink);
  padding: 84px 24px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 99;
  /* Slides from the top like before, just over the full viewport now. */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.25s;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu a {
  display: block;
  padding: 13px 0;
  font-family: var(--font);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bg);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: color 0.15s;
}
.mobile-menu a:hover { color: rgba(255, 255, 255, 0.6); }
/* The two action links sit in a pinned group, so the last nav link above them
   still needs its rule; :last-of-type no longer lands where it used to. */
.mobile-demo,
.mobile-signin,
.mobile-cta { border-bottom: none !important; }
/* SUPERSEDED 2026-08-30 by the mobile layer (assets/css/mobile.css).
   Commented out, not deleted.

   These rules styled the three action links back when .mobile-menu was one
   flat list and the actions had to push themselves to the bottom with
   margin-top:auto on whichever one happened to come first. They now live in
   a .mm-actions grid that owns that job, so margin-top:auto on a child
   would stretch it inside the grid instead.

   The !important on colour, padding and font was there to beat the generic
   `.mobile-menu a` rule above. mobile.css beats it on specificity instead,
   and could not override these without adding !important of its own, which
   is the war this comment exists to avoid.

   To restore the old flat menu: uncomment this and revert the .mm-* markup
   in header.php.

.mobile-demo {
  margin-top: auto;
  font-family: var(--body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bg) !important;
  text-align: center;
  padding: 15px !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.mobile-demo:hover { color: var(--bg) !important; background: rgba(255, 255, 255, 0.08); }
.mobile-signin {
  margin-top: 10px;
  font-family: var(--body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bg) !important;
  text-align: center;
  padding: 15px !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.mobile-signin:hover { color: var(--bg) !important; background: rgba(255, 255, 255, 0.14); }
.mobile-cta {
  margin-top: 10px;
  padding: 15px 24px !important;
  font-family: var(--body) !important;
  font-size: 15px !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-radius: 10px;
  text-align: center;
  font-weight: 600 !important;
}
.mobile-cta:hover { color: var(--ink) !important; }
*/
/* nav is z-index 100 and the menu is 99, so the nav keeps rendering over the
   open menu. That is what we want — the logo and the toggle stay put — but its
   light background would cut a strip across the dark takeover, so the bar goes
   transparent and its contents invert while the menu is open. */
body:has(.mobile-menu.open) nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body:has(.mobile-menu.open) .nav-logo { color: var(--bg); }
/* The menu carries its own CTA at the bottom; two would compete. */
body:has(.mobile-menu.open) .nav-cta { opacity: 0; pointer-events: none; }
/* Hamburger becomes the close affordance. Spans are 2px tall with a 5px gap,
   so the outer two travel 7px to meet in the middle. */
body:has(.mobile-menu.open) .hamburger span { background: var(--bg); }
body:has(.mobile-menu.open) .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body:has(.mobile-menu.open) .hamburger span:nth-child(2) { opacity: 0; }
body:has(.mobile-menu.open) .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- MOBILE STICKY CTA BAR --------------------------------------------- */
/* Hidden by default; the max-width:768px block below turns it on. Desktop keeps
   the nav CTA, which is always visible there. */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(250, 250, 250, 0.92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--line);
    /* Under the mobile menu (99) and the cookie banner (1000000), above content. */
    z-index: 90;
  }
  /* Sign-in deliberately omitted: the app is not usable on a phone, so
     offering a sign-in here sends people to a dead end. Trial CTA only. */
  .mcta-primary {
    flex: 1;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    color: var(--bg);
    background: var(--ink);
  }
  /* Stop the bar covering the end of the footer. */
  body { padding-bottom: 76px; }
  /* The menu covers the screen, so the bar underneath it is dead weight. */
  body:has(.mobile-menu.open) .mobile-cta-bar { display: none; }
}

/* --- FOOTER ------------------------------------------------------------ */
/* Dark footer. The page ends on --ink so the bottom reads as one deliberate
   block rather than trailing off into another sheet of --bg. On mobile the
   .final-section above it is also inverted, so the hairline is what separates
   the two; on desktop it reads as the top edge of the dark base. */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 64px 48px 0;
  background: var(--ink);
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1fr 0.9fr;
  gap: 36px;
  padding-bottom: 48px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-logo {
  text-decoration: none;
}
.footer-logo img,
.footer-logo-img {
  height: var(--logo-height);
  width: auto;
}
.footer-tagline {
  font-size: 15px;
  /* --ink-2 (#666) would be near-invisible on --ink; --ink-3 (#999) reads. */
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 300px;
}
.footer-company {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
}
.footer-col-group { display: flex; flex-direction: column; gap: 28px; }
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Visually hidden but kept in the DOM (sr-only), matching the help-center
   footer, so the column labels stay available to crawlers and screen readers. */
.footer-col h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.footer-col a {
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover {
  color: var(--bg);
}
.footer-bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}
.footer-trust-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.footer-trust-badges img {
  height: 44px;
  width: auto;
  opacity: 0.9;
}

/* --- SCROLL REVEAL ANIMATION ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger .reveal:nth-child(2) { transition-delay: 0.08s; }

/* --- LOGO IMAGE --- */
.nav-logo-img {
  height: var(--logo-height);
  width: auto;
}

/* --- WP ADMIN BAR OFFSET --- */
body.admin-bar #nav { top: 32px !important; }
/* Was 96px for the old dropdown (64px nav + 32px admin bar). The menu is now a
   full-screen takeover, so it only needs to clear the admin bar itself, which is
   46px at the widths this menu appears at. */
body.admin-bar .mobile-menu { top: 46px !important; }

/* --- LEGAL PAGES --- */
.legal-page { max-width: 720px; margin: 0 auto; padding: 120px 48px 80px; }
.legal-page h1 { font-family: var(--font); font-size: 36px; font-weight: 700; letter-spacing: -1.5px; margin-bottom: 32px; }
.legal-content { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.legal-content h2 { font-family: var(--font); font-size: 22px; font-weight: 700; color: var(--ink); margin: 32px 0 12px; }
.legal-content p { margin-bottom: 16px; }
.legal-content ul, .legal-content ol { margin: 12px 0 16px 24px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--ink); }

/* --- BUTTONS (shared) --- */
.btn-dark {
  display: inline-block;
  padding: 14px 32px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-dark:hover { background: #333; transform: translateY(-1px); }

.btn-ghost {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-outline {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-outline:hover { border-color: var(--ink); background: var(--surface); transform: translateY(-1px); }

/* --- PAIRED CLOSING CTA ------------------------------------------------- */
/* Trial button plus a demo button, used in the closing sections of the home
   page and the vs- pages. Both of those sit on an --ink background, so the
   secondary is an outline in white rather than the light-background .btn-ghost.
   Kept deliberately quieter than the primary: the trial is still the main ask. */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.btn-ghost-ondark {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.btn-ghost-ondark:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }
.btn-ghost-ondark:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- RESPONSIVE (shared) --- */
/* Nine nav links plus three actions (sign in, demo, trial) is a wide row.
   Above 1024 tighten the gaps so the row keeps fitting; from 1024 down
   the hamburger takes the whole nav-actions column and every desktop
   link/pill disappears — the mobile menu overlay carries every
   destination, so nothing is lost, just moved off a row that cannot
   hold them. Content below the nav still uses the desktop layout until
   768, where mobile.css takes over. */
@media (min-width: 1025px) and (max-width: 1240px) {
  nav { padding: 0 24px; }
  .nav-links { gap: 18px; }
  nav .nav-signin { margin-left: 6px; padding: 8px 13px; }
  nav .nav-signin::before { left: -10px; }
  nav .nav-demo { padding: 8px 13px; }
  .nav-cta { padding: 8px 16px; }
}

/* Tablet + small-laptop nav — hamburger only. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  nav .nav-signin { display: none; }
  nav .nav-demo { display: none; }
  .nav-cta { display: none; }
  /* Language switcher lives in the mobile menu at this width, matching
     the < 768px behaviour. */
  nav .lang-switcher { display: none; }
  nav { padding: 0 32px; }
}

@media (max-width: 768px) {
  nav { padding: 0 24px; height: 56px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  nav .nav-signin { display: none; }
  /* The mobile header is logo / centred CTA / hamburger and has no room for a
     third action. The demo link lives in the mobile menu instead. */
  nav .nav-demo { display: none; }
  /* Mobile header: logo left, hamburger far right (nav is flex with
     margin-left:auto on .nav-actions above, so no grid-column here). */
  .nav-cta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 7px 16px;
    font-size: 12px;
  }
  /* ── Footer ──────────────────────────────────────────────────────────
     Desktop runs five columns side by side: the grouping is obvious from the
     layout, so the h3s are hidden (see .footer-col h3 above). Neither of
     those holds on a phone.

     The labels come back, because two columns of unlabelled links read as a
     pile rather than as groups.

     And it stops being a grid. A grid forces every column to its row's
     height, so Product (5 links) got padded out to match Use Cases (9) and
     left a dead hole beneath it, while Legal was stranded alone on the last
     row. Multi-column flows the blocks continuously and balances them, so
     there are no rows and therefore no holes. break-inside welds each
     heading to its own links. */
  .footer-inner {
    display: block;
    columns: 2;
    column-gap: 20px;
    padding-bottom: 40px;
  }
  .footer-brand {
    /* Full width above the columns, rather than flowing inside one. */
    column-span: all;
    margin-bottom: 30px;
  }
  /* Flatten the wrapper so Resources and Legal flow as their own blocks. */
  .footer-col-group { display: contents; }
  .footer-col {
    break-inside: avoid;
    margin-bottom: 26px;
    gap: 12px;
  }
  .footer-col h3 {
    display: block;
    /* 9px is a desktop micro-label; it is unreadable at arm's length. */
    font-size: 11px;
    letter-spacing: 1.2px;
    margin-bottom: 2px;
  }
  /* 12px links with a 10px gap are both hard to read and hard to hit. */
  .footer-col a { font-size: 14px; }
  footer { padding: 48px 24px 0; }
  body.admin-bar #nav { top: 46px !important; }
  .legal-page { padding: 100px 24px 60px; }
  /* Hide desktop lang switcher — mobile version is inside hamburger menu */
  .lang-switcher { display: none; }
}

/* Mobile lang switcher pill row — inside .mobile-menu */
.mobile-lang-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
/* High-specificity overrides for .mobile-menu a general rule */
.mobile-menu .mobile-lang-switcher a.mobile-lang-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.mobile-menu .mobile-lang-switcher a.mobile-lang-item:hover { color: var(--ink); border-color: var(--ink-3); }
.mobile-menu .mobile-lang-switcher a.mobile-lang-item.active { color: var(--ink); font-weight: 600; border-color: var(--ink-3); }
/* The menu background is now --ink, so the pills' --ink-2 text sat at #666 on
   #111 and the active pill was #111 on #111. Invert them for the dark panel. */
.mobile-menu .mobile-lang-switcher { border-bottom-color: rgba(255, 255, 255, 0.09); }
.mobile-menu .mobile-lang-switcher a.mobile-lang-item {
  color: var(--ink-3);
  border-color: rgba(255, 255, 255, 0.18);
}
.mobile-menu .mobile-lang-switcher a.mobile-lang-item:hover,
.mobile-menu .mobile-lang-switcher a.mobile-lang-item.active {
  color: var(--bg);
  border-color: rgba(255, 255, 255, 0.45);
}

/* --- SKIP LINK (accessibility) ----------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 0s;
}
.skip-link:focus { top: 0; }

/* --- FOCUS-VISIBLE (keyboard navigation) -------------------------------- */
/* Default browser outline reset for mouse users, restored for keyboard */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

/* Nav links */
.nav-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
nav .nav-signin:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.nav-cta:focus-visible    { outline: 2px solid var(--blue); outline-offset: 3px; }
.hamburger:focus-visible  { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.mobile-menu a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

/* Footer links */
.footer-col a:focus-visible  { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.footer-logo:focus-visible   { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 3px; }

/* Shared buttons */
.btn-dark:focus-visible    { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn-ghost:focus-visible   { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn-outline:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* main-content anchor target — offset for fixed nav */
#main-content { scroll-margin-top: 64px; overflow-x: clip; }

/* ═══ WATCH-THE-INTRO CARD ═══
   Thumbnail of the intro video with a play button on it. Shared component, one
   line to include anywhere. Markup: template-parts/watch-card.php */
.watch-card-row {
  display: flex; justify-content: center;
  margin-top: 28px;
  /* Pages that host the card already carry their own top padding on the
     section that follows. Without this, the card + that padding stack into
     an unintended gap. Negative margin pulls the next section up rather than
     touching each page. Ignored by .cta-strip and the vs closing band since
     the card is the LAST thing inside them. */
  margin-bottom: clamp(-64px, -5vw, -40px);
}
.watch-card {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 22px 12px 12px;
  cursor: pointer; text-align: left; font-family: var(--body);
  box-shadow: 0 18px 40px -24px rgba(17, 17, 17, 0.5);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.watch-card:hover { border-color: var(--ink-3); box-shadow: 0 22px 48px -24px rgba(17, 17, 17, 0.6); }
.watch-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.watch-card-thumb {
  position: relative; width: 150px; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #111;
}
.watch-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-card-thumb .wg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  /* white ring so it reads against a dark or a light frame */
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.55);
  transition: transform 0.2s var(--ease);
}
.watch-card:hover .wg { transform: translate(-50%, -50%) scale(1.12); }
.watch-card-thumb .wg svg { width: 12px; height: 12px; margin-left: 2px; fill: currentColor; }
.watch-card-txt { display: flex; flex-direction: column; gap: 3px; }
.watch-card-txt b { font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.watch-card-txt span { font-size: 13px; color: var(--ink-3); }

/* On .cta-strip and anything else with an ink background */
.watch-card--ondark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); box-shadow: none; }
.watch-card--ondark:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.10); box-shadow: none; }
.watch-card--ondark:focus-visible { outline-color: #fff; }
.watch-card--ondark .watch-card-txt b { color: #fff; }
.watch-card--ondark .watch-card-txt span { color: rgba(255,255,255,0.6); }
.watch-card--ondark .watch-card-thumb .wg { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -4px rgba(0,0,0,0.5); }

@media (max-width: 520px) {
  .watch-card { padding: 10px 16px 10px 10px; gap: 12px; }
  .watch-card-thumb { width: 112px; }
  .watch-card-txt b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .watch-card, .watch-card .wg { transition: none; }
}


/* ═══ INTRO-VIDEO CTA BAR ═══
   Slides in from the top a few seconds after page load if the visitor has not
   opened the intro video. One appearance per session, never twice. Fixed above
   the nav so it is impossible to scroll past without noticing. Class names
   deliberately avoid "nudge" and similar tokens so ad-block filter lists do
   not hide the element. Markup: template-parts/video-lightbox.php */
.intro-cta-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 48px 10px 16px;
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.intro-cta-bar.is-visible { transform: translateY(0); pointer-events: auto; }

.intro-cta-bar-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; border: 0; color: inherit;
  cursor: pointer; padding: 4px 10px;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
}
.intro-cta-bar-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }

.intro-cta-bar-thumb {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.intro-cta-bar-thumb svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }

.intro-cta-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro-cta-bar-arrow { font-size: 16px; line-height: 1; transition: transform 0.18s var(--ease); }
.intro-cta-bar-btn:hover .intro-cta-bar-arrow { transform: translateX(3px); }

.intro-cta-bar-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: rgba(255, 255, 255, 0.65);
  font-size: 26px; line-height: 1; padding: 4px 10px; cursor: pointer;
  transition: color 0.15s;
}
.intro-cta-bar-close:hover { color: #fff; }
.intro-cta-bar-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 640px) {
  .intro-cta-bar { padding: 8px 44px 8px 12px; gap: 4px; }
  .intro-cta-bar-btn { font-size: 13px; gap: 10px; padding: 4px 6px; }
  .intro-cta-bar-thumb { width: 22px; height: 22px; }
  .intro-cta-bar-thumb svg { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-cta-bar { transition: none; }
  .intro-cta-bar-arrow { transition: none; }
}


/* ═══ VIDEO LIGHTBOX (shared) ═══
   Was in home.css and therefore missing on every other page: the lightbox
   rendered unstyled and the iframe played behind the card. Moved here so it
   works wherever the shared player is included. */
/* Lightbox */
.hvbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10, 10, 10, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 4vw;
}
.hvbox[hidden] { display: none; }
.hvbox-inner {
  width: min(1100px, 92vw); aspect-ratio: 16 / 9;
  background: #000; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
}
.hvbox-inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.hvbox-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: 0; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.7;
}
.hvbox-close:hover, .hvbox-close:focus-visible { opacity: 1; }