/* MNGHA Eye Hackathon -- base site styles. Signal Iris direction:
   near-black indigo base, glass panels (hairline border + blur, no shadows),
   burgundy->blue gradient reserved for meaning (progress, emphasis). */

:where(*,*::before,*::after){box-sizing:border-box;margin:0;padding:0}
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,figure,dl){margin:0;padding:0;border:0}
:where(html){-webkit-text-size-adjust:100%}

html{background:var(--mngha-bg);color-scheme:dark}
body{
  background:var(--mngha-bg);
  color:var(--mngha-ink);
  font-family:var(--mngha-font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.light-mode{--mngha-bg:#F5F5F8;--mngha-bg-raise:#FFFFFF;--mngha-surface:#FFFFFF;--mngha-surface-2:#F0F0F5;--mngha-ink:#14151F;--mngha-ink-muted:#53525E;--mngha-ink-faint:#84838E;--mngha-border:rgba(20,21,31,.1);--mngha-border-strong:rgba(20,21,31,.18)}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--mngha-accent);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--mngha-font-heading);font-weight:600;line-height:1.08;letter-spacing:-0.01em}
h1{font-size:clamp(2.4rem,5vw,4.2rem)}
h2{font-size:clamp(1.7rem,3vw,2.6rem)}
h3{font-size:1.3rem}
p{max-width:65ch}
.mngha-lede{font-size:1.15rem;color:var(--mngha-ink-muted);max-width:52ch}

html[dir='rtl'] body, .lang-ar body{font-family:var(--mngha-font-body-ar)}
html[dir='rtl'] h1,html[dir='rtl'] h2,html[dir='rtl'] h3,html[dir='rtl'] h4{font-family:var(--mngha-font-body-ar)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--mngha-accent);color:#fff;padding:10px 16px;z-index:9999;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

.mngha-container{max-width:var(--mngha-container);margin-inline:auto;padding-inline:24px}
@media (min-width:640px){.mngha-container{padding-inline:32px}}

/* ---- Header ---- */
.mngha-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--mngha-bg) 82%, transparent);backdrop-filter:blur(var(--mngha-blur));border-bottom:1px solid var(--mngha-border)}
.mngha-header__inner{display:flex;align-items:center;justify-content:space-between;padding-block:16px;gap:24px}
.mngha-brand{display:flex;align-items:center;gap:10px;font-family:var(--mngha-font-heading);font-weight:600;font-size:1.05rem;white-space:nowrap}
.mngha-brand__mark{width:28px;height:28px;border-radius:8px;background:var(--mngha-gradient);flex-shrink:0}
.mngha-nav{display:flex;align-items:center;gap:28px;flex:1;justify-content:center}
.mngha-nav a{font-size:.95rem;color:var(--mngha-ink-muted);transition:color .2s}
.mngha-nav a:hover,.mngha-nav a.is-active{color:var(--mngha-ink)}
.mngha-header__actions{display:flex;align-items:center;gap:12px}
/* Higher specificity than .btn{display:inline-flex} on purpose -- a single-class selector
   here previously lost that cascade tie (same specificity, .btn declared later in this
   file), which is why the hamburger showed on desktop too. Two-class selectors below fix it. */
.mngha-header__actions .mngha-nav-toggle{display:none}
.mngha-header__actions-desktop{display:flex;align-items:center;gap:12px}
.mngha-nav__mobile-actions{display:none}
@media (max-width:960px){
  .mngha-nav{display:none}
  .mngha-header__actions .mngha-nav-toggle{display:inline-flex}
  .mngha-header__actions-desktop{display:none}
  .mngha-nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--mngha-bg-raise);padding:20px 24px;border-bottom:1px solid var(--mngha-border);gap:16px}
  .mngha-nav__mobile-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:12px;margin-top:8px;border-top:1px solid var(--mngha-border)}
  .theme-toggle__label{display:none}
}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--mngha-radius-sm);font-weight:600;font-size:.95rem;transition:transform .15s ease,background .25s ease;white-space:nowrap}
.btn-primary{background:var(--mngha-accent);color:#fff}
.btn-primary:hover{background:var(--mngha-support)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{border:1px solid var(--mngha-border-strong);color:var(--mngha-ink)}
.btn-ghost:hover{border-color:var(--mngha-accent)}
.btn-sm{padding:8px 14px;font-size:.85rem;border-radius:var(--mngha-radius-sm)}
.btn-pill{border-radius:var(--mngha-radius-pill)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- Glass panels ---- */
.glass{background:color-mix(in srgb, var(--mngha-surface) 62%, transparent);border:1px solid var(--mngha-border);border-radius:var(--mngha-radius-md);backdrop-filter:blur(var(--mngha-blur))}
.glass-strong{background:var(--mngha-surface);border:1px solid var(--mngha-border)}

/* ---- Hero (asymmetric, variance 0.5) ---- */
.hero{position:relative;padding-block:56px 72px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mngha-ink-muted);margin-bottom:18px}
.hero__eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mngha-gradient)}
.hero h1{margin-bottom:20px}
.hero .mngha-lede{margin-bottom:32px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__visual{position:relative;aspect-ratio:4/5;border-radius:var(--mngha-radius-lg);background:radial-gradient(120% 120% at 20% 10%, rgba(52,82,225,.35), transparent 60%),radial-gradient(120% 120% at 90% 90%, rgba(176,36,63,.30), transparent 55%),var(--mngha-surface);border:1px solid var(--mngha-border);transform:translateY(-12px)}
.hero__visual::after{content:'';position:absolute;inset:18px;border:1px solid var(--mngha-border-strong);border-radius:calc(var(--mngha-radius-lg) - 10px)}
.hero__visual-ring{position:absolute;top:50%;left:50%;width:58%;height:58%;transform:translate(-50%,-50%);border:2px solid transparent;border-image:var(--mngha-gradient) 1;border-radius:50%;opacity:.7}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}.hero__visual{transform:none;order:-1;aspect-ratio:16/10}}

/* ---- Countdown ---- */
.countdown{display:flex;gap:14px;margin-top:8px}
.countdown__unit{text-align:center;min-width:64px}
.countdown__num{font-family:var(--mngha-font-heading);font-size:1.7rem;font-weight:700;background:var(--mngha-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.countdown__label{font-size:.72rem;color:var(--mngha-ink-muted);text-transform:uppercase;letter-spacing:.05em}

/* ---- Sections ---- */
.section{padding-block:var(--mngha-space-xl)}
.section-tight{padding-block:var(--mngha-space-lg)}
.section__head{max-width:640px;margin-bottom:40px}
.section__head.center{margin-inline:auto;text-align:center}

/* ---- Track / prize / stat cards ---- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{padding:24px;border-radius:var(--mngha-radius-md)}
.card h3{margin-bottom:8px}
.card p{color:var(--mngha-ink-muted);font-size:.92rem}
.card__icon{width:40px;height:40px;border-radius:var(--mngha-radius-sm);background:var(--mngha-gradient);margin-bottom:16px;opacity:.9}

.stat{padding:24px;border-radius:var(--mngha-radius-md);text-align:start}
.stat__num{font-family:var(--mngha-font-heading);font-size:2.2rem;font-weight:700}
.stat__label{color:var(--mngha-ink-muted);font-size:.85rem;margin-top:4px}

/* ---- Status stepper (the signature gradient move) ---- */
.stepper{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.stepper__step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:88px;position:relative}
.stepper__dot{width:16px;height:16px;border-radius:50%;background:var(--mngha-surface-2);border:2px solid var(--mngha-border-strong);z-index:1}
.stepper__step.is-complete .stepper__dot{background:var(--dot-color,var(--mngha-accent));border-color:transparent}
.stepper__step.is-current .stepper__dot{box-shadow:0 0 0 4px color-mix(in srgb, var(--dot-color,var(--mngha-accent)) 25%, transparent)}
.stepper__line{position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--mngha-border-strong);z-index:0}
.stepper__step.is-complete .stepper__line{background:var(--dot-color,var(--mngha-accent))}
.stepper__step:first-child .stepper__line{display:none}
.stepper__label{font-size:.78rem;color:var(--mngha-ink-muted);text-align:center}
.stepper__step.is-current .stepper__label{color:var(--mngha-ink);font-weight:600}
.stepper__chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--mngha-radius-pill);font-size:.78rem;font-weight:600;color:#fff}

/* ---- Timeline ---- */
.timeline{position:relative;padding-left:28px;border-left:2px solid var(--mngha-border-strong)}
.timeline__item{position:relative;padding-bottom:32px}
.timeline__item::before{content:'';position:absolute;left:-33px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--mngha-gradient)}
.timeline__date{font-size:.8rem;color:var(--mngha-ink-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--mngha-border);padding-block:20px}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--mngha-accent);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:12px;color:var(--mngha-ink-muted)}

/* ---- Forms ---- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;margin-bottom:6px;color:var(--mngha-ink-muted)}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=date],.field input[type=datetime-local],.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--mngha-radius-sm);border:1px solid var(--mngha-border-strong);background:var(--mngha-surface-2);color:var(--mngha-ink);transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mngha-accent)}
.field-hint{font-size:.78rem;color:var(--mngha-ink-faint);margin-top:4px}
.field-error{font-size:.8rem;color:#ef5b6a;margin-top:6px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---- Footer ---- */
.mngha-footer{border-top:1px solid var(--mngha-border);padding-block:56px 32px;margin-top:64px}
.mngha-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.mngha-footer__col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mngha-ink-muted);margin-bottom:14px}
.mngha-footer__col a{display:block;color:var(--mngha-ink-muted);font-size:.9rem;margin-bottom:10px}
.mngha-footer__col a:hover{color:var(--mngha-ink)}
.mngha-footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--mngha-border);font-size:.82rem;color:var(--mngha-ink-faint);flex-wrap:wrap;gap:12px}
@media (max-width:800px){.mngha-footer__grid{grid-template-columns:1fr 1fr}}

.theme-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mngha-border-strong);border-radius:var(--mngha-radius-pill);padding:6px 12px;font-size:.8rem}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}

/* ---- Block-editor content spacing ----
   The global reset above zeroes margin on all headings/paragraphs (intentional,
   so custom components like .hero control their own spacing precisely) -- but
   that leaves plain block-editor content (About/Timeline/FAQ page bodies) with
   zero gap between elements. These rules restore generous, consistent rhythm
   specifically for real WordPress block output, without touching custom
   components (which don't carry these wp-block-* classes). */
.wp-block-heading { margin-top: 40px; margin-bottom: 20px; }
.wp-block-heading:first-child { margin-top: 0; }
.wp-block-paragraph:not(.hero__eyebrow) { margin-bottom: 24px; }
.wp-block-paragraph:last-child { margin-bottom: 0; }
.wp-block-list { margin-bottom: 24px; padding-inline-start: 1.4em; }
.wp-block-list li { margin-bottom: 14px; line-height: 1.6; color: var(--mngha-ink-muted); }
.wp-block-list li:last-child { margin-bottom: 0; }
.wp-block-columns { column-gap: 56px; row-gap: 32px; margin-bottom: 0; }
@media (max-width: 781px) { .wp-block-columns { row-gap: 48px; } }
.wp-block-group.mngha-container > * + * { margin-top: 0; } /* spacing already handled by the rules above */
/* Uploaded logo. The MNGHA mark is dark linework on white, so it always sits on
   a white plate -- official marks are never recoloured or inverted. The plate and
   its padding are identical in dark and light mode so the logo occupies exactly
   the same space in both; only the plate's visual weight differs. */
.mngha-brand__logo{height:44px;width:auto;background:#fff;padding:6px 10px;border-radius:10px;display:block}
.mngha-footer .mngha-brand__logo{height:52px}
@media (max-width:600px){.mngha-brand__logo{height:34px;padding:4px 8px}}

.mngha-brand__name{font-family:var(--mngha-font-heading);font-weight:600;font-size:1.02rem;line-height:1.15;white-space:nowrap}
@media (max-width:600px){.mngha-brand__name{font-size:.86rem;white-space:normal;max-width:9.5em}}

/* Partner strip: a centred glass box directly under the countdown.
   Geometry here is mode-independent -- identical padding, size and layout in
   dark and light mode. */
/* Partner strip. --partner-gap drives BOTH the space between logos in a row and
   the space between rows, so the two can never drift apart. Geometry is
   mode-independent: identical in dark and light mode. */
.mngha-partners__box{--partner-gap:40px;max-width:820px;margin-inline:auto;padding:32px 40px;border-radius:var(--mngha-radius-lg);text-align:center}
.mngha-partners__label{font-size:.78rem;letter-spacing:.10em;text-transform:uppercase;color:var(--mngha-ink-muted);margin:0 auto 22px}
.mngha-partners__row{display:flex;align-items:center;justify-content:center;gap:var(--partner-gap);flex-wrap:wrap}
.mngha-partners__row--second{margin-top:var(--partner-gap)}
.mngha-partners__logo{height:132px;width:auto;background:#fff;padding:14px 18px;border-radius:14px;display:block;flex:0 0 auto}
@media (max-width:760px){
  .mngha-partners__box{--partner-gap:24px;padding:26px 20px}
  .mngha-partners__logo{height:92px;padding:10px 12px}
}


/* Countdown sits inside the hero, just under the CTA buttons. */
.hero__countdown{margin-top:28px}
@media (max-width:600px){.hero__countdown{margin-top:20px}}

/* ---- Global horizontal-overflow guard ----
   A single wide child should never make the whole page scroll sideways on a
   phone. overflow-x:clip is used rather than hidden so position:sticky (the
   header and mobile dashboard nav) keeps working. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
img, video, canvas, svg, iframe, table, pre { max-width: 100%; }
.mngha-container { width: 100%; }
@media (max-width: 600px) {
  /* Long headlines and unbroken tokens must wrap on narrow screens. */
  h1, h2, h3 { overflow-wrap: anywhere; }
}

/* ---- Countdown: larger and centred on mobile ----
   On phones the hero stacks and reads centre-ish, so a small left-aligned
   countdown looked like an afterthought. Scale it up and centre the whole
   group, including its label. Desktop layout is unchanged. */
@media (max-width: 780px) {
  .hero__countdown { margin-top: 26px; text-align: center; }
  .hero__countdown > .field-hint { text-align: center; margin-bottom: 14px; font-size: .8rem; }
  .countdown {
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .countdown__unit {
    min-width: 0;
    flex: 1 1 0;
    max-width: 88px;
    padding: 12px 4px;
    border: 1px solid var(--mngha-border);
    border-radius: var(--mngha-radius-md);
    background: color-mix(in srgb, var(--mngha-surface) 55%, transparent);
  }
  /* clamp keeps four units on one line down to very narrow screens */
  .countdown__num { font-size: clamp(1.9rem, 8.5vw, 2.9rem); line-height: 1.05; }
  .countdown__label { font-size: .64rem; letter-spacing: .04em; margin-top: 4px; }
}
@media (max-width: 360px) {
  .countdown { gap: 6px; }
  .countdown__unit { padding: 10px 2px; }
}

/* ---- Live figures label above the stats row ---- */
.stats__live{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mngha-ink-muted)}
.stats__live-dot{width:8px;height:8px;border-radius:50%;background:var(--mngha-accent);flex-shrink:0;box-shadow:0 0 0 0 color-mix(in srgb,var(--mngha-accent) 60%,transparent);animation:mngha-pulse 2.4s ease-out infinite}
.stats__live-label{font-weight:600;color:var(--mngha-ink)}
.stats__live-time{text-transform:none;letter-spacing:0;color:var(--mngha-ink-faint)}
@keyframes mngha-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mngha-accent) 55%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.stats__live-dot{animation:none}}
@media (max-width:600px){.stats__live{justify-content:center;text-align:center}}

/* ---- Key dates: milestone track ----
   State is shown by colour AND a text badge, so progress is never conveyed by
   colour alone. Collapses to a vertical rail on mobile. */
.milestones{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative}
.milestone{position:relative;padding:34px 14px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
/* Each milestone owns two half-segments: ::before is the line arriving from the
   previous dot, ::after the line leaving toward the next. Colouring only the
   arriving half of the current milestone makes the fill stop exactly at the
   centre of its dot. Dot centre sits at 12px, so lines are top:11px (2px tall). */
/* completed: both halves filled. current: only the arriving half. */
/* One track line and one gradient fill, both drawn on the container so the
   gradient is continuous from the first dot to the current dot. --ms-start and
   --ms-span are set inline per render. Dot centre is 12px, so lines sit at 11px. */
.milestones::before,.milestones::after{content:"";position:absolute;top:11px;height:2px;border-radius:2px}
.milestones::before{left:var(--ms-start);width:calc(100% - (var(--ms-start) * 2));background:var(--mngha-border-strong)}
.milestones::after{left:var(--ms-start);width:var(--ms-span);background:var(--mngha-gradient)}

/* Pulsing marker for the milestone currently in play. */
@keyframes mngha-milestone-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mngha-support) 55%,transparent)}
  70%{box-shadow:0 0 0 14px color-mix(in srgb,var(--mngha-support) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mngha-support) 0%,transparent)}
}
.milestone__marker{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--mngha-surface-2);border:2px solid var(--mngha-border-strong);z-index:1}
.milestone.is-done .milestone__marker{background:var(--mngha-accent);border-color:transparent}
.milestone.is-current .milestone__marker{background:var(--mngha-support);border-color:transparent;animation:mngha-milestone-pulse 2s ease-out infinite}
.milestone__date{font-family:var(--mngha-font-heading);font-weight:600;font-size:1.02rem;color:var(--mngha-ink)}
.milestone__label{font-size:.88rem;color:var(--mngha-ink-muted);line-height:1.45;max-width:20ch}
.milestone__badge{margin-top:4px;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:3px 10px;border-radius:var(--mngha-radius-pill);background:color-mix(in srgb,var(--mngha-support) 18%,transparent);color:var(--mngha-ink)}
.milestone__badge--done{background:color-mix(in srgb,var(--mngha-accent) 16%,transparent);color:var(--mngha-ink-muted)}
.milestone.is-upcoming .milestone__date{color:var(--mngha-ink-muted)}
@media (max-width:820px){
  .milestones{grid-auto-flow:row;grid-auto-columns:auto;padding-inline-start:6px}
  .milestone{flex-direction:column;align-items:flex-start;text-align:left;padding:0 0 26px 30px;gap:3px}
  .milestone__marker{top:2px;left:0;transform:none}
  .milestone__label{max-width:none}
}
@media (prefers-reduced-motion:reduce){.milestone.is-current .milestone__marker{animation:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--mngha-support) 22%,transparent)}}

/* ---- Countdown sizing (desktop) ---- */
.countdown{gap:18px}
.countdown__unit{min-width:92px;padding:14px 10px;border:1px solid var(--mngha-border);border-radius:var(--mngha-radius-md);background:color-mix(in srgb,var(--mngha-surface) 50%,transparent)}
.countdown__num{font-size:clamp(2.4rem,3.4vw,3.4rem);line-height:1.02}
.countdown__label{font-size:.7rem;margin-top:6px}

/* ---- Even vertical rhythm on mobile ----
   One shared value spaces the CTA buttons, the countdown and the first section
   below the hero, so the three gaps read as equal. */
@media (max-width:780px){
  .hero{--hero-rhythm:30px;padding-bottom:var(--hero-rhythm)}
  .hero__actions{margin-bottom:0}
  .hero__countdown{margin-top:var(--hero-rhythm)}
  .hero__grid{gap:var(--hero-rhythm)}
  /* first section after the hero uses the same gap, not its own larger padding */
  .hero + section.section-tight,
  main > section.section-tight:first-of-type{padding-top:var(--hero-rhythm)}
}

/* ---- Countdown sizing (mobile, must follow the desktop rules) ----
   Declared after the desktop block so it wins on equal specificity. */
@media (max-width:780px){
  .countdown{justify-content:center;gap:10px;flex-wrap:nowrap}
  .countdown__unit{min-width:0;flex:1 1 0;max-width:92px;padding:12px 4px}
  .countdown__num{font-size:clamp(1.9rem,8.5vw,2.9rem);line-height:1.05}
  .countdown__label{font-size:.64rem;margin-top:4px}
}
@media (max-width:360px){
  .countdown{gap:6px}
  .countdown__unit{padding:10px 2px}
}

/* ---- Key dates: vertical track on mobile ----
   Same single-fill model rotated: the gradient runs down from the first dot to
   the current one. Declared after the desktop rules so it wins on source order. */


/* ---- Hero rhythm on mobile ----
   Matches the vertical gap used between the sections lower down the page, so
   buttons, countdown and Key dates are spaced consistently. */
@media (max-width:780px){
  .hero{--hero-rhythm:48px;padding-bottom:var(--hero-rhythm)}
  .hero__countdown{margin-top:var(--hero-rhythm)}
  .hero + section.section-tight,
  main > section.section-tight:first-of-type{padding-top:var(--hero-rhythm)}
}

/* ---- Key dates: vertical rail (mobile) ----
   The horizontal fill is percentage based, which only works when every step is
   the same width. Stacked rows have different heights (labels wrap), so the
   percentages misalign. On mobile each row therefore draws its own rail split at
   the marker centre. The marker is 16px wide at left:0, so its centre is x=8px
   and a 2px rail at left:7px sits exactly on it. Vertically the marker starts at
   top:2px, so its centre is y=10px. A solid accent (not a gradient) is used here
   so consecutive rows join seamlessly. */
@media (max-width:820px){
  .milestones::before,.milestones::after{display:none}
  .milestone::before,.milestone::after{content:"";position:absolute;left:7px;width:2px;background:var(--mngha-border-strong)}
  .milestone::before{top:0;height:10px}
  .milestone::after{top:10px;height:calc(100% - 10px)}
  .milestone:first-child::before{display:none}
  .milestone:last-child::after{display:none}
  .milestone.is-done::before,.milestone.is-done::after{background:var(--mngha-accent)}
  .milestone.is-current::before{background:var(--mngha-accent)}
}

/* ---- Theme toggle icons ----
   Inline SVG rather than characters: iOS renders U+2600 and similar as colour
   emoji, which looked out of place next to the text. */
.theme-toggle__icon{width:14px;height:14px;flex-shrink:0;display:block}
.theme-toggle__icon--light{display:none}
body.light-mode .theme-toggle__icon--dark{display:none}
body.light-mode .theme-toggle__icon--light{display:block}

/* ---- Primary button contrast ----
   WordPress core global styles set a link colour at the same specificity as
   .btn-primary, so the white text could lose the cascade and render dark.
   Element-qualified selectors raise specificity and settle it. */
a.btn-primary,button.btn-primary,.btn.btn-primary{color:#fff}
a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:visited,a.btn-primary:active,
button.btn-primary:hover,button.btn-primary:focus{color:#fff}
a.btn-ghost,button.btn-ghost,.btn.btn-ghost{color:var(--mngha-ink)}
a.btn-ghost:hover,a.btn-ghost:visited,button.btn-ghost:hover{color:var(--mngha-ink)}