/* Always reserve the vertical scrollbar's space so the centered floating
   navbar (and page content) never shifts horizontally when a page gains or
   loses its scrollbar — e.g. navigating between Features and Solutions.
   scrollbar-gutter handles modern browsers; overflow-y:scroll is the
   universal fallback for older ones. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Metric-matched fallback for the nav text: while the Inter web font is still
   loading, this renders Arial pre-scaled to Inter's exact advance width, so the
   nav tabs occupy the same space and DON'T shift when Inter swaps in. */
/* Self-hosted Inter (one variable-font file, weights 300–800) — loaded on every
   page (nav.css is universal), preloaded so it's ready before first paint. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}
/* Same idea for the "Start Free Trial" button (Plus Jakarta Sans) so its
   width — and therefore the tabs to its left — stays put while the font loads. */
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial');
  ascent-override: 96.6%;
  descent-override: 24.15%;
  line-gap-override: 0%;
  size-adjust: 113.1%;
}

/* ═══════════════════════════════════════════════════════════
 * GLOBAL SITE FONT — single source of truth.
 * nav.css is loaded on EVERY page, so changing --site-font below
 * switches the font for the entire project in one place.
 * ═══════════════════════════════════════════════════════════ */
:root {
  /* ⇩⇩ THE ONE LINE that controls the font for the ENTIRE project ⇩⇩
     (nav.css loads on every page, so this reaches everything). */
  --site-font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* {
  font-family: var(--site-font) !important;
}

/* ═══════════════════════════════════════════════════════════
 * SITE-WIDE MINIMUM WIDTH.
 * Below 320px (narrower than any real phone — iPhone SE is 320)
 * the layout stops shrinking and stays static; the page scrolls
 * horizontally instead of the UI compressing/breaking further.
 * ═══════════════════════════════════════════════════════════ */
html,
body {
  min-width: 320px;
}

/* Below the floor, let the page scroll horizontally so the locked 320px
   layout stays fully visible instead of being clipped. Only ever active
   under 320px (no real device), so normal widths are unaffected. */
@media (max-width: 319px) {
  html,
  body {
    overflow-x: auto;
  }
}

/* Amber Glow Background Styles */
.amber-glow-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.amber-glow-bg {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 119, 198, 0.3), rgba(255, 255, 255, 0));
  background-size: 100% 100%;
}

/* Extracted from index.html inline styles */

.mysa-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 320px;          /* stay static below the 320px floor, like the page body */
  padding: 18px 24px;
  z-index: 1000;
  background: transparent;
  line-height: 1.2;          /* pinned so the bar height never changes with each page's body line-height */
  transition: transform 0.3s ease-in-out, padding 0.3s ease;
  transform: translateY(0);
}

.mysa-top-nav.nav-hidden {
  transform: translateY(-100%);
}

/* Floating pill keeps its look on scroll; just tighten spacing */
.mysa-top-nav.nav-scrolled {
  background: transparent;
  padding: 12px 24px;
}

/* Floating rounded pill navbar */
.nav-container {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 10px 12px 10px 28px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.nav-logo-img {
  height: 48px;
  width: auto;
  display: block;            /* block → no inline baseline whitespace, so the bar height is exact on every page */
  object-fit: contain;
  filter: brightness(0); /* force the slate-grey wordmark to solid black on the light glass */
  transition: height 0.3s ease;
}

@media (max-width: 768px) {
  .nav-logo-img {
    height: 34px;
  }
}

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

.nav-links {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav-links .nav-link {
  color: #1f2937;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.nav-links .nav-link:hover {
  color: #000;
}

.nav-dropdown {
  position: static; /* menu anchors to the full-width nav so it can center on the navbar */
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  min-width: 240px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

/* Hover-open only on non-touch devices. On touch (tablet/phone) hover "sticks",
   which left the menu stuck open — there the JS tap-toggle (.mega-open) drives
   it instead. <html.nav-touch> is set by navigation.js on touch devices. */
html:not(.nav-touch) .nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: 10px 20px;
  color: #374151;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 14px;
  transition: background 0.15s;
}

.nav-dropdown-item:hover {
  background-color: #f3f4f6;
  color: #111827;
}

/* ── Solutions mega-menu (centered under the navbar, light cards) ── */
.nav-dropdown-menu.nav-mega {
  position: fixed;              /* center on the viewport / navbar */
  top: 96px;                    /* below the nav pill */
  left: 50%;
  min-width: 1080px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-radius: 24px;
  border: 1px solid #eef1f5;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
  transform: translateX(-50%) translateY(8px) scale(0.985);
  transform-origin: top center;
  /* quick, professional slide + fade in; visibility flips after the fade on close */
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.2s;
}

/* Open via the JS-toggled .mega-open on ALL devices (drives touch); hover-open
   is added only on real pointing devices below. */
.nav-dropdown.mega-open .nav-dropdown-menu.nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

html:not(.nav-touch) .nav-dropdown:hover .nav-dropdown-menu.nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

/* full-width invisible bridge so hover survives the gap to the panel */
.nav-mega::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: -40px;
  height: 40px;
  pointer-events: auto;   /* must capture hover so the menu stays open while crossing the gap */
}

.nav-mega-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px;
  border-radius: 18px;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-mega-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
}

.nav-mega-pre {
  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.2;
}

.nav-mega-label {
  font-family: var(--font-primary);
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.nav-mega-title {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #64748B;
}

.nav-mega-cta {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-family: var(--font-primary);
  font-size: 13px;
  line-height: 1.6;          /* pinned so the button height is identical on every page */
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease;
}

/* solution image — small, anchored to the bottom-right of the card */
.nav-mega-img {
  margin-top: auto;
  align-self: flex-end;
  width: auto;
  max-width: 100%;          /* clamp to the card so the image fits (matches solution pages) */
  height: 150px;
  margin-right: -20px;
  margin-bottom: -8;
  object-fit: contain;
  pointer-events: none;
}

/* SME & Education cards: image centered + a bit larger, with tighter text spacing */
.mega-sme .nav-mega-img,
.mega-education .nav-mega-img {
  align-self: center;
  height: 172px;
  margin-right: 0;
}

.mega-sme .nav-mega-cta,
.mega-education .nav-mega-cta {
  margin-top: 3px;
}

.nav-mega-card:hover .nav-mega-cta {
  transform: translateX(3px);
}

/* light, professional card tints + matching accent on the CTA */
.mega-sme        { background: #FFF6EA; border-color: #F6E2C6; }
.mega-realestate { background: #EBFAF2; border-color: #C9EDDA; }
.mega-freelancer { background: #ECF2FE; border-color: #D2E1FC; }
.mega-education  { background: #F4EDFE; border-color: #E1D2FB; }

.mega-sme        .nav-mega-cta { color: #C2780A; }
.mega-realestate .nav-mega-cta { color: #0E9F6E; }
.mega-freelancer .nav-mega-cta { color: #2563EB; }
.mega-education  .nav-mega-cta { color: #7C3AED; }

/* name colored to match each card's role */
.mega-sme        .nav-mega-label { color: #B26A06; }
.mega-realestate .nav-mega-label { color: #0C8E62; }
.mega-freelancer .nav-mega-label { color: #2159D8; }
.mega-education  .nav-mega-label { color: #6F2DDA; }

/* ═══ Features mega-menu ═══
   Left column = 2 big cards (Reminders + merged AI Calls).
   Right = the other 6 cards in a 2-col × 3-row grid.
   Every card: heading top-left, Explore CTA, icon bottom-right. */
.nav-dropdown-menu.nav-mega.nav-mega-features {
  display: flex;
  gap: 12px;
  min-width: 1040px;
  padding: 16px;
}

.feat-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 370px;
}
.feat-left .nav-feat-card { flex: 1; }

.feat-right {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nav-feat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
  min-height: 72px;
  border-radius: 16px;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nav-feat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
}

.nav-feat-label {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}
.feat-big .nav-feat-label { font-size: 29px; }
/* big cards: nudge the heading + buttons down a bit */
.feat-left .nav-feat-card { padding-top: 22px; }

/* Explore CTA (same pill style as the Solutions cards) */
.nav-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  transition: transform 0.18s ease;
}
.nav-feat-card:hover .nav-feat-cta { transform: translateX(2px); }
.nav-feat-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }

/* the 6 small cards: nudge the heading down + a little gap before the Explore button.
   Icons are pinned bottom-right (out of flow) and the card height is fixed, so these
   spacing tweaks don't change the card height. */
.feat-right .nav-feat-card {
  height: 130px;
  padding: 16px 16px 12px;
}
/* clean tech wave pattern — identical, parallel sine-wave lines in each card's colour shade */
.feat-right .nav-feat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pat);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='20'%20viewBox='0%200%2064%2020'%3E%3Cpath%20d='M0%2010%20Q16%204%2032%2010%20T64%2010'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='20'%20viewBox='0%200%2064%2020'%3E%3Cpath%20d='M0%2010%20Q16%204%2032%2010%20T64%2010'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'/%3E%3C/svg%3E");
  -webkit-mask-size: 64px 20px;
  mask-size: 64px 20px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
.feat-right .nav-feat-label,
.feat-right .nav-feat-cta { position: relative; z-index: 1; }
.feat-right .nav-feat-label { margin-bottom: 7px; font-size: 20px; }
.feat-right .nav-feat-img,
.feat-right .nav-feat-imgs {
  position: absolute;
  right: 16px;
  bottom: 12px;
  margin: 0;
  z-index: 1;
}

/* icon anchored bottom-right */
.nav-feat-img {
  margin-top: auto;
  align-self: flex-end;
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.feat-big .nav-feat-img { width: 66px; height: 66px; }

/* workspace: 3 brand icons, bottom-right */
.nav-feat-imgs {
  margin-top: auto;
  align-self: flex-end;
  display: flex;
  gap: 5px;
}
.nav-feat-imgs img { width: 32px; height: 32px; object-fit: contain; display: block; }

/* light, professional tints suited to each feature's role */
.feat-reminders { background: linear-gradient(180deg, #CFB556 0%, #31CFD7 100%); border: none; }
.feat-calls     { background: linear-gradient(180deg, #25A4A8 0%, #0572B1 100%); border: none; }
.feat-friends   { background: #F3ECFE; border-color: #DECDFB; --pat: rgba(124, 58, 237, 0.085); }   /* purple — people */
.feat-notes     { background: #E9F8EE; border-color: #C8E9D3; --pat: rgba(14, 159, 110, 0.085); }   /* green — notes */
.feat-docs      { background: #EEF1F6; border-color: #D8DEE8; --pat: rgba(88, 101, 119, 0.085); }   /* slate — documents */
.feat-workspace { background: #FDEDED; border-color: #F6D4D2; --pat: rgba(214, 69, 63, 0.085); }   /* rose — google suite */
.feat-recurring { background: #FFF0E6; border-color: #FBD6BF; --pat: rgba(219, 119, 17, 0.085); }   /* orange — repeating */
.feat-tasks     { background: #E6F6F2; border-color: #C4E8DE; --pat: rgba(17, 156, 124, 0.085); }   /* mint — done/tasks */

/* heading + CTA text tinted to match each card */
.feat-reminders .nav-feat-label, .feat-reminders .nav-feat-cta { color: #B5740C; }
.feat-calls     .nav-feat-label, .feat-calls     .nav-feat-cta { color: #0E8A99; }
.feat-friends   .nav-feat-label, .feat-friends   .nav-feat-cta { color: #7C3AED; }
.feat-notes     .nav-feat-label, .feat-notes     .nav-feat-cta { color: #0E9F6E; }
.feat-docs      .nav-feat-label, .feat-docs      .nav-feat-cta { color: #586577; }
.feat-workspace .nav-feat-label, .feat-workspace .nav-feat-cta { color: #D6453F; }
.feat-recurring .nav-feat-label, .feat-recurring .nav-feat-cta { color: #DB7711; }
.feat-tasks     .nav-feat-label, .feat-tasks     .nav-feat-cta { color: #119C7C; }

/* the two big gradient cards: white heading + character image pinned bottom-right */
.feat-calls .nav-feat-label,
.feat-reminders .nav-feat-label {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
.feat-calls .nav-feat-img,
.feat-reminders .nav-feat-img {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: auto;
  height: 164px;
  max-width: 60%;
  margin: 0;
  object-fit: contain;
}
/* wider CTA buttons on the two big cards */
.feat-big .nav-feat-cta {
  min-width: 110px;
  justify-content: space-between;
  padding: 6px 16px;
}
/* nudge only the Call Assist character a bit to the right */
.feat-calls .nav-feat-img { right: 14px; }

/* shift the buttons a bit lower in the two big cards */
.feat-calls .nav-feat-tabs,
.feat-reminders .nav-feat-tabs { margin-top: 12px; }

/* ── Country gate (non-Canada): hide the Call Assist big card from the Features
      menu and let Smart Reminders fill the whole left column with a larger image.
      Flag set on <html> by nav-geo.js; Canada has no flag so both cards stay.
      Covers the desktop mega AND the mobile sub-panel (both render .feat-left).
      Smart Reminders is already `flex: 1`, so as the only card it stretches to
      the full column height automatically — we only enlarge its image here. ── */
.geo-no-nav-callassist .feat-calls { display: none; }
/* Desktop mega: bigger character image on the now-full-height card. */
.geo-no-nav-callassist .nav-mega-features .feat-reminders .nav-feat-img {
  height: 300px;
  max-width: 72%;
  right: 20px;
}
/* Mobile sub-panel: taller card + bigger image. */
.geo-no-nav-callassist .nav-sub-panel .feat-reminders { min-height: 340px; }
.geo-no-nav-callassist .nav-sub-panel .feat-reminders .nav-feat-img { height: 236px; }

@media (max-width: 900px) {
  .nav-dropdown-menu.nav-mega {
    position: static;
    grid-template-columns: 1fr;
    min-width: 100%;
    margin-top: 4px;
    left: 0;
    transform: none;
  }
  .nav-mega-card {
    aspect-ratio: auto;
    min-height: 92px;
  }
  .nav-dropdown-menu.nav-mega.nav-mega-features {
    flex-direction: column;
    min-width: 100%;
  }
  .feat-left { flex: 1 1 auto; }
  .feat-right { grid-template-columns: 1fr; }
}

.nav-dashboard-btn {
  background: linear-gradient(89.97deg, #3ab85f 0.02%, #007884 103.12%);
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 9999px;
  padding: 8px 20px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, opacity 0.2s;
}

.nav-dashboard-btn:hover {
  border-color: #000000;
  opacity: 0.9;
}

/* Secondary "Log In" button — outlined pill on the light glass nav */
.nav-login-btn {
  background: transparent;
  color: #1f2937;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 66px;
  padding: 9px 22px;
  font-family: var(--font-primary);
  font-weight: 600;
}

.nav-login-btn:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.38);
  color: #0f172a;
  opacity: 1;
}

/* Hamburger button — default: hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 34px;
  min-width: 40px;      /* overrides the coarse-pointer 44px min so the pill can be shorter */
  min-height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s;
}

.nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Professional menu / close icons (swap on open) */
.nav-ham-icon {
  display: block;
  color: #1D2930;
}
.nav-ham-close {
  display: none;
}
.nav-hamburger.active .nav-ham-menu {
  display: none;
}
.nav-hamburger.active .nav-ham-close {
  display: block;
}

.nav-hamburger-line {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #1D2930;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animated X when open */
.nav-hamburger.active .nav-hamburger-line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-hamburger.active .nav-hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger.active .nav-hamburger-line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Dim + blur backdrop shown behind the mobile menu panel.
   Sits above the page (z 998) but below the nav pill + panel (z 1000). */
.nav-backdrop {
  position: fixed;
  inset: 0;
  min-width: 320px;
  z-index: 998;
  background: rgba(17, 24, 39, 0.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}

/* Full-screen "Solutions" sub-panel — slides down from the top, glassy like
   the menu, with an ✕ to go back. */
.nav-sub-panel {
  position: fixed;
  inset: 0;
  min-width: 320px;
  z-index: 1002;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* momentum / smooth scroll on touch */
  overscroll-behavior: contain;
  padding: 74px 20px 32px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease, visibility 0s linear 0.34s;
}

.nav-sub-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease, visibility 0s linear 0s;
}

.nav-sub-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #1D2930;
  cursor: pointer;
  z-index: 2;
}

.nav-sub-panel .nav-mega {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: static;
  width: 100%;
  max-width: 460px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;   /* .nav-dropdown-menu is pointer-events:none until :hover */
}

.nav-sub-panel .nav-mega::before { display: none; }

/* Features mega ships a 16px inner padding that Solutions doesn't — drop it so
   the feature cards are the same width and the top spacing matches Solutions. */
.nav-sub-panel .nav-mega.nav-mega-features {
  padding: 0;
}

/* Card images sit flush at the bottom edge of each card */
.nav-sub-panel .nav-mega-card {
  aspect-ratio: auto;
  min-height: 155px;
  padding: 14px 16px 0;
}

.nav-sub-panel .nav-mega-pre {
  font-size: 13px;
}

.nav-sub-panel .nav-mega-label {
  font-size: 22px;
}

.nav-sub-panel .nav-mega-cta {
  font-size: 13px;
  margin-top: 2px;
}

.nav-sub-panel .nav-mega-img {
  margin-top: auto;
  margin-bottom: 0;
  height: 115px;
  align-self: center;
  margin-right: 0;
}

/* Tap feedback so the cards clearly read as clickable */
.nav-sub-panel .nav-mega-card:active {
  transform: scale(0.985);
}

/* Taller top cards (Call Assist / Smart Reminders) — ~50% more height */
.nav-sub-panel .feat-big {
  min-height: 220px;
}

.nav-sub-panel .feat-big .nav-feat-img {
  height: 158px;
}

/* ── Mobile Breakpoint ── */
@media (max-width: 900px) {
  /* Mobile nav pill height */
  .nav-container {
    padding: 6px 20px;
  }

  /* Show hamburger button on mobile */
  .nav-hamburger {
    display: flex;
  }

  .nav-right {
    display: flex;
    position: fixed;
    top: 96px;                 /* below the floating nav pill, with a gap */
    left: 24px;                /* match the nav pill's edges (.mysa-top-nav padding) */
    right: 24px;
    min-width: 272px;          /* 320px floor minus the two 24px gutters — stays static below 320 */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.22);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    z-index: 999;
    padding: 16px 18px 20px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* momentum / smooth scroll on touch */
    overscroll-behavior: contain;
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  /* When open */
  .nav-right.nav-mobile-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0s linear 0s;
  }

  /* The nav uses transform (translateY) for its scroll hide/show, which
     makes it the containing block for the position:fixed drawer and
     confines the drawer to the navbar box. Drop the transform while the
     menu is open so the drawer fills the whole viewport. */
  .mysa-top-nav:has(.nav-mobile-open),
  .mysa-top-nav:has(.nav-mobile-closing) {
    transform: none !important;
  }

  /* .nav-container's backdrop-filter ALSO establishes a containing block for
     the fixed drawer (same trap as transform), pinning it inside the pill.
     Drop it while the menu is open so the drawer fills the whole viewport. */
  .mysa-top-nav:has(.nav-mobile-open) .nav-container,
  .mysa-top-nav:has(.nav-mobile-closing) .nav-container {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    margin-bottom: 12px;
  }

  /* Solutions & Features are wrapped in .nav-dropdown — stretch those wrappers
     to full width so all 5 rows (and their dividers) are identical. */
  .nav-links .nav-dropdown {
    width: 100%;
  }

  .nav-links .nav-link {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.01em;
    padding: 13px 20px;
    width: 100%;
    text-align: center;
    justify-content: center;
    color: #1D2930;
    position: relative;
    transition: background 0.2s;
  }

  /* Divider between the 5 options: narrower, fading to nothing at the edges
     and barely more visible in the middle. */
  .nav-links .nav-link:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 55%;
    height: 1px;
    background: linear-gradient(to right,
      rgba(15, 23, 42, 0) 0%,
      rgba(15, 23, 42, 0.14) 50%,
      rgba(15, 23, 42, 0) 100%);
  }

  .nav-links .nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  /* Clean drawer: show 5 simple options only — drop the desktop mega panels
     and their dropdown chevrons so each row is a single tappable link. */
  .nav-right .nav-mega {
    display: none !important;
  }


  .nav-links .nav-link svg {
    display: none;
  }

  /* Log In + Start Free Trial follow the 5 links (the divider above separates
     them); keep them tight together as a button pair. */
  .nav-right .nav-login-btn {
    margin-top: 0 !important;
  }

  /* Solutions dropdown — expanded inline on mobile */
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    min-width: 100%;
    padding: 4px 0;
    margin-top: 4px;
  }

  .nav-dropdown-item {
    text-align: center;
    font-size: 16px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.85);
  }

  .nav-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  /* Mobile CTA buttons — narrower, centered content (also centers the
     "Start Free Trial" label + arrow, which is an inline-flex row). */
  .nav-right .nav-dashboard-btn {
    font-size: 15px;
    padding: 12px 24px !important;
    width: 100%;
    max-width: 210px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    margin-top: 4px;
  }
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}