/* Marketing-only components — the mega-nav, mobile menu, footer, hero
   capture, CTA band, pricing tiers and the comparison table. Split out of
   components.css because 31 app pages were downloading all of it and can
   never match a selector in it. */

.nav__row{ display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); gap: var(--space-4); }
.nav__links{ display: flex; align-items: center; gap: var(--space-6); }
.nav__link{ font-size: var(--text-small); font-weight: 600; color: var(--ink-700); transition: color var(--dur-fast) var(--ease-out); }
.nav__link:hover{ color: var(--blue-600); }
.nav__actions{ display: flex; align-items: center; gap: var(--space-4); }
.nav__toggle{ display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav__toggle svg{ width: 22px; height: 22px; }

@media (max-width: 860px){
  .nav__links{ display: none; }
  .nav__actions .btn{ display: none; }
  .nav__toggle{ display: inline-flex; }
}

.nav__item{ position: relative; }
.nav__link--dropdown{
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 0;
}
.nav__link--dropdown svg{ width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.nav__item:hover .nav__link--dropdown svg,
.nav__item:focus-within .nav__link--dropdown svg{ transform: rotate(180deg); }

.nav__dropdown{
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 600px; max-width: 88vw;
  background: var(--white); border: var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-5);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  z-index: 110;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav__item::after{
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px;
}
.nav__dropdown::before{
  content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
}
.nav__dropdown-item{
  display: flex; flex-direction: column; gap: 4px; padding: var(--space-4);
  border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease-out);
  text-align: left;
}
.nav__dropdown-item:hover{ background: var(--blue-50); }
.nav__dropdown-item__icon{
  width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: 2px; flex-shrink: 0;
}
.nav__dropdown-item__icon svg{ width: 18px; height: 18px; }
.nav__dropdown-item__title{ font-size: var(--text-small); font-weight: 700; color: var(--ink-900); }
.nav__dropdown-item__desc{ font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.4; }

.nav__dropdown--wide{ width: 780px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.nav__dropdown--wide .nav__dropdown-item{ padding: var(--space-3) var(--space-4); }
.nav__dropdown--wide .nav__dropdown-item__desc{ display: none; }
/* Group headings inside the Solutions mega-menu. The list was flat — twelve
   industries in one run — which asks a visitor to scan all twelve before
   working out which half is even aimed at them. Split Personal from Business
   and it maps onto the ladder: Personal is the household tier, Business is the
   seat tiers. grid-column: 1/-1 makes the heading span the whole dropdown grid
   rather than sitting in a column like an item. */
.nav__dropdown__group{
  grid-column: 1 / -1; margin-top: var(--space-3); padding: 0 var(--space-4) var(--space-2);
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
}
.nav__dropdown__group:first-child{ margin-top: 0; }
.nav__dropdown__all{
  grid-column: 1 / -1; margin-top: var(--space-2); padding-top: var(--space-3);
  border-top: var(--border-hairline); display: flex; justify-content: center;
}

@media (max-width: 860px){
  .nav__dropdown, .nav__item::after{ display: none; }
}

.mobile-menu{
  position: fixed; inset: 0; z-index: 150;
  background: var(--white);
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--container-pad) var(--space-8);
  transform: translateY(-8px);
  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);
}
.mobile-menu.is-open{
  opacity: 1; transform: translateY(0); visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-menu__top{ display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); }
.mobile-menu__links{ display: flex; flex-direction: column; margin-top: var(--space-6); }
.mobile-menu__links a{ font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; padding-block: var(--space-4); border-bottom: var(--border-hairline); }
.mobile-menu__actions{ margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); }
body.menu-open{ overflow: hidden; }

.footer{ background: var(--surface-sunken); color: var(--text-secondary); border-top: var(--border-hairline); }
.footer a{ color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.footer a:hover{ color: var(--blue-600); }
.footer__grid{ display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-8); }
.footer__col-title{ color: var(--ink-900); font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: var(--space-4); }
.footer__links{ display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-small); }
.footer__bottom{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-11); padding-top: var(--space-6); border-top: var(--border-hairline);
  font-size: var(--text-micro);
}
.footer__lang{ display: flex; gap: var(--space-2); }
.footer__lang button{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 28px; padding: 0 var(--space-2);
  border: var(--border-hairline); border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-micro); font-weight: 600; color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer__lang button:hover{ color: var(--ink-900); border-color: var(--ink-300); }
.footer__lang button[aria-current="true"]{
  color: var(--ink-900); border-color: var(--ink-900); background: var(--surface-sunken);
}
.footer .logo[data-surface="dark"] .logo-mark__bar{ stroke: var(--blue-600); }
.footer .logo[data-surface="dark"] .logo-mark__bar--tall{ stroke: var(--orange-500); }
.footer .logo[data-surface="dark"] .logo__kudu{ color: var(--blue-600); }
.footer .logo[data-surface="dark"] .logo__doc{ color: var(--orange-500); }
@media (max-width: 900px){ .footer__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .footer__grid{ grid-template-columns: minmax(0,1fr); gap: var(--space-6); } }

.utility-bar{ background: var(--blue-50); color: var(--blue-700); font-size: var(--text-micro); font-weight: 600; }
.utility-bar__row{ display: flex; align-items: center; justify-content: center; gap: 8px; padding-block: 7px; text-align: center; }
.utility-bar a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.utility-bar a:hover{ color: var(--blue-600); }

.hero-form{ display: flex; gap: var(--space-3); max-width: 480px; margin-top: var(--space-7); flex-wrap: wrap; }
.hero-form .input{ flex: 1 1 220px; min-width: 0; height: 50px; border: none; background: var(--white); }
.hero-form .btn{ flex: 0 0 auto; }

.cta-band__row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.cta-band__row h2{ max-width: 560px; }
.cta-band__actions{ display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* ---- Hero reading order on small screens ----------------------------------
   components.css collapses every .split to one column under 900px and puts
   .split__media first, which suits a mid-page section where the picture
   introduces the point. In a hero it is backwards: measured on index.html at
   375px, the h1 sat 900px down the page while the mock sat at 277px, so a
   visitor scrolled most of a screen of picture before reading what we do.
   Ten of eleven hero pages use .split, and 75.6% of South Africans reach the
   internet by phone, so this is the majority experience of the site.

   components.css sets that order with !important and is off limits, so this
   needs !important too — the extra selector raises specificity and this file
   loads after it.

   Matched on the SECTION, not on a grid class. The obvious version of this fix
   targets .hero__grid, but only 3 of our 12 hero splits carry a grid class at
   all — the rest are a bare `container split`, so a grid-class selector fixes
   index.html and silently leaves personal.html, ai.html, forms.html and the
   rest broken. Every hero section here is classed *-hero (13 of them: hero,
   ai-hero, pe-hero, pf-hero, wf-hero, di-hero, lg-hero, pd-hero, tools-hero,
   trust-hero, pricing-hero), and checked: nothing classed "hero" is anything
   other than a hero. That catches all 10 hero splits and leaves the other 25
   mid-page splits on the media-first order they were designed for. */
@media (max-width: 900px){
  section[class*="hero"] .split__body{ order: 1 !important; }
  section[class*="hero"] .split__media{ order: 2 !important; }
}

/* ---- Feature card ---------------------------------------------------------
   components.css sets padding-bottom:0 and squares off the bottom corners of
   the mock inside, so the mock bleeds off the card edge. It does not read as a
   bleed, it reads as a mistake: the list inside is cut mid-row, and the card's
   own rounded corners show around a square-cornered white panel. Because the
   card is overflow:hidden the child is clipped rather than escaping — which is
   why an automated overflow check calls this clean while an eye calls it
   broken. That is the trap: the audit cannot see it.

   So the mock finishes inside the card, on the same padding as every other
   side, and gets its bottom corners and border back.

   Same rule settles the other half of it: the heading-to-body gap hung on
   .feature-card__desc, so a card written with a bare <p> got 0px where an
   identical-looking neighbour got 12px. --row pads all four sides itself. */
.feature-card:not(.feature-card--row){ padding-bottom: var(--space-8); }
.feature-card > h3 + p{ margin-top: var(--space-3); }
.feature-card__visual .doc-window,
.feature-card__visual .card{
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  border-bottom: var(--border-hairline);
}

/* ---- Section head ---------------------------------------------------------
   .section-head--center was declared, byte for byte identical, in NINE page
   stylesheets — and a page loading a tenth got none of them. Measured here:
   pricing.html had three centred section heads sitting left-aligned and
   404.html one, and nothing looked broken enough for anyone to notice.
   It belongs in the file every marketing page loads. Page sheets that want a
   different measure still set their own .section-head width after this. */
.section-head--center{ margin-inline: auto; text-align: center; }

/* ---- Tap targets ----------------------------------------------------------
   WCAG 2.5.8 sets a 24×24 minimum for anything not inline in a sentence.
   Measured at 375px with layout-audit: 1946 findings, and 1848 of them were
   one shape — 335×22 — because .footer__links styles the column but never the
   anchors inside it, so every footer link sat on a bare 22px line box. Two
   pixels short, on 87 pages, on the width most of our visitors use.

   inline-flex + min-height rather than padding: the link grows into the
   column's existing space-3 gap instead of pushing the rows apart, so nothing
   in the footer moves. The nav links already use exactly this pattern. */
.footer__links a{ display: inline-flex; align-items: center; min-height: 24px; }
.nav__link{ display: inline-flex; align-items: center; min-height: 24px; }