/* ============================================================================
   Tsinda — Emotional conversion layer
   ----------------------------------------------------------------------------
   Performance & SEO rules this file follows:
   • Animates ONLY transform/opacity → GPU compositor, never triggers layout.
     No animation of width/height/top/left, so Cumulative Layout Shift stays 0.
   • Zero external requests: no images, no fonts, no libraries. Pure CSS.
   • Every element reserves its space up front — nothing pops in and pushes
     content down after paint.
   • Honours prefers-reduced-motion (accessibility + avoids motion sickness).
   • All text is real, crawlable HTML — it ADDS keyword-rich content rather
     than hiding it behind JS.
   ========================================================================== */

/* ── Emotional accent: animated gradient on a key phrase ─────────────────── */
.tsinda-gradient-text {
  background: linear-gradient(90deg, #54D3C2, #FF6B6B, #54D3C2);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tsindaShine 4s linear infinite;
}
@keyframes tsindaShine {
  to { background-position: 200% center; }
}

/* ── Urgency band under the hero ─────────────────────────────────────────── */
.tsinda-urgency {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #0f766e 100%);
  padding: 28px 20px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Soft moving sheen — transform only, so it costs nothing in layout */
.tsinda-urgency::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: tsindaSweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tsindaSweep {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.tsinda-urgency__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 34px;
}
.tsinda-urgency__count {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  /* min-width reserves space so the count-up can't shift the row */
  min-width: 4ch;
  display: inline-block;
}
.tsinda-urgency__label {
  font-size: 16px;
  opacity: .92;
  font-weight: 500;
}

/* ── Emotional journey: fear → preparation → victory ─────────────────────── */
.tsinda-journey {
  padding: 70px 20px;
  background: #fbfdfd;
}
.tsinda-journey__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 46px;
}
.tsinda-journey__head h2 {
  font-size: 34px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 14px;
  line-height: 1.25;
}
.tsinda-journey__head p {
  font-size: 17px;
  color: #6b7280;
  line-height: 1.7;
}
.tsinda-journey__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.tsinda-step {
  background: #fff;
  border-radius: 20px;
  padding: 34px 28px;
  border: 2px solid #eef2f2;
  text-align: center;
  /* transform+shadow only — no layout impact on hover */
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tsinda-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(20,184,166,.16);
  border-color: #54D3C2;
}
.tsinda-step__icon {
  font-size: 46px;
  line-height: 1;
  display: block;
  margin-bottom: 18px;
}
.tsinda-step--goal .tsinda-step__icon {
  animation: tsindaPulse 2.4s ease-in-out infinite;
}
@keyframes tsindaPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.13); }
}
.tsinda-step h3 {
  font-size: 21px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}
.tsinda-step p {
  font-size: 15.5px;
  color: #6b7280;
  line-height: 1.75;
  margin: 0;
}
.tsinda-step--goal {
  border-color: #54D3C2;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
}

/* ── Closing emotional CTA ───────────────────────────────────────────────── */
.tsinda-finale {
  padding: 76px 20px;
  text-align: center;
  background: linear-gradient(160deg, #042f2e 0%, #0f766e 100%);
  color: #fff;
}
.tsinda-finale h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.3;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.tsinda-finale p {
  font-size: 18px;
  opacity: .88;
  max-width: 620px;
  margin: 0 auto 34px;
  line-height: 1.7;
}
.tsinda-finale__badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.tsinda-finale__badges img {
  height: 58px;
  width: auto;
  transition: transform .3s ease;
}
.tsinda-finale__badges a:hover img { transform: scale(1.07); }

/* Gentle attention pulse on the primary store badge */
.tsinda-glow {
  border-radius: 12px;
  animation: tsindaGlow 2.8s ease-in-out infinite;
}
@keyframes tsindaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84,211,194,.55); }
  50%      { box-shadow: 0 0 0 16px rgba(84,211,194,0); }
}

.tsinda-finale__note {
  margin-top: 26px;
  font-size: 15px;
  opacity: .78;
}

/* ── Reveal on scroll (opacity/transform only → no CLS) ──────────────────── */
.tsinda-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.tsinda-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Accessibility: respect reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tsinda-gradient-text,
  .tsinda-urgency::before,
  .tsinda-step--goal .tsinda-step__icon,
  .tsinda-glow {
    animation: none !important;
  }
  .tsinda-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tsinda-step:hover { transform: none; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tsinda-urgency__count { font-size: 32px; }
  .tsinda-journey__head h2 { font-size: 27px; }
  .tsinda-finale h2 { font-size: 27px; }
  .tsinda-finale p { font-size: 16px; }
  .tsinda-journey { padding: 52px 18px; }
  .tsinda-finale { padding: 56px 18px; }
}

/* ============================================================================
   Failsafe: never trap a visitor behind the preloader
   ----------------------------------------------------------------------------
   The preloader is removed by JavaScript. If jQuery fails to load — slow
   network, blocked CDN, JS error earlier in the page — the overlay would stay
   up forever and the visitor (and Googlebot) would see a blank white screen.
   This pure-CSS rule fades it out after 3s no matter what JS does. It costs
   nothing when JS works, because .loaded already hid it long before.
   ========================================================================== */
.js-preloader {
  animation: tsindaPreloaderFailsafe 0.4s ease 3s forwards;
}
@keyframes tsindaPreloaderFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ============================================================================
   Mobile navigation — rebuilt from scratch
   ----------------------------------------------------------------------------
   THE ROOT CAUSE, finally: templatemo-space-dynamic.css line 361 sets

       .header-area .main-nav .nav { display: flex !important; }

   OUTSIDE any media query. The template's own mobile rule `display: none`
   (no !important) could never beat it, so on a phone the menu was ALWAYS
   rendered — that is why it appeared "open by default". And jQuery's
   slideToggle writes an inline `display:`, which also loses to !important,
   so the close button could never close it either. Two symptoms, one cause.

   Beating that needs !important on our side. But forcing `display: block`
   back onto a FLEX ITEM then left the menu at the mercy of the parent's
   flex-wrap / align-items / min-height / overflow — too many moving parts.

   So the menu no longer participates in the flex layout at all: it is
   position:fixed, pinned under the header bar. Flex properties, floats and
   ancestor overflow stop mattering entirely. Link colours are pinned too,
   because the template colours these links white for the transparent-header
   state, which would be invisible on the white panel.
   ========================================================================== */
@media (max-width: 767px) {
  .header-area,
  .header-area .main-nav {
    overflow: visible;
  }
  .header-area .main-nav {
    position: relative;
  }

  /* Closed. !important is what beats the template's `display: flex !important`
     and any inline style jQuery may have left behind. */
  .header-area .main-nav .nav {
    display: none !important;
    position: fixed;
    top: 100px;                 /* mobile header height */
    left: 0;
    right: 0;
    width: auto !important;
    max-width: none;
    float: none !important;
    margin: 0 !important;
    padding: 0;
    background: #fff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
    border-radius: 0 0 16px 16px;
    /* the header is fixed, so the page cannot scroll a long menu into view */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
  }

  /* Open. Higher specificity than the closed rule, so it wins cleanly. */
  .header-area .main-nav.is-open .nav {
    display: block !important;
  }

  .header-area .main-nav .nav li {
    width: 100% !important;
    float: none !important;
    background: #fff;
    text-align: left;
    padding: 0 !important;
    border-bottom: 1px solid #eef2f2;
  }
  .header-area .main-nav .nav li:last-child {
    border-bottom: 0;
  }
  .header-area .main-nav .nav li a {
    display: block;
    color: #1e1e1e !important;   /* never inherit the white header colour */
    text-align: left;
    padding: 16px 22px !important;
    font-size: 16px;
    line-height: 1.3;
  }
  .header-area .main-nav .nav li a.active {
    color: #fe3f40 !important;
  }
  .header-area .main-nav .nav li:last-child .main-red-button {
    margin: 12px 22px 16px;
  }
  .header-area .main-nav .nav li:last-child .main-red-button a {
    color: #fff !important;
    text-align: center;
  }
}

/* ── Nothing may cause horizontal scroll on a phone ───────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* ── Long Kinyarwanda words must not overflow narrow screens ──────────────── */
@media (max-width: 480px) {
  .ta-hero h1 { font-size: 26px !important; }
  .ta-hero__sub { font-size: 16px !important; }
  h1, h2, h3 { overflow-wrap: break-word; word-wrap: break-word; }
}

/* ── Inline font-sizes that break on phones ───────────────────────────────── */
/* These hero headings carry their size in a style="" attribute, which outranks
   every stylesheet rule. On a 360px screen the homepage h1 rendered at 50px
   with a 72px line-height and swallowed the whole first screen. !important is
   the only way to beat an inline style without rewriting the markup. */
@media (max-width: 767px) {
  .main-banner .header-text h1 {
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
  .exam-hero-section h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  .exam-hero-section p,
  .main-banner .header-text p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  .exam-hero-section { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  .main-banner .header-text h1 { font-size: 27px !important; }
  .exam-hero-section h1 { font-size: 24px !important; }
}