/* ===========================================================================
   Tanzania eCommerce Ecosystem (TEE)
   ---------------------------------------------------------------------------
   TEE is not a shop. It is the national umbrella body that connects private
   innovators, carriers, banks and regulators, and issues a Trust Mark that
   merchants display. So the site is built to read as an institution: a seal,
   a charter, a register — not a startup landing page.

   Two ideas carry it.

   1. THE ORDER'S JOURNEY. The profile lists four "Core Operational Chapters"
      as a flat list. They are not a list: they are the four stages a single
      order actually passes through — it is warehoused, it is carried, it is
      sold, it is paid for. The page sets them as one connected run, which is
      what the word "ecosystem" is trying to say. They are numbered because
      the order really does happen in that order.

   2. THE MARK. The Trust Mark is the one thing a member receives and shows
      to buyers, so Silver and Gold are drawn as seals that echo the crest —
      ring, ribbon, struck metal — rather than as pricing cards.

   Every colour is sampled from the crest: the seal navy, the gold of the
   lettering and the ring, the teal and green arms of the circuit mark, and
   the cream of the ring's field.
   ======================================================================== */

:root{
  /* sampled from the crest */
  --navy:      #0C3060;   /* the seal — the institutional ground */
  --navy-2:    #10396F;   /* a raised panel on the navy */
  --navy-3:    #1C4D8C;   /* rules and borders on the navy */
  --navy-deep: #071E3D;   /* the footer, and the deepest band */
  --gold:      #F0CC6C;   /* the TEE lettering — the mark itself */
  --gold-deep: #C09C48;   /* the struck metal of the outer ring — rules, borders */
  --gold-ink:  #8A6A20;   /* gold as TYPE on paper. --gold-deep is ~2.5:1 on
                             white and fails AA; this clears it. */
  --teal:      #0C5478;   /* the circuit's blue arm */
  --green:     #0C7848;   /* the circuit's green arm — verified */
  --paper:     #F7F5EC;   /* the cream field inside the ring */
  --paper-2:   #EFEBDD;
  --line:      #DED8C6;

  --ink:    #11213A;      /* body text on paper */
  --ink-2:  #36465F;
  --mute:   #586680;      /* quiet text on paper. #5E6C82 measured 4.46:1 on
                             --paper-2 and failed AA by a hair; this is 4.85. */
  --ash:    #AFC0D6;      /* quiet text on navy */

  --radius: 14px;         /* the benchmark is soft-edged throughout */
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-tile: 15px;

  --max: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --sec-y: clamp(68px, 8.5vw, 124px);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font:    'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shadow:    0 24px 60px rgba(7,30,61,.13);
  --shadow-sm: 0 2px 10px rgba(7,30,61,.06), 0 10px 30px rgba(7,30,61,.05);
  --shadow-lift: 0 10px 20px rgba(7,30,61,.08), 0 24px 54px rgba(7,30,61,.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:1.0625rem; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; line-height:1.1;
  letter-spacing:-.012em; margin:0 0 .5em;
  /* Archivo carries a width axis. Headings are set wide because signage and
     seals are wide; body text is not. */
  font-variation-settings:'wdth' 112;
}
h1{ font-size:clamp(2.3rem,5.4vw,4.1rem); font-weight:800; font-variation-settings:'wdth' 118; }
h2{ font-size:clamp(1.8rem,3.9vw,2.9rem); font-weight:800; }
h3{ font-size:clamp(1.1rem,1.75vw,1.3rem); font-weight:700; font-variation-settings:'wdth' 106; letter-spacing:-.005em; }
p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; }
::selection{ background:var(--gold); color:var(--navy); }

/* ── skip link ───────────────────────────────────────────────────────── */
.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--navy); padding:14px 20px; font-weight:700; text-decoration:none; }
.skip:focus{ left:0; }

/* ── shells ──────────────────────────────────────────────────────────── */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--sec-y); background:var(--paper); color:var(--ink); }
.sec--alt { background:var(--paper-2); }
.sec--navy{ background:var(--navy); color:var(--paper); }
.sec--navy h1,.sec--navy h2,.sec--navy h3{ color:var(--paper); }
.sec--navy p{ color:#D7E2F0; }

.eyebrow{
  display:block; font-family:var(--font);
  font-size:.72rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px;
}
.sec--navy .eyebrow{ color:var(--gold); }

.sec-head{ max-width:780px; margin-bottom:clamp(40px,5.2vw,66px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .rule{ margin-inline:auto; }
.sec-head p{ font-size:1.12rem; color:var(--mute); }
.sec--navy .sec-head p{ color:var(--ash); }
.center{ text-align:center; }
.lead{ font-size:1.15rem; }

/* a gold hairline, the way a certificate is ruled */
.rule{ height:2px; background:var(--gold-deep); width:64px; margin-bottom:22px; }
.sec--navy .rule{ background:var(--gold); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font); font-weight:700; font-size:.95rem; line-height:1.2;
  padding:15px 30px; border-radius:var(--radius-pill); border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn--gold{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.btn--gold:hover{ background:#FFDC8A; border-color:#FFDC8A; }
.btn--navy{ background:var(--navy); color:var(--paper); border-color:var(--navy); }
.btn--navy:hover{ background:var(--navy-2); border-color:var(--navy-2); }
.btn--line{ border-color:var(--navy); color:var(--navy); }
.btn--line:hover{ background:var(--navy); color:var(--paper); }
.btn--ghost{ border-color:rgba(247,245,236,.5); color:var(--paper); }
.btn--ghost:hover{ background:var(--paper); color:var(--navy); border-color:var(--paper); }
.btn--lg{ padding:17px 34px; font-size:1rem; }
.btn--sm{ padding:10px 18px; font-size:.86rem; }
.btn--block{ width:100%; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar{
  background:var(--navy-deep); color:var(--paper);
  font-size:.82rem; font-weight:600; text-align:center; padding:9px var(--gutter);
  border-bottom:1px solid var(--navy-3);
}
.topbar strong{ color:var(--gold); letter-spacing:.06em; }
.topbar a{ color:var(--paper); text-underline-offset:3px; }

/* ── navigation ──────────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:100; background:var(--navy); border-bottom:2px solid var(--gold-deep); }
.nav.scrolled{ box-shadow:0 10px 30px rgba(7,30,61,.4); }
.nav__inner{ width:100%; max-width:var(--max); margin-inline:auto; padding:10px var(--gutter);
  display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; text-decoration:none; }
.brand img{ height:50px; width:50px; }   /* the seal is square */
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{ font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 118;
  font-size:1.02rem; color:var(--paper); letter-spacing:.02em; }
.brand__txt span{ font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }

.nav__links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__links a{
  position:relative; padding:10px 11px; border-radius:var(--radius);
  font-size:.87rem; font-weight:600; color:#CBD8E8; text-decoration:none; transition:color .16s;
  white-space:nowrap;   /* "Trust Mark" was breaking across two lines */
}
.nav__links a:hover,.nav__links a.active{ color:var(--paper); }
.nav__links a.active::after{ content:''; position:absolute; left:12px; right:12px; bottom:3px; height:2px; background:var(--gold); }
.nav__actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

/* EN / SW, as a pill in the bar — the benchmark's pattern, and the reason
   every piece of copy on this site carries a data-i18n key. */
.lang{
  display:inline-flex; align-items:center; gap:2px; padding:4px;
  border:1px solid var(--navy-3); border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06); flex:0 0 auto;
}
.lang button{
  border:0; background:transparent; cursor:pointer;
  font-family:var(--font); font-weight:700; font-size:.76rem; letter-spacing:.05em;
  color:#CBD8E8; padding:7px 13px; border-radius:var(--radius-pill);
  transition:background .18s, color .18s;
}
.lang button:hover{ color:var(--paper); }
.lang button.active{ background:var(--gold); color:var(--navy); }

.burger{ display:none; width:46px; height:46px; padding:0; background:transparent;
  border:1px solid var(--navy-3); border-radius:var(--radius); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ display:block; width:20px; height:2px; background:var(--paper); }

/* ═══════════════════════════ HERO ═══════════════════════════════════════
   A photograph from the launch at the Hyatt Regency, full bleed, under a
   navy scrim weighted to the left so the headline always has something dark
   behind it regardless of what the picture is doing. The crest is not
   repeated here — it is already in the bar, and the benchmark's hero carries
   no logo either. */
.hero{
  position:relative; overflow:hidden; color:var(--paper); background:var(--navy-deep);
  padding-block:clamp(76px,9.5vw,146px) clamp(62px,8vw,112px);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0; opacity:0; transition:opacity .9s ease;
}
.hero__slide.is-on{ opacity:1; }
/* Without JavaScript nothing adds .is-on, so the first slide has to stand on
   its own — the hero then behaves exactly as a single photograph would. */
.hero__slide:first-child{ opacity:1; }
.hero__slide.is-on ~ .hero__slide:first-child{ opacity:0; }
.js .hero__slide:first-child{ opacity:0; }
.js .hero__slide.is-on{ opacity:1; }
.hero__slide picture, .hero__slide img{ display:block; width:100%; height:100%; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 44%; }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(7,30,61,.95) 0%, rgba(7,30,61,.88) 32%,
                    rgba(12,48,96,.70) 58%, rgba(12,48,96,.48) 100%),
    linear-gradient(to top, rgba(7,30,61,.92), rgba(7,30,61,0) 46%);
}
/* the crest's own circuit motif, laid over a room of people connecting */
.hero__net{
  position:absolute; inset:-8% -6%; z-index:0; pointer-events:none;
  background:url('../img/network.svg') center/cover no-repeat; opacity:.3;
  animation:drift 70s linear infinite alternate;
}
@keyframes drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-30px,-20px,0) } }
.hero .container{ position:relative; z-index:1; }

.hero__pill{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); background:rgba(255,255,255,.1);
  border:1px solid rgba(240,204,108,.42);
  padding:9px 18px; border-radius:var(--radius-pill); margin-bottom:26px;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.hero__pill::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(12,120,72,.32); }
.hero h1{ margin-bottom:.4em; max-width:19ch; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__lead{ font-size:clamp(1.06rem,1.5vw,1.22rem); color:#E3EAF5; max-width:56ch;
  text-shadow:0 1px 14px rgba(0,0,0,.4); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__note{
  margin-top:clamp(28px,3.6vw,44px); padding-left:18px; border-left:3px solid var(--gold);
  font-size:.94rem; color:#D3DEEC; max-width:46ch;
}

/* ── slider controls ─────────────────────────────────────────────────
   Sat inside the hero container so they line up with the copy rather than
   floating over the photograph. */
.slider-ui{
  display:flex; align-items:center; gap:10px;
  margin-top:clamp(26px,3.4vw,40px);
}
.slider-btn{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid rgba(247,245,236,.38); border-radius:var(--radius-pill);
  background:rgba(7,30,61,.42); color:var(--paper); cursor:pointer;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  transition:background .18s, border-color .18s, transform .18s;
}
.slider-btn svg{ width:18px; height:18px; }
.slider-btn:hover{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.slider-btn--play svg{ width:15px; height:15px; }

.slider-dots{ display:flex; align-items:center; gap:8px; padding:0 6px; }
.slider-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(247,245,236,.42); cursor:pointer;
  transition:background .2s, width .25s, border-radius .25s;
}
.slider-dots button[aria-current="true"]{ background:var(--gold); width:26px; border-radius:var(--radius-pill); }
.slider-dots button:hover{ background:var(--paper); }

/* ── the launch gallery ──────────────────────────────────────────────── */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,18px); }
.gallery figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow-sm); background:var(--navy-2); aspect-ratio:4/3; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery figure:hover img{ transform:scale(1.05); }
/* the first frame takes two columns and two rows, so the grid is not a
   uniform mosaic of identical squares */
.gallery figure:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
/* The feature takes four cells, so with eight frames the last one widens to
   close the grid. Otherwise the final row ends ragged. */
.gallery figure:last-child{ grid-column:span 2; aspect-ratio:8/3; }
.gallery__cap{ margin-top:clamp(18px,2.4vw,26px); font-size:.92rem; color:var(--ash); }
.sec:not(.sec--navy) .gallery__cap{ color:var(--mute); }

/* ── the counts, which are real and specific ─────────────────────────── */
.figures{ background:var(--navy-deep); border-top:2px solid var(--gold-deep);
  display:grid; grid-template-columns:repeat(4,1fr); }
.figure{ padding:clamp(20px,2.8vw,32px) clamp(12px,2vw,26px); text-align:center;
  border-right:1px solid var(--navy-3); }
.figure:last-child{ border-right:0; }
.figure__n{ font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 118;
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1; color:var(--gold); }
.figure__l{ margin-top:7px; font-size:.78rem; font-weight:600; letter-spacing:.05em; color:var(--ash); }

/* ═════════════════ THE ORDER'S JOURNEY — the four chapters ══════════════
   A connected run, not four boxes. The rule that joins them is the point. */
.chain{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.chain::before{
  /* Runs from the first circle's centre to the last one's, not to the edge
     of the container: a line that carries on past the final stage says the
     chain continues, and it does not. */
  content:''; position:absolute; top:46px; height:2px;
  left:46px; right:calc(25% - 46px);
  background:linear-gradient(90deg, var(--teal), var(--green) 48%, var(--gold-deep));
}
.stage{ position:relative; padding:0 clamp(12px,1.8vw,24px) 0 0; }
.stage:last-child{ padding-right:0; }
.stage__n{
  position:relative; z-index:1;
  width:96px; height:96px; display:grid; place-items:center;
  border-radius:50%; background:var(--paper); border:2px solid var(--gold-deep);
  font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 118;
  font-size:1.55rem; color:var(--navy); margin-bottom:22px;
  box-shadow:0 0 0 8px var(--paper);
}
.sec--alt .stage__n{ background:var(--paper-2); box-shadow:0 0 0 8px var(--paper-2); }
.stage h3{ margin-bottom:.45em; min-height:2.2em; }  /* two lines: titles differ in length */
.stage p{ font-size:.96rem; color:var(--mute); }
.stage__eg{ display:block; margin-top:10px; font-size:.86rem; color:var(--teal); font-weight:600; }

/* ── plain cards ─────────────────────────────────────────────────────── */
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3vw,36px); box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.sec--navy .card{ background:var(--navy-2); border-color:var(--navy-3); box-shadow:none; }
.sec--navy .card:hover{ box-shadow:0 18px 40px rgba(0,0,0,.28); }

/* The icon tile the benchmark uses on every card: a rounded square in a pale
   tint of the brand colour, holding a simple mark. */
.tile{
  width:54px; height:54px; border-radius:var(--radius-tile);
  display:grid; place-items:center; margin-bottom:20px;
  background:rgba(12,84,120,.10); color:var(--teal);
}
.tile svg{ width:26px; height:26px; stroke-width:1.9; }
.tile--gold{ background:rgba(192,156,72,.16); color:var(--gold-ink); }
.tile--green{ background:rgba(12,120,72,.11); color:var(--green); }
.tile--navy{ background:rgba(12,48,96,.09); color:var(--navy); }
.sec--navy .tile{ background:rgba(240,204,108,.14); color:var(--gold); }
.card h3{ margin-bottom:.5em; }
.card p{ color:var(--mute); font-size:.97rem; }
.sec--navy .card p{ color:#CBD8E8; }

/* statement blocks — vision and mission, quoted from the charter */
.statement{ background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold-deep);
  padding:clamp(26px,3vw,38px); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.sec--navy .statement{ background:var(--navy-2); border-color:var(--navy-3); border-left-color:var(--gold); }
.statement h3{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  font-family:var(--font); font-weight:700; margin-bottom:.9em; }
.sec--navy .statement h3{ color:var(--gold); }
.statement p{ font-size:1.1rem; line-height:1.55; color:var(--ink); }
.sec--navy .statement p{ color:var(--paper); }

/* ── numbered working groups ─────────────────────────────────────────── */
.twg{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.twg li{
  background:#fff; padding:clamp(22px,2.6vw,28px) clamp(24px,2.8vw,32px);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:58px 1fr; gap:20px; align-items:start;
  transition:transform .25s ease, box-shadow .25s ease;
}
.twg li:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.twg__n{ font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 118;
  font-size:1.5rem; color:var(--gold-deep); line-height:1.1; }
.twg h3{ margin-bottom:.35em; }
.twg p{ margin:0; color:var(--mute); font-size:.96rem; }

/* ═══════════════════ THE TRUST MARK — drawn as seals ════════════════════ */
.marks{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,30px); }
.mark{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.mark__top{ padding:clamp(24px,3vw,34px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px; }
.mark__seal{
  flex:0 0 auto; width:82px; height:82px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--display); font-weight:800;
  font-variation-settings:'wdth' 118; font-size:.78rem; letter-spacing:.06em;
  color:var(--navy); border:3px double var(--gold-deep); background:var(--paper-2);
  text-align:center; line-height:1.1;
}
.mark--gold .mark__seal{ background:linear-gradient(150deg,#FFE7A8,#E0B355); border-color:#A8832F; }
.mark__name{ font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 112;
  font-size:1.35rem; color:var(--ink); }
/* These win over `.sec--navy h3/p`, which would otherwise paint cream text
   onto a white card. */
.mark h3{ color:var(--ink); }
.mark p{ color:var(--ink-2); }
.mark__for{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.mark--gold .mark__for{ color:var(--gold-ink); }
.mark__fee{ padding:18px clamp(24px,3vw,34px); background:var(--paper-2); border-bottom:1px solid var(--line);
  font-size:.95rem; color:var(--ink-2); }
.mark__fee b{ font-family:var(--display); font-weight:800; font-size:1.18rem; }
.mark ul{ list-style:none; margin:0; padding:clamp(22px,2.8vw,32px); display:grid; gap:12px; flex:1; }
.mark li{ position:relative; padding-left:28px; font-size:.97rem; color:var(--ink-2); }
.mark li::before{
  content:''; position:absolute; left:0; top:.46em; width:14px; height:8px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.mark__foot{ padding:0 clamp(22px,2.8vw,32px) clamp(22px,2.8vw,32px); }

/* ── the seven tiers ─────────────────────────────────────────────────── */
/* The table scrolls inside its own box rather than pushing the page sideways.
   Scoped to no breakpoint on purpose: in Swahili it stops fitting earlier
   than it does in English. */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tablewrap .tiers{ min-width:600px; }

.tiers{ width:100%; border-collapse:collapse; font-size:.97rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.tiers caption{ caption-side:bottom; padding-top:14px; font-size:.86rem; color:var(--mute); text-align:left; }
.tiers th,.tiers td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
.tiers thead th{ background:var(--navy); color:var(--paper); font-family:var(--font);
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.tiers tbody tr:nth-child(even){ background:var(--paper); }
.tiers td:first-child{ font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 112;
  color:var(--navy); white-space:nowrap; }
.tiers .fee{ font-weight:700; white-space:nowrap; }
.tiers .vote{ white-space:nowrap; }
.tiers .free{ color:var(--green); font-weight:700; }

/* ── the partner marquee ─────────────────────────────────────────────── */
.marquee{ overflow:hidden; border-block:1px solid var(--navy-3); background:var(--navy-deep); padding:20px 0; }
.marquee__track{ display:flex; gap:clamp(28px,5vw,64px); width:max-content;
  animation:slide 38s linear infinite; }
.marquee span{ font-family:var(--display); font-weight:700; font-variation-settings:'wdth' 108;
  font-size:clamp(.92rem,1.5vw,1.1rem); letter-spacing:.06em; color:var(--ash); white-space:nowrap; }
.marquee span::after{ content:'·'; margin-left:clamp(28px,5vw,64px); color:var(--gold-deep); }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ── contact ─────────────────────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:start; }
.cdetail{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--navy-3); }
.cdetail__ic{ font-size:1.1rem; line-height:1.5; flex:0 0 auto; }
.cdetail strong{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.cdetail a,.cdetail span{ color:var(--paper); text-decoration:none; font-size:1rem; }
.cdetail a:hover{ color:var(--gold); }

.cform{ background:var(--navy-2); border:1px solid var(--navy-3); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:clamp(24px,3vw,38px); }
.cform h3{ margin-bottom:1em; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.05em; color:var(--ash); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; padding:14px 17px; font:inherit; font-size:.97rem;
  color:var(--paper); background:var(--navy); border:1px solid var(--navy-3); border-radius:12px;
}
.field input::placeholder,.field textarea::placeholder{ color:#7E92AC; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:transparent; }
.field .invalid{ border-color:#E0786A; }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cform .cform__fine{ margin-top:14px; font-size:.84rem; color:var(--ash); }
.cform__msg{ margin-top:14px; padding:12px 14px; background:rgba(224,120,106,.14);
  border-left:3px solid #E0786A; color:var(--paper); font-size:.9rem; }

/* ── footer ──────────────────────────────────────────────────────────── */
.footer{ background:var(--navy-deep); color:var(--paper); padding-top:clamp(48px,6vw,78px);
  border-top:2px solid var(--gold-deep); }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,50px);
  padding-bottom:clamp(36px,4.5vw,56px); }
.footer__brand img{ height:76px; width:auto; margin-bottom:16px; }
.footer p{ color:var(--ash); font-size:.93rem; }
.footer h2{ font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); margin-bottom:15px; font-family:var(--font); }
.footer__top a{ display:block; color:var(--ash); text-decoration:none; font-size:.93rem; padding:5px 0; }
.footer__top a:hover{ color:var(--gold); }
.footer__legal{ color:var(--paper)!important; font-weight:600; }
.footer__bottom{ border-top:1px solid var(--navy-3); padding-block:20px; }
.footer__bottom .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer__bottom p{ margin:0; font-size:.85rem; }

/* ── page header for inner pages ─────────────────────────────────────── */
.phero{ background:var(--navy); color:var(--paper); padding-block:clamp(38px,5.5vw,70px); }
.phero h1{ margin-bottom:.3em; }
.phero p{ color:var(--ash); max-width:62ch; }
.crumbs{ font-size:.8rem; font-weight:600; color:var(--ash); margin-bottom:16px; }
.crumbs a{ color:var(--ash); text-decoration:none; }
.crumbs a:hover{ color:var(--gold); }

/* ── reveals, focus, motion ──────────────────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.js .reveal.in{ opacity:1; transform:none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width:1040px){
  .contact{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .chain{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
  .stage h3{ min-height:0; }
  .chain::before{ display:none; }
  .marks{ grid-template-columns:1fr; }
}

/* The navigation collapses earlier than the layout does: six links, a
   Join button and the wordmark need more room than the grid does. */
/* Swahili labels are longer than English ones, so the bar runs out of room
   before the layout does. The wordmark's second line goes first. */
@media (max-width:1320px){
  .brand__txt span{ display:none; }
}

@media (max-width:1060px){
  .nav__links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    /* One step off the bar on purpose: a panel the same colour as the
       section behind it has no edge, and reads as a broken page. */
    background:var(--navy-2);
    border-bottom:3px solid var(--gold);
    box-shadow:0 26px 44px rgba(0,0,0,.5);
    padding:8px var(--gutter) 16px;
    max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--navy-3); border-radius:0; font-size:1rem; }
  .nav__links a:last-child{ border-bottom:0; }
  .nav__links a.active::after{ left:0; right:auto; width:18px; bottom:8px; }
  .burger{ display:flex; }
  .nav__actions{ margin-left:auto; }
  .nav__actions .btn{ display:none; }
  .nav__inner{ position:relative; }
  /* dim and hold the page behind the open menu */
  body.menu-open::before{ content:''; position:fixed; inset:0; z-index:90; background:rgba(4,14,30,.82); }
  body.menu-open{ overflow:hidden; }

}

@media (max-width:880px){
  .figures{ grid-template-columns:repeat(2,1fr); }
  .figure:nth-child(2n){ border-right:0; }
  .figure:nth-child(-n+2){ border-bottom:1px solid var(--navy-3); }
  .cols-3{ grid-template-columns:1fr; }
  .twg li{ grid-template-columns:44px 1fr; gap:12px; }
}

@media (max-width:620px){
  .chain{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery figure:first-child{ grid-column:span 2; grid-row:auto; aspect-ratio:4/3; }
  .cols-2,.cform__row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .brand__txt b{ font-size:.92rem; }
  /* "TANZANIA ECOMMERCE ECOSYSTEM" is wider than the space left beside the
     burger on a 320px phone, and it pushed the button off the screen. */
  .brand__txt span{ display:none; }
  /* Three lines of registration detail above the fold is three lines a phone
     does not have. The claim stays; the citation waits for a wider screen. */
  .topbar__long{ display:none; }
  .brand img{ height:42px; width:42px; }

}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* Slides change instantly, and the script does not advance them on its own.
     A hero that moves by itself is exactly what this setting is asking about. */
  .hero__slide{ transition:none; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; }
  .js .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}