/* ==========================================================================
   components.css - chrome and reusable blocks shared by every page
   Navbar, mobile drawer, buttons, cards, icon tiles, wave dividers, footer.
   Values measured from Figma canvas 382:675.
   ========================================================================== */

/* ==========================================================================
   Site header / navigation
   Figma: logo 243x45 @ (68,58); nav pill 151x46 r37 @ (623,49);
   Sign in 159x50 r49 @ (1550,46); Start Free Trial 170x50 r49 @ (1665,46).
   Every page opens on a blue gradient hero, so the header is transparent and
   overlays it.
   ========================================================================== */

.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.site-header--sticky {
  position: fixed;
  background: rgba(0, 123, 211, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 88px;
  box-shadow: var(--sh-md);
  transition: background var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
}

.nav__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* the mark is 45px tall at desktop but shrinks on mobile - keep the hit area */
  min-height: var(--tap-target);
}

.nav__logo img {
  width: 243px;
  height: 45px;
}

/* Primary links sit centred between logo and actions. */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-9);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-inline: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--c-white);
  border-radius: var(--r-xl);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.nav__link:hover {
  background-color: var(--c-white-a10);
}

/* Active page gets the filled pill from the design. */
.nav__link--active {
  font-weight: var(--fw-semibold);
  background-color: var(--c-white-a10);
  padding-inline: var(--sp-6);
}

.nav__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---------- Mobile toggle ------------------------------------------------- */
.nav__toggle {
  display: none;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 10px;
  border-radius: var(--r-xs);
  color: var(--c-white);
}

.nav__toggle-bar,
.nav__toggle-bar::before,
.nav__toggle-bar::after {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) linear;
}

.nav__toggle-bar {
  position: relative;
}

.nav__toggle-bar::before,
.nav__toggle-bar::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav__toggle-bar::before { transform: translateY(-7px); }
.nav__toggle-bar::after  { transform: translateY(7px); }

.nav__toggle[aria-expanded="true"] .nav__toggle-bar {
  background-color: transparent;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before {
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after {
  transform: rotate(-45deg);
}

/* ---------- Mobile drawer -------------------------------------------------- */
.nav__drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(380px, 86vw);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: calc(var(--header-height) + var(--sp-4)) var(--sp-7) var(--sp-9);
  background: var(--g-hero);
  box-shadow: var(--sh-drop);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
  overflow-y: auto;
}

.nav__drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}

.nav__drawer .nav__link {
  width: 100%;
  min-height: 52px;
  font-size: var(--fs-md);
  border-radius: var(--r-sm);
}

.nav__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-white-a22);
}

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(2, 20, 34, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}

.nav__scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

/* ==========================================================================
   Placeholder links
   Items the design draws but that have nowhere to point yet. They used to
   carry href="#", which scrolls the page back to the top when clicked - worse
   than not being a link at all. Dropping the href is what actually fixes it:
   an <a> without one is not a link, so it is not focusable, is not announced
   as a link, and does nothing when clicked.

   pointer-events is off as well, because the hover states live on the shared
   component classes (.btn, .nav__link, .addon__link) and would otherwise still
   fire and make these look interactive. README.md lists what is still pending.
   ========================================================================== */

.is-placeholder {
  cursor: default;
  pointer-events: none;
}

/* ==========================================================================
   Buttons
   Figma: hero + CTA pills are 56px tall, r60; header pills 50px tall, r49.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 56px;
  min-width: var(--tap-target);
  padding-inline: var(--sp-7);
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: var(--bw-thin) solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Small pill used in the header. */
.btn--sm {
  min-height: 50px;
  padding-inline: var(--sp-6);
  font-size: var(--fs-sm);
}

/* White pill, dark label - the primary CTA on blue. */
.btn--light {
  background-color: var(--c-white);
  color: var(--c-ink-strong);
  border-color: var(--c-white);
}

.btn--light:hover {
  box-shadow: var(--sh-drop);
}

/* Outlined white pill on blue/dark. */
.btn--ghost {
  background-color: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}

.btn--ghost:hover {
  background-color: var(--c-white-a21);
}

/* Translucent pill (header "Sign in"). */
.btn--glass {
  background-color: var(--c-white-a21);
  color: var(--c-white);
  border-color: transparent;
}

.btn--glass:hover {
  background-color: var(--c-white-a46);
}

/* Solid brand blue, used on white sections. */
.btn--primary {
  background-color: var(--c-primary);
  color: var(--c-primary-ink);
  border-color: var(--c-primary);
}

.btn--primary:hover {
  background-color: var(--c-blue-900);
  border-color: var(--c-blue-900);
  box-shadow: var(--sh-md);
}

/* Outlined brand pill on white. */
.btn--outline {
  background-color: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
  border-width: var(--bw-base);
}

.btn--outline:hover {
  background-color: var(--c-blue-a08);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.btn-group--center {
  justify-content: center;
}

/* ==========================================================================
   Icon tile - the tinted squircle behind a vuesax icon.
   Figma: 89.8 x 96.2, tint at 20% alpha, icon 51px, 3px stroke.
   ========================================================================== */

.icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 90px;
  height: 96px;
  border-radius: 30px;
  background-color: var(--tile-bg, var(--c-blue4-a16));
  color: var(--tile-ink, var(--c-primary));
}

.icon-tile img,
.icon-tile svg {
  width: 51px;
  height: 51px;
}

.icon-tile--sm {
  width: 64px;
  height: 68px;
  border-radius: 21px;
}

.icon-tile--sm img,
.icon-tile--sm svg {
  width: 32px;
  height: 32px;
}

/* Tint variants, matching the Figma fills. */
.icon-tile--blue   { --tile-bg: rgba(32, 188, 255, 0.2);  --tile-ink: var(--c-blue-600); }
.icon-tile--pink   { --tile-bg: rgba(255, 93, 188, 0.2);  --tile-ink: var(--c-pink); }
.icon-tile--green  { --tile-bg: rgba(53, 190, 94, 0.2);   --tile-ink: var(--c-green-500); }
.icon-tile--orange { --tile-bg: rgba(255, 114, 6, 0.2);   --tile-ink: var(--c-orange); }
.icon-tile--violet { --tile-bg: rgba(180, 65, 186, 0.2);  --tile-ink: var(--c-violet); }

/* ==========================================================================
   Cards
   Figma stat card: 400x312, r33, #fff, 2px #f1f1f1 border, 0 4px 79.3px rgba(0,0,0,.04)
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: var(--bw-base) solid #f1f1f1;
  border-radius: 33px;
  box-shadow: var(--sh-2xl);
  padding: 31px 38px 38px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
  border-color: var(--c-blue-a14);
}

/* Stat card: tile, big number, muted label. */
.stat-card {
  min-height: 312px;
  gap: var(--sp-5);
}

.stat-card__value {
  /* Figma: Inter SemiBold 64 / #000 */
  font-family: var(--ff-body);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-ink-strong);
  margin-top: auto;
}

.stat-card__label {
  /* Figma: Inter Regular 22 / #7c7c7c */
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  color: var(--c-ink-500);
  line-height: var(--lh-normal);
}

/* Feature card: tile, title, body copy. */
.feature-card {
  gap: var(--sp-5);
  height: 100%;
}

.feature-card__title {
  font-family: var(--ff-ui);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  color: var(--c-ink-strong);
}

.feature-card__body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-500);
}

.feature-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-target);
  font-family: var(--ff-ui);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
}

.feature-card__link svg,
.feature-card__link img {
  width: 20px;
  height: 20px;
  transition: transform var(--dur-base) var(--ease-out);
}

.feature-card__link:hover svg,
.feature-card__link:hover img {
  transform: translateX(4px);
}

/* Compact horizontal card (the "Keep exploring" rail). */
.mini-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background-color: var(--c-white);
  border: var(--bw-hairline) solid #f1f1f1;
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.mini-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.mini-card__title {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-1);
}

.mini-card__body {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--c-ink-500);
}

/* ==========================================================================
   Wave divider - the blue hero band ends in an organic curve.
   ========================================================================== */

.wave {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.wave--bottom {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;   /* avoid a hairline seam at fractional zoom */
  z-index: var(--z-content);
}

.wave--top {
  position: absolute;
  inset-inline: 0;
  top: -1px;
  z-index: var(--z-content);
}

/* ==========================================================================
   Footer
   Figma: dark band, logo + blurb left, five link columns, rule, bottom bar.
   ========================================================================== */

/* In the design the footer is not a band of its own: it is the bottom of the
   same dark panel the closing CTA sits on, with no seam between them. So the
   colour here is flat and is exactly where cta-band.svg ends (#090f1b). It used
   to be --g-midnight plus two 420px blurred brand blobs, which restarted the
   panel on a different, warmer dark and washed the top of the footer teal - a
   visible horizontal step right under the CTA. The blue and purple tints in the
   design come from the band SVG's own gradients, above this. */
.site-footer {
  position: relative;
  background-color: var(--c-dark-800);
  color: var(--c-white);
  padding-block: var(--sp-13) var(--sp-9);
}

/* Figma: a brand block, then five equal link columns, and no label ever wraps.
   The brand column used to take 1fr, which made it greedy and squeezed the link
   columns until four labels broke onto two lines.

   The widest label, "Recognition & Gamification", measures 253px, so the brand
   block is capped at 300px (the width its own blurb already wraps to) and the
   column gap is 24px. That leaves (1748 - 300 - 120) / 5 = 265px per column at
   the design width, which clears 253px. Below about 1800px the five columns
   cannot hold it at this type size and one or two labels wrap; the breakpoints
   below drop the column count before that gets tight. */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 300px) repeat(5, minmax(0, 1fr));
  gap: var(--sp-9) var(--sp-6);
}

.site-footer__brand img {
  width: 299px;
  height: 77px;
  margin-bottom: var(--sp-8);
}

.site-footer__blurb {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--c-white);
  max-width: 288px;
  margin-bottom: var(--sp-6);
}

.site-footer__origin {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  opacity: 0.55;
}

.footer-col__title {
  /* Figma: Poppins SemiBold 20 */
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  margin-bottom: var(--sp-6);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  color: var(--c-white);
  opacity: 0.86;
  transition: opacity var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.footer-col__link:hover {
  opacity: 1;
  color: var(--c-blue-100);
}

/* The "Start Free" item is highlighted in the design. */
.footer-col__link--accent {
  color: var(--c-blue-100);
  opacity: 1;
}

.site-footer__rule {
  height: 1px;
  border: 0;
  margin-block: var(--sp-9) var(--sp-7);
  background-color: var(--c-white);
  opacity: 0.25;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.site-footer__legal {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  opacity: 0.7;
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A button for Cookie Settings, a link for the rest, drawn identically. */
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--c-white);
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.site-footer__link:hover {
  opacity: 1;
  color: var(--c-blue-100);
}

.site-footer__badge img {
  /* 293x77, not 294: the Figma export carried a 1px vertical rule in its last
     column - the divider that used to separate the badge from the POPIA line -
     which read as a stray line floating at the right edge of the footer. */
  width: 293px;
  height: 77px;
}

/* ==========================================================================
   Cookie consent banner
   A non-blocking card pinned bottom-left: the page stays usable behind it, and
   nothing that needs consent runs until a choice is made.
   ========================================================================== */

.cookie-consent {
  position: fixed;
  inset-inline: var(--sp-6) auto;
  inset-block-end: var(--sp-6);
  z-index: var(--z-overlay);
  width: min(560px, calc(100% - var(--sp-6) * 2));
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7);
  background-color: var(--c-white);
  color: var(--c-ink-800);
  border: var(--bw-hairline) solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-drop);
}

.cookie-consent__title {
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.cookie-consent__text {
  font-family: var(--ff-body);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-ink-600);
}

.cookie-consent__text a {
  color: var(--c-blue-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent__prefs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.cookie-consent__prefs[hidden] {
  display: none;
}

.cookie-pref {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-surface-alt);
  border-radius: var(--r-xs);
  cursor: pointer;
}

.cookie-pref input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.cookie-pref input:disabled {
  cursor: not-allowed;
}

.cookie-pref__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cookie-pref__name {
  font-family: var(--ff-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.cookie-pref__desc {
  font-family: var(--ff-body);
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
  color: var(--c-ink-500);
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.cookie-consent__actions .btn {
  min-height: var(--tap-target);
  padding-inline: var(--sp-5);
  font-size: var(--fs-2xs);
}

.cookie-consent__actions [hidden] {
  display: none;
}

@media (max-width: 480px) {
  .cookie-consent {
    inset-inline: var(--sp-3);
    inset-block-end: var(--sp-3);
    width: auto;
  }

  .cookie-consent__panel {
    padding: var(--sp-5);
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cookie-consent__actions .btn {
    width: 100%;
  }

  /* Reject and Accept share the top row at equal weight; the secondary
     action takes the full row beneath them. */
  .cookie-consent__actions [data-consent-action="customise"],
  .cookie-consent__actions [data-consent-action="save"] {
    grid-column: 1 / -1;
    order: 1;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1400px) {
  .nav__list {
    gap: var(--sp-5);
  }

  .nav__logo img {
    width: 200px;
    height: 37px;
  }

}

/* Five link columns need about 1800px: the widest label is 253px and below
   that the track cannot hold it, so labels start breaking onto two lines and
   the whole footer goes ragged. Three columns instead, with the brand spanning
   both link rows so the fourth and fifth groups sit under the first three
   rather than under the logo. */
@media (max-width: 1800px) {
  .site-footer__top {
    grid-template-columns: minmax(220px, 300px) repeat(3, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-row: span 2;
  }
}

@media (max-width: 1024px) {
  /* The brand takes its own full-width row and the five groups go two up. */
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}

/* The desktop bar is logo + three links + two buttons, which needs about
   1010px of content column; below that the actions run off the right edge.
   The drawer takes over at 1050. This was 1150 while Blogs was in the bar -
   if SHOW_BLOGS is turned back on in tools/build-chrome.py, raise it again.
   Keep this figure in step with the matchMedia queries in js/main.js. */
@media (max-width: 1050px) {
  .nav__list,
  .nav__actions .btn {
    display: none;
  }

  /* .nav__list carried the auto margins that spread this row, so hiding it left
     the logo and the toggle sitting side by side one gap apart, in from the left
     edge. The toggle's own margin-inline-start could not fix that: .nav__actions
     is flex:0 0 auto, so there was no free space inside it to absorb. Push the
     actions box itself instead. */
  .nav__actions {
    margin-inline-start: auto;
  }

  .nav__toggle {
    display: block;
  }

  .nav__logo img {
    width: 200px;
    height: 37px;
  }
}

@media (max-width: 768px) {
  .nav__logo img {
    width: 176px;
    height: 33px;
  }

  .card {
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
    border-radius: var(--r-md);
  }

  .stat-card {
    min-height: 0;
  }

  .stat-card__value,
  .stat-card__label {
    padding-inline-start: 0;
  }

  .icon-tile {
    width: 72px;
    height: 77px;
    border-radius: 24px;
  }

  .icon-tile img,
  .icon-tile svg {
    width: 40px;
    height: 40px;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .site-footer__brand img {
    width: 220px;
    height: 57px;
    margin-bottom: var(--sp-6);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .site-footer__badge img {
    width: 240px;
    height: 63px;
  }

  .btn {
    min-height: 52px;
    font-size: var(--fs-base);
  }
}

@media (max-width: 480px) {
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .mini-card {
    flex-direction: column;
  }
}

/* ==========================================================================
   Shared page blocks - used by more than one page, so they live here rather
   than in any single page stylesheet.
   ========================================================================== */

/* ---------- Accent spans inside headings ---------------------------------- */
.accent--blue  { color: var(--c-blue-600); }
.accent--green { color: var(--c-green-500); }
.accent--pink  { color: var(--c-pink); }
.accent--teal  { color: var(--c-blue-500); }

/* ==========================================================================
   Why choose LivexFlow
   ========================================================================== */

.why {
  padding-block: var(--sp-15) var(--sp-14);
}

/* Figma gap between the 400px cards is 49px. */
.why__grid {
  gap: 49px;
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */

.cta {
  position: relative;
  padding-block: 260px 200px;
  margin-top: -80px;
  color: var(--c-white);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  /* No background here: the band SVG is transparent above its wave edge, so
     the white section above must show through. The SVG supplies the dark. */
}

/* Wave top edge + the teal curve that crosses it, both from Figma. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image: url("../assets/shapes/cta-curve.svg"),
                    url("../assets/shapes/cta-band.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: center top 18px, center top;
  background-size: 88% auto, 100% 100%;
}

.cta__inner {
  position: relative;
  z-index: var(--z-content);
}

.cta__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin-bottom: var(--sp-8);
}

/* Shared responsive overrides for the blocks above. */
@media (max-width: 1400px) {
  .why__grid { gap: var(--sp-7); }
}

@media (max-width: 768px) {
  .why { padding-block: var(--sp-13); }

  .cta {
    padding-block: 180px 120px;
    margin-top: -40px;
  }

  .cta::before {
    background-size: 140% auto, 200% 100%;
  }
}

/* ==========================================================================
   Page blocks reused across the hero-led feature pages.
   Every frame except Pricing opens on the blue hero band, and most repeat the
   pricing preview, the how-it-works figure and the keep-exploring rail.
   ========================================================================== */

/* ==========================================================================
   Hero
   Figma: gradient band 2135x1790 that ends in a wave; headline at y242,
   Nunito Bold 75 / 1.1 white; lede Inter Regular 29; glass media frame
   1392x845 r38 at 10% white with the 1331x782 screenshot inset 30px.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--header-height) + 100px);
  padding-bottom: 200px;
  color: var(--c-white);
  isolation: isolate;
  overflow: hidden;
}

/* The exported Figma shape carries both the gradient and the wave edge. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image: url("../assets/shapes/hero-band.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
}

.hero__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin-bottom: var(--sp-6);
}

.hero__lede {
  /* Figma: Inter Regular 29 / white, 1121px wide */
  font-family: var(--ff-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  color: var(--c-white);
  max-width: 1121px;
  margin-inline: auto;
}

/* Glass frame around the product screenshot. */
.hero__media {
  margin-top: 114px;
  padding: 30px;
  border-radius: var(--r-xl);
  background-color: var(--c-white-a10);
  max-width: 1392px;
  margin-inline: auto;
}

.hero__media img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.hero__note {
  margin-top: 84px;
  font-family: var(--ff-body);
  font-size: 30px;
  line-height: var(--lh-normal);
  color: var(--c-white);
}

.hero__note strong {
  font-weight: var(--fw-bold);
}

.hero__actions {
  margin-top: var(--sp-8);
}

/* Outline rings scattered over the hero in the source. */
.hero__ring {
  border-width: var(--bw-base);
}

.hero__ring--a { width: 120px; height: 120px; top: 3px;   left: 177px; }
.hero__ring--b { width: 34px;  height: 34px;  top: 475px; left: 130px; }
.hero__ring--c { width: 120px; height: 120px; top: 308px; right: 180px; }

/* ==========================================================================
   How LivexFlow Works
   ========================================================================== */

.how__lede {
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  color: var(--c-ink-strong);
}

.how__media {
  margin: 0;
}

/* ==========================================================================
   Pricing preview
   ========================================================================== */

.plan-grid {
  gap: 36px;
  align-items: stretch;
}

/* Figma: 419x461 r55, #f8f8f8; Pro inverted on #090d2d. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-9) var(--sp-8) var(--sp-8);
  border-radius: 55px;
  background-color: var(--c-surface-alt);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
}

.plan__tier {
  /* Figma: Inter SemiBold 20 / #09b5c8, uppercase with wide tracking */
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-blue-500);
  text-align: right;
  margin-bottom: var(--sp-9);
}

.plan__price {
  /* Figma: Inter SemiBold 80 */
  font-family: var(--ff-body);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-4);
}

.plan__desc {
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-8);
}

.plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: auto;
  padding-inline: var(--sp-6);
  border-radius: var(--r-pill);
  background-color: var(--c-surface-alt-2);
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  color: var(--c-ink-strong);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.plan__cta:hover {
  background-color: var(--c-blue-600);
  color: var(--c-white);
}

.plan--featured {
  background-color: var(--c-dark-navy);
}

.plan--featured .plan__tier { color: var(--c-white); }
.plan--featured .plan__price,
.plan--featured .plan__desc { color: var(--c-white); }

.plan--featured .plan__cta {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
}

.plan--featured .plan__cta:hover {
  background-color: var(--c-white);
  color: var(--c-dark-navy);
}

.plan__badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-6);
  border-radius: var(--r-pill);
  background-color: var(--c-pink);
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  white-space: nowrap;
}

/* ==========================================================================
   Keep exploring
   ========================================================================== */

.keep-exploring__lede {
  max-width: 673px;
}

.keep-exploring__grid {
  gap: var(--sp-7);
}

.keep-exploring__grid > li {
  display: flex;
}

.keep-exploring .mini-card {
  width: 100%;
}

/* Responsive for the reused page blocks above. */
@media (max-width: 1400px) {
  .plan-grid { gap: var(--sp-6); }
}

@media (max-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-height) + 56px);
    padding-bottom: 140px;
  }

  .hero__media { margin-top: var(--sp-11); padding: 18px; }
  .hero__note  { margin-top: var(--sp-10); font-size: var(--fs-lg); }

  .plan { border-radius: var(--r-xl); }
}

@media (max-width: 768px) {
  .hero {
    padding-bottom: 96px;
    text-align: center;
  }

  .hero::before {
    /* the wave flattens out at narrow widths, so stretch rather than crop */
    background-size: 160% 100%;
  }

  .plan__tier { text-align: left; margin-bottom: var(--sp-6); }
}

@media (max-width: 480px) {
  .hero__media { padding: 10px; border-radius: var(--r-md); }
  .hero__media img { border-radius: var(--r-xs); }
  .hero__note { font-size: var(--fs-base); }

  .plan { padding: var(--sp-8) var(--sp-6) var(--sp-7); }
  .plan__price { font-size: 56px; }
}

/* ==========================================================================
   Feature-page section patterns
   The 17 feature frames are built from the same vocabulary: a tick list, a
   row of coloured pills, a blue band of four cards, and a constellation of
   features flanking an image. Defined once here.
   ========================================================================== */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--c-ink-strong);
}

.checklist__item strong {
  font-weight: var(--fw-semibold);
}

/* Green tick drawn in CSS - a checkmark, matching the source. */
.checklist__tick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  position: relative;
}

.checklist__tick::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1px;
  width: 7px;
  height: 13px;
  border: solid var(--c-green-500);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}


.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-12);
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--sp-8);
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

.pill--pink  { background-color: var(--c-pink); }
.pill--green { background-color: var(--c-green-500); }
.pill--blue  { background-color: var(--c-blue-600); }
.pill--orange { background-color: var(--c-orange); }


/* ==========================================================================
   Twenty-one modules - blue band
   ========================================================================== */

.spine {
  position: relative;
  padding-block: var(--sp-14);
  color: var(--c-white);
  isolation: isolate;
  overflow: hidden;
}

.spine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image: url("../assets/shapes/blue-band.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.spine__title,
.spine__lede {
  color: var(--c-white);
}

.spine__title {
  /* Figma: Nunito Bold 70, sits on a single line at 1305px */
  font-size: var(--fs-display-md);
}

.spine__lede {
  max-width: 1184px;
}

/* Figma: 704x313 cards, r29, 64px column gap. */
.spine__grid {
  gap: var(--sp-8) 64px;
}

.spine-card {
  gap: var(--sp-5);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-8) var(--sp-8);
}

.spine-card__title {
  /* Figma: Poppins SemiBold 25 / #010101 */
  font-family: var(--ff-ui);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  color: var(--c-ink);
}

.spine-card__body {
  /* Figma: Poppins Light 18 / #313131 */
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-ink-700);
}

/* ==========================================================================
   Plus, everything - features flanking the team photo
   ========================================================================== */

.everything__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-9) var(--sp-8);
}

.everything__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The lone "Access & permissions" item sits under the photo in the source. */
.everything__col--center {
  grid-column: 2;
  align-items: center;
  text-align: left;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.feature__title {
  /* Figma: Poppins SemiBold 25 */
  font-family: var(--ff-ui);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}

.feature__body {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-ink-700);
}

/* Photo masked into the organic blob shape from the design. */
.everything__media {
  grid-row: 1 / span 1;
  grid-column: 2;
  margin: 0;
  position: relative;
}

.everything__media img {
  width: 100%;
  height: auto;
  border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
  border: var(--bw-base) solid var(--c-blue-a25);
}

/* Responsive for the feature-page patterns above. */
@media (max-width: 1400px) {
  .spine__grid { gap: var(--sp-7); }
}

@media (max-width: 1024px) {
  /* Photo drops out of the middle column; features become two columns. */
  .everything__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .everything__media {
    grid-column: 1 / -1;
    grid-row: auto;
    max-width: 520px;
    margin-inline: auto;
  }

  .everything__col--center {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .everything__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .everything__col { gap: var(--sp-8); }

  .pill-row { gap: var(--sp-3); }

  .pill {
    min-height: var(--tap-target);
    padding-inline: var(--sp-5);
    font-size: var(--fs-base);
  }
}

/* ==========================================================================
   Walkthrough player
   Figma framed the walkthrough inside a laptop mockup image. The video itself
   already carries a laptop and LivexFlow branding, so the mockup was a second
   frame around the first; it is gone and the video stands on its own.

   A 16:9 panel, centred and capped below the content column so it reads as a
   focal point rather than a full-bleed band, with a brand-gradient glow behind
   it and a click-to-play cover over the poster. The cover only appears once JS
   has marked the player enhanced, so with JS off the native controls are never
   blocked.
   ========================================================================== */

.video-player {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: var(--r-md);
  isolation: isolate;
}

/* The glow sits behind and slightly below the panel, so the video appears to
   lift off the white section rather than sit flat on it. */
.video-player::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 5% -4%;
  border-radius: var(--r-3xl);
  background: var(--g-hero-diag);
  opacity: 0.32;
  filter: blur(56px);
}

.video-player__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--c-dark-navy);
  border: 0;
  border-radius: inherit;
  box-shadow: var(--sh-sm), 0 28px 64px rgba(9, 13, 45, 0.22);
}

/* Click-to-play cover. Hidden until main.js adds --enhanced, because without
   JS nothing would dismiss it and it would swallow clicks on the controls. */
.video-player__cover {
  display: none;
}

.video-player--enhanced .video-player__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  color: var(--c-white);
  font-family: var(--ff-ui);
  text-align: center;
  cursor: pointer;
  /* Light and even. The video's first frames are brand blue with the product
     in the middle, and anything heavier turned that muddy. The caption carries
     its own band, so the scrim only has to lift the play button off the shot. */
  background: rgba(0, 43, 74, 0.18);
  transition: background 0.3s ease, opacity 0.35s ease, visibility 0.35s ease;
}

.video-player--enhanced .video-player__cover:hover,
.video-player--enhanced .video-player__cover:focus-visible {
  background: rgba(0, 43, 74, 0.08);
}

.video-player--enhanced .video-player__cover:focus-visible {
  outline: var(--bw-heavy) solid var(--c-white);
  outline-offset: calc(var(--bw-heavy) * -2);
}

/* Once playback starts the cover leaves for good and native controls take
   over. It comes back when the video ends, so the section resets itself. */
.video-player.is-playing .video-player__cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-player__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: var(--r-circle);
  background: var(--c-white);
  box-shadow: 0 10px 34px rgba(0, 43, 74, 0.34);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease;
}

/* Two rings pulsing outward from the button, the one bit of motion in the
   section: enough to read as "press me" without pulling focus off the copy. */
.video-player__button::before,
.video-player__button::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 104px;
  height: 104px;
  margin: auto;
  border-radius: var(--r-circle);
  border: var(--bw-base) solid var(--c-white-a46);
  animation: video-pulse 2.8s ease-out infinite;
}

.video-player__button::after {
  animation-delay: 1.4s;
}

.video-player__button svg {
  /* Nudged right: the triangle's visual centre sits left of its box. */
  margin-left: 6px;
  color: var(--c-blue-900);
}

.video-player--enhanced .video-player__cover:hover .video-player__button,
.video-player--enhanced .video-player__cover:focus-visible .video-player__button {
  transform: scale(1.08);
  box-shadow: 0 14px 44px rgba(0, 43, 74, 0.42);
}

/* The caption rides the foot of the frame rather than sitting next to the
   button. Centred it landed in the middle of the product screenshot and was
   unreadable; down here it gets its own gradient band, and the band is also
   where the native controls appear once playback starts, so the two never
   share the space. */
.video-player__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-11) var(--sp-6) var(--sp-6);
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: linear-gradient(
    180deg,
    rgba(2, 20, 38, 0) 0%,
    rgba(2, 20, 38, 0.62) 60%,
    rgba(2, 20, 38, 0.86) 100%
  );
}

.video-player__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  text-shadow: 0 2px 12px rgba(0, 43, 74, 0.45);
}

.video-player__meta {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-white-a77);
  text-shadow: 0 2px 12px rgba(0, 43, 74, 0.45);
}

@keyframes video-pulse {
  from { transform: scale(1);   opacity: 0.85; }
  to   { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 768px) {
  .video-player__button,
  .video-player__button::before,
  .video-player__button::after {
    width: 76px;
    height: 76px;
  }

  .video-player__title { font-size: var(--fs-md); }
}

@media (max-width: 480px) {
  .video-player::before { display: none; }

  .video-player__caption {
    padding: var(--sp-8) var(--sp-4) var(--sp-4);
  }

  .video-player__meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .video-player__button::before,
  .video-player__button::after {
    animation: none;
    opacity: 0;
  }

  .video-player--enhanced .video-player__cover .video-player__button {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   Features mega menu
   The design draws "Features" as one link, which strands sixteen of the
   seventeen feature pages in the footer. The link still leads to Projects &
   Setup; this adds a menu so the rest are reachable from the header.
   ========================================================================== */

.nav {
  position: relative;   /* the mega centres on this, not on the item */
}

.nav__item {
  position: static;
  display: flex;
  align-items: center;
}

.nav__caret {
  margin-left: var(--sp-2);
  transition: transform var(--dur-base) var(--ease-out);
}

[aria-expanded="true"] > .nav__caret {
  transform: rotate(180deg);
}

.mega {
  position: absolute;
  top: calc(100% + var(--sp-3));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: var(--z-overlay);
  width: max-content;
  max-width: min(1100px, 100%);
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background-color: var(--c-white);
  box-shadow: var(--sh-drop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}

.mega[hidden] {
  display: block;   /* animated, so visibility does the hiding, not display */
}

.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out), visibility 0s;
}

.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-7);
}

.mega__heading {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  margin-bottom: var(--sp-4);
}

.mega__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-xs);
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--c-ink-700);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.mega__link:hover {
  background-color: var(--c-blue-a08);
  color: var(--c-blue-600);
}

.mega__link.is-current {
  color: var(--c-blue-600);
  font-weight: var(--fw-semibold);
}

/* ---------- Drawer disclosure ---------------------------------------------- */
.nav__disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

.nav__submenu {
  padding: var(--sp-2) 0 var(--sp-4) var(--sp-4);
}

.nav__submenu[hidden] {
  display: none;
}

.nav__submenu .mega__heading {
  color: var(--c-white-a71);
  margin-top: var(--sp-4);
}

.nav__submenu .mega__link {
  color: var(--c-white);
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
}

.nav__submenu .mega__link:hover,
.nav__submenu .mega__link.is-current {
  background-color: var(--c-white-a21);
  color: var(--c-white);
}

@media (max-width: 1050px) {
  /* the desktop menu never opens once the drawer takes over */
  .nav__list .mega { display: none; }
}