/* Trybe Assessments engine v1, shared funnel styles.
 * Themed entirely by CSS custom properties so each assessment can mirror its
 * source page (Phase 1) or carry the Trybe system (Phase 2).
 * Default: scoreapp-light. Add class "theme-trybe-dark" on <body> for the
 * dark/gold Trybe treatment (tokens from the branded scorecard prototype).
 */
:root {
  --av-bg: #f7f8fb;
  --av-bg-accent: #eef1f7;
  --av-panel: #ffffff;
  --av-line: #e3e7ef;
  --av-text: #101828;
  --av-muted: #5b6577;
  --av-accent: #2563eb;
  --av-accent-2: #1d4ed8;
  --av-on-accent: #ffffff;
  --av-good: #16a34a;
  --av-mid: #d97706;
  --av-low: #dc2626;
  --av-radius: 14px;
  --av-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.theme-trybe-dark {
  --av-bg: #0d0f14;
  --av-bg-accent: #182031;
  --av-panel: #151922;
  --av-line: #2a3242;
  --av-text: #eef2f8;
  --av-muted: #9aa6b8;
  --av-accent: #e7b96b;
  --av-accent-2: #f4d79a;
  --av-on-accent: #0d0f14;
  --av-good: #63d29b;
  --av-mid: #e7b96b;
  --av-low: #e78a8a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, var(--av-bg-accent) 0, var(--av-bg) 60%);
  color: var(--av-text);
  font-family: var(--av-font);
  line-height: 1.55;
  min-height: 100vh;
}
.av-wrap { max-width: 720px; margin: 0 auto; padding: 28px 20px 90px; }
.av-brand {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--av-accent); font-weight: 600; margin-bottom: 10px;
}

/* landing */
.av-eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--av-accent); font-weight: 700; margin: 14px 0 6px;
}
.av-headline { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; margin: 6px 0 10px; letter-spacing: -.01em; }
.av-headline-2 { font-size: clamp(22px, 5vw, 30px); line-height: 1.2; margin: 6px 0 10px; }
.av-sub { color: var(--av-muted); font-size: 16px; margin: 0 0 18px; }
.av-bullets { list-style: none; margin: 0 0 18px; padding: 0; }
.av-bullets li {
  padding: 8px 0 8px 30px; position: relative; font-size: 15.5px;
}
.av-bullets li::before {
  content: "✓"; position: absolute; left: 2px; top: 8px;
  color: var(--av-good); font-weight: 700;
}
.av-meta { color: var(--av-muted); font-size: 13.5px; margin: 4px 0 18px; letter-spacing: .04em; }
.av-trust { color: var(--av-muted); font-size: 12.5px; margin-top: 20px; }
.av-preview-note { color: var(--av-muted); font-size: 12px; margin-top: 16px; text-align: center; }

/* buttons */
.av-cta {
  display: block; width: 100%; margin-top: 8px;
  background: linear-gradient(180deg, var(--av-accent-2), var(--av-accent));
  color: var(--av-on-accent); border: none; border-radius: 12px;
  padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: inherit; text-align: center; text-decoration: none;
}
.av-cta:hover { filter: brightness(1.06); }
.av-cta:focus-visible, .av-option:focus-visible, .av-scale-btn:focus-visible {
  outline: 3px solid var(--av-accent); outline-offset: 2px;
}
.av-cta-link { display: block; margin-top: 12px; }
.av-back {
  background: none; border: 1px solid var(--av-line); color: var(--av-muted);
  border-radius: 10px; padding: 10px 18px; font-size: 14px; cursor: pointer;
  font-family: inherit; margin-top: 18px; min-height: 44px;
}
.av-back:hover { border-color: var(--av-accent); color: var(--av-text); }

/* quiz */
.av-progress {
  height: 8px; background: var(--av-panel); border: 1px solid var(--av-line);
  border-radius: 6px; overflow: hidden; margin: 6px 0 8px;
}
.av-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--av-accent-2), var(--av-accent)); transition: width .25s ease; }
.av-progress-label { font-size: 12.5px; color: var(--av-muted); margin-bottom: 22px; letter-spacing: .06em; }
.av-dim {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--av-accent); font-weight: 700; margin: 2px 0 6px;
}
.av-question { font-size: clamp(20px, 4.6vw, 26px); line-height: 1.3; margin: 4px 0 22px; min-height: 2.6em; }
.av-options { display: flex; flex-direction: column; gap: 10px; }
.av-option {
  text-align: left; background: var(--av-panel); border: 1px solid var(--av-line);
  color: var(--av-text); border-radius: var(--av-radius); padding: 15px 16px;
  font-size: 15.5px; cursor: pointer; font-family: inherit; min-height: 52px;
  transition: border-color .15s, transform .15s;
}
.av-option:hover { border-color: var(--av-accent); }
.av-option.picked {
  border-color: var(--av-accent);
  background: linear-gradient(180deg, var(--av-accent-2), var(--av-accent));
  color: var(--av-on-accent); font-weight: 700;
}
.av-scale { display: flex; gap: 8px; }
.av-scale-btn {
  flex: 1; min-width: 44px; min-height: 52px; text-align: center;
  border: 1px solid var(--av-line); border-radius: 10px; padding: 9px 4px;
  cursor: pointer; font-size: 16px; color: var(--av-muted);
  background: var(--av-panel); transition: .15s; font-family: inherit;
}
.av-scale-btn:hover { border-color: var(--av-accent); }
.av-scale-btn.picked {
  background: linear-gradient(180deg, var(--av-accent-2), var(--av-accent));
  border-color: var(--av-accent); color: var(--av-on-accent); font-weight: 700;
}
.av-scale-hint { display: flex; justify-content: space-between; color: var(--av-muted); font-size: 11.5px; margin: 6px 2px 0; }
.av-nav { display: flex; }

/* single-page layout */
.av-card {
  background: var(--av-panel); border: 1px solid var(--av-line);
  border-radius: 16px; padding: 20px 20px 8px; margin: 16px 0;
}
.av-q { padding: 14px 0; border-bottom: 1px solid var(--av-line); }
.av-q:last-child { border-bottom: none; }
.av-qt { font-size: 15px; margin: 0 0 10px; }

/* capture */
.av-form { margin-top: 6px; }
.av-input {
  width: 100%; padding: 14px; border-radius: 10px; border: 1px solid var(--av-line);
  background: var(--av-panel); color: var(--av-text); font-size: 15.5px;
  margin: 7px 0; font-family: inherit;
}
.av-consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px;
  color: var(--av-muted); font-size: 12.5px; cursor: pointer;
}
.av-consent input { margin-top: 3px; min-width: 16px; min-height: 16px; }
.av-err { color: var(--av-low); font-size: 14px; text-align: center; margin-top: 10px; min-height: 18px; }

/* results */
.av-score-big { margin: 8px 0 2px; }
.av-score-num {
  font-size: 64px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, var(--av-accent-2), var(--av-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.av-score-max { font-size: 24px; color: var(--av-muted); font-weight: 600; }
.av-band { font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.av-band-desc { color: var(--av-muted); margin: 0 0 18px; }
.av-dims { margin-top: 8px; }
.av-dimrow { margin: 14px 0; }
.av-dimtop { display: flex; justify-content: space-between; font-size: 14px; }
.av-dimtop b { color: var(--av-text); }
.av-dimtop span { color: var(--av-muted); }
.av-bar {
  height: 10px; background: var(--av-panel); border: 1px solid var(--av-line);
  border-radius: 6px; overflow: hidden; margin: 6px 0 2px;
}
.av-bar i { display: block; height: 100%; border-radius: 6px; transition: width .8s ease; }
.av-bar .av-fill-good { background: var(--av-good); }
.av-bar .av-fill-mid { background: var(--av-mid); }
.av-bar .av-fill-low { background: var(--av-low); }
.av-insight { font-size: 13px; color: var(--av-muted); margin: 6px 0 0; }
.av-next {
  margin-top: 22px; background: var(--av-panel); border: 1px solid var(--av-line);
  border-radius: 14px; padding: 18px;
}

/* phone */
@media (max-width: 640px) {
  .av-wrap { padding: 20px 16px 70px; }
  .av-question { min-height: 3.2em; }
  .av-scale { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-progress i, .av-bar i, .av-option, .av-scale-btn { transition: none; }
}

/* ============================================================
   v2 landing page anatomy (hero, measures, steps, proof, FAQ, CTA)
   Wider canvas than the quiz: the landing sells, the quiz focuses.
============================================================ */
.av-wrap { max-width: 1080px; }
.av-quiz, .av-capture, .av-results { max-width: 720px; margin-left: auto; margin-right: auto; }

.lp-hero {
  display: grid; gap: 30px; align-items: center;
  padding: 8px 0 34px; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .lp-hero { grid-template-columns: 1.15fr .85fr; gap: 44px; padding: 18px 0 52px; }
}
.lp-hero .av-headline { font-size: clamp(32px, 5.2vw, 54px); line-height: 1.05; margin: 8px 0 14px; }
.lp-lede { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--av-muted); margin: 0 0 18px; }
.lp-hero-media img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  border: 1px solid var(--av-line);
}
.lp-cta-hero { max-width: 420px; }
.lp-trust { color: var(--av-muted); font-size: 13px; margin-top: 14px; }
.lp-pending {
  color: var(--av-muted); font-size: 15px; margin: 6px 0 14px;
  padding: 12px 14px; border: 1px dashed var(--av-line); border-radius: 12px;
}

.lp-section { padding: 34px 0; border-top: 1px solid var(--av-line); }
.lp-h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 10px; }
.lp-h3 { font-size: 18px; margin: 0 0 12px; }
.lp-sub { color: var(--av-muted); font-size: 16px; margin: 0 0 20px; max-width: 60ch; }

.lp-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 700px) { .lp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-card {
  background: var(--av-panel); border: 1px solid var(--av-line);
  border-radius: 16px; padding: 20px;
}
.lp-card-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; margin-bottom: 12px;
  background: var(--av-accent); color: var(--av-on-accent);
}
.lp-card-title { font-size: 17px; margin: 0 0 6px; line-height: 1.3; }
.lp-card-note { color: var(--av-muted); font-size: 14.5px; margin: 0; line-height: 1.5; }

.lp-steps { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 800px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--av-panel); border: 1px solid var(--av-line);
  border-radius: 16px; padding: 18px;
}
.lp-step-num {
  min-width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
  background: var(--av-accent); color: var(--av-on-accent);
}

.lp-quote {
  background: var(--av-panel); border: 1px solid var(--av-line);
  border-radius: 16px; padding: 20px; margin: 0;
}
.lp-quote-text { font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; }
.lp-quote-cite { color: var(--av-muted); font-size: 13.5px; font-style: normal; }

.lp-faq {
  border: 1px solid var(--av-line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; background: var(--av-panel);
}
.lp-faq-q { font-weight: 700; cursor: pointer; font-size: 16px; list-style: none; }
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q::before { content: "+ "; color: var(--av-accent); font-weight: 800; }
.lp-faq[open] .lp-faq-q::before { content: "- "; }
.lp-faq-a { color: var(--av-muted); font-size: 15px; margin: 10px 0 2px; line-height: 1.55; }

.lp-final {
  margin-top: 34px; padding: 34px 22px; text-align: center;
  border: 1px solid var(--av-line); border-radius: 20px; background: var(--av-panel);
}
.lp-final .lp-sub { margin-left: auto; margin-right: auto; }
.lp-final .av-cta { max-width: 420px; margin-left: auto; margin-right: auto; }

@media (max-width: 640px) {
  .lp-section { padding: 26px 0; }
  .lp-final { padding: 26px 16px; }
}

/* ============================================================
   v3: Trybe green buttons, hover life, wide hero band, top nav
   Button colour matches the rest of the ecosystem (--btn #2dd4bf
   with dark ink), replacing the violet that did not match.
============================================================ */
:root { --av-btn: #2dd4bf; --av-btn-ink: #06231f; --av-btn-deep: #17a29d; }

.av-topbar { display: flex; align-items: center; margin: 0 0 18px; }
.av-allbtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--av-muted); text-decoration: none;
  border: 1px solid var(--av-line); border-radius: 999px;
  padding: 9px 16px; min-height: 40px; background: var(--av-panel);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.av-allbtn:hover {
  transform: translateX(-3px);
  border-color: var(--av-btn); color: var(--av-text);
  box-shadow: 0 6px 18px rgba(45,212,191,.22);
}

/* every primary action is Trybe teal, never violet */
.av-cta,
body.theme-trybe .av-cta {
  background: linear-gradient(180deg, var(--av-btn) 0%, var(--av-btn-deep) 100%);
  color: var(--av-btn-ink);
  box-shadow: 0 8px 26px rgba(45,212,191,.35), 0 3px 10px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.av-cta:hover,
body.theme-trybe .av-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(45,212,191,.5), 0 5px 14px rgba(0,0,0,.45);
  filter: none;
}
.av-cta:active, body.theme-trybe .av-cta:active { transform: translateY(-1px) scale(1.0); }

/* answer controls pick up the same teal so the whole flow is one colour story */
.av-scale-btn.picked, .av-option.picked,
body.theme-trybe .av-scale-btn.picked, body.theme-trybe .av-option.picked {
  background: linear-gradient(180deg, var(--av-btn), var(--av-btn-deep));
  border-color: var(--av-btn); color: var(--av-btn-ink);
}
.av-scale-btn:hover, .av-option:hover,
body.theme-trybe .av-scale-btn:hover, body.theme-trybe .av-option:hover {
  border-color: var(--av-btn); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45,212,191,.18);
}
.av-scale-btn, .av-option { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.av-progress i { background: linear-gradient(90deg, var(--av-btn-deep), var(--av-btn)); }

/* hero band: one wide image the full width of the column */
.lp-hero { grid-template-columns: 1fr; }
@media (min-width: 900px) { .lp-hero { grid-template-columns: 1fr; gap: 0; padding: 14px 0 26px; } }
.lp-hero-text { max-width: 46rem; }
.lp-hero-band {
  margin: 6px 0 8px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--av-line); line-height: 0;
}
.lp-hero-band img {
  width: 100%; height: auto; display: block;
  transition: transform 6s ease-out;
}
.lp-hero-band:hover img { transform: scale(1.03); }

/* cards get real hover life */
.hub-card, .lp-card, .lp-step, .lp-quote {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hub-card:hover, .lp-card:hover, .lp-step:hover {
  transform: translateY(-4px);
  border-color: var(--av-btn);
  box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(45,212,191,.18);
}
.lp-quote:hover { transform: translateY(-2px); border-color: var(--av-btn); }
.hub-card .av-meta, .hub-card h2 { transition: color .2s ease; }
.hub-card:hover h2 { color: var(--av-btn); }
.lp-card-num, .lp-step-num { background: var(--av-btn); color: var(--av-btn-ink); }
.lp-faq { transition: border-color .2s ease; }
.lp-faq:hover { border-color: var(--av-btn); }
.lp-faq-q::before, body.theme-trybe .av-eyebrow, body.theme-trybe .av-dim { color: var(--av-btn); }

/* results: the accelerator image sits above the qualify CTA */
.av-next-media {
  margin: 12px 0 4px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--av-line); line-height: 0;
}
.av-next-media img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.av-next:hover .av-next-media img { transform: scale(1.02); }
.av-next-blurb { color: var(--av-muted); font-size: 14.5px; margin: 10px 0 0; }
.av-score-num, body.theme-trybe .av-score-num {
  background: linear-gradient(180deg, #6ee7b7, var(--av-btn));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .av-cta, .av-cta:hover, .hub-card:hover, .lp-card:hover, .lp-step:hover,
  .lp-quote:hover, .av-allbtn:hover, .av-scale-btn:hover, .av-option:hover,
  .lp-hero-band:hover img, .av-next:hover .av-next-media img {
    transform: none; transition: none;
  }
}

/* Hero and result imagery is served from the Trybe CDN at native size, so the
 * 21:9 band is enforced here rather than by pre-cropping files. */
.lp-hero-band img { aspect-ratio: 21 / 9; object-fit: cover; object-position: center; }
.av-next-media img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }

/* ============================================================
   HUB: an editorial scroll, not a card wall.
   Full-width alternating sections, each with its own photograph,
   generous air, and its own call to action.
============================================================ */
.hub-wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px 40px; }

.hub-hero { padding: 72px 0 20px; max-width: 60rem; }
.hub-h1 {
  font-size: clamp(40px, 7.2vw, 78px); line-height: 1.02;
  letter-spacing: -.025em; margin: 10px 0 18px; font-weight: 800;
}
.hub-hero-lede {
  font-size: clamp(17px, 2.1vw, 22px); line-height: 1.5;
  color: var(--av-muted); margin: 0 0 30px; max-width: 46rem;
}
.hub-hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 0 0 32px; }
.hub-hero-stats div { display: flex; flex-direction: column; }
.hub-hero-stats b {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1;
  color: var(--av-btn);
}
.hub-hero-stats span {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--av-muted); margin-top: 8px;
}
.hub-hero-cta { max-width: 320px; }

/* the alternating rows */
.hub-row {
  display: grid; grid-template-columns: 1fr; gap: 26px;
  align-items: center; padding: 54px 0;
  border-top: 1px solid var(--av-line);
}
.hub-row:first-child { border-top: none; }
.hub-media {
  border-radius: 22px; overflow: hidden; line-height: 0;
  border: 1px solid var(--av-line);
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
}
.hub-media img {
  /* Phone and tablet stack the row, so the picture sets its own height here.
     4:3 rather than a letterbox: a strip of a photograph reads as a banner,
     not as a picture of anything. */
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.hub-row:hover .hub-media img { transform: scale(1.045); }

@media (min-width: 1000px) {
  /* Side by side, the picture runs the FULL height of the copy column: from the
     numbered kicker down to the bottom of the button, no letterbox strip.
     stretch (not center) makes both columns the height of the taller one, and
     the image fills its column instead of sitting at its intrinsic ratio.
     min-height keeps a short assessment from producing a stubby picture, and it
     feeds row sizing, so the copy gets that height too. */
  .hub-row {
    grid-template-columns: 1.05fr 1fr; gap: 56px; padding: 76px 0;
    align-items: stretch;
  }
  .hub-row.hub-flip .hub-media { order: 2; }
  .hub-row.hub-flip .hub-copy { order: 1; }
  /* The picture fills its column absolutely rather than by height:100%.
     height:100% only resolves against a DEFINITE height, and when the copy is
     shorter than the min-height the row is sized by min-height alone, which is
     not definite: the image silently fell back to its 4:3 intrinsic ratio and
     left a gap. Absolute inset makes it fill however the column got its height. */
  .hub-media { min-height: clamp(420px, 33vw, 560px); position: relative; }
  .hub-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto;
  }
  /* the copy sits centred against a tall picture rather than pinned to the top */
  .hub-copy { display: flex; flex-direction: column; justify-content: center; }
}


.hub-kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--av-btn); margin-bottom: 14px;
}
.hub-num {
  font-variant-numeric: tabular-nums; color: var(--av-muted);
  border: 1px solid var(--av-line); border-radius: 999px;
  padding: 3px 10px; font-size: 11.5px; letter-spacing: .1em;
}
.hub-h2 {
  font-size: clamp(27px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 14px; font-weight: 800;
}
.hub-lede {
  font-size: clamp(15.5px, 1.7vw, 17.5px); line-height: 1.58;
  color: var(--av-muted); margin: 0 0 20px; max-width: 42rem;
}
.hub-stats {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0; margin: 0 0 26px;
}
.hub-stats li {
  font-size: 12.5px; letter-spacing: .04em; color: var(--av-muted);
  border: 1px solid var(--av-line); border-radius: 999px; padding: 6px 13px;
  background: var(--av-panel);
}
.hub-cta { max-width: 300px; margin-top: 0; }

/* closing block */
.hub-close {
  margin-top: 26px; padding: 60px 30px; text-align: center;
  border: 1px solid var(--av-line); border-radius: 26px;
  background: var(--av-panel);
}
.hub-close .hub-lede { margin-left: auto; margin-right: auto; }
.hub-close-cta { max-width: 360px; margin-left: auto; margin-right: auto; }

.hub-foot {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--av-line);
  color: var(--av-muted); font-size: 12.5px; text-align: center;
}
.hub-foot a { color: var(--av-btn); text-decoration: none; }
.hub-foot a:hover { text-decoration: underline; }

/* reveal on scroll: opt-in, so a script failure can never blank the page */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .hub-wrap { padding: 0 16px 30px; }
  .hub-hero { padding: 44px 0 12px; }
  .hub-row { padding: 40px 0; gap: 20px; }
  .hub-hero-stats { gap: 26px; }
  .hub-close { padding: 40px 18px; }
  .hub-cta, .hub-hero-cta, .hub-close-cta { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-row:hover .hub-media img { transform: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}