/* ============================================================
   NGUMA MARKETING SHELL
   ============================================================
   Shared stylesheet for all pre-auth pages (pricing, signup,
   login, checkout, thank-you). Mirrors the nguma.au marketing
   site's tokens, nav, container, and footer so the pre-auth
   surface is visually continuous with the public website.

   This file is the canonical pre-auth shell. Page-local styles
   sit in <page-name>.css alongside it and use the p-* prefix.

   Tokens are unprefixed (--navy, --gold) to match the nguma.au
   site rather than the app's --nguma-* tokens. The values are
   identical; the names diverge only because the marketing site
   was authored before the app's token namespace was settled.
   ============================================================ */

:root {
  --navy:       #023366;
  --navy-deep:  #011F42;
  --navy-mid:   #02285A;
  --navy-light: #1A5299;
  --gold:       #C04511;
  --gold-light: #D4591E;
  --gold-pale:  #FAEEE9;
  --gold-btn:   #C04511;
  --cream:      #F4F4F4;
  --teal:       #A9C9B6;
  --teal-deep:  #3F7A6B;
  --teal-pale:  #EAF3EE;
  --white:      #FFFFFF;
  --ink:        #0D1E35;
  --ink-mid:    #374151;
  --ink-light:  #6B7280;
  --border:     #E5E7EB;
  --border-soft:#EEF1F4;

  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(2,51,102,0.10), 0 2px 6px rgba(2,51,102,0.06);
  --shadow-lg:  0 12px 40px rgba(2,51,102,0.15), 0 4px 12px rgba(2,51,102,0.08);

  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===== Container ===== */
.ng-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; text-align: left; }

/* ===== Skip link ===== */
.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--navy); color: white;
  padding: 8px 16px; border-radius: 0 0 8px 8px;
  font-size: 14px; z-index: 10000; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ===== Top navigation ===== */
.ng-nav {
  position: sticky; top: 0; z-index: 100;
}
.ng-nav__bg {
  position: absolute; inset: 0;
  background-color: #ffffff; border-bottom: 2px solid var(--navy);
  z-index: 0; pointer-events: none;
  transition: box-shadow var(--transition);
}
.ng-nav.scrolled .ng-nav__bg { box-shadow: 0 4px 20px rgba(2,51,102,0.12); }
.ng-nav__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; gap: 32px;
}
.ng-nav__logo img { height: 56px; width: auto; display: block; }
/* NOT USED IN PRICING */
.ng-nav__cta { display: flex; align-items: center; gap: 10px; }

/* Marketing nav buttons. These are the pre-auth equivalents of
   the app's c-button classes. They look identical to the app's
   buttons but are visually anchored to the marketing tokens. */
.btn-nav-outline {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--navy);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--radius-sm);
  text-decoration: none; border: 1.5px solid var(--navy);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap; cursor: pointer;
}
.btn-nav-outline:hover { background: var(--navy); color: white; }
.btn-nav-solid {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-btn); color: white;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 10px 20px; border-radius: var(--radius-sm);
  text-decoration: none; border: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-nav-solid:hover { background: #A83B0E; transform: translateY(-1px); }
/* Navy-fill button. Used for CTAs that sit on light backgrounds where
   gold would clash (procurement panels, section-level CTAs). */
.btn-nav-navy {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy); color: var(--white);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: var(--radius-sm);
  text-decoration: none; border: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-nav-navy:hover { background: #012347; transform: translateY(-1px); }
.btn-nav-navy svg { height: 16px; width: 16px; flex-shrink: 0; }

/* Hamburger + mobile menu */
.ng-nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.ng-nav__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.ng-nav__mobile {
  display: none; position: fixed; top: 80px; left: 0; right: 0;
  background: var(--navy-deep); padding: 16px 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-direction: column; gap: 8px; z-index: 9998;
}
.ng-nav__mobile.open { display: flex; }
.ng-nav__mobile a {
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,0.85); text-decoration: none;
  padding: 12px 16px; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.ng-nav__mobile a:hover { background: rgba(255,255,255,0.08); color: white; }
.ng-nav__mobile .btn-nav-solid { justify-content: center; padding: 14px; margin-top: 4px; }
.ng-nav__mobile .btn-nav-outline {
  justify-content: center; padding: 14px;
  color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.30);
}
.ng-nav__mobile .btn-nav-outline:hover { background: rgba(255,255,255,0.08); color: white; }
@media (max-width: 768px) {
  .ng-nav__cta { display: none; }
  .ng-nav__hamburger { display: flex; }
}

/* ===== Minimal nav variant =====
   Used on signup, login, checkout: no nav links, just logo +
   Back-to-site link. Keeps the user focused on the auth flow
   without offering escape routes that lose context. */
.ng-nav--minimal .ng-nav__cta a:not(.btn-nav-outline) { display: none; }

/* ===== Section eyebrows and headings (shared with marketing site) ===== */
.section-eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
/* On-dark variant — teal animated pill for use in navy hero regions.
   The pulsing dot is the same animation used on .ng-eyebrow-badge
   but adapted for a teal-on-dark context. */
.section-eyebrow--on-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(169, 201, 182, 0.15);
  border: 1px solid rgba(169, 201, 182, 0.35);
  color: var(--teal);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.section-eyebrow--on-dark::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--teal);
  border-radius: 50%;
  animation: ng-pulse-dot 2s infinite;
  flex-shrink: 0;
}
.section-headline {
  font-family: var(--font-display); font-size: 44px; font-weight: 600;
  color: var(--navy); line-height: 1.15; letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.section-headline em { font-style: italic; color: var(--navy); }
/* Sub-section heading — 28px Lora, for tabbed panel heads and
   callout headlines within a section. Smaller than section-headline
   but shares the same display typeface and navy colour. */
.section-headline--sm {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
}
/* Hero variant — white on dark backgrounds. Fluid size prevents
   long headlines breaking on mid-width viewports. Used on every
   page with a full-bleed navy hero region. */
.section-headline--hero {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.10;
  max-width: 1100px;
}
.section-headline--hero em { color: var(--teal); }
.section-sub { font-size: 17px; color: var(--ink-mid); line-height: 1.7; max-width: 600px; }
/* On-dark variant — white/70% for use in navy hero regions. Wider
   max-width because the surrounding container is generally full-bleed. */
.section-sub--on-dark {
  color: rgba(255, 255, 255, 0.70);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.65;
  max-width: 820px;
}
@media (max-width: 768px) {
  .section-headline { font-size: 32px; }
  .section-headline--sm { font-size: 24px; }
}

/* ===== Footer ===== */
.ng-footer { background: var(--ink); padding: 56px 0 0; }
.ng-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1.4fr 0.8fr;
  gap: 48px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ng-footer__brand-name {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  color: white; margin-bottom: 12px;
}
.ng-footer__brand p { font-size: 14px; color: rgba(255,255,255,0.40); line-height: 1.7; max-width: 280px; }
.ng-footer__contact { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ng-footer__contact a {
  font-size: 13px; color: rgba(255,255,255,0.50); text-decoration: none;
  display: flex; align-items: center; gap: 8px; transition: color var(--transition);
}
.ng-footer__contact a:hover { color: white; }
.ng-footer__contact a svg { color: #E0875C; flex-shrink: 0; }
.ng-footer__col h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.50); margin-bottom: 14px;
}
.ng-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ng-footer__col ul a {
  font-size: 14px; color: rgba(255,255,255,0.50); text-decoration: none;
  transition: color var(--transition);
}
.ng-footer__col ul a:hover { color: white; }
.ng-footer__partners {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ng-footer__partners-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
  text-align: center; margin-bottom: 20px;
}
.ng-footer__partners-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.ng-footer__partners-logos img {
  height: 56px; width: auto;
  opacity: 0.90;
  transition: opacity 0.2s;
}
.ng-footer__partners-logos img:hover { opacity: 1; }
.ng-footer__bottom {
  padding: 20px 0; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.ng-footer__bottom p { font-size: 12px; color: rgba(255,255,255,0.50); }
.ng-footer__bottom a { color: rgba(255,255,255,0.40); text-decoration: none; }
.ng-footer__bottom a:hover { color: rgba(255,255,255,0.70); }
@media (max-width: 860px) { .ng-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) {
  .ng-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .ng-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* Minimal footer variant — pre-auth pages (signup, login, checkout).
   Shows only the bottom bar; hides the grid, partners strip, and brand block.
   Keeps legal links and copyright visible without the full marketing footer. */
.ng-footer--minimal .ng-footer__grid,
.ng-footer--minimal .ng-footer__partners { display: none; }

/* ============================================================
   PRE-AUTH PAGE PRIMITIVES
   ============================================================
   Shared two-column layout, eyebrow badges, benefit lists, form
   primitives, Acknowledgement strip. Used by signup, login,
   checkout, contact-sales. Mirrors the patterns established in
   nguma.au/register/.

   Convention: prefixed `ng-` because these are part of the
   marketing shell, not page-local. Pages opt in via class
   composition; nothing here is auto-applied.
   ============================================================ */

/* ===== Two-column layout =====
   Left column: 1fr (sidebar, value reinforcement).
   Right column: 1.6fr (the form card, dominant element).
   On narrow viewports, stacks to single column. */
/* NOT USED IN PRICING */
.ng-pre-auth-page {
  background: var(--cream);
  /* Top padding matches the marketing nav's bottom edge plus a
     comfortable breathing space; previously 120px which was
     visibly too generous and pushed the form below the fold on
     desktop. 56px sits right under the nav with enough air to
     read as a separate region, no wasted vertical space. */
  padding: 56px 0 80px;
  min-height: 100vh;
}
/* NOT USED IN PRICING */
.ng-pre-auth-page__layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
/* NOT USED IN PRICING */
.ng-pre-auth-page__sidebar {
  /* Empty rule retained for future sidebar-level styling. */
}
/* NOT USED IN PRICING */
.ng-pre-auth-page__card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: 0 32px 80px rgba(2,51,102,0.25);
}
@media (max-width: 860px) {
  .ng-pre-auth-page { padding: 40px 0 56px; }
  .ng-pre-auth-page__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 560px) {
  .ng-pre-auth-page__card { padding: 28px 20px; }
}

/* ===== Eyebrow badge with pulsing dot =====
   Used in pre-auth sidebars to draw attention to a single
   short message (e.g. "Founding access, limited spots",
   "Order summary", "Get in touch"). The pulsing dot is the
   only animated element on the page; use sparingly. */
/* NOT USED IN PRICING */
.ng-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(192, 69, 17, 0.10);
  border: 1px solid rgba(192, 69, 17, 0.25);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
/* NOT USED IN PRICING */
.ng-eyebrow-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: ng-pulse-dot 2s infinite;
}
@keyframes ng-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* ===== Sidebar headline + subtitle =====
   Larger, more imposing than section-headline because the
   sidebar carries the page's primary message rather than a
   section heading. */
/* NOT USED IN PRICING */
.ng-sidebar-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 16px;
}
/* NOT USED IN PRICING */
.ng-sidebar-title em { font-style: italic; color: var(--navy); }
/* NOT USED IN PRICING */
.ng-sidebar-sub {
  font-size: 16px;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 32px;
}

/* ===== Benefit list =====
   Vertical stack of icon + title + description. Used in
   sidebars to reinforce why-trust-us. Keep it to 3-4 items;
   beyond that, the eye stops reading. */
/* NOT USED IN PRICING */
.ng-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
/* NOT USED IN PRICING */
.ng-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* NOT USED IN PRICING */
.ng-benefit__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(2, 51, 102, 0.08);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
/* NOT USED IN PRICING */
.ng-benefit__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
/* NOT USED IN PRICING */
.ng-benefit__desc {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.5;
}

/* ===== Form card eyebrow + title + sub =====
   The form card's own headline group, smaller than the
   sidebar's so the sidebar message stays primary. */
/* NOT USED IN PRICING */
.ng-card-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
/* NOT USED IN PRICING */
.ng-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 6px;
}
/* NOT USED IN PRICING */
.ng-card-sub {
  font-size: 14px;
  color: var(--ink-mid);
  margin-bottom: 28px;
  line-height: 1.5;
}

/* ===== Source / context badge =====
   Cream pill that confirms which path the user came in on.
   Hidden by default; pages add `.is-visible` via JS once the
   URL params have been read. */
/* NOT USED IN PRICING */
.ng-source-badge {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mid);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
/* NOT USED IN PRICING */
.ng-source-badge.is-visible { display: inline-flex; }

/* ===== Form primitives =====
   Composable groups, rows, fields, hints, privacy notes.
   Avoids any HTML <form>-element coupling so these can be
   used inside divs, fieldsets, or real forms.

   Sizing: 12px vertical / 14px horizontal padding, 1.5px
   borders (chunkier than browser default for clarity), 6px
   radius matching button radius, focus ring matches navy
   with a soft rgba glow. */
/* NOT USED IN PRICING */
.ng-form-section {
  margin-bottom: 24px;
}
/* NOT USED IN PRICING */
.ng-form-section__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
/* NOT USED IN PRICING */
.ng-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .ng-form-row { grid-template-columns: 1fr; }
}
/* NOT USED IN PRICING */
.ng-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
/* NOT USED IN PRICING */
.ng-form-group:last-child { margin-bottom: 0; }
/* NOT USED IN PRICING */
.ng-form-group label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.ng-form-group input[type="text"],
.ng-form-group input[type="email"],
.ng-form-group input[type="password"],
.ng-form-group input[type="tel"],
.ng-form-group input[type="url"],
.ng-form-group input[type="number"],
.ng-form-group select,
/* NOT USED IN PRICING */
.ng-form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ng-form-group input:focus,
.ng-form-group select:focus,
/* NOT USED IN PRICING */
.ng-form-group textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(2, 51, 102, 0.10);
}
.ng-form-group input::placeholder,
/* NOT USED IN PRICING */
.ng-form-group textarea::placeholder {
  color: var(--ink-light);
}
/* NOT USED IN PRICING */
.ng-form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
/* NOT USED IN PRICING */
.ng-form-group textarea {
  resize: vertical;
  min-height: 80px;
}
/* NOT USED IN PRICING */
.ng-form-group__hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.5;
}
/* Field-level validation error state.
   Add .has-error to .ng-form-group to highlight the input and
   reveal the .ng-form-group__error message. The hint is hidden
   while the error is showing so the two don't compete visually.

     <div class="ng-form-group has-error">
       <label …>…</label>
       <input …>
       <div class="ng-form-group__error">Required</div>
       <div class="ng-form-group__hint">…</div>
     </div>                                                       */
/* NOT USED IN PRICING */
.ng-form-group__error {
  display: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #DC2626;
  line-height: 1.5;
}
.ng-form-group.has-error input,
.ng-form-group.has-error select,
/* NOT USED IN PRICING */
.ng-form-group.has-error textarea {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}
/* NOT USED IN PRICING */
.ng-form-group.has-error .ng-form-group__error { display: block; }
/* NOT USED IN PRICING */
.ng-form-group.has-error .ng-form-group__hint  { display: none; }
/* NOT USED IN PRICING */
.ng-required { color: #DC2626; }
/* NOT USED IN PRICING */
.ng-optional {
  color: var(--ink-light);
  font-weight: 400;
  font-size: 12px;
  margin-left: 2px;
}

/* Honeypot field. Hidden visually and from screen readers but
   present in the DOM so naive bots fill it in. Real users
   never see or focus it. Forms read this field server-side
   and reject submissions where it's non-empty. */
/* NOT USED IN PRICING */
.ng-honeypot {
  position: absolute !important;
  overflow: hidden !important;
  height: 1px !important;
  width: 1px !important;
  z-index: -1000 !important;
  padding: 0 !important;
  opacity: 0;
}
/* NOT USED IN PRICING */
.ng-honeypot input { visibility: hidden; }

/* ===== Privacy / consent box =====
   A subdued cream-on-cream block placed above the submit
   button. The privacy notice is regulatory copy, not a sales
   message; this styling tells the eye to skim it rather than
   linger. */
/* NOT USED IN PRICING */
.ng-form-privacy {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.6;
  margin: 8px 0 20px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
/* NOT USED IN PRICING */
.ng-form-privacy a { color: var(--navy); text-decoration: underline; }
/* NOT USED IN PRICING */
.ng-form-privacy strong { color: var(--ink-mid); }

/* ===== Primary submit button =====
   Full-width gold button used for the page's commitment
   action. Distinct from .btn-nav-solid (which is a smaller
   nav-bar inline CTA). Use one .btn-submit per pre-auth page;
   it is the only thing the user must do to complete the page. */
/* NOT USED IN PRICING */
.btn-submit {
  width: 100%;
  padding: 16px;
  background: var(--gold-btn);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
/* NOT USED IN PRICING */
.btn-submit:hover {
  background: #A83B0E;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(192, 69, 17, 0.35);
}
.btn-submit:disabled,
/* NOT USED IN PRICING */
.btn-submit[aria-disabled="true"] {
  /* We use aria-disabled rather than the disabled attribute so the
     submit handler can still receive clicks and surface a helpful
     error (telling the user which condition is unmet). Visual
     styling is identical between the two states. */
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* NOT USED IN PRICING */
.btn-submit[aria-disabled="true"]:hover {
  /* Don't lift / shadow on hover when aria-disabled. */
  background: var(--gold-btn);
  transform: none;
  box-shadow: none;
}

/* ===== Method picker (SSO + email) =====
   The B2B-standard pattern adapted for an explicit picker:
   four equivalent options (three SSO providers + email) that
   the user selects from, then commits via a single submit
   button at the bottom of the card. Each button is full-width
   with a brand-mark icon to the left of the label, and a
   selected state that mirrors the post-auth app's selection
   styling (navy border, soft navy tint).

   Behaviour: clicking a button does NOT initiate auth. It
   selects the method, optionally expands the email form, and
   waits for the user to also tick consent and then click the
   single Create account button at the bottom.

   Class name kept as .ng-sso-stack / .btn-sso for backwards
   continuity even though the picker now includes a non-SSO
   email option. */
/* NOT USED IN PRICING */
.ng-sso-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
/* NOT USED IN PRICING */
.btn-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
}
/* NOT USED IN PRICING */
.btn-sso:hover {
  border-color: var(--navy);
  background: rgba(2,51,102,0.02);
  transform: translateY(-1px);
}
/* NOT USED IN PRICING */
.btn-sso:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(2, 51, 102, 0.15);
}
/* NOT USED IN PRICING */
.btn-sso__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* NOT USED IN PRICING */
.btn-sso__icon svg { width: 100%; height: 100%; display: block; }
/* NOT USED IN PRICING */
.btn-sso__label { flex: 1; text-align: left; }

/* Selected state. Used when this button represents the
   currently chosen sign-in method. Expressed via the
   `aria-pressed="true"` attribute (the picker is implemented
   as a group of role="radio" buttons). The check icon at the
   right is hidden by default and revealed when selected. */
/* NOT USED IN PRICING */
.btn-sso__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--navy);
  opacity: 0;
  transition: opacity var(--transition);
}
/* NOT USED IN PRICING */
.btn-sso__check svg { width: 16px; height: 16px; }
/* NOT USED IN PRICING */
.btn-sso[aria-pressed="true"] {
  border-color: var(--navy);
  background: rgba(2, 51, 102, 0.06);
  box-shadow: inset 0 0 0 1px var(--navy);
  transform: none;
}
/* NOT USED IN PRICING */
.btn-sso[aria-pressed="true"] .btn-sso__check { opacity: 1; }
/* NOT USED IN PRICING */
.btn-sso[aria-pressed="true"]:hover { transform: none; }

/* Form divider with text in the middle ("or"). Available for
   pages that still want the SSO/email split visually; signup
   uses a unified picker without the divider. */
/* NOT USED IN PRICING */
.ng-form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.ng-form-divider::before,
/* NOT USED IN PRICING */
.ng-form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ===== Expandable form panel =====
   A collapsible region used when an SSO-style method button
   reveals additional inputs (e.g. the email signup form
   appears below the Email button when Email is selected).
   Hidden by default; pages add `.is-open` to expand.

   Implementation note: we use `grid-template-rows: 0fr -> 1fr`
   instead of max-height because it animates to natural content
   height without needing a hard-coded max value. Browser
   support for animatable `grid-template-rows` is now broad. */
/* NOT USED IN PRICING */
.ng-form-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}
/* NOT USED IN PRICING */
.ng-form-collapse.is-open {
  grid-template-rows: 1fr;
  margin-top: 4px;
  margin-bottom: 12px;
}
/* NOT USED IN PRICING */
.ng-form-collapse__inner {
  overflow: hidden;
  min-height: 0;
}
/* NOT USED IN PRICING */
.ng-form-collapse.is-open .ng-form-collapse__inner {
  /* Visible padding only when open to avoid the closed state
     showing a sliver of padded space. */
  padding: 8px 2px 4px;
}

/* ===== Trailing form footer =====
   Sub-card text such as "Already have an account? Sign in."
   Sits below the submit button, centred, low-emphasis. */
/* NOT USED IN PRICING */
.ng-card-footer {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-mid);
}
/* NOT USED IN PRICING */
.ng-card-footer a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
/* NOT USED IN PRICING */
.ng-card-footer a:hover { text-decoration: underline; }

/* ===== Acknowledgement of Country =====
   A compact navy-deep strip that sits just before the
   footer on every pre-auth page. The Acknowledgement is
   not decoration; it is a statement of respect, and we
   give it its own surface rather than burying it in the
   footer's small print. */
.ng-ack {
  background: #000000;
  padding: 28px 24px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.ng-ack p {
  font-family: var(--font-display);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 1100px;
  margin: 0 auto;
}

/* ============================================================
   MODAL DIALOG (pre-auth)
   ============================================================
   The pre-auth equivalent of the app's c-modal-overlay /
   c-modal pattern, used to surface legal documents (EUA,
   Privacy Policy) inline so users do not lose form state.

   The same content is also reachable as a standalone page at
   eua.html / privacy.html (and in production at nguma.au/eua/,
   nguma.au/privacy/), so anyone can deep-link to either.
   ============================================================ */

/* Overlay covers the viewport, dims the page, and centres the
   modal panel. Disabled by default; pages add `.is-open` via
   JS to display. We set `display:flex` only when open so the
   overlay does not capture pointer events while hidden. */
/* NOT USED IN PRICING */
.ng-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 31, 66, 0.55);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ng-overlay-fade 0.18s ease-out;
}
/* NOT USED IN PRICING */
.ng-modal-overlay.is-open { display: flex; }

@keyframes ng-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The modal panel: white surface, large radius matching the
   pre-auth card (xl, 32px), tall enough to feel substantial
   without dwarfing the viewport on a laptop. Max-width 760px
   chosen to match comfortable reading column for legal text;
   max-height 85vh leaves breathing room above and below. */
/* NOT USED IN PRICING */
.ng-modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px rgba(2, 31, 66, 0.45);
  width: 100%;
  max-width: 760px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ng-modal-rise 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ng-modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header: title + close, sticky to top of modal so the title
   stays visible while the user scrolls long legal content. */
/* NOT USED IN PRICING */
.ng-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* NOT USED IN PRICING */
.ng-modal__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin: 0;
}
/* NOT USED IN PRICING */
.ng-modal__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-mid);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* NOT USED IN PRICING */
.ng-modal__close:hover {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--navy);
}
/* NOT USED IN PRICING */
.ng-modal__close svg { width: 16px; height: 16px; }

/* Body: scrollable region for the legal content. We give it
   generous padding and a comfortable reading line-height. */
/* NOT USED IN PRICING */
.ng-modal__body {
  overflow-y: auto;
  padding: 24px 28px;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer: optional row at bottom for action buttons. Sticky
   so it stays visible while body scrolls. */
/* NOT USED IN PRICING */
.ng-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 28px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Body scroll lock when a modal is open. Pages add this class
   to <html> via JS to prevent the underlying page from
   scrolling behind the modal. */
html.ng-modal-locked,
html.ng-modal-locked body { overflow: hidden; }

@media (max-width: 560px) {
  .ng-modal-overlay { padding: 12px; }
  .ng-modal { max-height: 92vh; border-radius: var(--radius-lg); }
  .ng-modal__head { padding: 18px 20px 14px; }
  .ng-modal__title { font-size: 18px; }
  .ng-modal__body { padding: 18px 20px; }
  .ng-modal__foot { padding: 12px 20px 16px; }
}

/* ============================================================
   LEGAL CONTENT (.ng-legal)
   ============================================================
   Shared typography for legal documents (EUA, Privacy Policy),
   used both on standalone pages and inside modal bodies.
   Identical styling in both contexts so the document reads
   the same wherever it appears.
   ============================================================ */

/* NOT USED IN PRICING */
.ng-legal {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  font-size: 15px;
  max-width: 70ch;
}
.ng-legal h1,
.ng-legal h2,
/* NOT USED IN PRICING */
.ng-legal h3 {
  font-family: var(--font-display);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
/* NOT USED IN PRICING */
.ng-legal h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}
/* NOT USED IN PRICING */
.ng-legal h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 32px 0 10px;
}
/* NOT USED IN PRICING */
.ng-legal h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--ink);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* NOT USED IN PRICING */
.ng-legal p { margin: 0 0 14px; }
/* NOT USED IN PRICING */
.ng-legal p strong { color: var(--ink); }
.ng-legal ul,
/* NOT USED IN PRICING */
.ng-legal ol {
  margin: 0 0 14px 22px;
  padding: 0;
}
/* NOT USED IN PRICING */
.ng-legal li { margin-bottom: 6px; }
/* NOT USED IN PRICING */
.ng-legal a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* NOT USED IN PRICING */
.ng-legal a:hover { color: var(--gold); }
/* NOT USED IN PRICING */
.ng-legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13px;
  color: var(--ink-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  margin: 14px 0 28px;
}
/* NOT USED IN PRICING */
.ng-legal__meta strong { color: var(--ink-mid); font-weight: 600; }
/* NOT USED IN PRICING */
.ng-legal__notice {
  background: var(--gold-pale);
  border-left: 3px solid var(--gold);
  padding: 14px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
/* NOT USED IN PRICING */
.ng-legal__notice strong { color: var(--gold); }

/* When the same content renders inside a modal, give it room
   to breathe but constrain max-width to fit the panel. */
/* NOT USED IN PRICING */
.ng-modal__body .ng-legal { max-width: none; }

/* ============================================================
   CONSENT CHECKBOX
   ============================================================
   A custom-styled checkbox row used on signup, checkout, and
   contact-sales for explicit acceptance of the EUA and Privacy
   Policy. Built around a real <input type="checkbox"> for
   accessibility; the visible square is a styled <span>.
   ============================================================ */

/* NOT USED IN PRICING */
.ng-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 14px 14px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
/* NOT USED IN PRICING */
.ng-consent:hover { border-color: var(--navy); }
/* NOT USED IN PRICING */
.ng-consent input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* NOT USED IN PRICING */
.ng-consent__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ink-light);
  border-radius: 4px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background var(--transition), border-color var(--transition);
}
/* NOT USED IN PRICING */
.ng-consent__box svg {
  width: 14px;
  height: 14px;
  color: var(--white);
  opacity: 0;
  transition: opacity var(--transition);
}
/* NOT USED IN PRICING */
.ng-consent input[type="checkbox"]:checked + .ng-consent__box {
  background: var(--navy);
  border-color: var(--navy);
}
/* NOT USED IN PRICING */
.ng-consent input[type="checkbox"]:checked + .ng-consent__box svg { opacity: 1; }
/* NOT USED IN PRICING */
.ng-consent input[type="checkbox"]:focus-visible + .ng-consent__box {
  box-shadow: 0 0 0 3px rgba(2, 51, 102, 0.20);
}
/* NOT USED IN PRICING */
.ng-consent__label {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
/* NOT USED IN PRICING */
.ng-consent__label a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
}
/* NOT USED IN PRICING */
.ng-consent__label a:hover { color: var(--gold); }

/* ===== Form callout =====
   A small bordered status block used to surface form-level
   feedback to the user — typically "you haven't done X yet"
   nudges. Mirrors the app-shell c-callout pattern (in
   nguma-core.css) but uses marketing-shell tokens so it sits
   coherently inside the white pre-auth card.

   Structure:
     <div class="ng-callout ng-callout--alert" role="alert">
       <span class="ng-callout__icon" aria-hidden="true">
         <svg>…</svg>
       </span>
       <div class="ng-callout__text">
         <div class="ng-callout__primary">Heading line</div>
         <div class="ng-callout__secondary">Optional detail</div>
       </div>
     </div>

   Used here for the "you haven't picked a method" and "you
   haven't ticked consent" nudges. The alert variant (cream-
   ground with gold accent) reads as a helpful prompt rather
   than a red error scream — appropriate for "you forgot
   something" UX, less for "you broke something". */
/* NOT USED IN PRICING */
.ng-callout {
  align-items: center;
  border: 1px solid;
  border-radius: var(--radius-md);
  display: none;  /* shown via .is-visible class toggled by JS */
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
}
/* NOT USED IN PRICING */
.ng-callout.is-visible { display: flex; }

/* NOT USED IN PRICING */
.ng-callout__icon {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  width: 32px;
}
/* NOT USED IN PRICING */
.ng-callout__icon svg {
  height: 16px;
  width: 16px;
}
/* NOT USED IN PRICING */
.ng-callout__text {
  flex: 1;
  min-width: 0;
}
/* NOT USED IN PRICING */
.ng-callout__primary {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
/* NOT USED IN PRICING */
.ng-callout__secondary {
  color: var(--ink-mid);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 2px;
}

/* Variants. Each pairs a soft tinted background with a
   matching border colour and an icon accent. */
/* NOT USED IN PRICING */
.ng-callout--alert {
  /* Cream-toned ground with subtle gold accent. The right
     level of urgency for "you forgot to do X" — visible enough
     to draw attention without alarming the user. */
  background: rgba(192, 69, 17, 0.06);
  border-color: rgba(192, 69, 17, 0.20);
}
/* NOT USED IN PRICING */
.ng-callout--alert .ng-callout__icon {
  border-color: rgba(192, 69, 17, 0.30);
  color: var(--gold);
}

/* NOT USED IN PRICING */
.ng-callout--info {
  background: rgba(2, 51, 102, 0.05);
  border-color: rgba(2, 51, 102, 0.18);
}
/* NOT USED IN PRICING */
.ng-callout--info .ng-callout__icon {
  border-color: rgba(2, 51, 102, 0.20);
  color: var(--navy);
}

/* NOT USED IN PRICING */
.ng-callout--success {
  background: rgba(63, 122, 107, 0.08);
  border-color: rgba(63, 122, 107, 0.20);
}
/* NOT USED IN PRICING */
.ng-callout--success .ng-callout__icon {
  border-color: rgba(63, 122, 107, 0.30);
  color: var(--teal-deep);
}


/* ===================================================================
   UNIFIED NAV — v2
   Replaces the old flat .ng-nav__cta link list with a structured
   nav that includes a Solutions mega-dropdown, flat links, and a
   CTA pair (Sign up / Log in).

   New elements:
     .ng-nav__links        — horizontal link list (desktop)
     .ng-nav__link         — plain nav link
     .ng-nav__item         — list item, position:relative for dropdown
     .ng-nav__item--has-dropdown — modifier that shows the caret
     .ng-dropdown          — absolute dropdown panel
     .ng-dropdown--split   — two-column Solutions panel
     .ng-dropdown__col     — one column inside split panel
     .ng-dropdown__label   — eyebrow label above a column's links
     .ng-dropdown__link    — individual dropdown link
     .ng-dropdown__link-title  — link primary label
     .ng-dropdown__link-sub    — link sub-label (audience descriptor)
     .ng-nav__actions      — CTA pair (Sign up / Log in)
   =================================================================== */

/* ----- Desktop link list --------------------------------------- */

.ng-nav__links {
  align-items: center;
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ng-nav__item { position: relative; }

.ng-nav__link {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
  display: flex;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  gap: 4px;
  padding: 8px 12px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.ng-nav__link:hover {
  background: rgba(2, 51, 102, 0.06);
  color: var(--navy);
}

.ng-nav__link.is-active { color: var(--navy); font-weight: 600; }

/* Caret for dropdown items */
.ng-nav__caret {
  display: block;
  flex-shrink: 0;
  height: 14px;
  transition: transform 0.2s;
  width: 14px;
}

.ng-nav__item.is-open .ng-nav__caret { transform: rotate(180deg); }


/* ----- Dropdown panel ------------------------------------------ */

.ng-dropdown {
  background: var(--white);
  border: 1px solid rgba(2, 51, 102, 0.10);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(2, 51, 102, 0.14), 0 2px 8px rgba(2, 51, 102, 0.06);
  left: 50%;
  min-width: 220px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 500;
}

.ng-nav__item.is-open .ng-dropdown,
.ng-nav__item:focus-within .ng-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Two-column split panel for Solutions */
.ng-dropdown--split {
  display: grid;
  gap: 0 1px;
  grid-template-columns: 1fr 1fr;
  left: 0;
  min-width: 520px;
  padding: 16px;
  transform: translateX(0) translateY(-6px);
}

.ng-nav__item.is-open .ng-dropdown--split,
.ng-nav__item:focus-within .ng-dropdown--split {
  transform: translateX(0) translateY(0);
}

.ng-dropdown__col {
  padding: 0 12px;
}

.ng-dropdown__col + .ng-dropdown__col {
  border-left: 1px solid rgba(2, 51, 102, 0.08);
}

.ng-dropdown__label {
  color: var(--ink-light, #6B7280);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  padding: 0 8px;
  text-transform: uppercase;
}

.ng-dropdown__link {
  border-radius: 8px;
  color: var(--ink);
  display: block;
  padding: 9px 10px;
  text-decoration: none;
  transition: background var(--transition);
}

.ng-dropdown__link:hover {
  background: rgba(2, 51, 102, 0.05);
}

.ng-dropdown__link-title {
  color: var(--navy);
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.ng-dropdown__link-sub {
  color: var(--ink-light, #6B7280);
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 1px;
}

/* Divider between col sections */
/* NOT USED IN PRICING */
.ng-dropdown__divider {
  border: none;
  border-top: 1px solid rgba(2, 51, 102, 0.07);
  margin: 8px 0;
}


/* ----- CTA actions pair ---------------------------------------- */

.ng-nav__actions {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: 8px;
}


/* ----- Mobile nav (updated) ------------------------------------ */

.ng-nav__mobile-section {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-top: 8px;
}

.ng-nav__mobile-label {
  color: rgba(255, 255, 255, 0.40);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 16px 4px;
  text-transform: uppercase;
}


/* ----- Hide old flat CTA links on pages using new nav ---------- */

.ng-nav--v2 .ng-nav__cta { display: none; }


/* ----- Responsive: hide links, show hamburger ------------------ */

@media (max-width: 900px) {
  .ng-nav__links  { display: none; }
  .ng-nav__actions { display: none; }
  .ng-nav__hamburger { display: flex; }
}


/* ============================================================
   SHARED MARKETING COMPONENTS
   ============================================================
   Components that appear across multiple marketing pages.
   All use the p-* prefix per the original pricing.css
   convention (p- = page primitive, shared across pages).

   Included here so individual pages don't need page-local
   CSS for these standard building blocks.
   ============================================================ */

/* ── Indigenous procurement section (p-proc-*) ─────────────────
   Two-tab content block explaining Nguma's Indigenous-owned
   procurement pathway. Used on pricing and will appear on
   homepage, government, and recruiter pages.
   The section-level wrapper (.p-pricing-procurement) and its
   padding stay in pricing.html since the wrapper spacing is
   page-rhythm-specific; only the inner components are global. */

.p-proc-tabs {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto 32px;
  max-width: 560px;
  padding: 4px;
}
.p-proc-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 4px);
  color: var(--ink-mid);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 12px 14px;
  transition: all var(--transition);
}
.p-proc-tab:hover:not(.is-active) { color: var(--navy); }
.p-proc-tab.is-active {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(2, 51, 102, 0.15);
}
.p-proc-tab__icon { flex-shrink: 0; height: 16px; width: 16px; }
.p-proc-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 48px 40px;
  max-width: 1080px;
  margin: 0 auto;
}
.p-proc-panel[hidden] { display: none; }
.p-proc-panel__intro { text-align: center; margin-bottom: 36px; }
.p-proc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.p-proc-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.p-proc-card__heading {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 10px;
}
.p-proc-card__lead {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 12px;
}
.p-proc-card__lead em { font-style: italic; font-weight: 600; color: var(--navy); }
.p-proc-card__detail {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}
.p-proc-supporting {
  background: rgba(2, 51, 102, 0.03);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.p-proc-supporting p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.p-proc-supporting strong { color: var(--navy); font-weight: 600; }
.p-proc-cta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.p-proc-cta-secondary {
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-proc-cta-secondary:hover { color: var(--gold); }
.p-proc-certs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  justify-content: center;
  margin-top: 36px;
  padding: 0 24px;
}
.p-proc-cert {
  align-items: center;
  color: var(--ink-mid);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
}
.p-proc-cert svg { color: #2A6B5C; height: 16px; width: 16px; flex-shrink: 0; }
@media (max-width: 900px) {
  .p-proc-panel { padding: 32px 24px 28px; }
  .p-proc-card-grid { grid-template-columns: 1fr; gap: 14px; }
  .p-proc-cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 560px) {
  .p-proc-tab { flex-direction: column; gap: 4px; font-size: 13px; }
  .p-proc-certs { gap: 12px 20px; flex-direction: column; align-items: flex-start; }
}

/* ── Feature grid (p-feature-*) ────────────────────────────────
   3-column feature grid used on pricing, government, and
   recruiter pages to enumerate product capabilities. */

.p-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.p-feature {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.p-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.p-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--gold-pale);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.p-feature__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.p-feature__body { font-size: 14px; color: var(--ink-mid); line-height: 1.6; }
@media (max-width: 880px) { .p-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .p-feature-grid { grid-template-columns: 1fr; } }

/* ── FAQ accordion (p-faq-*) ────────────────────────────────────
   <details>/<summary> accordion used on pricing, support, and
   solutions pages. */

.p-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-faq {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.p-faq[open] { border-color: var(--navy); }
.p-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.p-faq__q::-webkit-details-marker { display: none; }
.p-faq__q::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
  margin-right: 4px;
}
.p-faq[open] .p-faq__q::after { transform: rotate(-135deg); }
.p-faq__a {
  padding: 0 24px 20px;
  color: var(--ink-mid);
  font-size: 15px;
  line-height: 1.7;
}
.p-faq__a a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.p-faq__a a:hover { color: var(--navy); }

/* ── Page-close CTA strip (ng-page-cta) ─────────────────────────
   Navy rounded panel that closes every marketing page with a
   sign-up / demo CTA. Renamed ng-page-cta (from p-pricing-cta)
   to signal it's a global shell component, not pricing-specific. */

.ng-page-cta { padding: 56px 0 72px; background: var(--white); }
.ng-page-cta__inner {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  text-align: center;
}
.ng-page-cta__headline {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.ng-page-cta__sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.ng-page-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* btn-nav-outline inside a navy strip needs white colouring */
.ng-page-cta__buttons .btn-nav-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.40);
}
.ng-page-cta__buttons .btn-nav-outline:hover {
  background: var(--white);
  color: var(--navy);
}
@media (max-width: 600px) {
  .ng-page-cta { padding: 40px 0 56px; }
  .ng-page-cta__inner { padding: 36px 24px; }
  .ng-page-cta__headline { font-size: 28px; }
}

/* ============================================================
   HERO WRAPPER  (.ng-hero-wrapper)
   ============================================================
   Full-bleed navy backdrop used on every page with a dark hero
   region. Combines three radial gradient highlights with a
   subtle white grid overlay. Child sections should be
   transparent so the wrapper's background shows through.

   Usage:
     <div class="ng-hero-wrapper">
       <section class="…">…</section>
       <section class="…">…</section>
     </div>

   Note: all direct children are lifted above the grid overlay
   via z-index:1 automatically. ============================================================ */

.ng-hero-wrapper {
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(2,51,102,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(192,69,17,0.10) 0%, transparent 50%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 50%, #013070 100%);
}
.ng-hero-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.ng-hero-wrapper > * { position: relative; z-index: 1; }

/* ============================================================
   HERO SUB-LINK  (.ng-hero-sub-link)
   ============================================================
   Inline anchor inside a dark-background paragraph. Inherits
   the surrounding text colour; underline does the only work of
   signalling it's a link. ============================================================ */

.ng-hero-sub-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.40);
  transition: text-decoration-color var(--transition);
}
.ng-hero-sub-link:hover {
  text-decoration-color: rgba(255,255,255,0.85);
}

/* ============================================================
   HERO PILL  (.ng-hero-pill)
   ============================================================
   Cream-tinted anchor badge that sits between the eyebrow and
   the hero headline. Typically links to a section further down
   the page. The arrow icon should face in the direction of the
   scroll target (down for below, right for a separate page).

   The pill label span (.ng-hero-pill__label) can be updated
   by JS for audience-aware copy without reflowing the pill.

   Usage:
     <a href="#section" class="ng-hero-pill">
       <svg class="ng-hero-pill__icon">…</svg>
       <span class="ng-hero-pill__label">Label text</span>
       <svg class="ng-hero-pill__arrow">…</svg>
     </a>
   ============================================================ */

.ng-hero-pill {
  align-items: center;
  background: rgba(245,220,178,0.12);
  border: 1px solid rgba(245,220,178,0.30);
  border-radius: 100px;
  color: var(--white);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  margin-bottom: 24px;
  padding: 8px 16px 8px 14px;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.ng-hero-pill:hover {
  background: rgba(245,220,178,0.18);
  border-color: rgba(245,220,178,0.50);
  transform: translateY(-1px);
}
.ng-hero-pill:hover .ng-hero-pill__arrow {
  transform: translateY(2px);
}
.ng-hero-pill__icon {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  color: var(--teal);
}
.ng-hero-pill__label {
  white-space: nowrap;
}
.ng-hero-pill__arrow {
  height: 14px;
  width: 14px;
  flex-shrink: 0;
  color: var(--teal);
  transition: transform var(--transition);
}
@media (max-width: 540px) {
  .ng-hero-pill {
    align-items: flex-start;
    padding: 10px 14px;
  }
  .ng-hero-pill__label {
    white-space: normal;
    line-height: 1.35;
  }
  .ng-hero-pill__icon,
  .ng-hero-pill__arrow {
    margin-top: 1px;
  }
}

/* ============================================================
   GLASS CARD  (.ng-glass-card)
   ============================================================
   Glassmorphic card for use on dark (navy) backgrounds.
   Translucent white fill, soft backdrop blur, hover lift.
   Use the --featured modifier for the teal-accented variant.

   The whole card can be made into a single click target using
   the ::after-on-link technique: add position:relative to the
   card, place one <a class="ng-glass-card__cta"> inside, and
   its ::after pseudo-element fills the card. All other child
   elements need position:relative; z-index:2; pointer-events:none
   to remain readable above the overlay.

   Usage:
     <div class="ng-glass-card">
       <!-- optional badge -->
       <span class="ng-glass-card__badge">Best value</span>
       <!-- card content -->
       <hr class="ng-glass-card__divider">
       <a class="ng-glass-card__cta" href="…">Get started</a>
     </div>
   ============================================================ */

.ng-glass-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 24px;
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(2,51,102,0.20);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.ng-glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.14);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}

/* Featured / highlighted variant — teal accent. */
.ng-glass-card--featured {
  background: rgba(169,201,182,0.14);
  border-color: rgba(169,201,182,0.50);
  box-shadow: 0 16px 48px rgba(2,51,102,0.30), 0 0 0 1px rgba(169,201,182,0.20);
}
.ng-glass-card--featured:hover {
  background: rgba(169,201,182,0.18);
  border-color: rgba(169,201,182,0.70);
}
.ng-glass-card--featured .ng-glass-card__divider {
  background: rgba(169,201,182,0.30);
}

/* Badge — floats above the card top edge. */
.ng-glass-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}

/* Hairline divider between content blocks inside the card. */
.ng-glass-card__divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.18);
  border: none;
  margin-bottom: 18px;
}

/* CTA link. margin-top:auto pushes it to the card bottom so
   CTAs align across a row of cards.
   The ::after fills the parent card to make the whole surface
   clickable (see class comment above for technique notes). */
.ng-glass-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.40);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
}
.ng-glass-card__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
}
/* Lift non-CTA content above the click overlay. */
.ng-glass-card > *:not(.ng-glass-card__cta):not(.ng-glass-card__badge) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
/* Keyboard focus: project the outline onto the card. */
.ng-glass-card:has(.ng-glass-card__cta:focus-visible) {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}
.ng-glass-card__cta:focus-visible { outline: none; }

/* ============================================================
   CARD GRID  (.ng-card-grid)
   ============================================================
   Generic equal-column grid for card layouts. Defaults to
   3 columns; use modifiers for other counts.

   Modifiers:
     --cols-2   2 columns
     --cols-3   3 columns (default)
     --cols-4   4 columns

   The responsive breakpoints below collapse to 2 columns at
   880px and 1 column at 600px for all variants. Pages that
   need different breakpoints (e.g. the 4-column pricing grid
   collapsing to 1 at 880px) should override locally. ============================================================ */

/* NOT USED IN PRICING */
.ng-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* NOT USED IN PRICING */
.ng-card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
/* NOT USED IN PRICING */
.ng-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 880px) {
  .ng-card-grid,
  .ng-card-grid--cols-3,
  .ng-card-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ng-card-grid,
  .ng-card-grid--cols-2,
  .ng-card-grid--cols-3,
  .ng-card-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION WRAPPER  (.ng-section)
   ============================================================
   Standard section padding with background-colour modifiers.
   Replaces page-specific wrappers like .p-pricing-included,
   .p-pricing-faq, etc.

   Modifiers:
     --cream    var(--cream) background
     --white    var(--white) background (default)
     --navy     var(--navy) background

   Usage:
     <section class="ng-section ng-section--cream">…</section>
   ============================================================ */

.ng-section {
  padding: 64px 0;
  background: var(--white);
}
.ng-section--cream  { background: var(--cream); }
/* NOT USED IN PRICING */
.ng-section--navy   { background: var(--navy); }
.ng-section--wide   { padding: 88px 0 96px; }
@media (max-width: 900px) {
  .ng-section--wide { padding: 64px 0 72px; }
}
@media (max-width: 600px) {
  .ng-section { padding: 48px 0; }
}

/* Section head block: centred eyebrow + headline + sub, used
   above feature grids, FAQs, and similar content blocks.

   Usage:
     <div class="ng-section__head">
       <div class="section-eyebrow">…</div>
       <h2 class="section-headline">…</h2>
       <p class="section-sub">…</p>
     </div>
   ============================================================ */

.ng-section__head {
  text-align: center;
  margin-bottom: 40px;
}
.ng-section__head .section-sub {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SECTION FOOTNOTE  (.ng-section-footnote)
   ============================================================
   Small faded caption below a content block (e.g. below the
   pricing grid: "All prices shown in AUD, exclusive of GST").
   ============================================================ */

.ng-section-footnote {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
/* On-light variant */
/* NOT USED IN PRICING */
.ng-section-footnote--on-light {
  color: var(--ink-light);
}

/* ============================================================
   CTA ROW  (.ng-cta-row)
   ============================================================
   Centred column of a primary CTA button and optional
   supporting caption text. Used below content blocks where
   a single primary action closes the section.

   Usage:
     <div class="ng-cta-row">
       <a href="…" class="btn-nav-solid">Get started</a>
       <p class="ng-cta-row__sub">Supporting caption text.</p>
     </div>
   ============================================================ */

.ng-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  margin-bottom: 6px;
}
.ng-cta-row__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  text-align: center;
  margin: 0;
  max-width: 480px;
  line-height: 1.55;
}
/* On-light backgrounds */
/* NOT USED IN PRICING */
.ng-cta-row__sub--on-light {
  color: var(--ink-mid);
}