/* site.css — header, hero, marketing sections, footer. */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand:hover {
  text-decoration: none;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--brand-sky), 0 2px 8px rgb(10 14 60 / 0.12);
}
.brand__mark img {
  width: 1.9rem;
  height: auto;
}
.brand__text {
  display: grid;
  line-height: 1.05;
}
.brand__text strong {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__text span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Shops sits in the bar beside the theme switch: a word on a laptop, just
   the shop-front icon on a phone. */
.shops-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.shops-link:hover {
  color: var(--ink);
  background: var(--bg-alt);
  text-decoration: none;
}
.shops-link[aria-current="page"] {
  color: var(--ink);
  font-weight: 650;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.menu-wrap {
  position: relative;
}
.theme-toggle,
.menu-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
}
.theme-toggle:hover,
.menu-toggle:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.theme-toggle [data-theme-icon] {
  display: none;
}
.theme-toggle[data-mode="light"] [data-theme-icon="light"],
.theme-toggle[data-mode="dark"] [data-theme-icon="dark"],
.theme-toggle[data-mode="system"] [data-theme-icon="system"] {
  display: block;
}
.menu-toggle {
  display: none;
}
.site-header .menu-toggle {
  display: grid;
}

/* The one menu. On a laptop it drops down under its button; on a phone it
   becomes the full-width panel below the bar (see the media query). */
.mobile-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 15rem;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(-0.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.mobile-menu.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
}
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.mobile-menu li a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu li a:hover {
  background: var(--bg-alt);
}
.mobile-menu li a[aria-current="page"] {
  font-weight: 650;
  color: var(--link);
}
/* The language, currency and account buttons sit in the bar on a laptop. */
.mobile-menu__actions {
  display: none;
}

@media (max-width: 55.99rem) {
  .site-header__actions .hide-mobile {
    display: none;
  }
  .shops-link {
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    border-radius: 50%;
  }
  .shops-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .menu-wrap {
    position: static;
  }
  .mobile-menu {
    position: fixed;
    inset: 4.25rem 0 auto 0;
    width: auto;
    max-height: calc(100dvh - 4.25rem);
    overflow-y: auto;
    padding: var(--space-4) var(--gutter) var(--space-8);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .mobile-menu li a {
    min-height: 3.25rem;
    padding: 0;
    border-radius: 0;
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu li a:hover {
    background: transparent;
  }
  .mobile-menu__actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
}

/* Over the hero: transparent and light, solid once the page scrolls. */
.site-header--hero {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--dur), border-color var(--dur), backdrop-filter var(--dur);
}
.site-header--hero .brand,
.site-header--hero .shops-link,
.site-header--hero .theme-toggle,
.site-header--hero .menu-toggle {
  color: #ffffff;
}
.site-header--hero .brand__text span {
  color: rgb(255 255 255 / 0.72);
}
.site-header--hero .shops-link:hover,
.site-header--hero .theme-toggle:hover,
.site-header--hero .menu-toggle:hover {
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
}
.site-header--hero .btn--ghost {
  color: #ffffff;
}
.site-header--hero .btn--ghost:hover {
  background: rgb(255 255 255 / 0.1);
}
.site-header--hero.is-scrolled,
.site-header--hero.menu-open {
  background: rgb(24 24 26 / 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: rgb(255 255 255 / 0.08);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: #ffffff;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__inner {
  position: relative;
  z-index: 1;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.05);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgb(255 255 255 / 0.86);
}
.hero__eyebrow .pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-amber);
  box-shadow: 0 0 0 0 rgb(241 172 23 / 0.6);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  70% {
    box-shadow: 0 0 0 0.5rem rgb(241 172 23 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(241 172 23 / 0);
  }
}
.hero h1 {
  margin-top: var(--space-5);
  font-size: var(--text-hero);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.glow {
  background: var(--glow-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  margin-top: var(--space-5);
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.78);
}
.hero__ctas {
  margin-top: var(--space-8);
  --cluster: var(--space-3);
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  list-style: none;
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.72);
}
.hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__proof .icon {
  color: #7cc0ff;
}

/* Phones and small tablets: the photo crops to the hand and card, and the
   copy follows below it, so the headline never sits on top of the card. */
@media (max-width: 59.99rem) {
  .hero {
    padding-top: 4.25rem;
  }
  .hero__media {
    display: block;
    aspect-ratio: 768 / 624;
    max-height: 62svh;
    width: 100%;
  }
  .hero__media img {
    object-position: 30% 55%;
  }
  .hero__inner {
    padding-top: var(--space-2);
    padding-bottom: var(--space-8);
  }
  .hero__copy {
    max-width: 40rem;
  }
}

/* Desktop: the photo is sized to the page width, so the card always ends
   at about 45% across and the copy sits in the empty dark space on the
   right. The photo's backdrop is the same flat #1F1F1F as the hero, so any
   space around it is invisible. */
@media (min-width: 60rem) {
  .hero {
    min-height: clamp(38rem, 56.25vw, 100svh);
    display: grid;
    align-items: center;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero__media img {
    /* The card's centre is 47.8% down the photo; line it up with the
       middle of the hero, and fade the arm into the backdrop below. */
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: fill;
    transform: translateY(-47.8%);
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1.05fr);
    padding-top: 7rem;
    padding-bottom: var(--space-12);
  }
  .hero__copy {
    grid-column: 2;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, transparent 47%, rgb(31 31 31 / 0.85) 58%, var(--night) 72%),
      radial-gradient(60rem 30rem at 82% 35%, rgb(136 5 169 / 0.16), transparent 60%);
    pointer-events: none;
  }
}
@media (min-width: 90rem) {
  .hero::after {
    background: radial-gradient(60rem 30rem at 80% 35%, rgb(136 5 169 / 0.16), transparent 60%);
  }
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 64rem) {
  .about {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
  }
}
.about__sign {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.about__sign .brand__mark {
  width: 3.25rem;
  height: 3.25rem;
}
.about__sign .brand__mark img {
  width: 2.2rem;
}
.about__sign strong {
  display: block;
}
.about__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.about-stat {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.about-stat--brand {
  border-color: transparent;
  background: var(--brand-gradient);
  color: #ffffff;
}
.about-stat--brand .about-stat__label {
  color: rgb(255 255 255 / 0.82);
}
.about-stat__value {
  font-size: clamp(1.3rem, 0.9rem + 1.7vw, 2.25rem);
  overflow-wrap: anywhere;
  hyphens: manual;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.about-stat__label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}
.about-stat .icon {
  margin-bottom: var(--space-4);
  color: var(--brand-purple);
}
.about-stat--brand .icon {
  color: var(--brand-amber);
}

/* ==========================================================================
   How it works + sharing
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.step {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.step__num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.step__num span {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.step__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--link);
}
.step h3 {
  font-size: var(--text-lg);
}
.step p {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.slider-dots {
  display: none;
}

/* Phones: the four steps become a swipe row, one card in view at a time with
   the next one peeking in, and each icon sits beside its text, not above it. */
@media (max-width: 47.99rem) {
  .steps {
    grid-auto-flow: column;
    grid-auto-columns: min(85%, 20rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--space-1);
    scrollbar-width: none;
  }
  .steps::-webkit-scrollbar {
    display: none;
  }
  .step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    align-content: start;
    scroll-snap-align: start;
  }
  .step__num {
    display: contents;
  }
  .step__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .step__num > span:last-child {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: var(--space-1);
  }
  .step h3 {
    grid-column: 2;
    grid-row: 2;
  }
  .step p {
    grid-column: 2;
    grid-row: 3;
  }
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .slider-dots span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    transition: width var(--dur-fast), background var(--dur-fast);
  }
  .slider-dots span.is-active {
    width: 1.5rem;
    background: var(--link);
  }
}

.share-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-8);
}
@media (min-width: 64rem) {
  .share-showcase {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-8);
  }
}
.share-list {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .share-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.share-list li {
  display: grid;
  gap: var(--space-2);
}
.share-list .icon-tile {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.share-list h3 {
  font-size: var(--text-base);
}
.share-list p {
  color: var(--muted);
  font-size: var(--text-sm);
}
/* Phones: icon beside the text rather than above it. */
@media (max-width: 39.99rem) {
  .share-list li {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
  }
  .share-list .icon-tile {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .share-list h3,
  .share-list p {
    grid-column: 2;
  }
}

/* A phone frame around the live demo card. */
.phone {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
  padding: 0.75rem;
  border-radius: 2.75rem;
  background: #111214;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08) inset, var(--shadow-lg);
}
.phone__screen {
  height: 38rem;
  border-radius: 2.1rem;
  overflow: hidden auto;
  background: var(--bg);
  scrollbar-width: none;
}
.phone__screen::-webkit-scrollbar {
  display: none;
}
.phone::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 50%;
  z-index: 2;
  width: 5.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: #111214;
  transform: translateX(-50%);
}
.phone__screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}
.plan__features .is-highlight {
  align-self: start; /* the card stretches its rows to match taller cards; keep the tint snug around the text */
  margin-inline: calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-weight: 600;
}
.plan__features .is-highlight a {
  display: block;
  font-weight: 500;
  color: var(--link);
}
.share-visual {
  position: relative;
  /* Room for the swing, without the tilted corners causing a sideways
     scroll on phones. */
  padding: var(--space-6) var(--space-6) 0;
  overflow-x: clip;
}

/* The sample phone swings gently, like a card on a lanyard, hanging from
   its top edge. It holds still while the visitor points at it or tabs into
   it, so the buttons are easy to hit, and it never moves for people who
   ask for reduced motion. */
.phone--swing {
  transform-origin: 50% -2rem;
  animation: phone-swing 5.5s ease-in-out infinite;
  will-change: transform;
}
.phone--swing:hover,
.phone--swing:focus-within {
  animation-play-state: paused;
}
@keyframes phone-swing {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .phone--swing {
    animation: none;
  }
}
.phone-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
}
.phone-hint .icon {
  color: var(--brand-purple);
  flex: none;
}
.share-visual::before {
  content: "";
  position: absolute;
  inset: 12% 8% 6%;
  z-index: -1;
  border-radius: 3rem;
  background: var(--brand-gradient);
  opacity: 0.16;
  filter: blur(40px);
}

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

.plans {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 60rem) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.plan--featured {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--brand-purple), var(--shadow-lg);
}
.plan__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.plan__head h3 {
  font-size: var(--text-2xl);
}
.plan__blurb {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  min-height: 2.8em;
}
.plan__price {
  margin-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.plan__amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.plan__usd {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__per {
  color: var(--muted);
  font-weight: 500;
}
.plan__ghs {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.plan__note {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}
.plan__features {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  flex: 1;
}
.plan__features li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.plan__features .icon {
  margin-top: 0.15rem;
  color: var(--success);
}
.plan__features .is-off {
  color: var(--muted);
}
.plan__features .is-off .icon {
  color: var(--border-strong);
}
.plan .ihb {
  width: 100%;
}
.fx-note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
}

/* ==========================================================================
   NFC
   ========================================================================== */

.nfc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 64rem) {
  .nfc {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}
.tier-table {
  margin-top: var(--space-8);
}
.tier-table td:last-child {
  font-weight: 650;
}
.calc {
  container-type: inline-size;
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
/* The stepper and the total stay side by side at every width. */
.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.calc__row > .field {
  flex-shrink: 0;
}
.calc__total {
  min-width: 0;
  text-align: right;
}
.calc__total strong {
  display: block;
  white-space: nowrap;
  /* Full size where there is room; on a narrow card a long total (500 cards
     runs to "GHS 67,650.00") shrinks to fit beside the stepper. --chars is
     the total's length, kept up to date by the calculator script. */
  font-size: min(var(--text-3xl), calc((100cqi - 9.25rem) / (var(--chars, 10) * 0.55)));
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.calc__total span {
  font-size: var(--text-sm);
  color: var(--muted);
}
/* Team size picker (Business plan): pricing card and checkout. */
.team-calc {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.team-calc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.team-calc__total {
  margin-left: auto;
  text-align: right;
  font-size: var(--text-2xl);
  line-height: 1.15;
}
.team-calc__total .money__ghs {
  font-size: var(--text-sm);
}
.team-calc__each {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--muted);
}
.team-calc__bands {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.team-calc__bands td {
  padding: var(--space-1) 0;
  border-top: 1px solid var(--border);
}
.team-calc__bands td.num {
  text-align: right;
}
/* The cedi total, beneath the dollar total. */
.calc__total .calc__ghs {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  color: var(--ink-soft);
}
.calc__total .calc__ghs:empty {
  display: none;
}
.calc__hint {
  margin-top: var(--space-4);
}
/* Phones: a little less padding and a narrower number box, to leave the
   total as much room as possible. */
@media (max-width: 39.99rem) {
  .calc {
    padding: var(--space-5) var(--space-4);
  }
  .calc__row {
    gap: var(--space-3);
  }
  .calc .field .stepper input {
    width: 2.75rem !important;
  }
}
.calc__hint[hidden] {
  display: none;
}

/* A physical NFC card drawn in CSS. */
.nfc-card-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-12) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--night);
  overflow: hidden;
  isolation: isolate;
}
.nfc-card-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(22rem 14rem at 30% 30%, rgb(2 112 180 / 0.35), transparent 70%),
    radial-gradient(22rem 14rem at 75% 75%, rgb(136 5 169 / 0.3), transparent 70%);
}
.nfc-card {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 85.6 / 54;
  padding: 7% 7.5%;
  border-radius: 1.1rem;
  color: #ffffff;
  background: linear-gradient(135deg, #121318 0%, #1c1d24 55%, #15161b 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08) inset, 0 30px 60px -20px rgb(0 0 0 / 0.7);
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.nfc-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue), var(--brand-sky), var(--brand-purple), var(--brand-amber));
}
.nfc-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.nfc-card__logo {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #ffffff;
}
.nfc-card__logo img {
  width: 2.25rem;
}
.nfc-card__tap {
  color: rgb(255 255 255 / 0.7);
}
.nfc-card__name {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.nfc-card__role {
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.66);
}
.nfc-card--back {
  position: absolute;
  transform: rotate(8deg) translate(12%, -8%);
  opacity: 0.5;
  filter: blur(0.5px);
  z-index: -1;
}
.nfc-points {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.nfc-points li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
}
.nfc-points .icon {
  color: var(--success);
  margin-top: 0.1rem;
}

/* ==========================================================================
   Final call to action
   ========================================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem) var(--gutter);
  border-radius: var(--radius-xl);
  background: var(--night);
  color: #ffffff;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(40rem 18rem at 20% 0%, rgb(2 112 180 / 0.35), transparent 70%),
    radial-gradient(40rem 18rem at 85% 100%, rgb(136 5 169 / 0.35), transparent 70%);
}
.cta-band h2 {
  font-size: var(--text-4xl);
  max-width: 40rem;
  margin-inline: auto;
}
.cta-band p {
  margin: var(--space-4) auto 0;
  max-width: 36rem;
  color: rgb(255 255 255 / 0.76);
}
.cta-band .cluster {
  justify-content: center;
  margin-top: var(--space-6);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  margin-top: 0;
  padding: var(--space-8) 0 var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-sm);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  }
}
.site-footer h2 {
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0;
  margin-bottom: var(--space-4);
}
.site-footer ul {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  color: var(--muted);
  text-decoration: none;
}
.site-footer li a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.site-footer__about p {
  margin-top: var(--space-4);
  color: var(--muted);
  max-width: 22rem;
}
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* ==========================================================================
   Floating WhatsApp support (SUP-03) and the cookie notice (PRV-05)
   ========================================================================== */

.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 3.25rem;
  padding: 0 1.125rem 0 0.875rem;
  border-radius: var(--radius-pill);
  background: #128c4b;
  color: #ffffff;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgb(18 140 75 / 0.6);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.wa-float:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 14px 30px -8px rgb(18 140 75 / 0.7);
}
@media (max-width: 30rem) {
  .wa-float span {
    display: none;
  }
  .wa-float {
    width: 3.25rem;
    padding: 0;
    justify-content: center;
  }
}

.cookie-notice {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: min(30rem, calc(100vw - 6rem));
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}
.cookie-notice[hidden] {
  display: none;
}

/* ==========================================================================
   Content pages
   ========================================================================== */

.page-hero {
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
}
.page-hero h1 {
  margin-top: var(--space-3);
}
.page-hero .lead {
  margin-top: var(--space-4);
  max-width: 40rem;
}
.prose {
  max-width: 46rem;
}
.prose h2 {
  font-size: var(--text-2xl);
  margin: var(--space-12) 0 var(--space-4);
}
.prose h3 {
  margin: var(--space-8) 0 var(--space-3);
}
.prose p,
.prose li {
  color: var(--ink-soft);
}
.prose ul,
.prose ol {
  padding-left: var(--space-6);
}
.prose li + li {
  margin-top: var(--space-2);
}

.auth-shell {
  min-height: calc(100dvh - 4.25rem);
  display: grid;
  place-items: center;
  padding: var(--space-12) var(--gutter);
}
.auth-card {
  width: min(100%, 28rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.auth-card h1 {
  font-size: var(--text-3xl);
}
.auth-card .lead {
  font-size: var(--text-base);
  margin-top: var(--space-2);
}
.auth-card .form {
  margin-top: var(--space-8);
}
/* Full-screen centred message pages: card states, staff sign-in and 2FA. */
.state-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--night);
  color: #ffffff;
  text-align: center;
}

/* QR codes are dark on transparent; always back them with white so they scan
   (and show) in dark mode too. Used by staff 2FA and the customer Share page. */
.qr-box svg {
  width: min(100%, 16rem);
  height: auto;
  margin-inline: auto;
  background: #ffffff;
  border-radius: var(--radius);
  padding: var(--space-2);
}

.auth-alt {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.google-btn {
  width: 100%;
  gap: var(--space-3);
  min-height: 2.875rem;
}