/* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body {
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.6;
      color: #1a1a2e;
      background: #fafaf9;
    }

    /* ── ACCESSIBILITY (Build #1479) ──
       The page previously had NO keyboard focus styling at all — a
       keyboard user could not see where they were. One gold outline
       rule covers every interactive element. -->
    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 2px solid #e6b422;
      outline-offset: 2px;
      border-radius: 4px;
    }
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      background: #e6b422;
      color: #0f0f1a;
      padding: 0.5rem 1rem;
      font-weight: 700;
      z-index: 200;
    }
    .skip-link:focus { left: 0.5rem; top: 0.5rem; }

    /* ── HEADER ── */
    header {
      background: #0f0f1a;
      color: #f0f0f0;
      padding: 0.75rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      row-gap: 0.25rem;
      border-bottom: 3px solid #e6b422;
    }
    /* Build #1479: the two SA flags and the logo are grouped into ONE
       flex item. Previously the four header children (flag, logo, flag,
       switcher) wrapped independently, and at ~360px the second flag
       broke onto its own row and the header went lopsided. The group
       keeps the Build #1476 patriotic frame intact as a unit. */
    .brand-group {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: nowrap;
    }

    /* BUILD #1551: search + language switcher live in one right-aligned
       cluster. As independent children they let the space-between header
       stretch a long dead gap between "Contact" and the search box at
       laptop widths where the nav wraps. */
    .header-tools {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-left: auto;
      flex-wrap: nowrap;
    }

    /* ── LOGO — TTPA-style: icon + bold name + tagline ── */
    .logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      text-decoration: none;
      flex-shrink: 0;
    }
    /* Toptronic® icon image — same 96×96 ICO used as favicon */
    .logo-icon {
      width: 40px;
      height: 40px;
      display: block;
      image-rendering: auto;
    }
    /* "T10142" — bold gold, matching TTPA style where the product code leads */
    .logo-name {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #e6b422;
      line-height: 1.2;
    }
    /* ".com" — lighter colour, smaller weight */
    .logo-domain {
      font-size: 1.5rem;
      font-weight: 400;
      color: #c0c0c0;
      letter-spacing: 0.02em;
    }
    /* Tagline — like TTPA's "TOPTRONIC® TRUSTED PERSONAL ASSISTANTS"
       Build #1479: #888 on #0f0f1a failed WCAG AA at this size (~4:1);
       #a6a6b2 passes at ~7:1. */
    .logo-tagline {
      font-size: 0.7rem;
      font-weight: 400;
      color: #a6a6b2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-left: 0.3rem;
      padding-left: 0.6rem;
      border-left: 1px solid #444;
      line-height: 1.3;
    }
    .logo-tagline sup {
      font-size: 0.6rem;
      vertical-align: super;
    }

    /* ── SA FLAG — TTPA-style patriotic frame around the logo ── */
    .header-flag {
      width: 36px;
      height: 24px;
      display: block;
      flex-shrink: 0;
      border-radius: 3px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      image-rendering: auto;
    }

    /* ── MAIN NAVIGATION (Build #1479, Jacques's request) ──
       Top-gutter tabs jumping to the page sections. Quiet grey pills
       that light up gold on hover; the Pricing tab wears the gold
       outline permanently because it is the page that pays. */
    .main-nav {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: wrap;
    }
    .main-nav a {
      color: #c0c0c0;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
      padding: 0.45rem 0.8rem;
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
    }
    .main-nav a:hover { background: #252540; color: #e6b422; }
    .main-nav a.nav-pricing {
      color: #e6b422;
      border: 1px solid #e6b422;
      font-weight: 700;
    }
    .main-nav a.nav-pricing:hover { background: #e6b422; color: #0f0f1a; }

    /* ── LANGUAGE SWITCHER ── */
    /* ── SITE SEARCH (Build #1538) — header search box + results panel.
          Lives left of the language switcher; dark navy input matching the
          nav chip style, gold focus ring, absolute results listbox. ── */
    .site-search {
      position: relative;
      /* BUILD #1551: margin-left:auto moved to .header-tools (the cluster) */
    }
    /* BUILD #1547: the input gains a left inset for the magnifier icon and
       a right inset for the clear button; the icon sits inside the field
       (pointer-events none) so clicks pass through to the input. */
    .site-search-input {
          width: 240px;
          padding: 0.45rem 2.1rem 0.45rem 2.15rem;
      border-radius: 8px;
      background: #1a1a2e;
      color: #e0e0e0;
      border: 1px solid #333;
      font: inherit;
      font-size: 0.9rem;
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .site-search-input:hover { border-color: #4a4a6a; }
    /* BUILD #1547: decorative magnifier inside the field. */
    .site-search-icon {
      position: absolute;
      left: 0.65rem;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      color: #9a9ab0;
      pointer-events: none;
      z-index: 1;
    }
    .site-search-input:focus ~ .site-search-icon,
    .site-search-input.is-focused ~ .site-search-icon { color: #e6b422; }
    /* BUILD #1547: clear (\u00d7) button, visible only when the JS shows it
       (input non-empty). Same dark chrome as the input, gold on hover. */
    .site-search-clear {
      position: absolute;
      right: 0.35rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1.35rem;
      height: 1.35rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #9a9ab0;
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
    }
    .site-search-clear:hover { color: #e6b422; background: #252540; }
    .site-search-clear:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px rgba(230, 180, 34, 0.45);
    }
    .site-search-input:focus,
    .site-search-input.is-focused {
      outline: none;
      border-color: #e6b422;
      background: #252540;
      box-shadow: 0 0 0 2px rgba(230, 180, 34, 0.45);
    }
    .site-search-input::placeholder { color: #9a9ab0; }
    .site-search-results {
      position: absolute;
      top: calc(100% + 2px);
      right: 0;
      z-index: 60;
      min-width: 300px;
      max-width: 92vw;
      max-height: min(60vh, 420px); /* BUILD #1544: cap height — 6 results with descriptions could overflow short laptop screens */
      overflow-y: auto;
      overscroll-behavior: contain; /* BUILD #1544: wheel scrolling inside the panel must not scroll the page behind it */
      background: #1a1a2e;
      border: 1px solid #e6b422;
      border-radius: 6px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    }
    .site-search-item {
      display: block;
      padding: 0.55rem 0.85rem;
      border-bottom: 1px solid #2a2a45;
    }
    .site-search-item:last-child { border-bottom: none; }
    .site-search-item a {
      color: #e6b422;
      font-weight: 600;
      text-decoration: none;
      display: block;
    }
    .site-search-item a:hover { text-decoration: underline; }
    .site-search-item-desc {
      display: block;
      color: #b8b8cc;
      font-size: 0.82rem;
      margin-top: 0.15rem;
    }
    .site-search-item.is-active { background: #252540; }
    .site-search-empty { color: #b8b8cc; }
    /* BUILD #1541: visible result count + keyboard hint at the foot of the
       results panel, quiet so the links stay the focus. */
    .site-search-foot {
      padding: 0.4rem 0.85rem;
      color: #9a9ab0;
      font-size: 0.78rem;
      background: #15152a;
      border-top: 1px solid #2a2a45;
    }
    /* BUILD #1539: the matched substring is wrapped in <mark> — gold-on-dark
       with the site accent so the reason a page matched is visible. */
    .site-search-hit {
      background: #e6b422;
      color: #1a1a2e;
      border-radius: 2px;
      padding: 0 1px;
    }
    .site-search-status {
      position: absolute;
      width: 1px; height: 1px;
      margin: -1px; padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }
    @media (max-width: 760px) {
      .site-search-input { width: 100%; }
      .site-search { width: 100%; margin-left: 0; }
      /* BUILD #1551: the tools cluster wraps as one unit on small screens */
      .header-tools { width: 100%; order: 4; justify-content: space-between; }
      .site-search-clear { right: 0.5rem; width: 1.6rem; height: 1.6rem; }
    }

    /* ── LANGUAGE SWITCHER (continued) ── */
    .lang-switcher {
      position: relative;
      font-size: 0.9rem;
    }
    .lang-switcher summary {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.75rem;
      border-radius: 6px;
      background: #1a1a2e;
      color: #e0e0e0;
      border: 1px solid #333;
      list-style: none;
      user-select: none;
    }
    .lang-switcher summary::-webkit-details-marker { display: none; }
    .lang-switcher summary::marker { display: none; content: ''; }
    .lang-switcher summary:hover { background: #252540; border-color: #e6b422; }

    /* Globe icon SVG */
    .globe-icon {
      width: 20px; height: 20px;
      flex-shrink: 0;
    }
    .lang-current { font-weight: 500; }

    .lang-switcher[open] summary {
      border-radius: 6px 6px 0 0;
      border-bottom-color: transparent;
      background: #252540;
    }

    .lang-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: #1a1a2e;
      border: 1px solid #333;
      border-top: none;
      border-radius: 0 0 6px 6px;
      min-width: 240px;
      max-height: 60vh;
      overflow-y: auto;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    /* Build #1479: honesty note inside the dropdown. Every language link
       currently opens the English page; saying so plainly preserves
       trust with the Afrikaans-first buyers we most want to court. */
    .lang-note {
      display: block;
      font-size: 0.7rem;
      color: #a6a6b2;
      padding: 0.5rem 1rem;
      border-bottom: 1px solid #2a2a3d;
      line-height: 1.4;
    }
    .lang-dropdown a {
      display: block;
      padding: 0.5rem 1rem;
      color: #ccc;
      text-decoration: none;
      border-bottom: 1px solid #222;
      transition: background 0.15s, color 0.15s;
    }
    .lang-dropdown a:hover,
    .lang-dropdown a:focus {
      background: #e6b422;
      color: #0f0f1a;
    }
    .lang-dropdown a[aria-current="true"] {
      color: #e6b422;
      font-weight: 600;
    }

    /* ── HERO (Build #1479 restructure) ──
       Panel verdict: the old hero showed WHAT and WHO but hid the price
       and offered only a "View Products" scroll-anchor that walked the
       visitor AWAY from the buy button. A product page must answer —
       above the fold — what it is, who it is for, what it costs, and
       what to do next. Gold is demoted from headline-fill to accent
       (restraint reads premium; gold everywhere read "casino"). */
    .hero {
      background: linear-gradient(160deg, #10101c 0%, #17172b 55%, #1c1c33 100%);
      color: #f0f0f0;
      text-align: center;
      padding: 5rem 2rem;
      border-bottom: 3px solid #e6b422;
    }
    .hero h1 {
      font-size: clamp(2rem, 4.5vw + 1rem, 3rem);
      font-weight: 800;
      margin-bottom: 0.75rem;
      color: #f5f4ef;
      letter-spacing: -0.025em;
      line-height: 1.15;
      text-wrap: balance;
    }
    .hero p.subtitle {
      font-size: 1.2rem;
      color: #c8c8d2;
      max-width: 640px;
      margin: 0 auto 2rem;
      line-height: 1.55;
      text-wrap: balance;
    }
    .hero p.subtitle strong { color: #f0f0f0; }
    .hero-ctas { margin-bottom: 0; }
    .hero-trust {
      margin-top: 1.75rem;
      font-size: 0.85rem;
      color: #a6a6b2;
      letter-spacing: 0.02em;
    }

    /* ── CALL-TO-ACTION BUTTONS (Build #1479 — CRITICAL FIX) ──
       These rules were previously scoped to ".hero .cta", so the Buy
       button on the pricing card (<button class="cta plan-cta">) matched
       NONE of them and rendered as a default grey browser button on
       every device — the page's primary revenue action looked broken.
       The rules are now global; font-family: inherit is required because
       <button> does not inherit the body font by default. */
    .cta {
      display: inline-block;
      background: #e6b422;
      color: #0f0f1a;
      font-weight: 700;
      padding: 0.75rem 2rem;
      border: none;
      border-radius: 8px;
      text-decoration: none;
      font-size: 1.05rem;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
    }
    .cta:hover { background: #f2c14e; }
    .cta:active { transform: translateY(1px); }
    .cta:disabled { opacity: 0.6; cursor: wait; }
    /* Secondary CTA — outline style so the BUY action keeps the gold. */
    .cta-secondary {
      background: transparent;
      color: #e6b422;
      border: 1px solid #e6b422;
      margin-left: 0.75rem;
    }
    .cta-secondary:hover { background: rgba(230,180,34,0.12); }

    /* ── SECTIONS ── */
    section {
      max-width: 900px;
      margin: 4.5rem auto;
      padding: 0 2rem;
    }
    section h2 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: #0f0f1a;
      letter-spacing: -0.01em;
      /* Build #1479: the full-width gold underline read like a legal
         divider on every heading; a short accent bar is the premium
         pattern and uses the brand colour sparingly. */
      position: relative;
      padding-bottom: 0.6rem;
    }
    section h2::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 3rem;
      height: 3px;
      background: #e6b422;
      border-radius: 2px;
    }
    section p, section li {
      color: #333;
      margin-bottom: 0.75rem;
      /* Build #1479: reading comfort — lines previously ran ~95
         characters wide; 65ch is the accepted comfort ceiling. */
      max-width: 65ch;
    }
    section strong { font-weight: 600; }
    section ul { padding-left: 1.5rem; margin-bottom: 1rem; }
    section li { margin-bottom: 0.4rem; }
    section li::marker { color: #e6b422; }
    /* Link detail (Build #1479): gold-tinted underlines — cheap, quiet
       brand echo inside body copy. */
    section a { color: #1a1a2e; text-decoration-color: #e6b422; text-underline-offset: 0.15em; }
    section a:hover { color: #0f0f1a; text-decoration-thickness: 2px; }
    ::selection { background: #e6b422; color: #0f0f1a; }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-top: 1.5rem;
    }
    .card {
      background: #fff;
      border: 1px solid #e7e3d7;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(15,15,26,0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(15,15,26,0.10);
    }
    /* Touch devices must not keep the lifted state after a tap. */
    @media (hover: none) {
      .card:hover { transform: none; }
    }
    .card h3 {
      font-size: 1.25rem;
      color: #0f0f1a;
      margin-bottom: 0.5rem;
      border-left: 3px solid #e6b422;
      padding-left: 0.6rem;
    }

    /* ── FAQ (Build #1479) ──
       answers the objections the customer panel raised BEFORE they have
       to email us: Windows versions, offline use, the 12-month question,
       EFT payment, refunds, delivery, languages. Doubles as FAQPage
       structured data (see the JSON-LD block in <head>). */
    .faq-item {
      background: #fff;
      border: 1px solid #e7e3d7;
      border-radius: 12px;
      padding: 0.9rem 1.25rem;
      margin-bottom: 0.75rem;
    }
    .faq-item summary {
      cursor: pointer;
      font-weight: 600;
      color: #0f0f1a;
      list-style: none;
      position: relative;
      padding-right: 1.5rem;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      position: absolute;
      right: 0;
      top: 0;
      color: #e6b422;
      font-weight: 700;
    }
    .faq-item[open] summary::after { content: "–"; }
    .faq-item p { margin-top: 0.6rem; }

    /* ── DIRECT-CONTACT LINKS (Build #1479, Jacques's details) ──
       Same icon + label + value pattern as the contacts page of our
       TTPA web property: handset = Call, speech bubble = Short Message
       Service (SMS), envelope = Email. tel:/sms: links open the right
       app on a mobile phone. Selectors are written as
       "section .contact-link" so they outrank the generic "section a"
       gold-underline rule above. */
    section .contact-direct {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem 1.75rem;
      margin-bottom: 1rem;
      max-width: 65ch;
    }
    section .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      text-decoration: none;
      color: #1a1a2e;
      font-weight: 600;
    }
    section .contact-link:hover .contact-value {
      text-decoration: underline;
      text-decoration-color: #e6b422;
      text-underline-offset: 0.15em;
    }
    .contact-icon { width: 20px; height: 20px; color: #8a6d1a; flex-shrink: 0; }
    .contact-label {
      color: #8a6d1a;
      font-weight: 700;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .contact-address {
      font-style: normal;
      color: #333;
      margin-bottom: 0.75rem;
      line-height: 1.6;
    }

    /* ── FOOTER ── */
    footer {
      background: #0f0f1a;
      color: #a6a6b2;
      text-align: center;
      padding: 2rem;
      font-size: 0.85rem;
      letter-spacing: 0.01em;
      border-top: 3px solid #e6b422;
      margin-top: 3rem;
    }
    footer a { color: #e6b422; text-decoration: none; }
    footer a:hover { text-decoration: underline; }
    footer .footer-build {
      margin-top: 1rem;
      font-size: 0.75rem;
      color: #666;
      letter-spacing: 0.02em;
    }
    /* ── BUILD #1525: visitor IP + Country-from-IP line ──
       Sits directly under the Build line in the footer and inside the
       BUY ONLINE tile. Muted colour so it reads as metadata, monospace
       for the values so dots/digits align. */
    /* BUILD #1526 CONTRAST FIX: the footer background is #0f0f1a
       (near-black); the old #666/#444 metadata colours sat below WCAG AA
       contrast on it (about 2:1). Now #9a9aa8 on #0f0f1a is about 6:1, and
       the values read brighter than the label so the eye lands on the
       answer, not the question. */
    footer .footer-ip,
    .plan-ip {
      margin-top: 0.25rem;
      font-size: 0.75rem;
      color: #9a9aa8;
      letter-spacing: 0.02em;
    }
    .plan-ip { margin-top: 0.5rem; }
    .footer-ip .ip-value,
    .plan-ip .ip-value {
      font-family: Consolas, "Cascadia Mono", monospace;
      color: #c4c4d0;
    }

    /* ── TOPTRONIC FAMILY MENU (Build #1478) ──
       Mirrors the footer family block on the other Toptronic web
       properties so visitors can hop between every group site.
       All targets are Toptronic-owned brands only (hard brand rule). */
    footer .family {
      margin: 0 auto 1.5rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid #2a2a3d;
      max-width: 900px;
    }
    footer .family h2 {
      color: #e6b422;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }
    footer .family h2 sup { font-size: 0.6rem; }
    footer .family ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.35rem 1.4rem;
    }
    footer .family a { color: #c0c0c0; }
    footer .family a:hover { color: #e6b422; text-decoration: underline; }
    footer .family a sup { font-size: 0.62rem; }

    /* ── PRICING / PLAN CARDS (Build #1478; crowned in Build #1479) ── */
    .plan-price {
      font-size: 1.4rem;
      font-weight: 700;
      color: #0f0f1a;
      margin-bottom: 0.5rem;
      letter-spacing: -0.01em;
      /* tabular figures keep R 12,500 / R 750 aligned */
      font-variant-numeric: tabular-nums;
    }
    .plan-cta { margin-top: 1rem; }
    .plan-status {
      min-height: 1.2rem;
      font-size: 0.8rem;
      color: #7a5c10;
      font-style: italic;
      margin-top: 0.5rem;
    }
    .plan-note {
      font-size: 0.85rem;
      color: #4a4a5e;
      border-top: 1px dashed #d8d4c4;
      margin-top: 0.9rem;
      padding-top: 0.7rem;
    }
    /* The web-sold card gets the visual crown — gold border + badge. */
    .plan-featured {
      border: 2px solid #e6b422;
      box-shadow: 0 8px 24px rgba(15,15,26,0.12);
    }
    .plan-badge {
      display: inline-block;
      background: #e6b422;
      color: #0f0f1a;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      margin-bottom: 0.5rem;
    }
    .plan-secure {
      font-size: 0.8rem;
      color: #5a5a70;
      margin-top: 0.5rem;
    }

    /* ── RESPONSIVE — Mobile-First Design ── */
    /*
     * Build #1477: responsive tiers optimized for SA device landscape.
     * SA mobile market is ~60% Android (various screen sizes), ~35% entry-level
     * smartphones (360-412px wide), ~5% tablets/iPads (768-1024px).
     * (Build #1479 comment fix: there are FOUR media queries below plus
     * the implicit base styles for laptops — the old comment claimed five.)
     *
     * Tier 1: Small phones (<480px) — entry-level Android, iPhone SE
     * Tier 2: Large phones (480-768px) — modern smartphones in portrait
     * Tier 3: Tablets (768-1024px) — iPads, Android tablets
     * Base:   Laptops (1024-1440px) — default desktop style
     * Tier 5: Large desktops (>1440px) — wide-screen monitors
     */

    /* ── TIER 1: Small phones (<480px) ── */
    @media (max-width: 479px) {
      html { font-size: 14px; }
      body { line-height: 1.5; }

      /* Stack the header vertically; hide tagline and shrink logo */
      header {
        padding: 0.5rem;
        justify-content: center;
        gap: 0.4rem;
      }
      /* Nav tabs — their own full-width centred row below the brand */
      .main-nav { order: 3; width: 100%; justify-content: center; }
      .main-nav a { font-size: 0.8rem; padding: 0.35rem 0.55rem; }
      .header-flag { width: 24px; height: 16px; }
      .logo-icon { width: 28px; height: 28px; }
      .logo-name { font-size: 1.1rem; }
      .logo-domain { font-size: 1.1rem; }
      .logo-tagline { display: none; }

      /* Language switcher — compact on tiny screens */
      .lang-switcher { font-size: 0.75rem; }
      .lang-switcher summary { padding: 0.25rem 0.5rem; }
      .lang-dropdown { right: 0; left: auto; min-width: 10rem; font-size: 0.75rem; }
      .lang-dropdown a { padding: 0.4rem 0.6rem; }

      /* Hero — less padding, smaller text, CTAs stack full-width */
      .hero { padding: 2rem 0.75rem; }
      .hero p.subtitle { font-size: 0.95rem; }
      .hero .cta {
        display: block;
        margin: 0.4rem auto;
        max-width: 20rem;
        padding: 0.6rem 1.25rem;
        font-size: 0.95rem;
      }
      .hero .cta-secondary { margin-left: 0; }

      /* Sections — full width, less padding */
      section { padding: 0 0.75rem; margin: 2rem auto; }
      section h2 { font-size: 1.3rem; }

      /* Cards — single column, full width */
      .card-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
      }
      .card { padding: 1rem; }

      /* Footer */
      footer { padding: 1.5rem 1rem; font-size: 0.75rem; }
    }

    /* ── TIER 2: Large phones (480-768px) ── */
    @media (min-width: 480px) and (max-width: 767px) {
      html { font-size: 15px; }

      header { padding: 0.6rem 1rem; gap: 0.6rem; }
      /* Nav tabs wrap to their own centred row on large phones too —
         brand + 5 tabs + switcher is too wide for 480-767px. */
      .main-nav { order: 3; width: 100%; justify-content: center; }
      .header-flag { width: 28px; height: 18px; }
      .logo-icon { width: 32px; height: 32px; }
      .logo-name { font-size: 1.2rem; }
      .logo-domain { font-size: 1.2rem; }
      .logo-tagline { display: none; }

      .lang-switcher { font-size: 0.8rem; }
      .lang-dropdown { min-width: 200px; }

      .hero { padding: 2.5rem 1rem; }
      .hero p.subtitle { font-size: 1rem; }

      section { padding: 0 1rem; margin: 2.5rem auto; }
      section h2 { font-size: 1.5rem; }

      .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
      }

      footer { padding: 1.5rem 1rem; font-size: 0.8rem; }
    }

    /* ── TIER 3: Tablets (768-1024px) ── */
    @media (min-width: 768px) and (max-width: 1023px) {
      html { font-size: 15px; }

      header { padding: 0.7rem 1.5rem; }
      .header-flag { width: 32px; height: 21px; }
      .logo-icon { width: 36px; height: 36px; }
      .logo-name { font-size: 1.35rem; }
      .logo-domain { font-size: 1.35rem; }
      /* Show tagline on wider tablets */
      .logo-tagline { font-size: 0.65rem; }

      .hero { padding: 3rem 1.5rem; }
      .hero p.subtitle { font-size: 1.1rem; max-width: 560px; }

      /* Build #1479: 720px made an iPad portrait look like a stretched
         phone with empty gutters; 860px uses the screen properly. */
      section { padding: 0 1.5rem; max-width: 860px; }
      section h2 { font-size: 1.6rem; }

      .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.25rem;
      }
    }

    /* ── TIER 5: Large desktops (>1440px) ── */
    @media (min-width: 1441px) {
      html { font-size: 18px; }

      header { padding: 1rem 3rem; }
      .hero { padding: 5rem 3rem; }
      .hero p.subtitle { max-width: 720px; }

      section { max-width: 1000px; }

      .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
      }
    }

    /* ── TOUCH TARGETS: ensure all interactive elements are ≥44×44px ──
       Build #1479: the Buy button (.plan-cta) is now included and goes
       full-width on coarse pointers — the correct mobile pattern. */
    @media (hover: none) and (pointer: coarse) {
      .lang-switcher summary {
        min-height: 44px;
        display: flex;
        align-items: center;
      }
      /* Nav tabs are tap targets too (Build #1479) */
      .main-nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .hero .cta {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .plan-cta {
        min-height: 48px;
        width: 100%;
      }
    }
    @media (hover: none) and (pointer: coarse) and (max-width: 479px) {
      .hero .cta { display: flex; }
    }

    /* ── REDUCED MOTION (Build #1479) ──
       Respect users who ask their device for less animation. */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
    }

    /* ── MULTIPAGE ADDITIONS (Build #1479) ──
       The site grew from one page to several; these rules cover the
       shared extras: active-tab state, sub-page hero band, and the
       "content being prepared" placeholder panel. */

    /* Active tab — which page am I on? */
    .main-nav a[aria-current="true"] {
      color: #e6b422;
      font-weight: 700;
    }

    /* Sub-page hero — a slim navy band so inner pages feel related to
       the home hero without competing with it. */
    .page-hero {
      background: linear-gradient(160deg, #10101c 0%, #17172b 55%, #1c1c33 100%);
      color: #f0f0f0;
      text-align: center;
      padding: 3rem 2rem;
      border-bottom: 3px solid #e6b422;
    }
    .page-hero h1 {
      font-size: clamp(1.6rem, 3vw + 1rem, 2.2rem);
      font-weight: 800;
      color: #f5f4ef;
      letter-spacing: -0.02em;
      line-height: 1.15;
      text-wrap: balance;
      margin-bottom: 0.5rem;
    }
    .page-hero p {
      color: #a6a6b2;
      font-size: 1rem;
      max-width: 640px;
      margin: 0 auto;
      text-wrap: balance;
    }

    /* Placeholder panel — honest "we are still writing this" block for
       skeleton pages. Better a true sentence than a thin page. */
    .placeholder-panel {
      background: #fff;
      border: 1px dashed #d8d4c4;
      border-radius: 12px;
      padding: 1.5rem;
      color: #4a4a5e;
      font-size: 0.95rem;
      max-width: 65ch;
    }
    .placeholder-panel strong { color: #0f0f1a; }

    /* Simple definition-style rows for changelog entries later */
    .page-note {
      font-size: 0.85rem;
      color: #5a5a70;
      font-style: italic;
    }

    /* ── MADE POSSIBLE BY (Build #1537) ─────────────────────────────
       Text-tile marquee of South African organisations (mining,
       electrical, manufacturing, municipal electricity, transport).
       Same motion pattern as the sister product site's brand strip:
       one track duplicated by JS (js/mpb.js), translateX(-50%)
       animation, edge fade mask, pause on hover, honour
       prefers-reduced-motion. Dark navy band so it reads as a
       "hall of thanks" between the light hero and demo sections. */
    .mpb {
      background: linear-gradient(160deg, #10101c 0%, #17172b 55%, #1c1c33 100%);
      border-top: 3px solid #e6b422;
      border-bottom: 3px solid #e6b422;
      padding: 2.6rem 2rem 2.8rem;
      margin: 4.5rem 0;
      max-width: none;
    }
    .mpb h2 {
      text-align: center;
      color: #f5f4ef;
      font-size: 1.8rem;
      margin-bottom: 0.4rem;
      letter-spacing: -0.01em;
    }
    .mpb .mpb-intro {
      text-align: center;
      color: #a6a6b2;
      max-width: 640px;
      margin: 0 auto 1.8rem;
      text-wrap: balance;
    }
    .mpb .marquee { overflow: hidden; width: 100%; }
    .mpb .marquee-mask {
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .mpb-track {
      display: flex;
      align-items: center;
      gap: 1rem;
      width: max-content;
      padding: 0.4rem 0.8rem;
      animation: mpb-scroll 120s linear infinite;
    }
    .mpb .marquee:hover .mpb-track { animation-play-state: paused; }
    .mpb-item {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(230,180,34,0.35);
      border-radius: 999px;
      color: #f0f0f0;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      padding: 0.45rem 1.1rem;
      white-space: nowrap;
    }
    /* BUILD #1537: logo tiles — image variant of the tile. Logos sit on a
       white chip so dark brand marks stay legible on the navy band (same
       pattern as the sister product site's logo strip).
       BUILD #1569: (a) the box grew 128x32 -> 160x40 (a straight +25% on every
       mark, which is what a logo wall needs to stay readable); (b) an
       `mpb-on-band` variant gives WHITE marks the same translucent chip the
       text tiles already use, because a white mark is invisible on the pale
       chip. Tiles are now tight-cropped to their own mark, so `width:auto`
       makes each chip hug its logo instead of padding every one to a fixed
       canvas — the mark gets as much of the box as its own shape allows. */
    .mpb-item.mpb-logo {
      background: #f5f4ef;
      border-color: rgba(255,255,255,0.25);
      padding: 0.55rem 0.9rem;
    }
    .mpb-item.mpb-logo img {
      height: 40px;
      width: auto;
      max-width: 160px;
      object-fit: contain;
      display: block;
    }
    /* BUILD #1569: white-on-transparent marks (the company's own white logo)
       keep the translucent chip + gold border of the text tiles, so they read
       against the navy band. Never recolour a brand mark — change the socket. */
    .mpb-item.mpb-logo.mpb-on-band {
      background: rgba(255,255,255,0.06);
      border-color: rgba(230,180,34,0.35);
    }
    @media (max-width: 560px) {
      .mpb-item.mpb-logo img { height: 30px; max-width: 120px; }
    }
    @keyframes mpb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    /* BUILD #1539 (owner note): the gratitude/disclaimer line must sit
       horizontally centred under the "Made Possible By" heading — same
       centred-block treatment as .mpb-intro (max-width + auto margins).
       text-align alone left the line hugging the left edge on wide screens
       when a shrink-to-fit ancestor is in play; the auto-margin block makes
       the centring unambiguous. */
    .mpb .mpb-note {
      display: block;
      max-width: 640px;
      margin: 1.4rem auto 0;
      text-align: center;
      text-wrap: balance;
      color: #6b7d92;
      font-size: 0.82rem;
    }
    /* GAP FIX: JS duplicates the track children; if the half-width of
       the doubled track is not an even multiple, a gap can appear at
       the seam — the flex gap on the join point is provided by giving
       the track symmetric padding instead, and the duplicate loop
       starts with the same gap. (js/mpb.js keeps them identical.) */
    @media (prefers-reduced-motion: reduce) { .mpb-track { animation: none; } }
    @media (max-width: 560px) {
      .mpb { padding: 1.8rem 1rem; }
      .mpb h2 { font-size: 1.45rem; }
      .mpb-track { gap: 0.7rem; }
      .mpb-item { font-size: 0.82rem; padding: 0.35rem 0.85rem; }
    }