/* ==========================================================================
   Zibuke Africa Stylesheet
   Color Rules (NEVER VIOLATED):
   1. Black background (#000000) with #cfff04 text
   2. Black background (#000000) with white text (#ffffff)
   3. #cfff04 background with black text (#000000)
   4. White background (#ffffff) with black text (#000000)
   No other colors are permitted anywhere.
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #000000;
  color: #cfff04;
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
h4 { font-size: 1.15rem; }

p {
  margin-bottom: 1.1rem;
}

a {
  color: #cfff04;
  text-decoration: none;
  transition: none;
}

a:hover {
  text-decoration: underline;
}

strong, b {
  font-weight: 700;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section-black {
  background-color: #000000;
  color: #cfff04;
}

.section-white {
  background-color: #ffffff;
  color: #000000;
}

.section-lime {
  background-color: #cfff04;
  color: #000000;
}

.section-black h2,
.section-black h3,
.section-black h4 { color: #cfff04; }


.section-white h2,
.section-white h3,
.section-white h4 { color: #000000; }


.section-white a { color: #000000; text-decoration: underline; text-underline-offset: 3px; }
.section-white a:hover { text-decoration: underline; text-underline-offset: 3px; }

.section-lime h2,
.section-lime h3,
.section-lime h4 { color: #000000; }


.section-lime p,
.section-lime li { color: #000000; }

.section-lime a { color: #000000; text-decoration: underline; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1.5px solid #cfff04;
  color: #cfff04;
}

.section-white .eyebrow {
  border-color: #000000;
  color: #000000;
}

.section-lime .eyebrow {
  border-color: #000000;
  color: #000000;
  background-color: #000000;
  color: #cfff04;
}

.lead {
  font-size: 1.22rem;
  line-height: 1.65;
  font-weight: 400;
}

/* ==========================================================================
   Top bar + Country switcher
   ========================================================================== */

.topbar {
  background-color: #cfff04;
  color: #000000;
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid #000000;
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* The switcher must never wrap to a second line, where it would land at the
     left. The text takes the space that is left and wraps inside its own box,
     so the switcher stays pinned to the top right at every width. */
  flex-wrap: nowrap;
  gap: 12px;
}

.topbar-inner > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar a {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.country-switcher {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.country-toggle {
  background-color: #000000;
  color: #cfff04;
  border: 1.5px solid #000000;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}

.country-toggle:hover { transform: translateX(2px); }

.country-toggle .flag {
  font-size: 1.05rem;
}

.country-toggle .caret {
  display: inline-block;
  transition: transform 0.2s ease;
}

.country-toggle.open .caret { transform: rotate(180deg); }

.country-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background-color: #000000;
  border: 1.5px solid #cfff04;
  max-height: 420px;
  overflow-y: auto;
  z-index: 1000;
  min-width: 240px;
}

.country-menu.open { display: block; }

.country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #cfff04;
  cursor: pointer;
  border-bottom: 1px solid #cfff04;
  font-size: 0.9rem;
  font-family: inherit;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}

.country-option:hover {
  transform: translateX(4px);
}

.country-option.active {
  background-color: #cfff04;
  color: #000000;
  font-weight: 700;
}

/* A country the visitor's connection is not in. It stays visible with its
   flag, but it cannot be chosen: the price shown is the price of where the
   buyer actually is. Colour never changes, so the state is carried by the
   cursor and by the accessible name. */
.country-option.locked {
  cursor: not-allowed;
}

.country-option .flag {
  font-size: 1.1rem;
}

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

.site-header {
  background-color: #000000;
  border-bottom: 1.5px solid #cfff04;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 16px 24px 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.logo-img {
  height: 46px;
  width: auto;
  display: block;
}

@media (max-width: 480px) {
  .logo-img { height: 38px; }
}

.logo-mark {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #cfff04;
}

/* The navigation is one straight row of links beneath the logo, so every page
   is visible at a glance and nothing is hidden behind a dropdown menu. */
.main-nav {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding-top: 10px;
  border-top: 1px solid #cfff04;
}

.main-nav a {
  color: #cfff04;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 8px 11px;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav a.active {
  color: #000000;
  background-color: #cfff04;
  font-weight: 700;
}

.nav-cta {
  background-color: #cfff04;
  color: #000000 !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  margin-left: 4px;
}

.nav-cta:hover {
  transform: translateY(-1px);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid #cfff04;
  color: #cfff04;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.nav-toggle:hover {
  transform: translateY(-1px);
}

.nav-toggle.open {
  background-color: #cfff04;
  color: #000000;
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-top: 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .main-nav.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }
  .main-nav a {
    padding: 12px 16px;
    border-top: 1px solid #cfff04;
    font-size: 0.95rem;
    white-space: normal;
  }
  .nav-cta {
    margin-left: 0;
    margin-top: 8px;
    text-align: center;
  }
  .site-header-inner { flex-wrap: wrap; }
}

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

.hero {
  background-color: #000000;
  color: #cfff04;
  padding: 80px 0 96px;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 56px 0 64px; }
}

.hero h1 {
  margin-bottom: 24px;
}

.hero h1 .accent { color: #ffffff; }

.hero .lead {
  margin-bottom: 32px;
  color: #cfff04;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  display: inline-block;
  padding: 15px 28px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-primary {
  background-color: #cfff04;
  color: #000000;
  border-color: #cfff04;
}

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

.btn-secondary {
  background-color: transparent;
  color: #cfff04;
  border-color: #cfff04;
}

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

.section-white .btn-secondary {
  color: #000000;
  border-color: #000000;
}

.section-white .btn-secondary:hover {
  transform: translateY(-1px);
}

.hero-card {
  background-color: #cfff04;
  color: #000000;
  padding: 32px;
  border: 1.5px solid #cfff04;
}

.hero-card h3 {
  margin-bottom: 16px;
  color: #000000;
}

.hero-card p {
  color: #000000;
  margin-bottom: 16px;
}

.hero-card .hero-card-meta {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-top: 1.5px solid #000000;
  padding-top: 16px;
  margin-top: 16px;
  color: #000000;
}

/* ==========================================================================
   Stats / trust strip
   ========================================================================== */

.trust-strip {
  background-color: #cfff04;
  color: #000000;
  padding: 28px 0;
}

.trust-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

@media (max-width: 720px) {
  .trust-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

.trust-stat {
  color: #000000;
}

.trust-stat .num {
  font-size: 2rem;
  font-weight: 900;
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}

.trust-stat .label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Section heads
   ========================================================================== */

.section-head {
  margin-bottom: 48px;
  max-width: 760px;
}

.section-head h2 {
  margin-bottom: 16px;
}

/* ==========================================================================
   Step / Process blocks
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.step {
  background-color: #000000;
  border: 1.5px solid #cfff04;
  padding: 32px 28px;
  color: #cfff04;
}

.section-white .step {
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: #cfff04;
  color: #000000;
  font-weight: 900;
  font-size: 1.05rem;
  margin-bottom: 18px;
}

.step h3 {
  margin-bottom: 12px;
}

.step p {
  margin-bottom: 0;
}

/* ==========================================================================
   Cards grid
   ========================================================================== */

.cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.cards-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  background-color: #000000;
  border: 1.5px solid #cfff04;
  padding: 32px 28px;
  color: #cfff04;
  display: flex;
  flex-direction: column;
}

.section-white .card {
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: #cfff04;
  color: #000000;
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 20px;
}

.section-white .card-icon {
  background-color: #000000;
  color: #cfff04;
}

.card h3 { margin-bottom: 12px; }
.card p { margin-bottom: 0; }

/* ==========================================================================
   Comparison table
   ========================================================================== */

.compare-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  color: #000000;
  font-size: 0.92rem;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  border: 1px solid #000000;
  vertical-align: top;
}

.compare-table thead th {
  background-color: #000000;
  color: #cfff04;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
}

.compare-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

.compare-table .row-head {
  font-weight: 700;
  background-color: #cfff04;
  color: #000000;
}

.table-wrap {
  overflow-x: auto;
  border: 1.5px solid #000000;
}

/* ==========================================================================
   Timeline / payment schedule
   ========================================================================== */

.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 880px) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .timeline { grid-template-columns: 1fr; }
}

.timeline-node {
  background-color: #000000;
  border: 1.5px solid #cfff04;
  padding: 24px 20px;
  text-align: center;
  color: #cfff04;
}

.section-white .timeline-node {
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
}

.timeline-node .when {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfff04;
  margin-bottom: 8px;
}

.section-white .timeline-node .when { color: #000000; }

.timeline-node .what {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.timeline-node .note {
  font-size: 0.85rem;
  line-height: 1.5;
}

.timeline-node.first { background-color: #cfff04; color: #000000; border-color: #cfff04; }
.timeline-node.first .when { color: #000000; }

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

.price-hero {
  background-color: #cfff04;
  color: #000000;
  padding: 36px 32px;
  text-align: center;
  border: 1.5px solid #cfff04;
}

.price-hero .price-amount {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  color: #000000;
}

.price-hero .price-unit {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000000;
}

.price-hero .price-note {
  margin-top: 18px;
  font-size: 0.9rem;
  color: #000000;
  border-top: 1.5px solid #000000;
  padding-top: 14px;
}

/* The dark treatment for a price card: a black fill with lime text, which is
   permitted pair one. Declared after the lime rules above so a dark card
   overrides the default lime fill and its black text. */
.price-hero-dark {
  background-color: #000000;
  border-color: #cfff04;
}

.price-hero-dark,
.price-hero-dark .price-amount,
.price-hero-dark .price-unit,
.price-hero-dark .price-note {
  color: #cfff04;
}

.price-hero-dark .price-note {
  border-top-color: #cfff04;
}

/* ==========================================================================
   Quote block
   ========================================================================== */

.quote {
  border-left: 4px solid #cfff04;
  padding: 12px 0 12px 28px;
  font-size: 1.15rem;
  font-weight: 500;
  font-style: italic;
  margin: 28px 0;
}

.section-white .quote {
  border-left-color: #000000;
}

/* ==========================================================================
   Forms / Contact
   ========================================================================== */

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: #ffffff;
  color: #000000;
  border: 1.5px solid #000000;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #cfff04;
  border-width: 2px;
  padding: 13px 15px;
}

.form-group textarea { min-height: 140px; resize: vertical; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

.contact-info-block {
  background-color: #cfff04;
  color: #000000;
  padding: 32px 28px;
}

.contact-info-block h3 { color: #000000; margin-bottom: 16px; }
.contact-info-block p { color: #000000; margin-bottom: 14px; }
.contact-info-block a { color: #000000; text-decoration: underline; }

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

.site-footer {
  background-color: #000000;
  color: #cfff04;
  padding: 72px 0 32px;
  border-top: 1.5px solid #cfff04;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand .logo-mark { font-size: 1.5rem; }
.footer-brand p {
  margin-top: 14px;
  color: #cfff04;
  font-size: 0.92rem;
  max-width: 360px;
}

.footer-col h4 {
  color: #cfff04;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: #cfff04;
  font-size: 0.92rem;
  text-decoration: none;
}

.footer-col a:hover { text-decoration: underline; }

.footer-contact {
  border-top: 1.5px solid #cfff04;
  padding-top: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.92rem;
  color: #cfff04;
}

.footer-contact a {
  color: #cfff04;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1.5px solid #cfff04;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #cfff04;
}

.footer-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #cfff04;
  font-size: 0.85rem;
  color: #cfff04;
  text-align: center;
}

.footer-bottom a {
  color: #cfff04;
  text-decoration: underline;
}

/* ==========================================================================
   Misc helpers
   ========================================================================== */

ul.clean {
  list-style: none;
}

ul.clean li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}

ul.clean li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 2px;
  background-color: #cfff04;
}

.section-white ul.clean li::before { background-color: #000000; }
.section-lime ul.clean li::before { background-color: #000000; }

.divider-lime {
  height: 3px;
  width: 64px;
  background-color: #cfff04;
  margin: 18px 0 28px;
}

.section-white .divider-lime { background-color: #000000; }
.section-lime .divider-lime { background-color: #000000; }

.callout {
  background-color: #cfff04;
  color: #000000;
  padding: 28px 32px;
  margin: 32px 0;
}

.callout h3 { color: #000000; margin-bottom: 10px; }
.callout p { color: #000000; margin-bottom: 0; }

.callout-dark {
  background-color: #000000;
  color: #cfff04;
  border: 1.5px solid #cfff04;
  padding: 28px 32px;
  margin: 32px 0;
}

.callout-dark h3 { color: #cfff04; margin-bottom: 10px; }
.callout-dark p { color: #cfff04; margin-bottom: 0; }

.section-white .callout-dark {
  background-color: #ffffff;
  color: #000000;
  border-color: #000000;
}
.section-white .callout-dark h3 { color: #000000; }
.section-white .callout-dark p { color: #000000; }

.country-banner {
  background-color: #cfff04;
  color: #000000;
  padding: 12px 0;
  font-size: 0.88rem;
  text-align: center;
  font-weight: 600;
  display: none;
  border-bottom: 1.5px solid #000000;
}

.country-banner .flag { margin-right: 8px; }

.page-hero {
  background-color: #000000;
  color: #cfff04;
  padding: 72px 0 64px;
  border-bottom: 1.5px solid #cfff04;
}

.page-hero h1 { margin-bottom: 18px; }
.page-hero h1 .accent { color: #ffffff; }
.page-hero .lead { color: #cfff04; max-width: 760px; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .container, .container-narrow { padding: 0 18px; }
  .hero-card, .callout, .callout-dark { padding: 22px 20px; }
}

/* ==========================================================================
   Figures / Images
   Photographs are content. Their frames and captions obey the colour rules:
   black sections use a lime frame with a black caption strip and lime text,
   white sections use a black frame with a black caption strip and black text.
   ========================================================================== */

.figure {
  margin: 36px 0;
  border: 1.5px solid #cfff04;
  overflow: hidden;
}

.section-white .figure {
  border-color: #000000;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

.figure-center {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Figure captions
   A caption always states the same contrast pair as the section it sits in:
   a black caption strip with lime text on black sections, and a white caption
   strip with black text on white sections.
   ========================================================================== */

.figure figcaption {
  padding: 12px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  background-color: #000000;
  color: #cfff04;
}

.section-white .figure figcaption {
  background-color: #ffffff;
  color: #000000;
}

/* ==========================================================================
   Per deployed employee calculator
   ========================================================================== */

.calc {
  border: 1.5px solid #cfff04;
  padding: 32px;
  margin-top: 24px;
}

.section-white .calc {
  border-color: #000000;
}

.calc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.calc-row label {
  font-weight: 700;
  font-size: 0.95rem;
}

.section-black .calc-row label { color: #cfff04; }
.section-white .calc-row label { color: #000000; }

.calc-row input {
  width: 120px;
  padding: 12px 14px;
  background-color: #ffffff;
  color: #000000;
  border: 1.5px solid #000000;
  font-family: inherit;
  font-size: 1rem;
  text-align: right;
}

.calc-row input:focus {
  outline: none;
  border-color: #cfff04;
  border-width: 2px;
  padding: 11px 13px;
}

.calc-result {
  background-color: #cfff04;
  color: #000000;
  padding: 24px 28px;
  margin-top: 12px;
}

.calc-result .calc-total {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.1;
}

.calc-result .calc-breakdown {
  font-size: 0.9rem;
  margin-top: 10px;
  border-top: 1.5px solid #000000;
  padding-top: 12px;
}

.calc-note {
  font-size: 0.84rem;
  margin-top: 16px;
}

.section-black .calc-note { color: #cfff04; }
.section-white .calc-note { color: #000000; }

/* ==========================================================================
   Policy page layout
   ========================================================================== */

.policy-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 28px 0;
}

.policy-meta .meta-cell {
  border: 1.5px solid #cfff04;
  padding: 20px 22px;
}

.section-white .policy-meta .meta-cell {
  border-color: #000000;
}

.policy-meta .meta-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfff04;
  margin-bottom: 8px;
}

.section-white .policy-meta .meta-label { color: #000000; }

.policy-meta .meta-value {
  font-weight: 700;
  font-size: 1.02rem;
}

.section-black .policy-meta .meta-value { color: #cfff04; }
.section-white .policy-meta .meta-value { color: #000000; }

/* ==========================================================================
   Footer legal column
   ========================================================================== */

.footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Focus visible accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #cfff04;
  outline-offset: 2px;
}

.section-white a:focus-visible,
.section-white button:focus-visible,
.section-white input:focus-visible,
.section-white select:focus-visible,
.section-white textarea:focus-visible {
  outline-color: #000000;
}

/* ==========================================================================
   Comprehensive Responsiveness & Mobile Friendly Enhancements
   ========================================================================== */

/* Universal Fluid Media & Typography Safety */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, p, span, a, li {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Mobile Phones (up to 640px) */
@media (max-width: 640px) {
  .container,
  .container-narrow,
  .topbar-inner,
  .site-header-inner,
  .hero-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section {
    padding: 48px 0 !important;
  }

  .hero {
    padding: 36px 0 48px !important;
  }

  .topbar-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 8px;
  }

  /* The switcher stays pinned to the top right at every width, so it is always
     in the same place rather than drifting to the centre on a phone. */
  .country-switcher {
    align-self: flex-end;
    width: auto;
  }

  .country-toggle {
    width: auto;
    justify-content: flex-end;
    padding: 10px 16px;
    min-height: 44px;
  }

  .country-menu {
    width: auto;
    min-width: 240px;
    left: auto;
    right: 0;
  }

  .calc-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .calc-row label {
    margin-bottom: 4px;
  }

  .calc-row input {
    width: 100% !important;
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
    padding: 12px;
  }

  .calc-result {
    padding: 18px 20px;
  }

  .calc-result .calc-total {
    font-size: 1.8rem;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important; /* iOS zoom prevention */
    padding: 14px 16px !important;
    min-height: 48px;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-black,
  .nav-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 20px !important;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .cards-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .card {
    padding: 24px 20px !important;
  }

  .callout,
  .callout-dark {
    padding: 24px 20px !important;
  }
}

/* Tablets & Medium Screens (641px - 1080px) */
@media (min-width: 641px) and (max-width: 1080px) {
  .container,
  .container-narrow {
    padding-left: 24px;
    padding-right: 24px;
  }

  .section {
    padding: 64px 0;
  }

  .hero {
    padding: 56px 0 64px;
  }

  .cards-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Large Screens & Laptops (1081px+) */
@media (min-width: 1081px) {
  .site-header-inner {
    padding: 14px 24px;
  }
  .main-nav {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .nav-toggle {
    display: none !important;
  }
}