/* ==========================================================================
   EDUVANTAGE — Marketing site
   Built against design.md v1.0 with the Marketing Motion amendment (see
   DESIGN-AMENDMENTS.md). Tokens below are copied verbatim from §11.1; the
   --evm-* namespace holds marketing-only additions so the product system
   stays untouched.
   ========================================================================== */

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Teal */
  --ev-teal-50:#EFFAFA;  --ev-teal-100:#D7F3F3; --ev-teal-200:#ADE7E8;
  --ev-teal-300:#7FD8D9; --ev-teal-400:#50C4C5; --ev-teal-500:#38ACAD;
  --ev-teal-600:#2C8E8F; --ev-teal-700:#267273; --ev-teal-800:#205A5B;
  --ev-teal-900:#133838;

  /* Navy */
  --ev-navy-50:#F5F7FA;  --ev-navy-100:#E6EBF2; --ev-navy-200:#C8D3E1;
  --ev-navy-300:#A3B5CB; --ev-navy-400:#7691B0; --ev-navy-500:#4B6C92;
  --ev-navy-600:#35577A; --ev-navy-700:#264563; --ev-navy-800:#1C334A;
  --ev-navy-900:#101D2B;

  /* Green */
  --ev-green-50:#EFF9F4;  --ev-green-100:#D6F0E4; --ev-green-200:#A9E1C7;
  --ev-green-300:#6FCBA3; --ev-green-400:#35B07E; --ev-green-500:#0C8B5A;
  --ev-green-600:#037146; --ev-green-700:#035C39; --ev-green-800:#02452B;
  --ev-green-900:#012C1C;

  /* Sand */
  --ev-sand-50:#FCFBF2;  --ev-sand-100:#F7F4DF; --ev-sand-200:#EEE9BE;
  --ev-sand-300:#DFD581; --ev-sand-400:#CFC35F; --ev-sand-500:#B8AB47;
  --ev-sand-600:#988D39; --ev-sand-700:#776E2D; --ev-sand-800:#565021;
  --ev-sand-900:#383414;

  /* Olive */
  --ev-olive-600:#717B3A;

  /* Ink */
  --ev-ink-50:#F7F8FA;  --ev-ink-100:#EDEFF3; --ev-ink-200:#DDE1E8;
  --ev-ink-300:#C3C9D4; --ev-ink-400:#9BA4B4; --ev-ink-500:#727D91;
  --ev-ink-600:#525C6E; --ev-ink-700:#3A4352; --ev-ink-800:#252C38;
  --ev-ink-900:#141922;

  /* Status */
  --ev-success:#037146;  --ev-success-bg:#EFF9F4;
  --ev-warning:#92400E;  --ev-warning-bg:#FEF6E7;
  --ev-danger:#B91C1C;   --ev-danger-bg:#FEF0F0;
  --ev-info:#267273;     --ev-info-bg:#EFFAFA;

  /* Brand artwork only — never as a UI colour (design.md §8.3) */
  --ev-logo-teal:#3DBFC0;
  --ev-logo-yellow:#F5DE3B;

  /* Semantic */
  --ev-bg-page:#FFFFFF;
  --ev-bg-surface:#FFFFFF;
  --ev-bg-sunken:var(--ev-ink-100);
  --ev-bg-brand:var(--ev-teal-400);
  --ev-bg-brand-subtle:var(--ev-teal-50);
  --ev-bg-inverse:var(--ev-navy-700);

  --ev-text-primary:var(--ev-navy-700);
  --ev-text-secondary:var(--ev-ink-600);
  --ev-text-tertiary:var(--ev-ink-600);
  --ev-text-inverse:#FFFFFF;
  --ev-text-accent:var(--ev-green-600);

  --ev-border-subtle:var(--ev-ink-100);
  --ev-border-default:var(--ev-ink-200);
  --ev-border-strong:var(--ev-ink-300);
  --ev-border-accent:var(--ev-sand-300);
  --ev-border-focus:var(--ev-green-600);

  --ev-action-primary:var(--ev-green-600);
  --ev-action-primary-hover:var(--ev-green-700);
  --ev-action-primary-active:var(--ev-green-800);
  --ev-action-secondary:var(--ev-navy-700);
  --ev-action-secondary-hover:var(--ev-navy-800);

  /* Type */
  --ev-font:'Satoshi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',
            Roboto,'Helvetica Neue',Arial,sans-serif;
  --ev-weight-display:800;
  --ev-weight-display-max:900;
  --ev-weight-body:500;

  /* Space */
  --ev-space-1:0.25rem; --ev-space-2:0.5rem;  --ev-space-3:0.75rem;
  --ev-space-4:1rem;    --ev-space-5:1.25rem; --ev-space-6:1.5rem;
  --ev-space-8:2rem;    --ev-space-10:2.5rem; --ev-space-12:3rem;
  --ev-space-16:4rem;   --ev-space-20:5rem;   --ev-space-24:6rem;
  --ev-space-32:8rem;

  /* Radius — product scale (design.md §5.1) */
  --ev-radius-none:0; --ev-radius-sm:2px; --ev-radius-md:4px;
  --ev-radius-lg:6px; --ev-radius-full:9999px;

  /* Elevation */
  --ev-shadow-sm:0 1px 2px rgba(38,69,99,.06);
  --ev-shadow-md:0 2px 8px rgba(38,69,99,.08);
  --ev-shadow-lg:0 8px 24px rgba(38,69,99,.10);
  --ev-shadow-xl:0 16px 48px rgba(38,69,99,.14);

  /* Motion */
  --ev-motion-instant:100ms; --ev-motion-fast:160ms;
  --ev-motion-base:220ms;    --ev-motion-slow:320ms;
  --ev-ease:cubic-bezier(0.2,0,0.2,1);

  /* ---- Marketing-only additions (amendment) ---- */
  --evm-motion-reveal:720ms;
  --evm-motion-stage:900ms;
  --evm-ease-out:cubic-bezier(0.16,1,0.3,1);      /* long, Apple-ish settle */
  --evm-ease-inout:cubic-bezier(0.65,0,0.35,1);

  /* Physical objects — a phone bezel at 2px radius reads as a mistake, so
     device frames get their own scale, distinct from UI radii. */
  --evm-radius-browser:12px;
  --evm-radius-phone:44px;

  --evm-container:1200px;
  --evm-container-wide:1440px;
  --evm-gutter:24px;

  /* Product-shot elevation: four stacked layers, navy-tinted per §5.2 */
  --evm-shadow-float:
     0 2px 4px rgba(16,29,43,.035),
     0 8px 16px rgba(16,29,43,.045),
     0 24px 48px rgba(16,29,43,.06),
     0 56px 112px rgba(16,29,43,.10);
  --evm-shadow-float-sm:
     0 1px 2px rgba(16,29,43,.04),
     0 4px 10px rgba(16,29,43,.05),
     0 16px 32px rgba(16,29,43,.07);
}

@media (min-width:768px){ :root{ --evm-gutter:48px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:112px;
}

body{
  margin:0;
  font-family:var(--ev-font);
  font-weight:var(--ev-weight-body);
  font-size:0.9375rem;
  line-height:1.58;
  color:var(--ev-text-primary);
  background:var(--ev-bg-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4,h5,h6{ margin:0; font-weight:var(--ev-weight-display); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

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

::selection{ background:var(--ev-teal-200); color:var(--ev-navy-800); }

.ev-numeric{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
}

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

.ev-skip{
  position:absolute; top:-100px; left:var(--evm-gutter); z-index:200;
  background:var(--ev-navy-700); color:#fff; padding:12px 20px;
  border-radius:var(--ev-radius-md); font-weight:800; font-size:.9375rem;
}
.ev-skip:focus{ top:12px; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.ev-hero-type{
  font-size:clamp(2.75rem,7.2vw,5.25rem);
  font-weight:var(--ev-weight-display-max);
  line-height:1.02;
  letter-spacing:-0.035em;
  max-width:17ch;
}
/* Measure sits at the top of design.md §3.4's 16–24ch band: heavy display
   type stays readable, but the column no longer reads as a narrow stack. */
.ev-display-1{
  font-size:clamp(2.25rem,5.2vw,3.75rem);
  font-weight:var(--ev-weight-display-max);
  line-height:1.06;
  letter-spacing:-0.03em;
  max-width:24ch;
}
.ev-display-2{
  font-size:clamp(1.875rem,4vw,2.75rem);
  font-weight:var(--ev-weight-display);
  line-height:1.12;
  letter-spacing:-0.022em;
  max-width:22ch;
}
.ev-display-3{
  font-size:clamp(1.5rem,3vw,2.125rem);
  font-weight:var(--ev-weight-display);
  line-height:1.18;
  letter-spacing:-0.015em;
}
.ev-h3{ font-size:1.25rem; line-height:1.32; letter-spacing:-0.005em; }
.ev-h4{ font-size:1.0625rem; line-height:1.38; }

.ev-lead{
  font-size:clamp(1.0625rem,1.8vw,1.375rem);
  line-height:1.55;
  font-weight:var(--ev-weight-body);
  color:var(--ev-text-secondary);
  max-width:56ch;
}
.ev-body-lg{ font-size:1.0625rem; line-height:1.6; color:var(--ev-text-secondary); }
.ev-body{ font-size:.9375rem; line-height:1.58; color:var(--ev-text-secondary); }
.ev-body-sm{ font-size:.8125rem; line-height:1.54; color:var(--ev-text-secondary); }

.ev-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.6875rem; font-weight:800; line-height:1.36;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ev-text-accent);
}
/* The deck's signature device: a filled sand square before an eyebrow (§5.3) */
.ev-eyebrow::before{
  content:''; width:14px; height:14px; flex:0 0 14px;
  background:var(--ev-sand-300);
}
.ev-eyebrow--plain::before{ display:none; }
.ev-eyebrow--inverse{ color:var(--ev-teal-300); }

.ev-measure{ max-width:68ch; }
.ev-center{ text-align:center; margin-inline:auto; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.ev-container{
  width:100%; max-width:var(--evm-container);
  margin-inline:auto; padding-inline:var(--evm-gutter);
}
.ev-container--wide{ max-width:var(--evm-container-wide); }
.ev-container--prose{ max-width:768px; }

.ev-section{ padding-block:clamp(56px,9vw,112px); position:relative; }
.ev-section--compact{ padding-block:clamp(36px,5vw,64px); }
.ev-section--tall{ padding-block:clamp(72px,12vw,160px); }
.ev-section--sunken{ background:var(--ev-ink-50); }
.ev-section--brand{ background:var(--ev-teal-50); }
.ev-section--inverse{ background:var(--ev-navy-700); color:var(--ev-text-inverse); }
.ev-section--inverse .ev-lead,
.ev-section--inverse .ev-body,
.ev-section--inverse .ev-body-lg{ color:var(--ev-navy-200); }

.ev-section__head{ max-width:56ch; margin-bottom:clamp(32px,4vw,56px); }
.ev-section__head--center{ margin-inline:auto; text-align:center; }
.ev-section__head > * + *{ margin-top:var(--ev-space-5); }

.ev-rule{
  height:1px; background:var(--ev-border-default); border:0; margin:0;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.ev-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding-inline:26px;
  font-size:.9375rem; font-weight:800; letter-spacing:.005em;
  border:1px solid transparent; border-radius:var(--ev-radius-md);
  cursor:pointer; white-space:nowrap;
  transition:background var(--ev-motion-instant) var(--ev-ease),
             color var(--ev-motion-instant) var(--ev-ease),
             border-color var(--ev-motion-instant) var(--ev-ease),
             transform var(--ev-motion-instant) var(--ev-ease);
}
.ev-btn:active{ transform:translateY(1px); }

.ev-btn--primary{ background:var(--ev-action-primary); color:#fff; }
.ev-btn--primary:hover{ background:var(--ev-action-primary-hover); }

.ev-btn--secondary{ background:var(--ev-action-secondary); color:#fff; }
.ev-btn--secondary:hover{ background:var(--ev-action-secondary-hover); }

.ev-btn--outline{
  background:transparent; color:var(--ev-navy-700);
  border-color:var(--ev-border-strong);
}
.ev-btn--outline:hover{ background:var(--ev-ink-50); border-color:var(--ev-navy-400); }

.ev-btn--onDark{
  background:rgba(255,255,255,.10); color:#fff;
  border-color:rgba(255,255,255,.28);
}
.ev-btn--onDark:hover{ background:rgba(255,255,255,.18); }

.ev-btn--sm{ height:38px; padding-inline:18px; font-size:.8125rem; }

.ev-btn-row{ display:flex; flex-wrap:wrap; gap:var(--ev-space-3); }
.ev-btn-row--center{ justify-content:center; }

/* Text link with a travelling arrow */
.ev-link{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:800; font-size:.9375rem; color:var(--ev-text-accent);
}
.ev-link svg{ transition:transform var(--ev-motion-fast) var(--ev-ease); }
.ev-link:hover svg{ transform:translateX(4px); }
.ev-link--inverse{ color:var(--ev-teal-300); }

/* --------------------------------------------------------------------------
   6. Global navigation
   -------------------------------------------------------------------------- */
.ev-nav{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color var(--ev-motion-base) var(--ev-ease),
             background var(--ev-motion-base) var(--ev-ease);
}
.ev-nav.is-stuck{
  border-bottom-color:var(--ev-border-default);
  background:rgba(255,255,255,.92);
}
.ev-nav__inner{
  height:64px; display:flex; align-items:center; gap:var(--ev-space-8);
}
.ev-nav__logo img{ height:26px; width:auto; }
.ev-nav__menu{
  display:none; align-items:center; gap:var(--ev-space-6);
  margin-inline-start:auto;
}
.ev-nav__menu a{
  font-size:.875rem; font-weight:800; color:var(--ev-navy-700);
  padding-block:6px; position:relative;
}
.ev-nav__menu a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ev-green-600); transform:scaleX(0); transform-origin:left;
  transition:transform var(--ev-motion-fast) var(--ev-ease);
}
.ev-nav__menu a:hover::after{ transform:scaleX(1); }
.ev-nav__cta{ margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.ev-nav__menu + .ev-nav__cta{ margin-inline-start:0; }

.ev-nav__burger{
  margin-inline-start:auto; width:40px; height:40px; display:grid;
  place-items:center; background:none; border:0; cursor:pointer;
}
.ev-nav__burger span{
  display:block; width:19px; height:1.5px; background:var(--ev-navy-700);
  position:relative; transition:background var(--ev-motion-fast);
}
.ev-nav__burger span::before,
.ev-nav__burger span::after{
  content:''; position:absolute; left:0; width:19px; height:1.5px;
  background:var(--ev-navy-700);
  transition:transform var(--ev-motion-base) var(--ev-ease);
}
.ev-nav__burger span::before{ top:-6px; }
.ev-nav__burger span::after{ top:6px; }
.ev-nav__burger[aria-expanded="true"] span{ background:transparent; }
.ev-nav__burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.ev-nav__burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

.ev-nav__drawer{
  display:none; border-top:1px solid var(--ev-border-default);
  background:#fff; padding-block:var(--ev-space-4) var(--ev-space-8);
}
.ev-nav__drawer.is-open{ display:block; }
.ev-nav__drawer a{
  display:block; padding-block:14px; font-size:1.125rem; font-weight:800;
  border-bottom:1px solid var(--ev-border-subtle);
}
.ev-nav__drawer .ev-btn{ width:100%; margin-top:var(--ev-space-6); }

@media (min-width:1024px){
  .ev-nav__menu{ display:flex; }
  .ev-nav__burger{ display:none; }
  .ev-nav__drawer{ display:none !important; }
}

/* Apple-style secondary product bar */
.ev-subnav{
  position:sticky; top:64px; z-index:70;
  background:rgba(247,248,250,.86);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--ev-border-subtle);
}
.ev-subnav__inner{
  height:48px; display:flex; align-items:center; gap:var(--ev-space-6);
}
.ev-subnav__title{
  font-size:1.0625rem; font-weight:800; letter-spacing:-0.01em; flex:0 0 auto;
}
.ev-subnav__links{
  display:none; align-items:center; gap:var(--ev-space-6);
  margin-inline-start:auto; overflow-x:auto; scrollbar-width:none;
}
.ev-subnav__links::-webkit-scrollbar{ display:none; }
.ev-subnav__links a{
  font-size:.8125rem; font-weight:800; color:var(--ev-ink-600); white-space:nowrap;
  display:flex; align-items:center; height:48px;
  transition:color var(--ev-motion-fast) var(--ev-ease);
}
.ev-subnav__links a:hover,
.ev-subnav__links a.is-current{ color:var(--ev-navy-700); }
.ev-subnav .ev-btn{ margin-inline-start:auto; }
.ev-subnav__links + .ev-btn{ margin-inline-start:var(--ev-space-6); }
@media (min-width:900px){ .ev-subnav__links{ display:flex; } }

/* --------------------------------------------------------------------------
   7. Device frames
   -------------------------------------------------------------------------- */
.ev-browser{
  border-radius:var(--evm-radius-browser);
  background:var(--ev-ink-100);
  border:1px solid var(--ev-ink-200);
  overflow:hidden;
  box-shadow:var(--evm-shadow-float);
}
.ev-browser__bar{
  height:34px; display:flex; align-items:center; gap:8px; padding-inline:14px;
  background:linear-gradient(180deg,#FBFCFD,#F2F4F7);
  border-bottom:1px solid var(--ev-ink-200);
}
.ev-browser__dots{ display:flex; gap:6px; flex:0 0 auto; }
.ev-browser__dots i{
  width:9px; height:9px; border-radius:50%; background:var(--ev-ink-300);
}
.ev-browser__url{
  flex:1; max-width:320px; margin-inline:auto; height:20px;
  border-radius:var(--ev-radius-full); background:#fff;
  border:1px solid var(--ev-ink-200);
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:10.5px; font-weight:800; color:var(--ev-ink-600); letter-spacing:.01em;
}
.ev-browser__url svg{ width:9px; height:9px; }
.ev-browser__spacer{ flex:0 0 44px; }
.ev-browser__screen{ display:block; width:100%; background:var(--ev-ink-50); }

/* Scrollable screen for pinned sequences */
.ev-browser__viewport{
  position:relative; overflow:hidden; background:var(--ev-ink-50);
  aspect-ratio:1440/900;
}
.ev-browser__viewport img{
  position:absolute; inset-inline:0; top:0; width:100%;
  will-change:transform;
}

.ev-phone{
  position:relative;
  border-radius:var(--evm-radius-phone);
  padding:9px;
  background:linear-gradient(160deg,#2B3442,#0E141C 55%,#242E3B);
  box-shadow:var(--evm-shadow-float);
}
.ev-phone::after{
  content:''; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:64px; height:5px; border-radius:99px; background:rgba(255,255,255,.16);
}
.ev-phone__screen{
  border-radius:calc(var(--evm-radius-phone) - 9px);
  overflow:hidden; background:#fff; display:block;
}
.ev-phone__screen img{ width:100%; display:block; }
.ev-phone--sm{ --evm-radius-phone:34px; padding:7px; }
.ev-phone--sm::after{ top:15px; width:48px; height:4px; }

/* --------------------------------------------------------------------------
   8. Ambient glow (the "shiny" behind product shots)
   -------------------------------------------------------------------------- */
.ev-glow{
  position:absolute; inset:auto; z-index:0; pointer-events:none;
  filter:blur(70px); opacity:.55;
}
.ev-glow__a,.ev-glow__b,.ev-glow__c{ position:absolute; border-radius:50%; }
.ev-glow__a{ background:var(--ev-teal-300); }
.ev-glow__b{ background:var(--ev-green-300); }
.ev-glow__c{ background:var(--ev-sand-300); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.ev-hero{ position:relative; overflow:hidden; padding-top:clamp(48px,7vw,84px); }
.ev-hero__aura{
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:min(1560px,150vw); height:1000px; pointer-events:none; z-index:0;
  filter:blur(110px); opacity:.42;
}
/* Fades out under the headline so heavy 900-weight type keeps its contrast. */
.ev-hero__aura{
  -webkit-mask-image:radial-gradient(120% 78% at 50% 74%,#000 38%,transparent 76%);
  mask-image:radial-gradient(120% 78% at 50% 74%,#000 38%,transparent 76%);
}
.ev-hero__aura i{ position:absolute; border-radius:50%; display:block; }
.ev-hero__aura i:nth-child(1){
  width:48%; height:44%; left:2%; top:34%; background:var(--ev-teal-300);
  animation:evDrift1 22s var(--evm-ease-inout) infinite;
}
.ev-hero__aura i:nth-child(2){
  width:40%; height:40%; right:3%; top:30%; background:var(--ev-green-200);
  animation:evDrift2 26s var(--evm-ease-inout) infinite;
}
.ev-hero__aura i:nth-child(3){
  width:26%; height:26%; left:39%; top:52%; background:var(--ev-sand-200);
  animation:evDrift3 30s var(--evm-ease-inout) infinite;
}
@keyframes evDrift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(7%,-6%) scale(1.12)} }
@keyframes evDrift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-8%,7%) scale(1.08)} }
@keyframes evDrift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5%,8%) scale(1.15)} }

.ev-hero__inner{ position:relative; z-index:1; text-align:center; }
.ev-hero__eyebrow{ justify-content:center; margin-bottom:var(--ev-space-5); }
.ev-hero__title{ margin-inline:auto; }
.ev-hero__sub{
  margin:var(--ev-space-6) auto 0; text-align:center; max-width:60ch;
  color:var(--ev-ink-600);
}
.ev-hero__actions{ margin-top:var(--ev-space-8); justify-content:center; }

.ev-hero__stage{
  position:relative; z-index:1;
  margin-top:clamp(40px,6vw,72px);
  perspective:2000px;
}
.ev-hero__browser{
  max-width:1120px; margin-inline:auto;
  transform-style:preserve-3d;
  will-change:transform;
}
.ev-hero__phone{
  position:absolute; right:-8px; bottom:-40px; width:132px; z-index:2;
  display:none;
}
@media (min-width:768px){
  .ev-hero__phone{ display:block; width:168px; right:2%; bottom:-56px; }
}
@media (min-width:1200px){
  .ev-hero__phone{ width:196px; right:-10px; bottom:-64px; }
}

.ev-hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:clamp(56px,7vw,88px);
  font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ev-ink-600);
}
.ev-hero__scroll i{
  width:1px; height:34px;
  background:linear-gradient(180deg,var(--ev-ink-300),transparent);
  animation:evScrollCue 2.4s var(--evm-ease-inout) infinite;
}
@keyframes evScrollCue{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  35%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  70%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}

/* --------------------------------------------------------------------------
   10. Trust bar
   -------------------------------------------------------------------------- */
.ev-trust{ padding-block:clamp(40px,5vw,64px); }
.ev-trust__label{
  text-align:center; font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ev-ink-600);
  margin-bottom:var(--ev-space-8);
}
/* Three institutions. Capped and centred so the tiles keep a sensible measure
   rather than stretching across the full 1200px container. */
.ev-trust__row{
  display:grid; gap:var(--ev-space-4);
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .ev-trust__row{
    grid-template-columns:repeat(3,1fr);
    gap:var(--ev-space-5);
    max-width:840px; margin-inline:auto;
  }
}

.ev-trust__item{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:14px; text-align:center; padding:var(--ev-space-6) var(--ev-space-4);
  border:1px solid var(--ev-border-default); border-radius:var(--ev-radius-md);
  min-height:150px;
  transition:border-color var(--ev-motion-base) var(--ev-ease),
             background var(--ev-motion-base) var(--ev-ease);
}
.ev-trust__item:hover{ border-color:var(--ev-teal-400); background:var(--ev-teal-50); }

/* One 64px-tall slot per institution, whether it holds a crest or a monogram,
   so the row stays even while artwork is still being collected. Drop a file in
   and nothing else has to change. */
.ev-trust__slot{
  height:64px; display:grid; place-items:center; flex:0 0 64px;
}
.ev-trust__slot img{
  max-height:64px; width:auto; max-width:120px; object-fit:contain; display:block;
}
/* Awaiting official artwork — see GRAPHICS-UPDATE-BRIEF.md */
.ev-trust__slot--pending{
  width:64px; border:1px dashed var(--ev-border-strong); border-radius:var(--ev-radius-md);
  background:var(--ev-ink-50);
  font-size:.9375rem; font-weight:900; color:var(--ev-navy-600); letter-spacing:.04em;
}
.ev-trust__name{
  font-size:.8125rem; font-weight:800; line-height:1.35; color:var(--ev-navy-700);
  letter-spacing:.005em;
}

/* Below the three-across breakpoint the tiles go horizontal — a stacked column
   of three tall tiles wastes most of a phone screen. */
@media (max-width:639px){
  .ev-trust__item{
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:var(--ev-space-5); text-align:left;
    min-height:0; padding:var(--ev-space-4) var(--ev-space-5);
  }
  .ev-trust__slot{ height:50px; flex:0 0 50px; }
  .ev-trust__slot img{ max-height:50px; max-width:64px; }
  .ev-trust__slot--pending{ width:50px; font-size:.8125rem; }
  .ev-trust__name{ font-size:.875rem; }
}

/* --------------------------------------------------------------------------
   11. Stat strip
   -------------------------------------------------------------------------- */
.ev-stats{
  display:grid; gap:1px; background:var(--ev-border-default);
  border-block:1px solid var(--ev-border-default);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){ .ev-stats{ grid-template-columns:repeat(4,1fr); } }
.ev-stat{
  background:#fff; padding:clamp(24px,3.4vw,40px) var(--ev-space-5);
  text-align:center; position:relative;
}
.ev-stat__figure{
  font-size:clamp(2rem,4.4vw,3.1rem); font-weight:900; line-height:1;
  letter-spacing:-0.03em; color:var(--ev-navy-700);
}
.ev-stat__label{
  margin-top:12px; font-size:.8125rem; line-height:1.45;
  color:var(--ev-ink-600); max-width:22ch; margin-inline:auto;
}
/* Marks a figure that still needs sign-off before launch. */
.ev-stat__flag{
  position:absolute; top:10px; right:10px;
  width:16px; height:16px; border-radius:50%;
  background:var(--ev-warning-bg); color:var(--ev-warning);
  font-size:9px; font-weight:900; display:grid; place-items:center; cursor:help;
}

/* --------------------------------------------------------------------------
   12. Carousel (native scroll-snap, per carousels.md build spec)
   -------------------------------------------------------------------------- */
.ev-carousel{ position:relative; }
.ev-carousel__head{
  display:flex; align-items:flex-end; gap:var(--ev-space-6);
  margin-bottom:clamp(24px,3vw,40px);
}
.ev-carousel__head > div:first-child{ flex:1; min-width:0; }
.ev-carousel__head > div:first-child > * + *{ margin-top:var(--ev-space-4); }

.ev-carousel__nav{ display:none; gap:8px; flex:0 0 auto; padding-bottom:4px; }
@media (min-width:768px){ .ev-carousel__nav{ display:flex; } }
.ev-carousel__btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--ev-border-strong); background:#fff;
  display:grid; place-items:center; cursor:pointer;
  color:var(--ev-navy-700);
  transition:background var(--ev-motion-fast) var(--ev-ease),
             border-color var(--ev-motion-fast) var(--ev-ease),
             opacity var(--ev-motion-fast) var(--ev-ease);
}
.ev-carousel__btn:hover:not(:disabled){ background:var(--ev-ink-50); border-color:var(--ev-navy-400); }
.ev-carousel__btn:disabled{ opacity:.32; cursor:default; }

/* Track bleeds to the viewport edge, Apple-style, but stays gutter-aligned */
.ev-carousel__track{
  display:flex; gap:var(--ev-space-5);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-block:4px 8px;
  margin-inline:calc(var(--evm-gutter) * -1);
  padding-inline:var(--evm-gutter);
  scroll-padding-inline:var(--evm-gutter);
  cursor:grab;
}
.ev-carousel__track::-webkit-scrollbar{ display:none; }
.ev-carousel__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.ev-carousel__track.is-dragging *{ pointer-events:none; }

.ev-carousel__slide{
  flex:0 0 min(80vw,400px);
  scroll-snap-align:start;
}
.ev-carousel--wide .ev-carousel__slide{ flex:0 0 min(86vw,560px); }
.ev-carousel--narrow .ev-carousel__slide{ flex:0 0 min(74vw,320px); }
/* Keep handset frames a believable size inside a card rather than filling it */
.ev-carousel--narrow .ev-phone{ max-width:262px; margin-inline:auto; }

.ev-carousel__dots{
  display:flex; justify-content:center; gap:7px; margin-top:var(--ev-space-6);
}
.ev-carousel__dot{
  width:24px; height:24px; border:0; padding:0; cursor:pointer; background:none;
  display:grid; place-items:center;
}
.ev-carousel__dot::before{
  content:''; width:7px; height:7px; border-radius:99px;
  background:var(--ev-ink-300);
  transition:background var(--ev-motion-fast) var(--ev-ease),
             width var(--ev-motion-fast) var(--ev-ease);
}
.ev-carousel__dot[aria-current="true"]::before{ background:var(--ev-navy-700); width:22px; }

/* Slide card */
.ev-slide{
  height:100%; display:flex; flex-direction:column;
  background:var(--ev-bg-surface);
  border:1px solid var(--ev-border-default);
  border-radius:var(--ev-radius-md);
  overflow:hidden;
  transition:border-color var(--ev-motion-base) var(--ev-ease),
             transform var(--ev-motion-base) var(--evm-ease-out),
             box-shadow var(--ev-motion-base) var(--ev-ease);
}
.ev-slide:hover{
  border-color:var(--ev-navy-300);
  transform:translateY(-4px);
  box-shadow:var(--evm-shadow-float-sm);
}
.ev-slide__media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--ev-ink-50);
  border-bottom:1px solid var(--ev-border-subtle);
}
/* Absolute insets rather than percentage height: a percentage height against
   this box does not resolve, so a tall image would size to its own aspect and
   overflow — cropping the very thing the card is meant to magnify. */
.ev-slide__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top left;
  transition:transform 700ms var(--evm-ease-out);
}
/* Padding on the image itself rather than insets: an absolutely positioned
   replaced element with auto sizes takes its intrinsic size instead of
   stretching, so tall crops escaped the frame. object-fit honours the
   content box, so this holds at any aspect ratio. */
.ev-slide__media--contain img{
  inset:0; width:100%; height:100%; padding:var(--ev-space-5);
  object-fit:contain; object-position:center;
  border-radius:var(--ev-radius-sm);
}
.ev-slide:hover .ev-slide__media img{ transform:scale(1.035); }

.ev-slide__body{ padding:var(--ev-space-5) var(--ev-space-5) var(--ev-space-6); }
.ev-slide__index{
  font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  color:var(--ev-ink-600); display:block; margin-bottom:10px;
}
.ev-slide__title{
  font-size:1.0625rem; font-weight:800; line-height:1.32;
  letter-spacing:-0.005em; color:var(--ev-navy-700);
}
.ev-slide__text{
  margin-top:8px; font-size:.8125rem; line-height:1.54; color:var(--ev-ink-600);
}
.ev-slide__tag{
  position:absolute; top:12px; left:12px; z-index:1;
  height:22px; padding-inline:8px; border-radius:var(--ev-radius-sm);
  background:rgba(255,255,255,.92);
  border:1px solid var(--ev-border-default);
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ev-ink-600);
}

/* Highlights rail — single line of copy, no image (Apple's "highlights") */
.ev-highlight{
  height:100%; display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--ev-space-8);
  min-height:238px; padding:var(--ev-space-6);
  border:1px solid var(--ev-border-default);
  border-radius:var(--ev-radius-md);
  background:var(--ev-bg-surface);
  transition:border-color var(--ev-motion-base) var(--ev-ease),
             transform var(--ev-motion-base) var(--evm-ease-out),
             box-shadow var(--ev-motion-base) var(--ev-ease);
}
.ev-highlight:hover{
  border-color:var(--ev-navy-300); transform:translateY(-4px);
  box-shadow:var(--evm-shadow-float-sm);
}
.ev-highlight__mark{
  width:22px; height:22px; background:var(--ev-sand-300); flex:0 0 auto;
}
.ev-highlight__copy{
  font-size:1.0625rem; line-height:1.42; font-weight:800;
  letter-spacing:-0.005em; color:var(--ev-navy-700);
}
.ev-highlight__num{
  font-size:.6875rem; font-weight:800; letter-spacing:.12em; color:var(--ev-ink-600);
}

/* --------------------------------------------------------------------------
   13. Silo → converge (the Problem section)
   -------------------------------------------------------------------------- */
.ev-silo{
  position:relative;
  --evm-silo-travel:700px;      /* scroll distance the scrub is mapped across */
}
@media (max-width:640px){ .ev-silo{ --evm-silo-travel:520px; } }

/* The runway height is set by script to (pinned height + travel), so the
   scrub distance is exactly the travel regardless of how tall the content
   ends up. Standard section padding sits either side of it. */
.ev-silo__scroll{ position:relative; }
.ev-silo__pin{
  position:sticky;
  top:clamp(120px, calc((100vh - 460px) / 2), 200px);
  display:grid; gap:clamp(28px,4vw,44px); justify-items:center;
}

/* The eight scattered places a record lives today — set as a readable grid
   rather than a scatter, so they can be read rather than hunted for. Each one
   sits directly above the row it becomes. */
.ev-silo__list{
  display:grid; gap:10px 14px; width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){ .ev-silo__list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.ev-silo__chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 14px;
  background:#fff; border:1px solid var(--ev-border-default);
  border-radius:var(--ev-radius-md);
  font-size:.75rem; font-weight:800; color:var(--ev-ink-600);
  line-height:1.3;
  box-shadow:var(--ev-shadow-sm);
  will-change:transform,opacity;
}
.ev-silo__chip i{
  width:7px; height:7px; border-radius:50%; background:var(--ev-danger); flex:0 0 auto;
}

.ev-silo__core{
  position:relative; z-index:2;
  width:min(100%,720px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:clamp(24px,3.4vw,36px) clamp(20px,4vw,44px);
  background:#fff; border:1px solid var(--ev-border-default);
  border-top:3px solid var(--ev-sand-300);
  border-radius:var(--ev-radius-md);
  box-shadow:var(--evm-shadow-float);
}
.ev-silo__core img{ height:32px; width:auto; }
.ev-silo__core > span{
  font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ev-text-accent);
}

/* Eight empty slots that fill one at a time as their item lands. Column
   positions match the list above, so each item travels straight down. */
.ev-silo__joined{
  width:100%; margin-top:6px; padding-top:18px;
  border-top:1px solid var(--ev-border-subtle);
  display:grid; gap:10px 14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){ .ev-silo__joined{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ev-silo__joined li{
  display:flex; align-items:center; gap:7px;
  font-size:.75rem; font-weight:800; color:var(--ev-navy-700);
  opacity:.16; will-change:opacity;
}
.ev-silo__joined li::before{
  content:''; flex:0 0 13px; width:13px; height:8px;
  border-inline-start:2px solid var(--ev-green-600);
  border-block-end:2px solid var(--ev-green-600);
  transform:rotate(-45deg) translate(1px,-2px);
}

/* No scrubbing under reduced motion — the end state, rendered flat. */
.ev-silo.is-static .ev-silo__scroll{ height:auto !important; }
.ev-silo.is-static .ev-silo__pin{ position:static; }
.ev-silo.is-static .ev-silo__list{ display:none; }
.ev-silo.is-static .ev-silo__joined li{ opacity:1; }

/* Pain / consequence table */
.ev-pain{
  margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--ev-border-default);
}
.ev-pain__row{
  display:grid; grid-template-columns:1fr; gap:4px;
  padding-block:var(--ev-space-5);
  border-bottom:1px solid var(--ev-border-subtle);
}
@media (min-width:768px){
  .ev-pain__row{ grid-template-columns:1fr 1fr; gap:var(--ev-space-8); align-items:baseline; }
}
.ev-pain__what{ font-size:.9375rem; font-weight:800; color:var(--ev-navy-700); }
.ev-pain__cost{
  font-size:.9375rem; color:var(--ev-ink-600);
  display:flex; align-items:baseline; gap:10px;
}
.ev-pain__cost::before{
  content:''; width:14px; height:2px; background:var(--ev-sand-300);
  flex:0 0 14px; transform:translateY(-4px);
}

/* --------------------------------------------------------------------------
   14. Pinned showcase — the Apple move
   -------------------------------------------------------------------------- */
.ev-pin{ position:relative; }
/* Scroll runway: one viewport of travel per step. JS sets --steps. */
.ev-pin__scroll{ position:relative; height:calc(var(--steps,3) * 100vh); }
.ev-pin.is-static .ev-pin__scroll{ height:auto; }
.ev-pin__stage{
  position:sticky; top:112px;
  min-height:calc(100vh - 132px);
  display:grid; align-content:center; gap:clamp(24px,3vw,40px);
}
.ev-pin__grid{
  display:grid; gap:clamp(28px,4vw,64px);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:1024px){
  .ev-pin__grid{ grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr); }
}
.ev-pin__copy{ position:relative; }
.ev-pin__steps{ position:relative; }
.ev-pin__step{
  position:absolute; inset:0;
  opacity:0; transform:translateY(18px);
  transition:opacity 500ms var(--ev-ease), transform 700ms var(--evm-ease-out);
  pointer-events:none;
}
.ev-pin__step.is-active{ opacity:1; transform:none; position:relative; pointer-events:auto; }
.ev-pin__step > * + *{ margin-top:var(--ev-space-4); }
.ev-pin__step h3{
  font-size:clamp(1.5rem,2.6vw,2.125rem); font-weight:800;
  line-height:1.16; letter-spacing:-0.02em; max-width:16ch;
}

.ev-pin__ticks{ display:flex; gap:8px; margin-top:var(--ev-space-8); }
/* 3px rule, 26px hit area — the bar is the mark, not the target. */
.ev-pin__tick{
  height:26px; flex:1; max-width:64px; background:none;
  border:0; padding:0; cursor:pointer; position:relative;
}
.ev-pin__tick::before,
.ev-pin__tick::after{
  content:''; position:absolute; left:0; right:0; top:50%; margin-top:-1.5px;
  height:3px; border-radius:2px;
}
.ev-pin__tick::before{ background:var(--ev-ink-200); }
.ev-pin__tick::after{
  transform-origin:left; transform:scaleX(var(--p,0));
  background:var(--ev-green-600); transition:transform 120ms linear;
}

.ev-pin__visual{ position:relative; }
/* The frame is a fixed object: it never resizes between steps, so the chain
   above it cannot be pushed out of the pinned viewport and the eye stays put
   while only the screen inside changes. */
.ev-pin__frames{ position:relative; aspect-ratio:1600/1138; }
.ev-pin__frame{
  position:absolute; inset:0;
  opacity:0; transform:scale(.985);
  transition:opacity 600ms var(--ev-ease), transform 800ms var(--evm-ease-out);
}
.ev-pin__frame.is-active{ opacity:1; transform:none; z-index:1; }
.ev-pin__frame .ev-browser{ height:100%; display:flex; flex-direction:column; }
.ev-pin__frame .ev-browser__bar{ flex:0 0 auto; }
.ev-pin__frame .ev-browser__screen{
  flex:1 1 auto; min-height:0; height:100%;
  object-fit:contain; object-position:center; background:var(--ev-ink-50);
}

/* Non-pinned fallback (mobile / reduced motion): plain stacked blocks */
.ev-pin.is-static .ev-pin__stage{ position:static; min-height:0; }
.ev-pin.is-static .ev-pin__step{ position:relative; opacity:1; transform:none; }
.ev-pin.is-static .ev-pin__step + .ev-pin__step{ margin-top:var(--ev-space-10); }
.ev-pin.is-static .ev-pin__frames{ aspect-ratio:auto; }
.ev-pin.is-static .ev-pin__frame{ position:relative; opacity:1; transform:none; }
.ev-pin.is-static .ev-pin__frame + .ev-pin__frame{ margin-top:var(--ev-space-6); }
.ev-pin.is-static .ev-pin__frame .ev-browser{ height:auto; }
.ev-pin.is-static .ev-pin__frame .ev-browser__screen{ height:auto; object-fit:fill; }
.ev-pin.is-static .ev-pin__ticks{ display:none; }

/* --------------------------------------------------------------------------
   14b. Approval chain (MOTION asset — built from tokens, not a picture)
   -------------------------------------------------------------------------- */
.ev-chain{
  display:grid; gap:0; position:relative;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .ev-chain{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
.ev-chain__node{
  position:relative; padding:var(--ev-space-5) var(--ev-space-4) var(--ev-space-4);
  display:flex; flex-direction:column; gap:5px; text-align:left;
}
/* Rail runs behind every node; the fill advances with the sequence. */
.ev-chain__node::before,
.ev-chain__node::after{ content:''; position:absolute; height:2px; }
.ev-chain__node::before{ top:0; left:0; right:0; background:var(--ev-ink-200); }
.ev-chain__node::after{
  top:0; left:0; right:0; background:var(--ev-green-600);
  transform:scaleX(0); transform-origin:left;
  transition:transform 620ms var(--evm-ease-out);
}
.ev-chain__node.is-done::after,
.ev-chain__node.is-current::after{ transform:scaleX(1); }
.ev-chain__node.is-current::after{ transition-duration:420ms; }

.ev-chain__dot{
  position:absolute; top:-7px; left:0;
  width:12px; height:12px; background:#fff;
  border:2px solid var(--ev-ink-300);
  transition:border-color var(--ev-motion-base) var(--ev-ease),
             background var(--ev-motion-base) var(--ev-ease),
             transform var(--ev-motion-base) var(--evm-ease-out);
}
.ev-chain__node.is-done .ev-chain__dot,
.ev-chain__node.is-current .ev-chain__dot{
  border-color:var(--ev-green-600); background:var(--ev-green-600);
}
.ev-chain__node.is-current .ev-chain__dot{ transform:scale(1.28); }

.ev-chain__step{
  font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ev-ink-600);
  transition:color var(--ev-motion-base) var(--ev-ease);
}
.ev-chain__node.is-current .ev-chain__step{ color:var(--ev-text-accent); }
.ev-chain__who{
  font-size:1rem; font-weight:800; letter-spacing:-0.005em;
  color:var(--ev-ink-600);
  transition:color var(--ev-motion-base) var(--ev-ease);
}
.ev-chain__node.is-done .ev-chain__who,
.ev-chain__node.is-current .ev-chain__who{ color:var(--ev-navy-700); }
.ev-chain__does{ font-size:.75rem; line-height:1.5; color:var(--ev-ink-600); }

@media (max-width:767px){
  .ev-chain__node{ padding-left:var(--ev-space-6); }
  .ev-chain__node::before,.ev-chain__node::after{
    height:auto; width:2px; top:0; bottom:0; left:5px; right:auto;
  }
  .ev-chain__node::after{ transform:scaleY(0); transform-origin:top; }
  .ev-chain__node.is-done::after,
  .ev-chain__node.is-current::after{ transform:scaleY(1); }
  .ev-chain__dot{ top:0; left:0; }
}

/* Stat callout, per carousels.md */
.ev-callout{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--ev-space-4) var(--ev-space-8);
  padding:clamp(24px,3vw,36px) 0;
  border-block:1px solid var(--ev-border-default);
}
.ev-callout__figure{
  font-size:clamp(2.25rem,5vw,3.25rem); font-weight:900; line-height:1;
  letter-spacing:-0.03em; color:var(--ev-navy-700);
}
.ev-callout__figure em{ font-style:normal; color:var(--ev-text-accent); }
.ev-callout__text{ font-size:1.0625rem; color:var(--ev-ink-600); max-width:44ch; }

/* Two-column prose blocks */
.ev-changes{ display:grid; gap:1px; background:var(--ev-border-default); grid-template-columns:1fr; }
@media (min-width:768px){ .ev-changes{ grid-template-columns:repeat(2,1fr); } }
.ev-change{
  background:#fff; padding:clamp(24px,3vw,36px);
  display:flex; flex-direction:column; gap:12px;
}
.ev-change h3{
  font-size:1.25rem; font-weight:800; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:12px;
}
.ev-change h3::before{
  content:''; width:14px; height:14px; background:var(--ev-sand-300); flex:0 0 14px;
}
.ev-change p{ font-size:.9375rem; line-height:1.58; color:var(--ev-ink-600); }

/* Related module links */
.ev-related{ display:grid; gap:var(--ev-space-4); grid-template-columns:1fr; }
@media (min-width:768px){ .ev-related{ grid-template-columns:repeat(3,1fr); } }
.ev-related a{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:var(--ev-space-6); background:#fff;
  border:1px solid var(--ev-border-default); border-radius:var(--ev-radius-md);
  transition:border-color var(--ev-motion-base) var(--ev-ease),
             transform var(--ev-motion-base) var(--evm-ease-out);
}
.ev-related a:hover{ border-color:var(--ev-navy-300); transform:translateY(-3px); }
.ev-related strong{ font-size:1.0625rem; font-weight:800; letter-spacing:-0.005em; }
.ev-related span{ font-size:.8125rem; color:var(--ev-ink-600); line-height:1.54; }

/* --------------------------------------------------------------------------
   14c. Appearance switch (light / dark portal)
   -------------------------------------------------------------------------- */
.ev-theme{ text-align:center; }
.ev-theme__toggle{
  display:inline-flex; gap:4px; padding:4px;
  border:1px solid var(--ev-border-default); border-radius:var(--ev-radius-full);
  background:var(--ev-ink-50);
  margin-bottom:clamp(24px,3vw,40px);
}
.ev-theme__btn{
  height:36px; padding-inline:22px; border:0; border-radius:var(--ev-radius-full);
  background:none; cursor:pointer;
  font-size:.875rem; font-weight:800; color:var(--ev-ink-600);
  transition:background var(--ev-motion-fast) var(--ev-ease),
             color var(--ev-motion-fast) var(--ev-ease);
}
.ev-theme__btn[aria-pressed="true"]{
  background:#fff; color:var(--ev-navy-700); box-shadow:var(--ev-shadow-sm);
}
.ev-theme__stage{ max-width:1120px; margin-inline:auto; }
.ev-theme__screens{
  position:relative; aspect-ratio:1600/1138; background:var(--ev-ink-50);
}
.ev-theme__screen{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; transition:opacity 420ms var(--ev-ease);
}
.ev-theme__screen.is-active{ opacity:1; }

/* The chrome follows the screen, so the frame reads as one object. */
.ev-theme.is-dark .ev-browser{ background:#0E141C; border-color:#1F2836; }
.ev-theme.is-dark .ev-browser__bar{
  background:linear-gradient(180deg,#1A2331,#121A25); border-bottom-color:#1F2836;
}
.ev-theme.is-dark .ev-browser__url{
  background:#0E141C; border-color:#2A3545; color:var(--ev-ink-400);
}
.ev-theme.is-dark .ev-browser__dots i{ background:#3A4657; }
.ev-theme.is-dark .ev-theme__screens{ background:#0E141C; }

/* --------------------------------------------------------------------------
   15. Module grid
   -------------------------------------------------------------------------- */
.ev-modules{
  display:grid; gap:1px; background:var(--ev-border-default);
  border:1px solid var(--ev-border-default);
  border-radius:var(--ev-radius-md); overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .ev-modules{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .ev-modules{ grid-template-columns:repeat(3,1fr); } }

.ev-module{
  background:#fff; padding:clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; gap:12px;
  min-height:180px; position:relative;
  transition:background var(--ev-motion-base) var(--ev-ease);
}
.ev-module:hover{ background:var(--ev-ink-50); }
.ev-module__icon{
  width:34px; height:34px; color:var(--ev-teal-700);
  transition:color var(--ev-motion-base) var(--ev-ease),
             transform var(--ev-motion-base) var(--evm-ease-out);
}
.ev-module:hover .ev-module__icon{ color:var(--ev-green-600); transform:translateY(-2px); }
.ev-module__icon svg{ width:100%; height:100%; }
.ev-module__name{
  font-size:1.0625rem; font-weight:800; letter-spacing:-0.005em;
  color:var(--ev-navy-700);
}
.ev-module__desc{ font-size:.8125rem; line-height:1.54; color:var(--ev-ink-600); }
.ev-module__go{
  margin-top:auto; padding-top:8px;
  font-size:.75rem; font-weight:800; color:var(--ev-text-accent);
  display:inline-flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(4px);
  transition:opacity var(--ev-motion-base) var(--ev-ease),
             transform var(--ev-motion-base) var(--ev-ease);
}
.ev-module:hover .ev-module__go,
.ev-module:focus-within .ev-module__go{ opacity:1; transform:none; }
.ev-module__link::after{ content:''; position:absolute; inset:0; }

/* --------------------------------------------------------------------------
   16. Outcomes
   -------------------------------------------------------------------------- */
.ev-outcomes{ display:grid; gap:var(--ev-space-6); grid-template-columns:1fr; }
@media (min-width:768px){ .ev-outcomes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){ .ev-outcomes{ grid-template-columns:repeat(3,1fr); } }
.ev-outcome{
  border:1px solid var(--ev-border-default); border-radius:var(--ev-radius-md);
  padding:clamp(24px,2.6vw,32px); background:#fff;
  display:flex; flex-direction:column; gap:12px;
  border-top:3px solid var(--ev-sand-300);
}
.ev-outcome h3{
  font-size:1.125rem; font-weight:800; letter-spacing:-0.008em; line-height:1.3;
}
.ev-outcome p{ font-size:.9375rem; line-height:1.58; color:var(--ev-ink-600); }

/* --------------------------------------------------------------------------
   17. Roles
   -------------------------------------------------------------------------- */
.ev-roles{ display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1fr; }
@media (min-width:900px){ .ev-roles{ grid-template-columns:300px minmax(0,1fr); align-items:start; } }

.ev-roles__tabs{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin-inline:calc(var(--evm-gutter) * -1); padding-inline:var(--evm-gutter);
}
.ev-roles__tabs::-webkit-scrollbar{ display:none; }
@media (min-width:900px){
  .ev-roles__tabs{
    flex-direction:column; overflow:visible; margin-inline:0; padding-inline:0;
    border-inline-start:1px solid var(--ev-border-default); gap:0;
  }
}
.ev-roles__tab{
  flex:0 0 auto; border:1px solid var(--ev-border-default); background:#fff;
  border-radius:var(--ev-radius-md); padding:12px 16px; cursor:pointer;
  font-size:.875rem; font-weight:800; color:var(--ev-ink-600); white-space:nowrap;
  text-align:left;
  transition:color var(--ev-motion-fast) var(--ev-ease),
             background var(--ev-motion-fast) var(--ev-ease),
             border-color var(--ev-motion-fast) var(--ev-ease);
}
.ev-roles__tab:hover{ color:var(--ev-navy-700); }
.ev-roles__tab[aria-selected="true"]{
  color:var(--ev-navy-700); border-color:var(--ev-navy-300); background:var(--ev-ink-50);
}
@media (min-width:900px){
  .ev-roles__tab{
    border:0; border-radius:0; border-inline-start:3px solid transparent;
    margin-inline-start:-1px; padding:14px 18px; white-space:normal; background:none;
  }
  .ev-roles__tab[aria-selected="true"]{
    border-inline-start-color:var(--ev-green-600); background:none;
  }
}
.ev-roles__panel{ display:none; }
.ev-roles__panel.is-active{ display:block; animation:evFadeUp 520ms var(--evm-ease-out); }
.ev-roles__panel > * + *{ margin-top:var(--ev-space-5); }
.ev-roles__panel h3{
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800;
  letter-spacing:-0.02em; line-height:1.16;
}
.ev-roles__list{ display:grid; gap:10px; margin-top:var(--ev-space-6); }
.ev-roles__list li{
  display:flex; gap:12px; align-items:baseline;
  font-size:.9375rem; color:var(--ev-ink-600); line-height:1.55;
}
.ev-roles__list li::before{
  content:''; width:14px; height:2px; background:var(--ev-sand-300);
  flex:0 0 14px; transform:translateY(-4px);
}
@keyframes evFadeUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }

/* --------------------------------------------------------------------------
   18. Built-in list (Nigeria-specific)
   -------------------------------------------------------------------------- */
.ev-builtin{ display:grid; gap:1px; background:var(--ev-border-default); grid-template-columns:1fr; }
@media (min-width:768px){ .ev-builtin{ grid-template-columns:repeat(2,1fr); } }
.ev-builtin__item{
  background:var(--ev-ink-50); padding:clamp(20px,2.4vw,26px);
  display:flex; flex-direction:column; gap:8px;
}
.ev-builtin__item strong{
  font-size:.9375rem; font-weight:800; color:var(--ev-navy-700);
  display:flex; align-items:center; gap:10px;
}
.ev-builtin__item strong::before{
  content:''; width:12px; height:12px; background:var(--ev-sand-300); flex:0 0 12px;
}
.ev-builtin__item span{ font-size:.875rem; line-height:1.55; color:var(--ev-ink-600); padding-left:22px; }

/* --------------------------------------------------------------------------
   19. Implementation timeline
   -------------------------------------------------------------------------- */
.ev-phases{ position:relative; display:grid; gap:var(--ev-space-6); grid-template-columns:1fr; }
@media (min-width:900px){ .ev-phases{ grid-template-columns:repeat(3,1fr); gap:var(--ev-space-8); } }
.ev-phase{
  position:relative; padding-top:var(--ev-space-8);
  border-top:1px solid var(--ev-border-default);
}
.ev-phase::before{
  content:''; position:absolute; top:-1px; left:0; height:3px; width:0;
  background:var(--ev-green-600);
  transition:width 900ms var(--evm-ease-out);
}
.ev-phase.is-revealed::before{ width:100%; }
.ev-phase__num{
  font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  color:var(--ev-text-accent); text-transform:uppercase;
}
.ev-phase h3{
  margin-top:10px; font-size:1.375rem; font-weight:800; letter-spacing:-0.015em;
}
.ev-phase p{ margin-top:12px; font-size:.9375rem; line-height:1.58; color:var(--ev-ink-600); }
.ev-phase__meta{
  margin-top:var(--ev-space-5); padding-top:var(--ev-space-4);
  border-top:1px dashed var(--ev-border-default);
  font-size:.8125rem; color:var(--ev-ink-600);
}
.ev-phase__meta strong{ color:var(--ev-navy-700); font-weight:800; }

/* --------------------------------------------------------------------------
   20. Quote
   -------------------------------------------------------------------------- */
.ev-quote{ text-align:center; max-width:900px; margin-inline:auto; }
.ev-quote blockquote{
  margin:0; font-size:clamp(1.375rem,3.2vw,2.125rem); font-weight:800;
  line-height:1.28; letter-spacing:-0.018em; color:var(--ev-navy-700);
}
.ev-quote figcaption{
  margin-top:var(--ev-space-6); font-size:.875rem; color:var(--ev-ink-600);
}
.ev-quote figcaption strong{ color:var(--ev-navy-700); font-weight:800; }
.ev-placeholder{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:var(--ev-space-6);
  padding:6px 12px; border-radius:var(--ev-radius-sm);
  background:var(--ev-warning-bg); color:var(--ev-warning);
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   21. Final CTA + footer
   -------------------------------------------------------------------------- */
.ev-cta{ position:relative; overflow:hidden; text-align:center; }
.ev-cta__aura{
  position:absolute; inset:0; pointer-events:none; filter:blur(90px); opacity:.4;
}
.ev-cta__aura i{ position:absolute; border-radius:50%; display:block; }
.ev-cta__aura i:nth-child(1){ width:44%; height:70%; left:8%; top:10%; background:var(--ev-teal-300); }
.ev-cta__aura i:nth-child(2){ width:36%; height:64%; right:10%; top:20%; background:var(--ev-green-200); }
.ev-cta__inner{ position:relative; z-index:1; }
.ev-cta__inner > * + *{ margin-top:var(--ev-space-6); }
.ev-cta .ev-btn-row{ margin-top:var(--ev-space-8); }

.ev-footer{ background:var(--ev-navy-700); color:#fff; padding-block:clamp(56px,7vw,88px) var(--ev-space-10); }
.ev-footer__top{
  display:grid; gap:clamp(32px,4vw,56px); grid-template-columns:1fr;
  padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
@media (min-width:768px){ .ev-footer__top{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .ev-footer__top{ grid-template-columns:1.3fr repeat(4,1fr); } }
.ev-footer__brand img{ height:30px; width:auto; }
.ev-footer__brand p{
  margin-top:var(--ev-space-5); font-size:.875rem; line-height:1.6;
  color:var(--ev-navy-200); max-width:34ch;
}
.ev-footer__col h3{
  font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ev-navy-300); margin-bottom:var(--ev-space-4);
}
.ev-footer__col li + li{ margin-top:6px; }
.ev-footer__col a{
  display:inline-block; padding-block:5px;      /* 24px target, WCAG 2.2 AA */
  font-size:.875rem; color:var(--ev-navy-100);
  transition:color var(--ev-motion-fast) var(--ev-ease);
}
.ev-footer__col a:hover{ color:#fff; }
.ev-footer__contact{
  display:flex; flex-wrap:wrap; gap:var(--ev-space-3) var(--ev-space-8);
  padding-block:var(--ev-space-8);
  font-size:.875rem; color:var(--ev-navy-200);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.ev-footer__contact a{ display:inline-block; padding-block:4px; }
.ev-footer__contact a:hover{ color:#fff; }
.ev-footer__bts{ display:inline-flex !important; align-items:center; gap:var(--ev-space-2); }
.ev-footer__bts img{ height:18px; width:auto; flex:0 0 auto; }
.ev-footer__legal{
  padding-top:var(--ev-space-8);
  display:flex; flex-wrap:wrap; gap:var(--ev-space-3) var(--ev-space-6);
  align-items:center; justify-content:space-between;
  font-size:.8125rem; color:var(--ev-navy-300);
}
.ev-footer__legal ul{ display:flex; flex-wrap:wrap; gap:var(--ev-space-5); }
.ev-footer__tagline{
  margin-top:var(--ev-space-6); font-size:.8125rem; color:var(--ev-navy-200);
}

/* --------------------------------------------------------------------------
   22. Reveal motion
   -------------------------------------------------------------------------- */
/* Every hidden-until-revealed rule is scoped to .ev-js, which an inline script
   in <head> sets. If scripting fails, nothing is ever hidden. */
.ev-js [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--evm-motion-reveal) var(--ev-ease),
             transform var(--evm-motion-reveal) var(--evm-ease-out);
  transition-delay:var(--d,0ms);
}
.ev-js [data-reveal].is-revealed{ opacity:1; transform:none; }
.ev-js [data-reveal="scale"]{ transform:translateY(34px) scale(.97); }
.ev-js [data-reveal="scale"].is-revealed{ transform:none; }
.ev-js [data-reveal="left"]{ transform:translateX(-24px); }
.ev-js [data-reveal="left"].is-revealed{ transform:none; }

/* Word-by-word headline reveal */
.ev-js .ev-words span{
  display:inline-block;
  opacity:0; transform:translateY(0.36em);
  transition:opacity 620ms var(--ev-ease), transform 760ms var(--evm-ease-out);
  transition-delay:var(--d,0ms);
}
.ev-js .ev-words.is-revealed span{ opacity:1; transform:none; }
/* Snapped straight to the end state — used when a section is jumped over. */
.ev-js [data-reveal].is-instant,
.ev-js .ev-words.is-instant span{ transition:none; }

/* --------------------------------------------------------------------------
   23. Reduced motion (design.md §9)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .ev-js [data-reveal],.ev-js .ev-words span{ opacity:1 !important; transform:none !important; }
  .ev-hero__aura,.ev-cta__aura{ animation:none; }
  .ev-hero__scroll i{ animation:none; opacity:.6; }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print{
  .ev-nav,.ev-subnav,.ev-hero__aura,.ev-cta__aura,.ev-glow{ display:none !important; }
  body{ background:#fff; color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}

/* ============================================================================
   25. BTS corporate mark — shared across every BTS product site.
   Source: BTS-CORPORATE-MARK.md. Paste as-is — nothing here depends on the
   host site's CSS. Do not vary: position:absolute, no background on the
   strip, mask-based knockouts, and the glow filter must never be transitioned.
   ========================================================================= */

.bts-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 90;
  height: 56px; display: flex; align-items: center;
  background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;

  --bts-rest:   rgba(28,51,74,.40);
  --bts-reveal: #1C8E90;
  --bts-glow:   rgba(80,196,197,.34);
}

.bts-bar.on-dark {
  --bts-rest:   rgba(255,255,255,.42);
  --bts-reveal: #FFFFFF;
  --bts-glow:   rgba(255,255,255,.40);
}

.bts-bar .bts-inner {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 24px; display: flex; align-items: center; position: relative;
}
@media (min-width: 900px) { .bts-bar .bts-inner { padding: 0 48px; } }

.bts-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: auto; border: 0; display: block; line-height: 0;
  color: var(--bts-rest); transition: color .22s ease; text-decoration: none;
}
.bts-logo:hover, .bts-logo:focus-visible { color: var(--bts-reveal); }

.bts-contact {
  margin-left: auto; pointer-events: auto; border: 0; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bts-rest); transition: color .22s ease;
  text-shadow: 0 0 2px var(--bts-glow), 0 0 8px var(--bts-glow);
}
.bts-contact:hover, .bts-contact:focus-visible { color: var(--bts-reveal); }

.bts-mark, .bts-env {
  display: block; color: inherit;
  filter: drop-shadow(0 0 2px var(--bts-glow))
          drop-shadow(0 0 8px var(--bts-glow));
}
.bts-mark { height: 34px; width: auto; }
.bts-env  { width: 17px; height: 17px; flex: 0 0 auto; }

.bts-mark .bl-line, .bts-mark .bl-solid,
.bts-env  .bl-line, .bts-env  .bl-solid { transition: opacity .22s ease; }
.bts-mark .bl-solid, .bts-env .bl-solid { opacity: 0; }
.bts-logo:hover .bl-line,     .bts-logo:focus-visible .bl-line,
.bts-contact:hover .bl-line,  .bts-contact:focus-visible .bl-line  { opacity: 0; }
.bts-logo:hover .bl-solid,    .bts-logo:focus-visible .bl-solid,
.bts-contact:hover .bl-solid, .bts-contact:focus-visible .bl-solid { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bts-mark .bl-line, .bts-mark .bl-solid,
  .bts-env .bl-line,  .bts-env .bl-solid { transition: none; }
}

/* LIGHT-TOP PAGES ONLY: reserves 56px so the mark does not cover the site's
   own sticky nav. Both Eduvantage pages use this — neither opens on a
   full-bleed dark hero. */
body.bts-offset { padding-top: 56px; }

@media (max-width: 700px) {
  .bts-bar { height: 48px; }
  .bts-mark { height: 23px; }
  .bts-contact { font-size: 10px; letter-spacing: .12em; }
  body.bts-offset { padding-top: 48px; }
}