:root{
    --primary:#1063E9; --sky:#12BCFF; --magenta:#A050FF; --mauve:#D5A2EF;
    --gradient-brand: linear-gradient(135deg, #12BCFF 0%, #1063E9 45%, #A050FF 100%);
    --gradient-blue-arc: linear-gradient(135deg, #12BCFF 0%, #1063E9 100%);
    --gradient-purple-arc: linear-gradient(135deg, #1063E9 0%, #A050FF 100%);
    --canvas:#FFFFFF; --canvas-off-white:#F8F9FC; --surface-pearl:#F0F4FF;
    --surface-void:#0A0F2C; --surface-dark-1:#0D1117; --surface-dark-2:#141929;
    --ink:#0D1117; --ink-body:#3D4461; --ink-muted:#8A94A6;
    --on-dark:#F0F4FF; --on-dark-muted:#8A94A6;
    --hairline:#E8ECF5; --border-dark:#1E2540;
    --focus-ring: rgba(16,99,233,0.22);
    --section: 80px; --section-lg: 120px;
    --font-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    --font-body: Inter, system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
  body{font-family:var(--font-body); color:var(--ink); background:var(--surface-void); -webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:-0.3px; text-wrap:balance;}
  p{margin:0; line-height:1.6;}
  a{text-decoration:none;}
  img,svg{display:block; max-width:100%;}

  .wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  .tagline{font-size:13px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:var(--sky);}
  .tile-light .tagline, .tile-light-2 .tagline{ color:var(--primary); }

  .lead{font-size:20px; line-height:1.5; color:var(--on-dark-muted);}
  .tile-light .lead, .tile-light-2 .lead{color:var(--ink-body);}

  .pill-btn{
    display:inline-flex; align-items:center; gap:8px; border-radius:9999px;
    padding:12px 24px; font-family:var(--font-body); font-size:16px; font-weight:500;
    cursor:pointer; border:none; transition:transform .1s ease-out, opacity .1s ease-out;
  }
  .pill-btn:active{transform:scale(0.97); opacity:.92;}
  .btn-primary-dark{background:var(--gradient-brand); color:#fff;}
  .btn-secondary{background:transparent; color:var(--on-dark); border:1.5px solid rgba(240,244,255,0.35);}
  .btn-secondary:hover{background:rgba(240,244,255,0.08);}

  nav.global-nav{
    position:sticky; top:0; z-index:100; height:60px;
    background:rgba(10,15,44,0.92); backdrop-filter:blur(16px) saturate(180%);
    border-bottom:1px solid var(--border-dark);
  }
  .nav-inner{max-width:1200px; margin:0 auto; padding:0 32px; height:60px; display:flex; align-items:center; justify-content:space-between;}
  .brand-mark{display:flex; align-items:center; gap:10px; color:var(--on-dark);}
  .brand-logo{width:150px; height:auto; min-width:120px;}
  .brand-logo-footer{width:170px;}
  .nav-links{display:flex; gap:24px; align-items:center;}
  .nav-links a{color:var(--on-dark); font-size:13px;}
  .nav-links a:hover{color:var(--sky);}
  .nav-right{display:flex; align-items:center; gap:12px;}

  .nav-toggle{
    display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:40px; height:40px; flex:none; padding:0; cursor:pointer;
    background:transparent; border:1px solid var(--border-dark); border-radius:8px;
  }
  .nav-toggle span{width:18px; height:1.5px; background:var(--on-dark); border-radius:1px; transition:transform .2s ease-out, opacity .2s ease-out;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  .nav-cta-short{display:none;}

  @media (max-width:480px){
    .nav-inner{padding:0 16px;}
    .brand-logo{width:120px; min-width:0;}
    .nav-cta{padding:10px 14px; font-size:14px;}
    .nav-cta-full{display:none;}
    .nav-cta-short{display:inline;}
    .nav-toggle{width:36px; height:36px;}
  }

  @media (max-width:768px){
    .nav-toggle{display:flex;}
    .nav-links{
      display:flex; flex-direction:column; gap:2px;
      /* .nav-links sits inside nav.global-nav, which sets backdrop-filter;
         that makes the nav its containing block for position:fixed instead
         of the viewport, so `bottom:0` resolves against the 60px nav bar
         and collapses the height. Height is set explicitly via 100vh
         instead, which stays viewport-relative regardless. */
      position:fixed; top:60px; left:0; right:0; height:calc(100vh - 60px);
      z-index:90; overflow-y:auto;
      background:var(--surface-void); padding:12px 32px 32px;
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity .25s cubic-bezier(0.4,0,0.2,1), transform .25s cubic-bezier(0.4,0,0.2,1), visibility 0s linear .25s;
    }
    .nav-links.is-open{
      opacity:1; visibility:visible; transform:translateY(0);
      transition:opacity .25s cubic-bezier(0.4,0,0.2,1), transform .25s cubic-bezier(0.4,0,0.2,1);
    }
    .nav-links a{font-size:20px; padding:16px 0; border-bottom:1px solid var(--border-dark);}
    body.nav-open{overflow:hidden;}
  }
  @media (prefers-reduced-motion:reduce){
    .nav-links{transition:opacity .01ms linear, visibility 0s linear;}
    .nav-links.is-open{transition:opacity .01ms linear;}
    .nav-toggle span{transition:none;}
  }

  section{padding:var(--section) 0; scroll-margin-top:60px;}
  .tile-dark{background:var(--surface-void); color:var(--on-dark);}
  .tile-dark-2{background:var(--surface-dark-1); color:var(--on-dark);}
  .tile-light{background:var(--canvas-off-white); color:var(--ink);}
  .tile-light-2{background:var(--canvas); color:var(--ink);}

  /* hero */
  .hero{padding:var(--section-lg) 0 var(--section); position:relative; overflow:hidden;}
  .hero-mesh{
    position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
    background:
      radial-gradient(600px 500px at 78% 28%, rgba(160,80,255,0.30), transparent 65%),
      radial-gradient(520px 460px at 94% 68%, rgba(18,188,255,0.24), transparent 60%),
      radial-gradient(680px 580px at 12% 88%, rgba(16,99,233,0.20), transparent 65%);
    filter:blur(4px);
  }
  .hero::after{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 0%, transparent 68%, var(--surface-void) 100%);
  }
  .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.85fr); gap:56px; align-items:center;}
  .hero-inner{max-width:640px;}
  .hero-tag{
    display:inline-flex; align-items:center; gap:8px; background:rgba(16,99,233,0.14);
    color:var(--sky); font-size:13px; font-weight:600; letter-spacing:0.4px;
    padding:6px 14px; border-radius:9999px; margin-bottom:24px;
  }
  h1.hero-title{font-size:clamp(32px, 5vw, 56px); line-height:1.1; letter-spacing:-0.5px; margin-bottom:20px;}
  .hero-line{display:block;}
  .gradient-text{background:var(--gradient-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
  .hero-inner .lead{margin-bottom:32px; max-width:600px;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

  /* hero system diagram: 8 vendor systems wheeling around a central AI hub */
  .hero-visual{position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin-left:auto; will-change:transform;}
  .hero-visual-inner{position:absolute; inset:0; will-change:transform;}
  .system-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
  .wheel-rim{fill:none; stroke:rgba(18,188,255,0.16); stroke-width:1;}
  .spoke{fill:none; stroke:rgba(18,188,255,0.28); stroke-width:1.25;}
  /* Dots rest at SVG origin (0,0) until <animateMotion> starts placing them,
     so they stay hidden until their own pulse begins. hero-motion.js fades
     each one in as it starts; reduced-motion users never see them. */
  .pulse-dot{fill:#A050FF; filter:drop-shadow(0 0 4px rgba(160,80,255,0.9)); opacity:0; transition:opacity .45s ease;}

  /* Positioning wrapper: owns the CSS centering transform via --x/--y custom
     properties (one shared rule for all 8 nodes instead of 8 near-duplicate
     ones). Motion never touches this element, only .wheel-badge inside it. */
  .wheel-node{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); z-index:2;}
  .wheel-badge{
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:50%; padding:11px;
    background:var(--canvas); border:1px solid rgba(16,99,233,0.14);
    box-shadow:0 6px 16px rgba(10,15,44,0.35);
  }
  .wheel-badge img{width:100%; height:100%; object-fit:contain; display:block;}

  .system-hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:128px; height:128px; z-index:2;}
  .system-hub-ring{
    position:absolute; inset:-16px; border-radius:50%; background:var(--gradient-brand);
    opacity:.35; filter:blur(10px); animation:hubBreathe 3.6s ease-in-out infinite;
  }
  .system-hub-core{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; border-radius:50%; background:var(--surface-dark-2);
    border:1.5px solid transparent; padding:8px;
    background-image:linear-gradient(var(--surface-dark-2),var(--surface-dark-2)), var(--gradient-brand);
    background-origin:border-box; background-clip:padding-box, border-box;
    box-shadow:0 8px 32px rgba(0,0,0,0.25);
  }
  .system-hub-core img{width:64px; height:64px; object-fit:contain; display:block;}
  @keyframes hubBreathe{ 0%,100%{transform:scale(1); opacity:.3;} 50%{transform:scale(1.14); opacity:.5;} }

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:48px;}
    .hero-visual{order:2; max-width:400px; margin:0 auto;}
  }
  @media (max-width:480px){
    .hero-visual{max-width:320px;}
    .wheel-badge{width:42px; height:42px; padding:8px; box-shadow:0 3px 10px rgba(10,15,44,0.35);}
    .system-hub{width:92px; height:92px;}
    .system-hub-core img{width:46px; height:46px;}
  }
  @media (prefers-reduced-motion:reduce){
    .system-hub-ring{animation:none; opacity:.35;}
  }

  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head h2{font-size:clamp(28px,3.4vw,44px); line-height:1.15; margin:10px 0 14px;}
  .section-head .lead{font-size:18px;}

  /* featured solutions carousel: one card visible at a time, auto-rotating + swipeable */
  .solutions-carousel{position:relative;}
  .carousel-viewport{overflow:hidden;}
  .carousel-track{display:flex; transition:transform .5s cubic-bezier(0.4,0,0.2,1); touch-action:pan-y;}
  .carousel-slide{flex:0 0 100%; min-width:0; display:flex; align-items:center; gap:48px; padding:8px 4px 32px;}
  .solution-visual{flex:1.15 1 0%; min-width:0;}
  .solution-text{flex:0.85 1 0%; min-width:0; max-width:420px;}
  @media (max-width:900px){
    .carousel-slide{flex-direction:column; align-items:stretch; gap:32px;}
    .solution-visual, .solution-text{flex:none; max-width:none;}
  }
  .carousel-controls{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:24px;}
  .carousel-controls-nav{display:flex; align-items:center; justify-content:center; gap:20px;}
  .carousel-progress{width:100%; max-width:420px; height:3px; background:var(--hairline); border-radius:9999px; overflow:hidden;}
  .carousel-progress-bar{height:100%; width:100%; background:var(--gradient-purple-arc); border-radius:9999px; transform-origin:left; transform:scaleX(0);}
  @keyframes carouselProgress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  .carousel-arrow{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:40px; height:40px; border-radius:9999px; border:1px solid var(--hairline);
    background:var(--canvas); color:var(--primary); font-size:16px; cursor:pointer;
  }
  .carousel-arrow:hover{background:var(--surface-pearl);}
  .carousel-dots{display:flex; align-items:center; gap:0;}
  /* 24px tap target (WCAG 2.5.8) around a 9px visible dot: padding + content-box clip */
  .carousel-dot{
    box-sizing:border-box; width:24px; height:24px; padding:7.5px; border-radius:50%; border:none; cursor:pointer;
    background:var(--hairline); background-clip:content-box; transition:padding .2s ease-out, background .2s ease-out;
  }
  .carousel-dot[aria-current="true"]{background:var(--gradient-purple-arc); background-clip:content-box; padding:6.375px;}

  /* Apple-style laptop mockup: pure CSS shapes, no image assets. Radius grammar:
     xl (screen frame, "hero image frame") -> md (viewport + base, content containers)
     -> sm/xs (notch, latch, small utility details). Never mixed with pill. */
  .device-laptop{
    position:relative; width:100%; max-width:600px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center;
    filter:drop-shadow(rgba(0,0,0,0.18) 0 8px 32px); /* Imagery-depth token, as drop-shadow (not
      box-shadow) since the silhouette isn't a plain rectangle, the base overhangs the screen. */
  }
  .device-laptop__screen{
    position:relative; width:100%; aspect-ratio:16/10.4; box-sizing:border-box;
    background:linear-gradient(165deg, var(--surface-dark-2) 0%, var(--surface-void) 100%);
    border-radius:24px; padding:3.2% 3.2% 4.8%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  .device-laptop__notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:15%; max-width:64px; height:14px; background:#05070F; border-radius:0 0 8px 8px;
    display:flex; align-items:center; justify-content:center;
  }
  .device-laptop__lens{width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #3A4160, #05070F 70%);}
  .device-laptop__viewport{position:relative; width:100%; height:100%; background:var(--canvas); border-radius:12px; overflow:hidden;}
  .device-laptop__hinge{width:97%; height:5px; background:linear-gradient(180deg, #05070F 0%, var(--border-dark) 100%);}
  .device-laptop__base{
    position:relative; width:107%; height:clamp(10px,1.6vw,16px);
    background:linear-gradient(180deg, var(--border-dark) 0%, var(--surface-void) 55%, #05070F 100%);
    border-radius:0 0 12px 12px; box-shadow:0 6px 14px rgba(10,15,44,0.28);
  }
  .device-laptop__base::after{
    content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:15%; max-width:64px; height:4px; background:rgba(0,0,0,0.4); border-radius:0 0 4px 4px;
  }
  @media (max-width:900px){ .device-laptop{max-width:520px;} }
  @media (max-width:480px){
    .device-laptop{max-width:360px;}
    .device-laptop__notch{height:11px;}
    .device-laptop__base{height:clamp(8px,2.2vw,12px);}
  }

  /* laptop screen content: step panels crossfade under JS/Motion control; only
     panel visibility defaults hidden, everything else is plain rest-state CSS
     so the whole system degrades to a legible static frame with no JS. */
  .laptop-screen{position:relative; width:100%; height:100%; font-size:clamp(11px,1.6vw,14px);}
  .screen-step{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1.4em; opacity:0; pointer-events:none;}
  .screen-step.is-active{opacity:1; pointer-events:auto;}
  @media (max-width:900px){ .laptop-screen{font-size:clamp(10px,1.9vw,13px);} }
  @media (max-width:480px){ .laptop-screen{font-size:11px;} }

  @keyframes spin{ to{ transform:rotate(360deg); } }
  @keyframes scanSweep{ from{ top:0; } to{ top:calc(100% - 2px); } }

  /* CampusEdge: icon grid -> login -> dashboard */
  .icon-grid{position:relative; width:100%; max-width:15em; display:grid; grid-template-columns:repeat(2,1fr); gap:0.9em;}
  .icon-chip{aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4em; background:var(--surface-pearl); border-radius:0.85em;}
  .icon-chip__icon{width:1.6em; height:1.6em; border-radius:0.4em; background:rgba(16,99,233,0.16);}
  .icon-chip__label{font:600 0.72em/1 Inter, sans-serif; color:var(--ink-muted); letter-spacing:0.02em;}
  .icon-grid__hub{position:absolute; right:-1.2em; top:50%; transform:translateY(-50%); width:3.6em; height:3.6em; border-radius:50%; background:var(--canvas); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(16,99,233,0.18);}
  .icon-grid__hub svg{width:70%; height:70%;}
  .icon-grid__cursor{position:absolute; top:0; left:0; width:0.9em; height:0.9em; border-radius:50% 50% 50% 0; background:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,0.25); opacity:0; transform:rotate(-45deg); pointer-events:none;}

  .login-panel{width:100%; max-width:13em; display:flex; flex-direction:column; align-items:center; gap:0.7em; background:var(--canvas); border:1px solid var(--hairline); border-radius:0.9em; padding:1.3em 1.1em; box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(16,99,233,0.07);}
  .login-panel__badge{width:2.2em; height:2.2em; border-radius:50%; background:var(--gradient-purple-arc);}
  .login-panel__field{width:100%; height:1.9em; border-radius:0.45em; background:var(--canvas-off-white); border:1px solid var(--hairline);}
  .login-panel__submit{width:100%; height:2em; border:none; border-radius:9999px; background:var(--gradient-purple-arc); color:#fff; font:600 0.68em/1 Inter, sans-serif; cursor:default;}
  .login-panel__status{display:flex; align-items:center; gap:0.4em; opacity:0; font:500 0.62em/1 Inter, sans-serif; color:var(--ink-body);}
  .login-panel__spinner{width:0.8em; height:0.8em; border-radius:50%; border:2px solid var(--hairline); border-top-color:var(--primary); animation:spin .8s linear infinite;}

  .dashboard-panel{width:100%; height:100%; display:flex; flex-direction:column; gap:1em;}
  .dashboard-panel__topbar{display:flex; align-items:center; gap:0.5em;}
  .dashboard-panel__avatar{width:1.6em; height:1.6em; border-radius:50%; background:var(--gradient-blue-arc); flex:none;}
  .dashboard-panel__crumb{height:0.6em; width:5em; border-radius:9999px; background:var(--hairline);}
  .dashboard-panel__crumb--short{width:2.4em;}
  .dashboard-panel__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0.7em; flex:1;}
  .dashboard-card{position:relative; background:var(--canvas-off-white); border-radius:0.7em; padding:0.8em; display:flex; flex-direction:column; justify-content:flex-end; gap:0.5em; overflow:hidden;}
  .dashboard-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient-purple-arc);}
  .dashboard-card--accent::before{background:var(--gradient-blue-arc);}
  .dashboard-card__bar{width:70%; height:1.6em; border-radius:0.3em; background:rgba(16,99,233,0.14); align-self:flex-start;}
  .dashboard-card--accent .dashboard-card__bar{background:var(--gradient-blue-arc); height:2.2em;}
  .dashboard-card__line{width:60%; height:0.4em; border-radius:9999px; background:var(--hairline);}

  /* CoursEdge: course card -> processing -> confirmed */
  .course-card{width:100%; max-width:13.5em; background:var(--canvas); border:1px solid var(--hairline); border-radius:0.9em; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(16,99,233,0.07);}
  .course-card__thumb{height:5.5em; background:var(--gradient-soft-mauve, linear-gradient(135deg,#D5A2EF,#A050FF));}
  .course-card__title{height:0.7em; width:70%; margin:0.9em auto 0.6em; border-radius:9999px; background:var(--hairline);}
  .course-card__meta{display:flex; align-items:center; justify-content:space-between; padding:0 0.9em 0.9em;}
  .tag-chip-mini{font:600 0.6em/1 Inter, sans-serif; color:var(--primary); background:var(--surface-pearl); border-radius:9999px; padding:0.3em 0.6em;}
  .enroll-button{border:none; border-radius:9999px; background:var(--gradient-purple-arc); color:#fff; font:600 0.62em/1 Inter, sans-serif; padding:0.45em 0.9em; cursor:default;}
  .status-badge{display:flex; align-items:center; gap:0.4em; margin-top:0.9em; padding:0 0.9em 0.9em; font:500 0.62em/1 Inter, sans-serif; color:var(--ink-body);}
  .status-badge__spinner{width:0.8em; height:0.8em; border-radius:50%; border:2px solid var(--hairline); border-top-color:var(--primary); animation:spin .8s linear infinite;}
  .confirm-panel{display:flex; flex-direction:column; align-items:center; gap:0.7em;}
  .confirm-panel__badge{width:2.6em; height:2.6em; border-radius:50%; background:var(--gradient-blue-arc); display:flex; align-items:center; justify-content:center;}
  .confirm-panel__badge svg{width:1.3em; height:1.3em;}
  .confirm-panel__title{font:600 0.85em/1 "Plus Jakarta Sans", sans-serif; color:var(--ink);}
  .confirm-panel__progress{width:9em; height:0.4em; border-radius:9999px; background:var(--hairline); overflow:hidden;}
  .confirm-panel__progress-fill{display:block; height:100%; width:0%; border-radius:9999px; background:var(--gradient-blue-arc);}

  /* The Registrar Accelerator: upload -> scanning -> equivalency rows -> posted */
  .document-card{position:relative; width:9em; height:11.5em; background:var(--canvas); border:1px solid var(--hairline); border-radius:0.5em; padding:1em 0.9em; box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(16,99,233,0.07); overflow:hidden;}
  .document-card__line{display:block; height:0.5em; border-radius:9999px; background:var(--hairline); margin-bottom:0.6em;}
  .document-card__line--w80{width:80%;} .document-card__line--w60{width:60%;} .document-card__line--w70{width:70%;}
  .document-card__tag{position:absolute; bottom:0.8em; left:0.9em; font:700 0.55em/1 Inter, sans-serif; letter-spacing:0.04em; color:var(--primary); background:var(--surface-pearl); border-radius:0.3em; padding:0.25em 0.45em;}
  .scan-line{position:absolute; left:0; right:0; top:0; height:2px; background:var(--gradient-blue-arc); box-shadow:0 0 8px rgba(18,188,255,0.6);}
  .document-card--scanning .scan-line{animation:scanSweep 1.4s ease-in-out infinite alternate;}
  .equivalency-table{width:100%; max-width:15em; display:flex; flex-direction:column; gap:0.5em;}
  .equivalency-row{display:flex; align-items:center; gap:0.5em; background:var(--canvas); border:1px solid var(--hairline); border-radius:0.5em; padding:0.5em 0.7em; font:600 0.62em/1 Inter, sans-serif; color:var(--ink-body);}
  .equivalency-row__arrow{color:var(--ink-muted);}
  .equivalency-row__target{margin-right:auto;}
  .equivalency-row__check{width:0.9em; height:0.9em; border-radius:50%; background:var(--gradient-blue-arc);}

  /* Student Pulse 360: source cards -> gauge fill/count-up + advisor alert */
  .source-cards{display:flex; flex-direction:column; gap:0.6em; width:100%; max-width:9em;}
  .source-card{display:flex; align-items:center; gap:0.6em; background:var(--surface-pearl); border-radius:9999px; padding:0.5em 0.9em;}
  .source-card__dot{width:0.6em; height:0.6em; border-radius:50%; background:var(--gradient-blue-arc); flex:none;}
  .source-card__label{font:600 0.68em/1 Inter, sans-serif; color:var(--ink-body);}
  .gauge{position:relative; width:9em; height:9em;}
  .gauge__ring{width:100%; height:100%;}
  .gauge__readout{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .gauge__value{font:700 1.5em/1 "Plus Jakarta Sans", sans-serif; color:var(--ink); letter-spacing:-0.02em;}
  .gauge__label{font:600 0.55em/1 Inter, sans-serif; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); margin-top:0.3em;}
  .advisor-alert{position:absolute; right:0.8em; bottom:0.8em; max-width:9em; display:flex; align-items:flex-start; gap:0.5em; background:var(--canvas); border:1px solid var(--hairline); border-radius:0.7em; padding:0.7em 0.8em; box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(16,99,233,0.07); opacity:0;}
  .advisor-alert__icon{width:1.3em; height:1.3em; border-radius:50%; background:rgba(245,158,11,0.16); flex:none;}
  .advisor-alert__title{display:block; font:600 0.65em/1.2 Inter, sans-serif; color:var(--ink);}
  .advisor-alert__tag{display:inline-block; margin-top:0.35em; font:700 0.55em/1 Inter, sans-serif; color:#F59E0B; background:rgba(245,158,11,0.14); border-radius:9999px; padding:0.25em 0.55em;}

  .solution-text .tagline{margin-bottom:12px; display:block;}
  .solution-text h3{font-size:26px; font-weight:700; letter-spacing:-0.2px; margin-bottom:10px;}
  .solution-text .card-desc{font-size:16px; color:var(--ink-body); margin-bottom:16px;}
  .solution-text ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
  .solution-text li{font-size:15px; color:var(--ink-body); padding-left:18px; position:relative; line-height:1.5;}
  .solution-text li::before{content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--gradient-blue-arc);}

  /* process */
  .process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media (max-width:900px){ .process-grid{grid-template-columns:1fr;} }
  .process-card{background:var(--surface-dark-2); border:1px solid var(--border-dark); border-radius:16px; padding:22px; position:relative; padding-left:26px;}
  .process-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gradient-purple-arc); border-radius:16px 0 0 16px;}
  .process-num{font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.8px; background:var(--gradient-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; display:block;}
  .process-card h3{font-size:17px; font-weight:600; margin-bottom:8px; color:var(--on-dark);}
  .process-card p{font-size:14px; color:var(--on-dark-muted);}

  /* who we serve */
  .serve-list{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
  @media (max-width:900px){ .serve-list{grid-template-columns:1fr; gap:28px;} }
  .serve-item{border-top:1px solid var(--hairline); padding-top:20px;}
  .serve-icon{width:36px; height:36px; margin-bottom:14px;}
  .serve-icon svg{width:100%; height:100%; stroke:var(--primary); fill:none;}
  .serve-item h3{font-size:18px; font-weight:600; margin-bottom:8px;}
  .serve-item p{font-size:15px; color:var(--ink-body);}

  /* testimonials */
  .testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:900px){ .testimonial-grid{grid-template-columns:1fr;} }
  .testimonial-card{
    background:var(--surface-dark-2); border:1.5px dashed var(--border-dark); border-radius:16px;
    padding:24px; position:relative;
  }
  .sample-tag{
    display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
    background:rgba(245,158,11,0.15); color:#F59E0B; padding:3px 10px; border-radius:9999px; margin-bottom:14px;
  }
  .testimonial-card p.quote{font-size:15px; color:var(--on-dark-muted); font-style:italic; margin-bottom:18px; line-height:1.6;}
  .testimonial-card .attribution{font-size:13px; color:var(--on-dark); font-weight:600;}
  .testimonial-card .attribution span{display:block; font-weight:400; color:var(--on-dark-muted); font-size:12px; margin-top:2px;}

  /* integrations */
  .integrations-marquee{display:flex; flex-direction:column; gap:18px; overflow:hidden;}
  .marquee-row{
    overflow:hidden; width:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track-group{display:flex; width:max-content; will-change:transform; animation-duration:var(--marquee-duration, 34s);}
  /* One .marquee-copy is the repeating unit. Its trailing padding carries the
     spacing to the next copy, so the copy's own width is exactly the distance
     the track must travel to land on an identical frame. marquee.js clones
     copies until the track outruns the row, sets --marquee-shift to that
     width, and marks the row ready. Without JS the logos sit still rather
     than scrolling into empty space. */
  .marquee-copy{display:flex; flex:none; gap:14px; padding-right:14px;}
  .marquee-row.is-ready.marquee-row--left .marquee-track-group{animation-name:marqueeLeft; animation-timing-function:linear; animation-iteration-count:infinite;}
  .marquee-row.is-ready.marquee-row--right .marquee-track-group{animation-name:marqueeRight; animation-timing-function:linear; animation-iteration-count:infinite;}
  @keyframes marqueeLeft{ from{transform:translateX(0);} to{transform:translateX(calc(-1 * var(--marquee-shift, 0px)));} }
  @keyframes marqueeRight{ from{transform:translateX(calc(-1 * var(--marquee-shift, 0px)));} to{transform:translateX(0);} }
  .integration-chip{
    flex:none; display:flex; align-items:center; justify-content:center; white-space:nowrap;
    background:var(--canvas); border:1px solid var(--hairline); border-radius:12px;
    padding:12px 20px; height:64px;
  }
  .integration-chip img{ height:28px; width:auto; max-width:120px; object-fit:contain; display:block; }
  .integration-chip--text{
    border-radius:9999px; background:var(--surface-pearl); border-color:transparent;
    color:var(--primary); font-family:var(--font-body); font-size:14px; font-weight:600; padding:0 22px;
  }
  /* Some official marks are icon-only glyphs with no name baked into the
     artwork (unlike most of this set, which are full text+icon lockups).
     Pairing those with a typeset label keeps every chip equally identifiable
     at a glance instead of relying on icon recognition alone. */
  .integration-chip--labeled{ gap:10px; padding-left:16px; }
  .integration-chip--labeled img{ height:24px; width:24px; max-width:24px; }
  .integration-chip-label{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; }
  .integrations-note{text-align:center; font-size:12px; color:var(--ink-body); margin-top:20px;}
  @media (prefers-reduced-motion: reduce){
    .marquee-track-group{animation:none;}
    .marquee-row{overflow-x:auto;}
  }
  @media (max-width:640px){
    .integration-chip{height:52px; padding:10px 16px;}
    .integration-chip img{height:22px; max-width:96px;}
    .integration-chip--text{font-size:13px; padding:0 18px;}
    .integration-chip--labeled img{height:20px; width:20px; max-width:20px;}
    .integration-chip-label{font-size:13px;}
  }

  /* cta */
  .cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; text-align:left;}
  @media (max-width:900px){ .cta-grid{grid-template-columns:1fr; gap:40px;} }
  .cta-text h2{font-size:clamp(28px,4vw,40px); margin-bottom:16px;}
  .cta-text .lead{margin-bottom:20px;}
  .cta-direct-email{font-size:15px; color:var(--on-dark-muted);}
  .cta-direct-email a{color:var(--sky); text-decoration:underline; text-underline-offset:2px;}

  .cta-form-card{background:var(--surface-dark-2); border:1px solid var(--border-dark); border-radius:16px; padding:32px;}
  #contactForm{position:relative;}
  .form-row{margin-bottom:18px;}
  .form-row label{display:block; font-size:13px; font-weight:600; color:var(--on-dark-muted); margin-bottom:6px;}
  .form-row .optional{font-weight:400; color:var(--on-dark-muted);}
  .form-row input[type="text"], .form-row input[type="email"], .form-row textarea{
    width:100%; background:var(--surface-dark-1); border:1.5px solid var(--border-dark); border-radius:8px;
    padding:11px 14px; font-family:var(--font-body); font-size:15px; color:var(--on-dark);
  }
  .form-row input:focus, .form-row textarea:focus{
    outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--focus-ring);
  }
  .form-row textarea{resize:vertical; min-height:96px;}
  .captcha-row .captcha-wrap{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .captcha-row img{border-radius:8px; border:1px solid var(--border-dark); display:block; background:#fff;}
  .captcha-refresh{
    background:transparent; border:1px solid var(--border-dark); color:var(--on-dark-muted);
    border-radius:8px; width:38px; height:38px; font-size:16px; cursor:pointer; flex-shrink:0;
  }
  .captcha-refresh:hover{color:var(--on-dark); border-color:var(--primary);}
  .hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; margin:0;}
  .form-submit{width:100%; justify-content:center; margin-top:6px;}
  .form-note{margin-top:14px; font-size:14px; padding:10px 14px; border-radius:8px; display:none;}
  .form-note.show{display:block;}
  .form-note.success{background:rgba(16,185,129,0.12); color:#10B981;}
  .form-note.error{background:rgba(239,68,68,0.12); color:#EF4444;}

  /* footer */
  footer{background:var(--surface-void); border-top:1px solid var(--border-dark); padding:56px 0 32px; color:var(--on-dark-muted);}
  .footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; margin-bottom:32px;}
  .footer-links{display:flex; gap:24px; flex-wrap:wrap;}
  .footer-links a{color:var(--on-dark-muted); font-size:13px;}
  .footer-links a:hover{color:var(--on-dark);}
  .footer-legal{font-size:12px; border-top:1px solid var(--border-dark); padding-top:20px; color:var(--on-dark-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;}
  .footer-credit a{color:var(--on-dark-muted); text-decoration:underline; text-underline-offset:2px;}
  .footer-credit a:hover{color:var(--on-dark);}
  .footer-heart{color:var(--magenta);}