/* ==========================================================================
   MigraSense Health — style.css
   --------------------------------------------------------------------------
   Art direction is lifted from the Evenza event/conference theme: Onest for
   everything, #161A2D navy against #F6F6F7 mist, a single violet accent
   (#734BDF), pill buttons that fill from the centre, 10px / 20px / 100px
   radii, and dark sections that carry a violet glow at the top edge.

   Sections
     1. Tokens and reset            14. Full-bleed image band
     2. Typography                  15. Research opportunities
     3. Layout and section heads    16. Testimonials
     4. Buttons and arrow links     17. Trust row
     5. Utility bar and header      18. FAQ
     6. Hero                        19. Education hub
     7. Marquee                     20. Sign-up panel
     8. About                       21. CTA band
     9. Core feature cards          22. Footer
    10. Key advantages              23. Back to top and cursor
    11. Trend panel and chart       24. Animation utilities
    12. Steps                       25. Interior pages
    13. Audience cards              26. Responsive

   Colours come from the tokens in section 1. Do not hard-code a hex in a
   rule; the dark/light inversion depends on every surface naming its token.
   ========================================================================== */

/* --- 1. Tokens and reset -------------------------------------------------- */

:root{
  /* Evenza's palette, unchanged. */
  --navy:          #161A2D;
  --navy-deep:     #10131F;
  --navy-raise:    #1D2237;
  --mist:          #F6F6F7;
  --white:         #FFFFFF;
  --violet:        #734BDF;
  --violet-lift:   #8A67E8;
  --violet-wash:   rgba(115, 75, 223, .10);
  --text:          #737681;
  --text-on-dark:  rgba(255, 255, 255, .70);
  --divider:       rgba(22, 26, 45, .10);
  --divider-dark:  rgba(255, 255, 255, .10);

  /* One extra hue, used only where violet cannot carry meaning on its own:
     the trend line and the status chips. Never for chrome. */
  --aqua:          #38BFA7;
  --amber:         #E0A32E;

  --wrap:          1400px;
  --gutter:        24px;
  --r-sm:          6px;
  --r-md:          10px;
  --r-lg:          20px;
  --r-pill:        100px;

  --ease:          cubic-bezier(.22, .61, .36, 1);
  --shadow-card:   0 18px 48px rgba(22, 26, 45, .07);
  --shadow-lift:   0 26px 64px rgba(22, 26, 45, .12);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

/* No scroll-behavior: smooth on html. The sign-up panel sits thousands of
   pixels down and Chrome abandons an animated scroll that long once lazy
   images settle, which silently breaks every CTA jump. */

body{
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
svg{ display: block; }

a{ color: var(--violet); text-decoration: none; transition: color .3s var(--ease); }
a:hover{ color: var(--navy); }

button{ font: inherit; }

[hidden]{ display: none !important; }

:focus-visible{
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus{ left: 0; color: var(--white); }

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 2. Typography -------------------------------------------------------- */

h1, h2, h3, h4, h5{
  margin: 0 0 .5em;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
}

h1{ font-size: clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing: -.03em; }
h2{ font-size: clamp(2rem, 3.6vw, 3.25rem); }
h3{ font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.24; }
h4{ font-size: 1.125rem; line-height: 1.3; }

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

.lead{ font-size: 1.15rem; line-height: 1.6; }

.on-dark,
.on-dark p{ color: var(--text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5,
.on-dark strong{ color: var(--white); }

strong{ color: var(--navy); font-weight: 600; }

/* --- 3. Layout and section heads ------------------------------------------ */

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section{
  position: relative;
  padding: clamp(64px, 8vw, 118px) 0;
  scroll-margin-top: 92px;
}

.section--mist{ background: var(--mist); }
.section--tight{ padding-top: clamp(40px, 4vw, 64px); }

/* Dark sections carry the theme's violet bloom across the top edge. */
.section--dark{
  background: var(--navy);
  color: var(--text-on-dark);
  overflow: hidden;
}
.section--dark::before{
  content: "";
  position: absolute; inset: -40% 0 auto 0; height: 90%;
  background: radial-gradient(52% 58% at 50% 50%, rgba(115, 75, 223, .55) 0%, rgba(115, 75, 223, 0) 68%);
  pointer-events: none;
}
.section--dark > *{ position: relative; z-index: 1; }

.eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
  color: var(--navy);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow::before{
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  background: var(--violet);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.on-dark .eyebrow{ color: var(--white); }
.on-dark .eyebrow::before{ background: var(--white); }

.section-head{ max-width: 760px; margin: 0 0 clamp(34px, 4vw, 56px); }
.section-head--center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow{ justify-content: center; }
.section-head p{ font-size: 1.05rem; }

.head-split{
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.head-split .section-head{ margin-bottom: 0; }

/* Every track is minmax(0, 1fr), never 1fr. A bare 1fr floors at min-content,
   so a column of long prose steals width from a column whose only child is
   absolutely positioned — which collapsed the About photo to 138px. */
.grid{ display: grid; gap: 24px; }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* --- 4. Buttons and arrow links ------------------------------------------- */

.btn{
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 28px;
  border: none; border-radius: var(--r-pill);
  background: var(--violet);
  color: var(--white);
  font-size: 1rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: color .4s var(--ease);
}
/* The theme's signature: the hover fill opens from the centre outwards. */
.btn::after{
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; right: 50%; width: 0;
  background: var(--navy);
  border-radius: var(--r-pill);
  opacity: 0;
  transition: .4s var(--ease);
}
.btn:hover{ color: var(--white); }
.btn:hover::after{ left: 0; right: 0; width: 100%; opacity: 1; }

.btn--ghost{
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--divider);
}
.btn--ghost:hover{ color: var(--white); }
.on-dark .btn--ghost{ color: var(--white); box-shadow: inset 0 0 0 1.5px var(--divider-dark); }
.on-dark .btn--ghost::after{ background: var(--violet); }

.btn--light{ background: var(--white); color: var(--navy); }
.btn--light::after{ background: var(--violet); }
.btn--light:hover{ color: var(--white); }

.btn--wide{ width: 100%; justify-content: center; }

.btn svg{ width: 17px; height: 17px; transition: transform .4s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }

.arrow-link{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--navy); font-weight: 600; font-size: .95rem;
}
.arrow-link svg{ width: 16px; height: 16px; transition: transform .35s var(--ease); }
.arrow-link:hover{ color: var(--violet); }
.arrow-link:hover svg{ transform: translateX(5px); }
.on-dark .arrow-link{ color: var(--white); }
.on-dark .arrow-link:hover{ color: var(--violet-lift); }

.btn-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }

/* The "Call now" pairing that sits beside a button in the theme. */
.call-inline{ display: flex; align-items: center; gap: 13px; }
.call-inline .ic{
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--violet-wash); color: var(--violet);
}
.call-inline .ic svg{ width: 20px; height: 20px; }
.call-inline span{ display: block; font-size: .8rem; }
.call-inline strong{ display: block; font-size: .98rem; }
.on-dark .call-inline .ic{ background: var(--violet); color: var(--white); }

/* --- 5. Utility bar and header -------------------------------------------- */

.utility{
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
  text-align: center;
  padding: 9px 0;
}
.utility p{ margin: 0; }
.utility a{ color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.site-header{
  position: sticky; top: 0; z-index: 900;
  background: rgba(22, 26, 45, .86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--divider-dark);
  transition: background .35s var(--ease), padding .35s var(--ease);
}
.site-header .wrap{
  display: flex; align-items: center; gap: 24px;
  min-height: 78px;
}
.site-header.is-stuck{ background: rgba(16, 19, 31, .96); }

/* Two-line lockup: MigraSens over a tracked-out HEALTH. The tracking on the
   second line is tuned so it sits close to the width of the word above it —
   if the wordmark's size changes, that figure has to be retuned with it. */
.brand{ display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand svg{ width: 40px; height: 40px; flex: 0 0 40px; }
.brand-word{ display: flex; flex-direction: column; line-height: 1; }
.brand b{
  color: var(--white); font-size: 1.24rem; font-weight: 700;
  letter-spacing: -.02em;
}
.brand b i{ font-style: normal; color: var(--violet-lift); }
.brand em{
  margin-top: 5px;
  font-style: normal; font-size: .6rem; font-weight: 600;
  letter-spacing: .308em; text-transform: uppercase;
  /* The tracking adds a trailing gap after the last letter; pull it back so
     the block stays optically flush with the M above it. */
  margin-right: -.308em;
  color: rgba(255, 255, 255, .55);
}
.brand:hover em{ color: rgba(255, 255, 255, .75); }

.site-nav > ul{
  display: flex; align-items: center; gap: 30px;
  margin: 0; padding: 0; list-style: none;
}
.site-nav a{
  color: rgba(255, 255, 255, .82);
  font-size: .95rem; font-weight: 500;
  position: relative; padding: 6px 0;
}
.site-nav a::after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--violet-lift);
  transition: width .32s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ color: var(--white); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after{ width: 100%; }

.header-cta{ padding: 13px 22px; font-size: .93rem; }
.header-cta::after{ background: var(--white); }
.header-cta:hover{ color: var(--navy); }

.nav-toggle{
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--divider-dark); border-radius: var(--r-md);
  background: transparent; color: var(--white);
  cursor: pointer;
}
.nav-toggle span{
  display: block; width: 19px; height: 2px; margin: 4px auto;
  background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* --- 6. Hero -------------------------------------------------------------- */

.hero{
  position: relative;
  min-height: min(680px, 84vh);
  display: flex; align-items: flex-end;
  padding: clamp(48px, 6vw, 88px) 0 0;
  background: var(--navy);
  overflow: hidden;
}
.hero-media{ position: absolute; inset: 0; }
.hero-media img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 40%;
  filter: saturate(.72) contrast(1.05);
}
/* Two passes: a violet grade that ties the photograph to the palette, then a
   flat navy ramp so the type never sits on live detail. */
.hero-media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(104deg, rgba(22, 26, 45, .95) 4%, rgba(22, 26, 45, .72) 42%, rgba(115, 75, 223, .42) 100%),
    linear-gradient(180deg, rgba(22, 26, 45, .72) 0%, rgba(22, 26, 45, .15) 34%, rgba(22, 26, 45, .96) 100%);
}

.hero .wrap{ position: relative; z-index: 2; padding-bottom: clamp(40px, 5vw, 64px); }
.hero-copy{ max-width: 830px; }
.hero h1{ color: var(--white); margin-bottom: 22px; }
.hero .lead{ color: rgba(255, 255, 255, .78); max-width: 620px; }
.hero .btn-row{ margin-top: 34px; }
/* The hero is a dark section that does not carry .on-dark — the class would
   also recolour the headline the reveal is animating. Restate the two rules
   the ghost button needs, or its label renders navy on a navy photograph. */
.hero .btn--ghost{ color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.hero .btn--ghost::after{ background: var(--violet); }

.hero-tag{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 12px;
  margin-bottom: 26px;
  border: 1px solid var(--divider-dark); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--white); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.hero-tag i{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--aqua); font-style: normal;
  animation: pulse 2.4s ease-out infinite;
}
/* An expanding ring rather than a scaling element: box-shadow costs no layout
   and the dot itself stays exactly 8px, so the pill never reflows. */
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(56, 191, 167, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(56, 191, 167, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 191, 167, 0); }
}

/* The glass tile row stands where Evenza puts its countdown. */
.hero-stats{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(40px, 5vw, 62px);
}
.hero-stat{
  padding: 22px 24px;
  border: 1px solid var(--divider-dark); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hero-stat b{
  display: block; color: var(--white);
  font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-weight: 700;
  line-height: 1; letter-spacing: -.03em;
}
.hero-stat span{
  display: block; margin-top: 8px;
  color: rgba(255, 255, 255, .62); font-size: .86rem; line-height: 1.4;
}

.hero-scroll{
  position: absolute; right: calc(var(--gutter) + 10px); bottom: 34px; z-index: 3;
  display: grid; place-items: center;
  width: 84px; height: 84px;
}
.hero-scroll .ring{ position: absolute; inset: 0; animation: spin 22s linear infinite; }
.hero-scroll .ring text{ fill: rgba(255, 255, 255, .72); font-size: 9.4px; letter-spacing: .16em; }
.hero-scroll .dot{
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--violet); color: var(--white);
}
.hero-scroll .dot svg{ width: 15px; height: 15px; }

@keyframes spin{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }

/* --- 7. Marquee ----------------------------------------------------------- */

.marquee{
  background: var(--violet);
  color: var(--white);
  padding: 17px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track{
  display: inline-flex; align-items: center; gap: 34px;
  padding-right: 34px;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee span{
  font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em;
}
.marquee i{
  flex: 0 0 13px; width: 13px; height: 13px;
  background: currentColor; font-style: normal;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
@keyframes slide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* --- 8. About ------------------------------------------------------------- */

.about-visual{ position: relative; }
.about-visual > img{
  border-radius: var(--r-lg);
  aspect-ratio: 1 / .74;
  object-fit: cover;
  width: 100%;
}

.about-card{
  position: absolute; right: -6%; bottom: -8%;
  width: min(280px, 62%);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.about-card-body{ padding: 22px 22px 18px; text-align: center; }
.about-card-body p{ font-size: .88rem; color: var(--navy); font-weight: 600; margin: 0 0 4px; }
.about-card-body small{ font-size: .78rem; }
.about-card-foot{
  padding: 14px 22px;
  background: var(--mist);
  border-top: 1px solid var(--divider);
  text-align: center;
  font-size: .88rem; font-weight: 600; color: var(--navy);
}

/* Rotating ring with a counter in the middle. */
.spin-badge{
  position: absolute; left: -7%; bottom: 8%;
  width: 138px; height: 138px;
  display: grid; place-items: center;
}
.spin-badge .ring{ position: absolute; inset: 0; animation: spin 20s linear infinite; }
.spin-badge .ring text{ fill: var(--violet); font-size: 9.6px; font-weight: 600; letter-spacing: .1em; }
.spin-badge .core{
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-card);
  display: grid; place-items: center;
  color: var(--navy); font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em;
}

.tabs{
  display: inline-flex; padding: 6px;
  margin: 4px 0 20px;
  border-radius: var(--r-pill);
  background: var(--mist);
}
.on-dark .tabs{ background: rgba(255, 255, 255, .07); }
.tabs button{
  padding: 11px 24px;
  border: none; border-radius: var(--r-pill);
  background: transparent;
  color: var(--navy); font-size: .93rem; font-weight: 600;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.on-dark .tabs button{ color: rgba(255, 255, 255, .72); }
.tabs button[aria-selected="true"]{ background: var(--white); color: var(--navy); box-shadow: var(--shadow-card); }
.tab-panel[hidden]{ display: none; }

.icon-pair{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 26px 0;
  margin: 26px 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.on-dark .icon-pair{ border-color: var(--divider-dark); }
.icon-line{ display: flex; gap: 14px; align-items: flex-start; }
.icon-line .ic{
  flex: 0 0 44px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--violet); color: var(--white);
}
.icon-line .ic svg{ width: 21px; height: 21px; }
.icon-line p{ margin: 0; font-size: .95rem; color: var(--navy); font-weight: 600; line-height: 1.4; }
.on-dark .icon-line p{ color: var(--white); }
.icon-line small{ display: block; font-weight: 400; color: var(--text); margin-top: 3px; }
.on-dark .icon-line small{ color: var(--text-on-dark); }

/* --- 9. Core feature cards ------------------------------------------------ */

.feature-card{
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px;
  border: 1px solid var(--divider-dark);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.feature-card:hover{ transform: translateY(-8px); border-color: rgba(115, 75, 223, .6); }
.feature-card .ic{
  width: 52px; height: 52px; margin-bottom: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--violet); color: var(--white);
}
.feature-card .ic svg{ width: 25px; height: 25px; }
.feature-card .step-no{
  position: absolute; top: 26px; right: 28px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  color: rgba(255, 255, 255, .34);
}
.feature-card h3{ font-size: 1.22rem; margin-bottom: 10px; }
.feature-card p{
  font-size: .95rem;
  padding-bottom: 24px; margin-bottom: 20px;
  border-bottom: 1px solid var(--divider-dark);
  flex: 1;
}

.rating-row{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px;
  margin-top: 44px;
  text-align: center;
}
.rating-row .stars{ display: flex; gap: 4px; color: var(--violet-lift); }
.rating-row .stars svg{ width: 16px; height: 16px; }
.rating-row b{ color: var(--white); font-size: 1.05rem; }

/* --- 10. Key advantages --------------------------------------------------- */

.adv-list{ display: grid; gap: 26px; margin-top: 8px; }
.adv{ display: flex; gap: 18px; align-items: flex-start; }
.adv .ic{
  flex: 0 0 50px; width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--violet-wash); color: var(--violet);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.adv:hover .ic{ background: var(--violet); color: var(--white); }
.adv .ic svg{ width: 23px; height: 23px; }
.adv h3{ font-size: 1.1rem; margin-bottom: 5px; }
.adv p{ font-size: .95rem; margin: 0; }

.stack-media{ position: relative; }
.stack-media img{ border-radius: var(--r-lg); width: 100%; object-fit: cover; }
.stack-media .tall{ aspect-ratio: 1 / 1.22; }
.stack-media .squiggle{
  position: absolute; right: -12px; top: -26px;
  width: 92px; color: var(--violet); opacity: .85;
}
.stack-media .wave{
  position: absolute; left: -22px; bottom: -24px;
  width: 78px; color: var(--violet); opacity: .85;
}

/* --- 11. Trend panel and chart -------------------------------------------- */

.trend-panel{
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lift);
  padding: 26px;
}
.trend-head{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 4px;
}
.trend-head h4{ margin: 0; font-size: 1rem; }
.chip{
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 700; letter-spacing: .04em;
}
.chip--good{ background: rgba(56, 191, 167, .14); color: #1B7A69; }
.chip--watch{ background: rgba(224, 163, 46, .16); color: #8A6212; }
.trend-sub{ font-size: .84rem; margin: 0 0 14px; }
.trend-axis{
  display: flex; justify-content: space-between;
  font-size: .76rem; color: var(--text);
  padding-top: 10px; margin-top: 2px;
  border-top: 1px solid var(--divider);
}
/* One series, so no legend: the title names it. The mark is violet at 5.5:1
   on white; grid and ticks are recessive; only the final point is labelled. */
.trend-svg{ width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.trend-svg .grid line{ stroke: var(--divider); stroke-width: 1; }
.trend-svg .grid text,
.trend-svg .ticks text{ fill: var(--text); font-size: 10.5px; font-family: inherit; }
.trend-svg .area{ fill: rgba(115, 75, 223, .10); }
.trend-svg .line{ fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trend-svg .dots circle{ fill: var(--violet); opacity: 0; }
.trend-svg .dots circle:hover{ opacity: 1; }
.trend-svg .dot-last{ fill: var(--violet); stroke: var(--white); stroke-width: 2.5; }
.trend-svg .val-last{ fill: var(--navy); font-size: 12px; font-weight: 700; font-family: inherit; }
.trend-note{
  margin: 12px 0 0;
  font-size: .78rem; color: var(--text);
}
.chip svg{ width: 13px; height: 13px; display: inline; vertical-align: -2px; margin-right: 3px; }

.trend-legend{
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px; font-size: .8rem;
}
.trend-legend span{ display: inline-flex; align-items: center; gap: 7px; }
.trend-legend i{ width: 10px; height: 10px; border-radius: 3px; font-style: normal; }

.pill-list{ display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.pill-list li{
  padding: 9px 18px;
  border: 1px solid var(--divider); border-radius: var(--r-pill);
  background: var(--white);
  font-size: .88rem; font-weight: 600; color: var(--navy);
}
.on-dark .pill-list li{ background: rgba(255, 255, 255, .06); border-color: var(--divider-dark); color: var(--white); }

/* --- 12. Steps ------------------------------------------------------------ */

.steps{ counter-reset: step; display: grid; gap: 0; }
.step{
  counter-increment: step;
  display: grid;
  grid-template-columns: 116px 1.1fr 1fr;
  gap: 32px; align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--divider);
}
.step:first-child{ border-top: 1px solid var(--divider); }
.on-dark .step{ border-color: var(--divider-dark); }
.step-index{
  font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700;
  line-height: .9; letter-spacing: -.04em;
  color: var(--violet);
}
.step-index::before{ content: "0" counter(step); }
.step h3{ margin: 0 0 6px; }
.step p{ margin: 0; font-size: .97rem; }
.step-note{
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--mist);
  font-size: .9rem;
}
.on-dark .step-note{ background: rgba(255, 255, 255, .05); }

/* --- 13. Audience cards --------------------------------------------------- */

.aud{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy);
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.aud img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.aud::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 26, 45, 0) 34%, rgba(22, 26, 45, .92) 88%);
}
.aud:hover img{ transform: scale(1.06); }
.aud-body{ position: relative; z-index: 2; padding: 28px; }
.aud-body h3{ color: var(--white); font-size: 1.24rem; margin-bottom: 8px; }
.aud-body p{ color: rgba(255, 255, 255, .78); font-size: .94rem; margin: 0; }
.aud-body .tagset{ margin-bottom: 14px; }

.tagset{ display: flex; flex-wrap: wrap; gap: 7px; }
.tagset span{
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--white);
}

/* --- 14. Full-bleed image band -------------------------------------------- */

.band{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--navy);
}
.band-cell{
  position: relative;
  min-height: 380px;
  display: flex; align-items: flex-end;
  padding: 30px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  overflow: hidden;
}
.band-cell:last-child{ border-right: none; }
.band-cell img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62);
  transition: transform 1.1s var(--ease);
}
.band-cell::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 26, 45, .42) 0%, rgba(22, 26, 45, .9) 100%);
}
.band-cell:hover img{ transform: scale(1.07); }
.band-cell > div{ position: relative; z-index: 2; }
.band-cell h4{ color: var(--white); margin-bottom: 6px; }
.band-cell p{ color: rgba(255, 255, 255, .74); font-size: .88rem; margin: 0; }

/* --- 15. Research opportunities ------------------------------------------- */

.study{
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px;
  border: 1px solid var(--divider); border-radius: var(--r-lg);
  background: var(--white);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.study:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.study--featured{ border-color: var(--violet); }
.study-flag{
  position: absolute; top: 0; right: 0;
  padding: 7px 16px;
  border-radius: 0 var(--r-lg) 0 var(--r-lg);
  background: var(--violet); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.study-top{ display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.study-top .ic{
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--violet-wash); color: var(--violet);
}
.study-top .ic svg{ width: 21px; height: 21px; }
.study-top h3{ margin: 0; font-size: 1.1rem; }
.study-top small{ display: block; font-weight: 400; color: var(--text); font-size: .84rem; }
.study-figure{
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--navy); line-height: 1;
}
.study-figure small{ font-size: .88rem; font-weight: 500; color: var(--text); letter-spacing: 0; }
.study-div{ height: 1px; background: var(--divider); margin: 22px 0; }
.study ul{ list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; }
.study li{ display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; }
.study li svg{ flex: 0 0 18px; width: 18px; height: 18px; color: var(--violet); margin-top: 3px; }

.note-row{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px;
  margin-top: 32px;
  font-size: .88rem;
}
.note-row span{ display: inline-flex; align-items: center; gap: 9px; }
.note-row svg{ width: 17px; height: 17px; color: var(--violet); }

.fine-print{
  max-width: 900px; margin: 26px auto 0;
  font-size: .81rem; line-height: 1.6; text-align: center;
}
.study-figure{ margin: 0; }
.note-row.on-dark span{ color: var(--text-on-dark); }
.note-row.on-dark svg{ color: var(--violet-lift); }
.arrow-link[aria-disabled="true"]{ color: var(--text); cursor: default; }
.arrow-link[aria-disabled="true"]:hover svg{ transform: none; }

/* --- 16. Testimonials ----------------------------------------------------- */

.quotes{
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.quotes::-webkit-scrollbar{ display: none; }
.quote{
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 30px;
  border: 1px solid var(--divider-dark); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
}
.quote .stars{ display: flex; gap: 5px; color: var(--violet-lift); margin-bottom: 18px; }
.quote .stars svg{ width: 17px; height: 17px; }
.quote blockquote{
  margin: 0 0 24px; flex: 1;
  color: var(--white); font-size: 1rem; font-weight: 500; line-height: 1.6;
}
.quote-by{
  display: flex; align-items: center; gap: 13px;
  padding-top: 20px;
  border-top: 1px solid var(--divider-dark);
}
.quote-by img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 28%; }
.quote-by b{ display: block; color: var(--white); font-size: .95rem; }
.quote-by span{ display: block; font-size: .83rem; color: rgba(255, 255, 255, .6); }
.quote-by svg{ width: 22px; height: 22px; margin-left: auto; color: var(--violet-lift); }

.dots{ display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.dots button{
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
  transition: width .32s var(--ease), background .32s var(--ease);
}
.dots button[aria-current="true"]{ width: 26px; background: var(--violet-lift); }

/* --- 17. Trust row -------------------------------------------------------- */

.trust{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(50px, 6vw, 76px);
  background: var(--divider-dark);
  border: 1px solid var(--divider-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.trust div{ background: var(--navy); padding: 26px 24px; }
.trust svg{ width: 22px; height: 22px; color: var(--violet-lift); margin-bottom: 12px; }
.trust b{ display: block; color: var(--white); font-size: .98rem; margin-bottom: 4px; }
.trust p{ margin: 0; font-size: .87rem; }

/* --- 18. FAQ -------------------------------------------------------------- */

.faq-layout{ display: grid; grid-template-columns: 340px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }

.faq-aside{
  padding: 30px;
  border-radius: var(--r-lg);
  background: var(--violet);
  color: var(--white);
  position: sticky; top: 104px;
}
.faq-aside h3{ color: var(--white); font-size: 1.4rem; }
.faq-aside p{ color: rgba(255, 255, 255, .84); font-size: .94rem; }
.faq-aside .btn{ background: var(--white); color: var(--navy); margin-top: 8px; }
.faq-aside .btn::after{ background: var(--navy); }
.faq-aside .btn:hover{ color: var(--white); }

.faq-item{
  border: 1px solid var(--divider); border-radius: var(--r-md);
  background: var(--white);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item.is-open{ border-color: rgba(115, 75, 223, .45); }
.faq-q{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  border: none; background: transparent;
  color: var(--navy); font-size: 1rem; font-weight: 600; text-align: left;
  cursor: pointer;
}
.faq-q .mark{
  flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--divider);
  color: var(--violet);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.faq-item.is-open .faq-q .mark{
  transform: rotate(45deg);
  background: var(--violet); border-color: var(--violet); color: var(--white);
}
.faq-q .mark svg{ width: 13px; height: 13px; }
.faq-a{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.faq-item.is-open .faq-a{ grid-template-rows: 1fr; }
.faq-a > div{ overflow: hidden; }
.faq-a p{ padding: 0 24px 22px; margin: 0; font-size: .96rem; }

/* --- 19. Education hub ---------------------------------------------------- */

.post{
  display: flex; flex-direction: column;
  border: 1px solid var(--divider); border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.post:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.post-media{ position: relative; overflow: hidden; }
.post-media img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1s var(--ease); }
.post:hover .post-media img{ transform: scale(1.06); }
.post-cat{
  position: absolute; left: 16px; top: 16px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--white); color: var(--navy);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.post-body{ padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-meta{ font-size: .82rem; margin-bottom: 9px; }
.post h3{ font-size: 1.13rem; margin-bottom: 12px; }
.post p{ font-size: .93rem; flex: 1; margin-bottom: 18px; }

/* --- 20. Sign-up panel ---------------------------------------------------- */

.signup{
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lift);
  padding: clamp(28px, 4vw, 48px);
  max-width: 880px; margin: 0 auto;
}
.field{ margin-bottom: 18px; }
.field label{
  display: block; margin-bottom: 7px;
  color: var(--navy); font-size: .9rem; font-weight: 600;
}
.field input[type="tel"],
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea{
  width: 100%;
  padding: 15px 18px;
  border: 1.5px solid var(--divider); border-radius: var(--r-md);
  background: var(--white);
  color: var(--navy); font: inherit; font-size: 1rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ min-height: 132px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--violet-wash);
}
.field-2{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

.check{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--divider); border-radius: var(--r-md);
  margin-bottom: 12px;
  font-size: .9rem; line-height: 1.5;
}
.check input{ flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--violet); }
.check.is-invalid{ border-color: #C1392B; background: rgba(193, 57, 43, .04); }

.consent{
  margin: 18px 0 22px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--mist);
  font-size: .82rem; line-height: 1.62;
}
.consent p{ margin-bottom: .8em; }

/* The honeypot has to be reachable by a bot parsing the HTML and invisible
   to everyone else — including screen readers, hence aria-hidden and the
   negative tabindex on the input. display:none would be a tell; plenty of
   bots skip those. */
.hp{
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-error{
  display: none;
  margin-bottom: 16px; padding: 13px 16px;
  border-radius: var(--r-md);
  background: rgba(193, 57, 43, .08);
  color: #9E2B1F; font-size: .9rem; font-weight: 600;
}
.form-error.is-shown{ display: block; }

.form-done{
  display: none;
  flex-direction: column; align-items: center; text-align: center;
  padding: 24px 0;
}
.form-done.is-shown{ display: flex; }
.form-done .ic{
  width: 62px; height: 62px; margin-bottom: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--violet); color: var(--white);
}
.form-done .ic svg{ width: 28px; height: 28px; }

/* --- 21. CTA band --------------------------------------------------------- */

.cta-band{
  position: relative;
  border-radius: var(--r-lg);
  background: var(--navy);
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
}
.cta-band::before{
  content: "";
  position: absolute; inset: auto -10% -70% -10%; height: 150%;
  background: radial-gradient(48% 52% at 50% 50%, rgba(115, 75, 223, .6) 0%, rgba(115, 75, 223, 0) 70%);
}
.cta-band > *{ position: relative; z-index: 1; }
.cta-band h2{ color: var(--white); max-width: 780px; margin-inline: auto; }
.cta-band p{ color: rgba(255, 255, 255, .74); max-width: 640px; margin-inline: auto; }
.cta-band .btn-row{ justify-content: center; margin-top: 30px; }

/* --- 22. Footer ----------------------------------------------------------- */

.site-footer{
  position: relative;
  background: var(--navy-deep);
  color: var(--text-on-dark);
  overflow: hidden;
  padding: clamp(54px, 6vw, 80px) 0 0;
}
.site-footer::before{
  content: "";
  position: absolute; inset: -30% 0 auto 0; height: 80%;
  background: radial-gradient(44% 60% at 50% 42%, rgba(115, 75, 223, .38) 0%, rgba(115, 75, 223, 0) 72%);
}
.site-footer .wrap{ position: relative; z-index: 1; }

.footer-news{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 34px; align-items: center;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--divider-dark);
}
.footer-news h2{ color: var(--white); font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin: 0; }
/* The icon used to hang in its own flex column beside the paragraph, which
   left the form and the note indented past it and the tile stranded with
   nothing beneath it. It sits above the stack now, so the paragraph, the
   field and the note all share one left edge. */
.news-side .ic{
  width: 44px; height: 44px;
  margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .08); color: var(--white);
}
.news-side .ic svg{ width: 20px; height: 20px; }
.news-body > p:first-child{ max-width: 46ch; }
.news-form{ position: relative; margin-top: 18px; }
.news-form input{
  width: 100%;
  padding: 16px 62px 16px 20px;
  border: 1px solid var(--divider-dark); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  color: var(--white); font: inherit; font-size: .95rem;
}
.news-form input::placeholder{ color: rgba(255, 255, 255, .45); }
.news-form input:focus{ outline: none; border-color: var(--violet); }
.news-form button{
  position: absolute; right: 7px; top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none; border-radius: var(--r-sm);
  background: var(--violet); color: var(--white);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.news-form button:hover{ background: var(--violet-lift); }
.news-form button svg{ width: 18px; height: 18px; }
.news-note{ font-size: .78rem; margin-top: 10px; }
/* The footer form has no panel to swap in, so its two states are a compact
   line under the field rather than the full-height success block. */
.news-error{ margin: 10px 0 0; font-size: .82rem; }
.news-done{ padding: 0; align-items: flex-start; text-align: left; }
.news-done.is-shown{ display: block; }
.news-done p{ margin: 10px 0 0; font-size: .88rem; color: var(--text-on-dark); }
.news-done strong{ color: var(--white); }

.footer-cols{
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 34px;
  padding: 46px 0 34px;
}
.footer-cols h4{ color: var(--white); font-size: 1rem; margin-bottom: 18px; }
.footer-cols ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-cols a{ color: var(--text-on-dark); font-size: .93rem; }
.footer-cols a:hover{ color: var(--white); }
.footer-about p{ font-size: .93rem; max-width: 330px; }
.footer-about .brand{ margin-bottom: 18px; }

.socials{ display: flex; gap: 10px; margin-top: 20px; }
.socials a{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--divider-dark); border-radius: 50%;
  color: var(--white);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover{ background: var(--violet); border-color: var(--violet); }
.socials svg{ width: 16px; height: 16px; }

.footer-legal{
  border-top: 1px solid var(--divider-dark);
  padding: 22px 0 26px;
  font-size: .84rem;
}
.footer-legal .wrap{
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  align-items: center; justify-content: space-between;
}
.footer-legal p{ margin: 0; }
.disclaimer strong{ color: rgba(255, 255, 255, .78); }

.disclaimer{
  padding: 0 0 32px;
  font-size: .8rem; line-height: 1.6;
  color: rgba(255, 255, 255, .5);
  max-width: 980px;
}

/* --- 23. Back to top and cursor ------------------------------------------- */

.to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 800;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--violet); color: var(--white);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
}
.to-top.is-shown{ opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover{ background: var(--navy); }
.to-top svg{ width: 18px; height: 18px; }

#ball{
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--violet);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .18s var(--ease);
}
#ball.is-on{ opacity: 1; }
#ball.is-big{ transform: scale(2.6); opacity: .45; }
@media (hover: none), (pointer: coarse){ #ball{ display: none; } }

/* --- 24. Animation utilities ---------------------------------------------- */

/* Character reveal. The heading's letters are wrapped by main.js and lit as
   the block crosses the viewport — the theme's one unmistakable move. */
.reveal-chars span{
  color: rgba(22, 26, 45, .16);
  transition: color .28s linear;
}
/* Every dark surface has to be named here. A heading on one that is missing
   from the list is painted navy-on-navy — lit, and invisible. */
.on-dark .reveal-chars span,
.section--dark .reveal-chars span,
.hero .reveal-chars span,
.page-hero .reveal-chars span,
.cta-band .reveal-chars span{ color: rgba(255, 255, 255, .18); }
.reveal-chars span.on{ color: var(--navy); }
.on-dark .reveal-chars span.on,
.section--dark .reveal-chars span.on,
.hero .reveal-chars span.on,
.page-hero .reveal-chars span.on,
.cta-band .reveal-chars span.on{ color: var(--white); }

.fade-up{
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-up.in{ opacity: 1; transform: none; }

.img-reveal{ clip-path: inset(0 100% 0 0); transition: clip-path 1.15s var(--ease); }
.img-reveal.in{ clip-path: inset(0 0 0 0); }

/* The theme's glass sweep on hover. */
.sheen{ position: relative; overflow: hidden; }
.sheen::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 200%; height: 0;
  background: rgba(255, 255, 255, .3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 3; pointer-events: none;
}
.sheen:hover::after{
  height: 250%;
  background: transparent;
  transition: all .6s linear;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fade-up{ opacity: 1; transform: none; }
  .img-reveal{ clip-path: none; }
  .reveal-chars span{ color: inherit; }
  #ball{ display: none; }
}

/* --- 25. Interior pages --------------------------------------------------- */

.page-hero{
  position: relative;
  background: var(--navy);
  padding: clamp(66px, 9vw, 116px) 0 clamp(56px, 7vw, 92px);
  overflow: hidden;
}
.page-hero::before{
  content: "";
  position: absolute; inset: -60% 0 auto 0; height: 160%;
  background: radial-gradient(40% 50% at 28% 52%, rgba(115, 75, 223, .5) 0%, rgba(115, 75, 223, 0) 70%);
}
.page-hero .wrap{ position: relative; z-index: 1; }
.page-hero h1{ color: var(--white); max-width: 17ch; }
.page-hero p{ color: rgba(255, 255, 255, .74); max-width: 620px; font-size: 1.1rem; }

.crumbs{
  display: flex; gap: 9px; align-items: center;
  margin-bottom: 18px;
  font-size: .84rem; color: rgba(255, 255, 255, .58);
}
.crumbs a{ color: rgba(255, 255, 255, .8); }
.crumbs a:hover{ color: var(--white); }

.prose{ max-width: 780px; }
.prose h2{ font-size: clamp(1.5rem, 2.2vw, 2rem); margin-top: 2em; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ font-size: 1.16rem; margin-top: 1.6em; }
.prose ul, .prose ol{ margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li{ margin-bottom: .5em; }
.prose table{ width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .93rem; }
.prose th, .prose td{ text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.prose th{ color: var(--navy); font-weight: 600; }

.toc{
  padding: 22px 24px;
  border: 1px solid var(--divider); border-radius: var(--r-md);
  background: var(--mist);
  margin-bottom: 34px;
}
.toc h4{ margin-bottom: 12px; }
.toc ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }

.info-card{
  padding: 28px;
  border: 1px solid var(--divider); border-radius: var(--r-lg);
  background: var(--white);
  height: 100%;
}
.info-card .ic{
  width: 48px; height: 48px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--violet-wash); color: var(--violet);
}
.info-card .ic svg{ width: 22px; height: 22px; }
.info-card h3{ font-size: 1.1rem; }
.info-card p{ font-size: .95rem; margin-bottom: 0; }

/* On a dark section the card keeps its white background from the rule above
   while .on-dark turns its heading and body white — i.e. an empty white box.
   The card has to be restated for the dark surface, not just recoloured. */
.on-dark .info-card,
.section--dark .info-card{
  background: rgba(255, 255, 255, .05);
  border-color: var(--divider-dark);
}
.on-dark .info-card .ic,
.section--dark .info-card .ic{ background: var(--violet); color: var(--white); }

.callout{
  padding: 22px 26px;
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--violet-wash);
  font-size: .95rem;
  margin: 0 0 1.6em;
}
.callout strong{ display: block; margin-bottom: 4px; }

/* --- 25b. Articles ------------------------------------------------------- */

.article-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .6); font-size: .86rem;
}
.post-cat--inline{ position: static; }

.article-media{
  margin: 0; position: relative; z-index: 2;
  /* Rides up over the hero's bottom edge, the way the theme overlaps a panel
     onto the band above it. */
  margin-top: clamp(-96px, -7vw, -48px);
}
.article-media img{
  width: 100%; max-height: 460px; object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.article-body{ margin: 0 auto; }
.article-body > p:first-of-type{ font-size: 1.16rem; line-height: 1.62; }
.article-body h2{ scroll-margin-top: 96px; }
.article-body table{ margin-top: 0; }
.article-body th{ white-space: normal; }

.pull{
  margin: 1.6em 0;
  padding: 20px 26px;
  border-left: 3px solid var(--violet);
  background: var(--mist);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.08rem; font-weight: 500; color: var(--navy);
}

.sources{
  list-style: none; padding: 0; margin: 0 0 1.6em;
  font-size: .9rem;
}
.sources li{
  padding: 14px 18px; margin-bottom: 10px;
  border: 1px solid var(--divider); border-radius: var(--r-md);
  background: var(--mist);
}

.editorial{
  padding: 18px 20px; margin-bottom: 1.6em;
  border: 1px dashed var(--divider); border-radius: var(--r-md);
  font-size: .88rem; color: var(--text);
}

.post h3 a{ color: inherit; }
.post h3 a:hover{ color: var(--violet); }

/* --- 26. Responsive ------------------------------------------------------- */

@media (max-width: 1180px){
  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-cell:nth-child(2){ border-right: none; }
  .band-cell:nth-child(1), .band-cell:nth-child(2){ border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .footer-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-layout{ grid-template-columns: 1fr; }
  .faq-aside{ position: static; }
}

@media (max-width: 980px){
  .site-nav{
    position: fixed; inset: 78px 0 auto 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--divider-dark);
    padding: 12px var(--gutter) 26px;
    transform: translateY(-14px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-nav.is-open{ opacity: 1; transform: none; pointer-events: auto; }
  .site-nav > ul{ flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li{ border-bottom: 1px solid var(--divider-dark); }
  .site-nav a{ display: block; padding: 15px 0; font-size: 1rem; }
  .site-nav a::after{ display: none; }
  .nav-toggle{ display: block; order: 3; }
  .header-cta{ order: 2; }
  .brand{ order: 1; }

  .split{ grid-template-columns: 1fr; }
  .split--flip > *:first-child{ order: 2; }
  .grid--3{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }
  .step{ grid-template-columns: 74px 1fr; }
  .step-note{ grid-column: 2; }
  .footer-news{ grid-template-columns: 1fr; }
  .about-card{ position: static; width: 100%; margin-top: 18px; }
  .spin-badge{ left: auto; right: 6%; bottom: auto; top: -30px; }
  .quotes{ grid-auto-columns: minmax(280px, 86%); }
}

@media (max-width: 680px){
  body{ font-size: 16px; }
  :root{ --gutter: 18px; }
  .hero{ min-height: 620px; }
  .hero-stats{ gap: 12px; }
  .hero-stat{ padding: 16px 18px; }
  .hero-scroll{ display: none; }
  .band{ grid-template-columns: 1fr; }
  .band-cell{ min-height: 300px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .grid--4{ grid-template-columns: 1fr; }
  .trust{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: 1fr; }
  .field-2{ grid-template-columns: 1fr; }
  .icon-pair{ grid-template-columns: 1fr; }
  .step{ grid-template-columns: 1fr; gap: 12px; }
  .step-note{ grid-column: 1; }
  .quotes{ grid-auto-columns: 88%; }
}