:root {
      --p900: #1f0f29;
      --p800: #2c1339;
      --p700: #3d1657;
      --p500: #6a1b8a;
      --p400: #8a3aa8;
      --p300: #b489cd;
      --lilac: #f6f1fa;
      --lilac-2: #ece2f3;
      --white: #fff;
      --ink: #2a2230;
      --grey: #6f6477;
      --line: #ede7f1;
  }

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  html {
      scroll-behavior: smooth;
      scroll-padding-top: 120px;
  }

  @media (min-width: 1024px) and (max-width: 1440px) {
      html {
          zoom: 0.85;
      }
  }

  @supports not (zoom: 1) {
      @media (min-width: 1024px) and (max-width: 1440px) {
          body {
              transform: scale(0.85);
              transform-origin: top left;
              width: 117.65%;
          }
      }
  }
  body {
      background: var(--white);
      color: var(--ink);
      font-family: 'Poppins', 'Open Sans', sans-serif;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
  }

  .disp {
      font-family: 'Poppins', sans-serif;
  }

  ::selection {
      background: var(--p500);
      color: #fff;
  }

  a {
      color: inherit;
  }

  .wrap {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 32px;
  }

  .narrow {
      max-width: 760px;
  }

  /* labels */
  .kicker {
      font-size: 11.5px;
      letter-spacing: .24em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--p500);
  }

  .num-label {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      color: var(--p300);
  }

  /* reveal */
  .rv {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .7s ease, transform .7s ease;
  }

  .rv.in {
      opacity: 1;
      transform: none;
  }

  /* ---------- NAV ---------- */

  .ai-stride-nav {
      position: sticky;
            top: 80px;
                height: auto;
      z-index: 900;

      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
  }

  .ai-stride-page .announcement-bar {
      display: none !important;
  }

  @media (min-width: 769px) {
      .ai-stride-page .image-container {
          width: 211px;
          flex: 0 0 211px;
      }

      .ai-stride-page .background-image {
          width: 100%;
      }

      .ai-stride-page .social-icons>a:not(:first-child) img {

          display: block;
      }

      .ai-stride-page .social-icons .social-medias {
          width: auto;
          height: auto;
      }
  }
  nav.ai-stride-nav.scrolled {
      border-color: rgba(141, 98, 186, 0.2);
  }

  .top-bar,
  .sub-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 5px 0;
  }

  .top-bar {
      border-bottom: 1px solid var(--line);
  }

  .top-bar .top-links,
  .sub-nav .links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 28px;
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
  }

  .top-bar .top-links a,
  .sub-nav .links a {
      color: var(--ink);
      text-decoration: none;
      opacity: 0.8;
      transition: color 0.2s ease, opacity 0.2s ease;
  }

  .top-bar .top-links a:hover,
  .sub-nav .links a:hover,
  .sub-nav .links a.active {
      color: var(--p500);
      opacity: 1;
  }

  @media(max-width: 760px) {

      .top-bar,
      .sub-nav {
          padding: 10px 16px;
      }

      .top-bar .top-links,
      .sub-nav .links {
          gap: 18px;
          font-size: 0.9rem;
      }
  }

  /* ---------- HERO (text only) ---------- */
  .hero {
      padding: 120px 0 90px;
      border-bottom: 1px solid var(--line);
  }

  .hero .kicker {
      display: block;
      margin-bottom: 26px;
  }

  .hero h1 {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 700;
      letter-spacing: -.035em;
      line-height: .95;
      font-size: clamp(58px, 11vw, 140px);
      color: var(--p700);
  }

  .hero h1 sup {
      font-size: .18em;
      vertical-align: super;
    position: relative;
        top: -2.5rem;
      color: var(--p400);
      font-weight: 600;
  }

  .hero .tagline {
      max-width: 660px;
      font-size: clamp(18px, 2.3vw, 24px);
      font-weight: 300;
      color: var(--grey);
      margin-top: 30px;
      line-height: 1.45;
  }

  .hero .tagline b {
      font-weight: 600;
      color: var(--p700);
  }

  .hero .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      margin-top: 46px;
      font-size: 13.5px;
      color: var(--grey);
  }

  .hero .meta span {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .hero .meta span::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--p400);
  }

  /* ---------- SECTION SHELL ---------- */
  section {
      padding: 96px 0;
  }

  .sec-head {
      margin-bottom: 14px;
  }

  .sec-head h2 {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 600;
      letter-spacing: -.02em;
      line-height: 1.05;
      font-size: clamp(28px, 4.4vw, 46px);
      color: var(--p800);
      margin-top: 14px;
  }

  .sec-intro {
      font-size: 17px;
      color: var(--grey);
      max-width: 620px;
      margin-top: 18px;
      font-weight: 300;
  }

  /* ---------- INTRO TWO-COL ---------- */
  .two {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 60px;
      align-items: start;
  }

  @media(max-width:820px) {
      .two {
          grid-template-columns: 1fr;
          gap: 24px;
      }
  }

  .lead {
      font-size: clamp(19px, 2.4vw, 24px);
      font-weight: 300;
      line-height: 1.5;
      color: var(--ink);
  }

  .lead b {
      font-weight: 600;
      color: var(--p500);
  }

  .prose {
      font-size: 16.5px;
      color: var(--grey);
      margin-top: 20px;
  }

  .prose p+p {
      margin-top: 15px;
  }

  .quote {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 500;
      font-size: clamp(21px, 2.8vw, 28px);
      line-height: 1.3;
      color: var(--p700);
      margin-top: 30px;
      padding-left: 22px;
      border-left: 3px solid var(--p400);
      letter-spacing: -.01em;
  }

  /* ---------- STRIDE STEPS (robust, flow layout) ---------- */
  .steps-sec {
      background: var(--lilac);
  }

  .steps {
      margin-top: 54px;
      border-top: 1px solid var(--lilac-2);
  }

  .step {
      display: grid;
      grid-template-columns: 88px 1fr auto;
      gap: 28px;
      align-items: center;
      padding: 30px 6px;
      border-bottom: 1px solid var(--lilac-2);
      cursor: default;
      transition: background .3s, padding-left .3s;
      position: relative;
  }

  .step::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: var(--p500);
      transition: width .3s;
  }

  .step:hover {
      background: rgba(255, 255, 255, .6);
      padding-left: 18px;
  }

  .step:hover::before {
      width: 3px;
  }

  .step .s-letter {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 700;
      font-size: 46px;
      line-height: 1;
      color: var(--p300);
      transition: color .3s;
      letter-spacing: -.02em;
  }

  .step:hover .s-letter {
      color: var(--p500);
  }

  .step .s-body h3 {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 21px;
      color: var(--p800);
      letter-spacing: -.01em;
      margin-bottom: 5px;
  }

  .step .s-body p {
      font-size: 15px;
      color: var(--grey);
      line-height: 1.5;
      max-width: 640px;
  }

  .step .s-num {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: var(--p300);
  }

  @media(max-width:680px) {
      .step {
          grid-template-columns: 54px 1fr;
          gap: 16px;
          padding: 24px 4px;
      }

      .step .s-letter {
          font-size: 34px;
      }

      .step .s-num {
          display: none;
      }

      .step:hover {
          padding-left: 10px;
      }
  }

  /* ---------- LIFECYCLE GRID ---------- */
  .life-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      margin-top: 50px;
  }

  @media(max-width:900px) {
      .life-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media(max-width:520px) {
      .life-grid {
          grid-template-columns: 1fr;
      }
  }

  .life-cell {
      background: var(--white);
      padding: 26px 24px 30px;
      transition: background .3s;
  }

  .life-cell:hover {
      background: var(--lilac);
  }

  .life-cell .lc-n {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: var(--p400);
  }

  .life-cell h4 {
      font-size: 16px;
      font-weight: 700;
      color: var(--p800);
      margin: 12px 0 7px;
  }

  .life-cell p {
      font-size: 13.5px;
      color: var(--grey);
      line-height: 1.5;
  }

  /* ---------- FORCES ---------- */
  .forces-sec {
      background: var(--p800);
      color: #fff;
  }

  .forces-sec h2 {
      color: #fff;
  }

  .forces-sec .sec-intro {
      color: #d8c8e6;
  }

  .forces {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
      margin-top: 54px;
  }

  @media(max-width:760px) {
      .forces {
          grid-template-columns: 1fr;
          gap: 26px;
      }
  }

  .force {
      padding-top: 22px;
      border-top: 2px solid rgba(255, 255, 255, .16);
      transition: border-color .3s;
  }

  .force:hover {
      border-color: var(--p300);
  }

  .force .f-n {
      font-size: 12px;
      letter-spacing: .18em;
      font-weight: 700;
      color: var(--p300);
  }

  .force h4 {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 23px;
      margin: 12px 0 10px;
      letter-spacing: -.01em;
  }

  .force p {
      font-size: 15px;
      color: #e0d2ec;
      font-weight: 300;
  }

  /* ---------- MEASURE ---------- */
  .measure {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 26px;
      margin-top: 50px;
  }

  @media(max-width:760px) {
      .measure {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  .m .m-k {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 700;
      font-size: clamp(30px, 4.4vw, 42px);
      color: var(--p500);
      letter-spacing: -.02em;
      line-height: 1;
  }

  .m .m-d {
      font-size: 14px;
      color: var(--grey);
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
  }

  /* ---------- AUTHORS ---------- */
  .auth-sec {
      background: var(--lilac);
  }

  .authors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 50px;
  }

  @media(max-width:640px) {
      .authors {
          grid-template-columns: 1fr;
      }
  }

  .author {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 30px;
      transition: box-shadow .3s;
  }

  .author:hover {
      box-shadow: 0 20px 44px -30px rgba(61, 22, 87, .45);
  }

  .author .a-tag {
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--p400);
  }

  .author h4 {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 22px;
      color: var(--p800);
      margin: 8px 0 6px;
      letter-spacing: -.01em;
  }

  .author p {
      font-size: 14.5px;
      color: var(--grey);
      line-height: 1.5;
  }

  /* ---------- CLOSING ---------- */
  .closing {
      padding: 120px 0;
      text-align: center;
      border-top: 1px solid var(--line);
  }

  .closing h2 {
      font-family: 'Poppins', 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(30px, 5vw, 54px);
      line-height: 1.08;
      letter-spacing: -.02em;
      color: var(--p800);
      max-width: 840px;
      margin: 0 auto;
  }

  .closing h2 em {
      font-style: normal;
      color: var(--p500);
  }

  .closing .tm-pill {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-top: 36px;
      padding: 11px 22px;
      border: 1px solid var(--lilac-2);
      border-radius: 40px;
      font-size: 14px;
      color: var(--grey);
  }

  .closing .tm-pill b {
      color: var(--p700);
      font-weight: 700;
      letter-spacing: .03em;
  }

  /* ---------- FOOTER ---------- */
  footer {
      background: var(--white);
      border-top: 1px solid var(--line);
      padding: 40px 0 56px;
  }

  footer .row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
  }

  footer img {
      height: 30px;
  }

  footer p {
      font-size: 12.5px;
      color: var(--grey);
      line-height: 1.7;
      max-width: 720px;
  }

  footer .tm {
      color: var(--p500);
      font-weight: 700;
  }
.ai-stride-page footer .footer-content {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 24px;
}

.ai-stride-page footer .logos {
    width: 151px;
    height: 46px;
}

.ai-stride-page footer .footer-bottom p {
    color: #fff;
    font-size: 14px;
    width: 100%;
    max-width: none;
    margin: 0;
}

.ai-stride-page footer .footer-nav a img {
    width: 15px;
    height: 15px;
}

@media (max-width: 768px) {
    .ai-stride-page footer .footer-content {
        padding: 36px 24px 70px;
    }

    .ai-stride-page footer .footer-top {
        display: none;
    }

    .ai-stride-page footer .social-links {
        flex-direction: column;
        justify-content: center;
        gap: 52px;
        padding: 0;
        border-top: 0;
    }

    .ai-stride-page footer .footer-nav {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .ai-stride-page footer .footer-nav a {
        display: inline-flex;
        align-items: center;
    }

    .ai-stride-page footer .footer-nav a img {
        width: 15px !important;
        height: 15px;
    }

    .ai-stride-page footer .footer-navs {
        justify-content: center;
        gap: 22px;
    }

    .ai-stride-page footer .footer-bottom {
        padding-top: 54px;
    }
}