/* GovCheck home as the citizens' action hub (2026-11-11, owner). Brand:
   Charte graphique RDC (flag blue, yellow, red; deep blue #3b3a5e, navy
   #2c2b47). Phone first; big targets; light (no image above the fold). */
.hub { --hub-navy: #2c2b47; --hub-blue: #3b3a5e; --hub-sky: #4faac6; --hub-yellow: #eca327; --hub-red: #ee7b42; --hub-green: #2d6d50; --hub-ink: #1e1d33; --hub-muted: #5f6672; color: var(--hub-ink); }
.hub-wrap { width: min(1200px, 100% - 2rem); margin-inline: auto; }
.hub h1, .hub h2 { color: var(--hub-navy); }

/* Hero: words and the four actions side by side on computers. */
.hub-hero { padding: 2.2rem 0 1.4rem; background: linear-gradient(180deg, #f6f5ef 0%, #fbfaf7 70%, transparent 100%); }
.hub-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem; align-items: center; }
.hub-eyebrow { margin: 0 0 .5rem; color: var(--hub-blue); font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hub-hero__title { margin: 0 0 .8rem; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.05; letter-spacing: -.01em; }
.hub-hero__lead { max-width: 34rem; margin: 0 0 1.3rem; color: var(--hub-muted); font-size: 1.12rem; line-height: 1.55; }
.hub-where label { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; color: var(--hub-navy); font-weight: 800; }
.hub-where__row { display: flex; gap: .5rem; max-width: 30rem; }
.hub-where select { flex: 1; min-width: 0; min-height: 52px; padding: 0 .9rem; border: 2px solid #cccce3; border-radius: 14px; background: #fff; color: var(--hub-ink); font: inherit; font-size: 1rem; }
.hub-where__chosen { margin: .5rem 0 0; font-weight: 700; }
.hub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 2.25rem; background: var(--hub-blue); color: #fff !important; font: inherit; font-weight: 800; text-decoration: none !important; cursor: pointer; }
.hub-btn:hover { background: #2c2b47; }
.hub-btn--ghost { background: #fff; color: var(--hub-blue) !important; box-shadow: inset 0 0 0 2px var(--hub-blue); }

.hub-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.hub-action { display: grid; align-content: start; gap: .35rem; height: 100%; min-height: 150px; padding: 1.1rem 1.1rem 1.2rem; border-radius: 20px; background: #fff; color: var(--hub-ink) !important; text-decoration: none !important; box-shadow: 0 1px 3px rgba(44, 43, 71, .1), 0 8px 24px -12px rgba(44, 43, 71, .25); border-top: 5px solid var(--hub-blue); transition: transform .12s, box-shadow .12s; }
.hub-action:hover, .hub-action:focus-visible { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(44, 43, 71, .12), 0 14px 30px -12px rgba(44, 43, 71, .35); }
.hub-action__icon { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: .3rem; border-radius: 16px; background: #f5f3ec; color: var(--hub-blue); }
.hub-action strong { color: var(--hub-navy); font-size: 1.18rem; line-height: 1.2; }
.hub-action small { color: var(--hub-muted); font-size: .92rem; line-height: 1.4; }
.hub-action--report { border-top-color: var(--hub-yellow); background: #fff7ea; }
.hub-action--report .hub-action__icon { background: var(--hub-yellow); color: var(--hub-navy); }
.hub-action--money { border-top-color: var(--hub-green); }
.hub-action--money .hub-action__icon { background: #e3f4ec; color: var(--hub-green); }
.hub-action--score { border-top-color: var(--hub-red); }
.hub-action--score .hub-action__icon { background: #fdefe8; color: #b8470f; }

.hub-wa { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; padding: .9rem 1.2rem; border-radius: 16px; background: #25d366; color: #063 !important; text-decoration: none !important; font-size: 1.02rem; }
.hub-wa svg { color: #fff; }
.hub-wa strong { color: #11291e; margin-right: .4rem; }
.hub-wa__go { margin-left: auto; font-size: 1.4rem; font-weight: 800; color: #11291e; }

/* Sections. */
.hub-proof, .hub-how, .hub-trust, .hub-map, .hub-partners { margin-top: 2.2rem; }
.hub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.hub-head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.hub-head a { font-weight: 800; }
.hub-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hub-figs li { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(44, 43, 71, .08); border-left: 5px solid var(--hub-blue); }
.hub-figs b { color: var(--hub-navy); font-size: 2rem; line-height: 1.1; }
.hub-figs span { color: var(--hub-muted); font-weight: 600; }
.hub-figs--ok { border-left-color: var(--hub-green) !important; }
.hub-figs--ok b { color: var(--hub-green); }
.hub-live { display: grid; gap: .35rem; padding: 1rem 1.2rem; border-radius: 18px; background: #fff; color: var(--hub-ink) !important; text-decoration: none !important; box-shadow: 0 1px 3px rgba(44, 43, 71, .08); border-left: 5px solid var(--hub-red); }
.hub-live__tag { display: inline-flex; align-items: center; gap: .4rem; color: #b8470f; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hub-live__tag i { width: 9px; height: 9px; border-radius: 50%; background: #ee7b42; animation: hub-pulse 1.6s ease-in-out infinite; }
@keyframes hub-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hub-live__tag i { animation: none; } }
.hub-live__status { color: var(--hub-blue); font-weight: 800; font-size: .9rem; }
.hub-live__text { display: -webkit-box; overflow: hidden; font-size: 1.02rem; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.hub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hub-steps li { padding: 1.1rem 1.2rem; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(44, 43, 71, .08); }
.hub-steps span { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: .5rem; border-radius: 50%; background: var(--hub-yellow); color: var(--hub-navy); font-weight: 900; font-size: 1.1rem; }
.hub-steps strong { display: block; margin-bottom: .3rem; color: var(--hub-navy); font-size: 1.1rem; }
.hub-steps p { margin: 0; color: var(--hub-muted); line-height: 1.5; }

.hub-trust__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.hub-trust__list li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: #f8f6f1; }
.hub-trust__list svg { grid-row: span 2; color: var(--hub-blue); margin-top: .15rem; }
.hub-trust__list strong { color: var(--hub-navy); }
.hub-trust__list p { margin: 0; color: var(--hub-muted); line-height: 1.5; }

.hub-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.5rem; padding: 1.4rem 1.6rem; border-radius: 22px; background: var(--hub-navy); color: #f4f2ea; background-image: linear-gradient(90deg, var(--hub-sky) 0 33.3%, var(--hub-yellow) 33.3% 66.6%, var(--hub-red) 66.6%); background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom; background-color: var(--hub-navy); }
.hub-partners h2 { margin: 0 0 .3rem; color: #fff; font-size: 1.4rem; }
.hub-partners p { margin: 0; max-width: 40rem; line-height: 1.5; }
.hub-partners__links { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Phones. */
@media (max-width: 900px) {
  .hub-hero__inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .hub-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-steps, .hub-trust__list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hub-hero { padding-top: 1.2rem; }
  .hub-actions { gap: .6rem; }
  .hub-action { min-height: 0; padding: .9rem; border-radius: 16px; }
  .hub-action__icon { width: 44px; height: 44px; }
  .hub-action strong { font-size: 1.02rem; }
  .hub-action small { font-size: .82rem; }
  .hub-figs b { font-size: 1.6rem; }
  .hub-wa { font-size: .92rem; }
}
/* The title wins over the theme's page title sizes. */
.hub .hub-hero .hub-hero__title { font-size: clamp(2rem, 4.2vw, 3.2rem) !important; line-height: 1.05 !important; margin: 0 0 .8rem !important; }

/* DevCheck's opening in GovCheck colours (2026-11-11, owner). */
.hub-landing { position: relative; display: grid; place-items: center; min-height: min(86vh, 760px); padding: 3rem 1rem 12rem; overflow: hidden; background: #f3f1ec url("../images/hero-illustration.svg") center bottom / min(1500px, 140%) auto no-repeat; text-align: center; }
.hub-landing__inner { position: relative; z-index: 1; max-width: 46rem; }
.hub-landing__brand { margin: 0 0 1rem; color: #4faac6; font-family: var(--g2-title, inherit); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: .01rem; }
.hub-landing__brand span { color: #3b3a5e; }
.hub .hub-landing .hub-landing__title { margin: 0 0 1.6rem !important; color: #23223c !important; font-family: var(--g2-font, inherit) !important; font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important; font-weight: 500 !important; line-height: 1.25 !important; }
.hub-landing__title b { color: var(--hub-blue); font-weight: 900; }
.hub-landing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 0 0 1.6rem; }
.hub-cta { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; min-height: 50px; padding: 0 1.4rem; border-radius: 2.25rem; font-family: "Barlow Semi Condensed", var(--g2-font, sans-serif); font-weight: 800; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; }
.hub-cta--dark { background: var(--hub-navy); color: #fff !important; }
.hub-cta--dark:hover { background: #28273f; }
.hub-cta--yellow { background: var(--hub-yellow); color: var(--hub-navy) !important; }
.hub-cta--yellow:hover { background: #ca8612; }
.hub-landing__update { display: grid; gap: .25rem; justify-items: center; margin: 0 auto 1.4rem; color: #23223c !important; text-decoration: none !important; }
.hub-landing__update-k { color: var(--hub-blue); font-family: "Barlow Semi Condensed", sans-serif; font-weight: 800; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
.hub-landing__update-t { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 800; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
.hub-landing__by { display: inline-flex; align-items: center; gap: .7rem; margin: 0; padding: .5rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--hub-muted); font-weight: 700; }
.hub-landing__by img { height: 30px; width: auto; }
@media (max-width: 767.98px) {
  .hub-landing { min-height: 0; padding: 2rem 1rem 8.5rem; background-size: 260% auto; }
  .hub-cta { min-width: 0; width: 100%; }
  .hub-landing__actions { flex-direction: column; }
}
/* The illustration in its own band under the words. */
.hub-landing { min-height: 0 !important; padding: 2.6rem 1rem 330px !important; background-size: auto 320px !important; background-position: center bottom !important; }
@media (max-width: 767.98px) { .hub-landing { padding: 1.6rem 1rem 190px !important; background-size: auto 180px !important; } }