/* Public landing page styles (Step 25 D4) — migrated out of the inline <style>
   block in templates/public/landing.html so the page follows the design system
   (tokens, breakpoint contract) and inline styles can leave the CSP allowlist.
   Loaded only by the landing template via {% block head_extra %} — app pages
   never pay for it.

   Breakpoints follow the Step 25 §3 contract: the mobile nav applies below
   64rem (63.99rem max-width — this page's nav needs more room than the app's
   48rem shell), and the roomy desktop spacing arrives at 80rem. Between 64rem
   and 80rem the nav runs COMPACT (smaller brand/gaps) — that zone is where the
   full-size wordmark used to overlap the first nav item (audit finding F6). */

/* Dual-tier navbar container */
.landing-nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

/* Secondary Navbar (Top) */
.landing-header-secondary {
  background: var(--muted-theme);
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem var(--space-4);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  font-size: 0.95rem;
  /* Fixed height so the wrapper can slide it out of view with a transform.
     Animating height/padding reflows the whole header on every frame. */
  height: var(--meta-bar-h);
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.landing-header-secondary a, .landing-header-secondary button {
  color: var(--muted-foreground);
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.landing-header-secondary a:hover, .landing-header-secondary button:hover {
  color: var(--foreground);
}
.landing-header-secondary .dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.landing-header-secondary .dropdown-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  box-shadow: var(--shadow-2);
  min-width: 160px;
  z-index: 1001;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.18s;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* :focus-within alongside :hover — the menu was hover-only, i.e. unreachable
   by keyboard and dead on touch (iPad landscape shows this bar). */
.landing-header-secondary .dropdown:hover .dropdown-menu,
.landing-header-secondary .dropdown:focus-within .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.landing-header-secondary .dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}
.landing-header-secondary .dropdown-menu button:hover {
  background: var(--secondary);
  color: var(--primary);
}

/* Primary Navbar (Main). Compact spacing is the DEFAULT desktop look; the
   80rem block below restores the roomy spacing on large screens. */
.landing-header-primary {
  position: relative; /* For absolute mega menus */
  background: var(--background);
  padding: 1.5rem var(--space-4);
  border-bottom: 1px solid var(--border);
  /* NEVER `transition: all` here. It animates padding — a layout property — so
     every frame of the 300ms scroll transition reflowed the header and
     everything under it. That was the jank. Only box-shadow and padding are
     listed now, and padding is kept because the height change is the point;
     the expensive part was animating width/height on the logo as well. */
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.landing-nav-wrapper.scrolled .landing-header-primary {
  padding: 1rem var(--space-4);
  box-shadow: var(--shadow-1);
}

/* Hide the secondary bar when scrolled.

   Slides the whole sticky wrapper up by exactly the meta bar's height, so the
   bar leaves the viewport while the primary nav stays pinned to the top. This
   is a single compositor-only transform — the previous version animated
   height AND padding AND opacity together, which forced a reflow of the page
   on every frame. */
.landing-nav-wrapper {
  --meta-bar-h: 2.5rem;
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-nav-wrapper.hide-secondary {
  transform: translateY(calc(var(--meta-bar-h) * -1));
}
@media (prefers-reduced-motion: reduce) {
  .landing-nav-wrapper { transition: none; }
}

/* --- Brand lockup ----------------------------------------------------------
   Two lockups stacked in one fixed-size box, crossfaded on opacity:

       Arara                ->   AHT      (rendered with a Greek capital lambda)
       HEALTH TECH

   The box does not change size and nothing scales, so the swap is a
   compositor-only opacity change. The previous version animated an <img>
   height from 40px to 34px, which made the browser re-rasterise the SVG at
   every fractional size in between — that is where the blur came from.

   Real text also means no 54 KB wordmark, no embedded font, and a mark that
   stays crisp at any zoom or pixel density. */
.landing-header-primary .brand {
  position: relative;
  display: flex;
  align-items: center;
  width: 150px;
  height: 44px;
  flex: none;
  text-decoration: none;
  color: var(--ink);
}
.brand__full,
.brand__compact {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  /* Opacity only. Both lockups keep their own geometry; neither ever scales. */
  transition: opacity 0.22s ease;
}
.brand__compact { opacity: 0; letter-spacing: -0.01em; }
/* The wordmark is set in the display serif, like the footer wordmark and the
   headlines. It was inheriting --font-sans, so the brand rendered in the body
   face on the header and in Source Serif 4 in the footer — the same name in two
   typefaces on one page. */
.brand__name {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand__descender {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.25rem;
}
.brand__compact {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: 1.75rem;
  font-weight: 600;
  flex-direction: row;
  align-items: center;
}

/* The swap. Crossfade, not a resize. */
.landing-nav-wrapper.scrolled .brand__full { opacity: 0; }
.landing-nav-wrapper.scrolled .brand__compact { opacity: 1; }

/* The drawer header shows the full lockup only; there is no scrolled state
   inside an overlay. */
.brand--static .brand__full { position: static; transform: none; }

/* Honour a reduced-motion preference: swap instantly rather than crossfading. */
@media (prefers-reduced-motion: reduce) {
  .brand__full, .brand__compact { transition: none; }
}

/* Primary Nav Links */
.primary-nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  margin-right: 1.25rem; /* Creates space between About Us and CTA */
}

.primary-nav-item {
  position: static; /* Let mega menu position relative to the header */
}

.primary-nav-item > .nav-toggle {
  position: relative;
  background: none;
  border: none;
  font-weight: 500;
  font-size: 1rem;
  color: var(--foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  transition: color 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.primary-nav-item > .nav-toggle:hover,
.primary-nav-item.is-active > .nav-toggle {
  color: var(--primary);
}

.primary-nav-item > .nav-toggle::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform 0.2s;
}

.primary-nav-item.is-active > .nav-toggle::after {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* Roomy desktop spacing on large screens only (Step 25 F6: at 64–80rem the
   full-size brand + 2.5rem gaps overlapped the first nav item). */
@media (min-width: 80rem) {
  /* The lockup no longer resizes on scroll — it swaps — so this only sets the
     roomier desktop size once. */
  .landing-header-primary .brand { width: 170px; height: 48px; }
  .landing-header-primary .brand__name,
  .landing-header-primary .brand__compact { font-size: 2rem; }
  .primary-nav-links { gap: 2.5rem; margin-right: 2.5rem; }
  .primary-nav-item > .nav-toggle { font-size: 1.05rem; }
}

/* Mega Menu Structure */
.mega-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  position: absolute;
  top: 100%;
  left: var(--space-4);
  right: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 1001;
  display: flex;
  min-height: 300px;
  /* Named rather than `all`: these three are what change, and they are all
     compositor-friendly. `all` on a container this size means the browser
     watches every animatable property on every child. */
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.18s;
}
.mega-menu.is-open { transition-delay: 0s; }

.mega-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mega-sidebar {
  flex: 0 0 250px;
  background: var(--muted-theme);
  border-right: 1px solid var(--border);
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  border-bottom-left-radius: var(--radius);
}
.mega-tab {
  background: none;
  border: none;
  text-align: left;
  padding: 0.75rem var(--space-5);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--foreground);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  font-family: inherit;
}
.mega-tab:hover {
  background: rgba(0, 0, 0, 0.03);
}
.mega-tab.active {
  background: var(--card);
  border-left: 3px solid var(--primary);
  color: var(--primary);
}

.mega-content {
  flex: 1;
  padding: var(--space-6);
  background: var(--card);
  display: flex;
  flex-direction: column;
  border-bottom-right-radius: var(--radius);
}
.mega-main-section {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  text-decoration: none;
  color: inherit;
  padding: var(--space-3);
  border-radius: var(--radius);
  transition: background-color 0.2s;
}
.mega-main-section:hover {
  background-color: var(--secondary);
}
.mega-main-section:hover .mega-link {
  text-decoration: underline;
}
.mega-icon {
  font-size: 1.5rem;
  color: var(--foreground);
  background: var(--muted-theme);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.mega-text h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
.mega-text p {
  margin: 0 0 var(--space-3);
  color: var(--muted-foreground);
  font-size: var(--text-base);
  max-width: 600px;
  line-height: 1.5;
}
.mega-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.mega-link:hover {
  text-decoration: underline;
}

.mega-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-4) 0 var(--space-5);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.mega-feature {
  display: flex;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  padding: var(--space-3);
  border-radius: var(--radius);
  transition: background-color 0.2s;
}
.mega-feature:hover {
  background-color: var(--secondary);
}
.mega-icon-small {
  font-size: 1.25rem;
  color: var(--foreground);
  background: var(--muted-theme);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.mega-feature h4 {
  margin: 0 0 var(--space-1);
  font-size: 0.95rem;
}
.mega-feature p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* CTA button. --accent-strong, NOT --primary/--accent: white text on --accent
   is 3.66:1 — below AA (the 4F contrast rule; audit finding F7). */
.landing-header-primary .btn {
  background: var(--accent-strong);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.landing-header-primary .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  opacity: 0.9;
}

.mobile-logo { display: none !important; }
.desktop-logo { display: block !important; }

@media (max-width: 63.99rem) {
  .desktop-logo { display: none !important; }
  .mobile-logo { display: block !important; }
}

/* --- Mobile Responsive Updates --- */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto; /* Push it to the right */
}

.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  /* 100%, not 100vw: 100vw includes the classic-scrollbar width and caused
     horizontal overflow while the drawer was open (audit finding F10). */
  width: 100%;
  max-height: 85vh;
  background: var(--background);
  z-index: 9999;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 0 0 16px 16px;
  box-shadow: var(--shadow-2);
}

.mobile-nav-drawer.is-open {
  display: flex;
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem var(--space-4);
  background: var(--background);
}
.mobile-drawer-header .brand img { height: 32px; display: block; }

.mobile-close-btn {
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-nav-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem var(--space-4);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--foreground);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.mobile-nav-toggle svg {
  transition: transform 0.2s;
}

.mobile-nav-section.is-expanded .mobile-nav-toggle svg {
  transform: rotate(90deg);
}

.mobile-nav-links {
  display: none;
  flex-direction: column;
  padding: 0 var(--space-4) 1rem var(--space-4);
  background: var(--background);
}

.mobile-nav-section.is-expanded .mobile-nav-links {
  display: flex;
}

.mobile-nav-links a {
  color: var(--foreground);
  text-decoration: none;
  padding: 0.75rem 0;
  font-size: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-nav-links a:last-child {
  border-bottom: none;
}

.mobile-cta-wrapper {
  padding: 1.5rem var(--space-4);
  border-bottom: 1px solid var(--border);
}
/* Drawer CTA (was an inline style attribute). --accent-strong for AA. */
.mobile-cta-wrapper .btn {
  display: inline-block;
  background: var(--accent-strong);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.mobile-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1rem;
  padding: 1.5rem var(--space-4);
}
.mobile-secondary-grid a, .mobile-secondary-grid button {
  color: var(--foreground);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.mobile-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem var(--space-4) 2rem var(--space-4);
}

.mobile-tools-grid button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--foreground);
  background: none;
  border: none;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 63.99rem) {
  .landing-header-secondary,
  .primary-nav-links,
  .primary-nav-actions {
    display: none !important;
  }

  .landing-header-primary {
    padding: 1rem var(--space-4);
  }

  .mobile-menu-btn {
    display: block;
  }
}

/* The header "Request a demo" button is hidden below the mobile breakpoint.

   Nothing hid it when it was introduced, so it sat at x=246..410 on a 390px
   screen and pushed a horizontal scrollbar onto EVERY public page — the defect
   returned when this file was split, because the rule lived in a tail section
   that moved out with the page bodies.

   Hidden rather than shrunk: the mobile drawer already carries its own
   "Request a demo" button, so the header copy is redundant at that width rather
   than merely cramped. */
@media (max-width: 63.99rem) {
  .nav-cta { display: none; }
}


/* === Shared content column (doc 42 §3) =====================================
   Header, footer and every page section resolve the SAME expression, so the
   wordmark, the nav, the headings and the footer headings sit on one left edge
   at every viewport width. The header previously used a flat var(--space-4)
   while content used a centred 1200px column, which left the logo 16px adrift
   of every heading below it — invisible until you look for it, and the kind of
   misalignment that reads as "assembled" rather than designed.

   `max()` holds the small-screen gutter until the viewport is wide enough to
   centre the column, which means full-bleed backgrounds and capped text need no
   separate rules. Padding rather than max-width + auto margins, because a
   child's `margin-left: 0` can cancel an auto margin but cannot cancel padding —
   that collision is what used to leave tinted sections flush to the edge. */
.landing-header-primary,
.landing-header-secondary {
  padding-inline: max(var(--space-5), calc((100% - var(--mkt-measure)) / 2));
}

/* A nav section with no built children renders as a plain link rather than an
   empty dropdown; it must still sit on the baseline with the real toggles. */
.nav-plain {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color .2s;
}
.nav-plain:hover { color: var(--accent-strong); }

/* The inline SVG sprite's symbols, used by the mega-menu and the page bodies. */
.mkt-ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}