/* Home: navbar (T03, Figma 307:3038)
   Floating white pill, 1200 wide, 8px from the top, sticky.
   Mobile: logo + Start Free + menu toggle; links drop down in a panel below the pill.
   Desktop (1024+): links centred, Login + Start Free on the right.
   Motion: the pill drops in on load, hides while scrolling down and returns on scroll up.
   js/sections/navbar.js toggles .is-scrolled, .is-hidden and .is-open on the header,
   and .is-active on the link for the homepage section in view. */
.s-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--space-2);
  padding-inline: var(--space-2);
  pointer-events: none; /* only the pill and the menu take clicks */
  /* overlay the hero so its gradient runs behind the pill; hero needs >= 72px top padding */
  margin-bottom: calc(-1 * (var(--header-h) + var(--space-2)));
  background: transparent;
}
.s-navbar__wrap {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.s-navbar.is-hidden .s-navbar__wrap { transform: translateY(calc(-100% - var(--space-4))); }
.s-navbar__bar,
.s-navbar__menu,
.s-navbar__mega { pointer-events: auto; }

/* Dim the page behind the open mobile menu; a tap on it closes the menu */
.s-navbar::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgb(18 46 61 / 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.s-navbar.is-open::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms var(--ease-out);
}

.s-navbar__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
  padding-left: var(--space-5);
  padding-right: var(--space-3);
  background: var(--base-high);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-nav);
  transition: box-shadow 300ms var(--ease);
  animation: s-navbar-in var(--dur-reveal) var(--ease-out) both;
}
.s-navbar.is-scrolled .s-navbar__bar { box-shadow: var(--shadow-nav-scrolled); }

/* Bar contents fade in just after the pill lands */
.s-navbar__logo,
.s-navbar__links,
.s-navbar__actions { animation: s-navbar-fade 600ms var(--ease-out) both; }
.s-navbar__logo { animation-delay: 150ms; }
.s-navbar__links { animation-delay: 220ms; }
.s-navbar__actions { animation-delay: 290ms; }

/* Logo: the mark gives a small turn on hover */
.s-navbar__logo { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; border-radius: var(--radius-md); }
.s-navbar__mark {
  width: 33px;
  height: 33px;
  margin: -3.5px -3.5px -3.5px -1.75px; /* export has stroke bleed around the 27.7x25.8 mark */
  transition: transform var(--dur-slow) var(--ease-spring);
}
.s-navbar__logo:active .s-navbar__mark { transform: scale(0.94); transition-duration: var(--dur-fast); }
.s-navbar__wordmark {
  font-family: var(--font-logo);
  font-weight: var(--fw-medium);
  font-size: var(--logo-size);
  line-height: 28px;
  letter-spacing: -0.5px;
  color: var(--text-strong);
}

/* Desktop links: hidden on mobile */
.s-navbar__links { display: none; }
.s-navbar__link,
.s-navbar__login {
  display: inline-flex;
  align-items: center;
  font-weight: var(--fw-medium);
  font-size: var(--body-md-size);
  line-height: 1.2;
  letter-spacing: var(--body-md-ls);
  color: var(--text-strong);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
/* Hover: the label rolls up and an identical copy rolls in from below. Text colour never changes,
   and the current page has no active state. */
.s-navbar__link { position: relative; height: 44px; border-radius: var(--space-1); }
.s-navbar__roll { position: relative; display: inline-block; overflow: hidden; height: 1.2em; }
.s-navbar__roll > span { display: block; transition: transform var(--dur-slow) var(--ease-out); }
.s-navbar__roll > span + span { position: absolute; inset: 100% 0 auto; }
.s-navbar__link:focus-visible .s-navbar__roll > span { transform: translateY(-100%); }
.s-navbar__link:active { transform: translateY(1px); }

/* Actions */
.s-navbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.s-navbar__login {
  display: none;
  height: 36px;
  padding-inline: var(--space-3);
  border-radius: var(--space-1);
}
.s-navbar__login:active { background: var(--black-10); transform: scale(0.97); }
.s-navbar__cta { padding-inline: var(--space-4); } /* hover lift + press come from .btn */

/* Menu toggle: three bars morph into a cross */
.s-navbar__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.s-navbar__toggle[aria-expanded="true"] { background: var(--black-5); }
.s-navbar__toggle:active { transform: scale(0.92); }
.s-navbar__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-strong);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease), width var(--dur-slow) var(--ease-out);
}
.s-navbar__toggle[aria-expanded="true"] .s-navbar__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.s-navbar__toggle[aria-expanded="true"] .s-navbar__toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.s-navbar__toggle[aria-expanded="true"] .s-navbar__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile dropdown panel: js removes [hidden], then adds .is-open on the header to play the
   transition; on close it drops .is-open and sets [hidden] once the panel has faded out. */
.s-navbar__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  display: grid;
  gap: var(--space-4);
  max-height: calc(100dvh - var(--header-h) - var(--space-6));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  background: var(--base-high);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  transform-origin: top center;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}
.s-navbar.is-open .s-navbar__menu { opacity: 1; transform: none; }
.s-navbar__menu[hidden] { display: none; }
.s-navbar__menu-links > li,
.s-navbar__menu-actions {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}
.s-navbar.is-open .s-navbar__menu-links > li,
.s-navbar.is-open .s-navbar__menu-actions { opacity: 1; transform: none; }
.s-navbar.is-open .s-navbar__menu-links > li:nth-child(1) { transition-delay: 40ms; }
.s-navbar.is-open .s-navbar__menu-links > li:nth-child(2) { transition-delay: 80ms; }
.s-navbar.is-open .s-navbar__menu-links > li:nth-child(3) { transition-delay: 120ms; }
.s-navbar.is-open .s-navbar__menu-links > li:nth-child(4) { transition-delay: 160ms; }
.s-navbar.is-open .s-navbar__menu-actions { transition-delay: 200ms; }

.s-navbar__menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  font-size: var(--body-lg-size);
  letter-spacing: var(--body-lg-ls);
  color: var(--text-strong);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Chevron slides in on hover, press or focus */
.s-navbar__menu-link::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-6px) rotate(45deg);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}
.s-navbar__menu-link:active { background: var(--black-5); }
.s-navbar__menu-link:active::after,
.s-navbar__menu-link:focus-visible::after { opacity: 1; transform: translateX(0) rotate(45deg); }
.s-navbar__menu-link[aria-current="page"],
.s-navbar__menu-link.is-active { color: var(--orange-500); background: rgb(255 105 0 / 0.08); }
.s-navbar__menu-actions { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-thin); }

/* Megamenu triggers (desktop): chevron flips while the panel is open */
.s-navbar__trigger { gap: 6px; cursor: pointer; }
.s-navbar__chev { transition: transform var(--dur-slow) var(--ease-out); }
.s-navbar__trigger[aria-expanded="true"] .s-navbar__chev { transform: rotate(180deg); }

/* Megamenu panel: hangs below the pill, centred. js unhides it, then adds .is-open */
.s-navbar__mega {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  translate: -50% 0;
  width: min(920px, 100%);
  display: none;
  grid-template-columns: 1fr 1fr 260px;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--base-high);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}
/* invisible bridge over the gap so the pointer can travel from trigger to panel */
.s-navbar__mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--space-3); }
.s-navbar__mega.is-open { opacity: 1; transform: none; }
.s-navbar__mega-col { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-2); }
.s-navbar__mega-label {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--body-sm-size);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-low);
}
.s-navbar__mega-col ul { display: grid; gap: 2px; }
.s-navbar__mega-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease);
}
.s-navbar__mega-link:focus-visible { background: var(--black-5); }
.s-navbar__mega-link[aria-current="page"] { background: rgb(255 105 0 / 0.08); }
.s-navbar__mega-link[aria-current="page"] .s-navbar__mega-title { color: var(--orange-500); }
.s-navbar__mega-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-thin);
  border-radius: var(--radius-sm);
  background: var(--base-high);
  color: var(--text-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.s-navbar__mega-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-navbar__mega-title {
  display: block;
  font-weight: var(--fw-medium);
  font-size: var(--body-md-size);
  line-height: 20px;
  letter-spacing: var(--body-md-ls);
  color: var(--text-strong);
}
.s-navbar__mega-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
  color: var(--text-low);
}
/* Featured card in the right column */
.s-navbar__mega-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(255 137 4 / 0.45), transparent 60%),
    var(--footer-bg);
  color: var(--text-negative);
  transition: transform var(--dur-slow) var(--ease-out);
}
.s-navbar__mega-card--story {
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(94 233 181 / 0.4), transparent 60%),
    var(--footer-bg);
}
.s-navbar__mega-card-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--white-10);
  font-size: var(--body-sm-size);
  font-weight: var(--fw-medium);
}
.s-navbar__mega-card-title {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  letter-spacing: var(--h6-ls);
}
.s-navbar__mega-card-more { font-size: var(--body-md-size); font-weight: var(--fw-medium); opacity: 0.85; }
.s-navbar__mega-card-more span { display: inline-block; transition: transform var(--dur-slow) var(--ease-out); }

/* Mobile accordion groups inside the panel (native <details>) */
.s-navbar__acc-head { cursor: pointer; list-style: none; }
.s-navbar__acc-head::-webkit-details-marker { display: none; }
.s-navbar__acc-head::after { opacity: 1; transform: translateY(-2px) rotate(135deg); }
.s-navbar__acc-head:active::after,
.s-navbar__acc-head:focus-visible::after { transform: translateY(-2px) rotate(135deg); }
.s-navbar__acc[open] > .s-navbar__acc-head::after { transform: translateY(2px) rotate(-45deg); }
.s-navbar__acc.is-current > .s-navbar__acc-head { color: var(--orange-500); }
.s-navbar__acc-list { display: grid; margin: 0 0 var(--space-2) var(--space-3); border-left: 1px solid var(--border-thin); }
.s-navbar__acc-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-left: -1px;
  padding-inline: var(--space-4);
  border-left: 2px solid transparent;
  font-size: var(--body-md-size);
  font-weight: var(--fw-medium);
  color: var(--text-medium);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.s-navbar__acc-link:active { background: var(--black-5); }
.s-navbar__acc-link[aria-current="page"] { color: var(--orange-500); border-left-color: var(--orange-500); }

@keyframes s-navbar-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes s-navbar-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Very small phones: the CTA lives in the menu */
@media (max-width: 359px) {
  .s-navbar__cta { display: none; }
}

@media (min-width: 640px) {
  .s-navbar { padding-inline: var(--gutter); }
  .s-navbar__bar { padding-left: var(--space-6); padding-right: var(--space-4); }
  .s-navbar__login { display: inline-flex; }
  .s-navbar__menu-actions { display: none; }
}

@media (min-width: 1024px) {
  .s-navbar__links {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%; /* kept off `transform` so the fade-in keyframes don't uncentre it */
    display: flex;
    gap: var(--space-6);
  }
  .s-navbar__toggle,
  .s-navbar__menu,
  .s-navbar::before { display: none !important; }
  .s-navbar__mega:not([hidden]) { display: grid; }
}

/* Hover states only for real pointers, so a tap doesn't leave things stuck mid-hover */
@media (hover: hover) {
  .s-navbar__logo:hover .s-navbar__mark { transform: rotate(-12deg) scale(1.06); }
  .s-navbar__link:hover .s-navbar__roll > span { transform: translateY(-100%); }
  .s-navbar__login:hover,
  .s-navbar__toggle:hover,
  .s-navbar__menu-link:hover { background: var(--black-5); }
  .s-navbar__toggle:hover .s-navbar__toggle-bar:nth-child(2) { width: 12px; }
  .s-navbar__menu-link:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); }
  .s-navbar__acc-head:hover::after { transform: translateY(-2px) rotate(135deg); }
  .s-navbar__acc[open] > .s-navbar__acc-head:hover::after { transform: translateY(2px) rotate(-45deg); }
  .s-navbar__mega-link:hover,
  .s-navbar__acc-link:hover { background: var(--black-5); }
  .s-navbar__mega-link:hover .s-navbar__mega-icon { color: var(--orange-500); border-color: rgb(255 105 0 / 0.35); }
  .s-navbar__mega-card:hover { transform: translateY(-2px); }
  .s-navbar__mega-card:hover .s-navbar__mega-card-more span { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .s-navbar__bar,
  .s-navbar__logo,
  .s-navbar__links,
  .s-navbar__actions { animation: none; }
  .s-navbar__wrap,
  .s-navbar__menu,
  .s-navbar__mega,
  .s-navbar__chev,
  .s-navbar__menu-links > li,
  .s-navbar__menu-actions,
  .s-navbar__toggle-bar,
  .s-navbar__mark,
  .s-navbar__roll > span,
  .s-navbar__menu-link::after,
  .s-navbar::before { transition: none; }
  .s-navbar__menu,
  .s-navbar__mega,
  .s-navbar__menu-links > li,
  .s-navbar__menu-actions { transform: none; }
  .s-navbar__logo:hover .s-navbar__mark,
  .s-navbar.is-hidden .s-navbar__wrap { transform: none; } /* the bar stays put */
}