/* shared base reset (extracted from every page's <helmet>) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #ffffff; }
body { font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

/* ============ Homepage hero (.ari-hero-v2) + dark theme + theme toggle ============ */
/* New hero (v2) — Outfit + IBM Plex Mono. Everything is scoped under .ari-hero-v2
       so its generic selectors (h1, a, .btn, …) can't leak into the rest of the page. */
    .ari-hero-v2 {
      --navy: #16294f;
      --navy-dark: #0d1b38;
      --muted: #a2a9b4;
      --body: #4d5666;
      --meta: #7d8593;
      --surface: #f4f5f8;
      --line: rgba(22, 41, 79, .12);
      --line-soft: rgba(22, 41, 79, .07);
      margin: 0; border-radius: 0; background: var(--surface);
      position: relative; overflow: hidden;
      padding: 96px 48px 0; text-align: center;
      font-family: 'Outfit', sans-serif;
    }
    .ari-hero-v2 * { box-sizing: border-box; }
    .ari-hero-v2 a { color: var(--navy); text-decoration: none; }
    .ari-hero-v2 a:hover { color: var(--navy-dark); }

    .ari-hero-v2 .btn {
      font-family: 'IBM Plex Mono', monospace; letter-spacing: .14em;
      border-radius: 8px; cursor: pointer; border: none;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .ari-hero-v2 .btn-primary { background: var(--navy); color: #fff; }
    .ari-hero-v2 .btn-primary:hover { background: var(--navy-dark); color: #fff; }
    .ari-hero-v2 .btn-hero { padding: 16px 36px; font-size: 13px; }
    .ari-hero-v2 .btn-hero.btn-primary { box-shadow: 0 8px 20px rgba(22,41,79,.22); }
    .ari-hero-v2 .btn-hero.btn-primary:hover { box-shadow: 0 10px 24px rgba(22,41,79,.3); }
    .ari-hero-v2 .btn-secondary { background: #fff; color: var(--navy); border: 1px solid rgba(22,41,79,.22); }
    .ari-hero-v2 .btn-secondary:hover { border-color: var(--navy); background: #fbfcfe; }

    .ari-hero-v2 .hero-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image: radial-gradient(circle, rgba(22,41,79,.10) 1px, transparent 1px);
      background-size: 26px 26px;
      -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 32%, black 30%, transparent 75%);
      mask-image: radial-gradient(ellipse 75% 60% at 50% 32%, black 30%, transparent 75%);
    }
    .ari-hero-v2 .hero-glow {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 720px; height: 360px; pointer-events: none;
      background: radial-gradient(ellipse at 50% 0%, rgba(22,41,79,.07), transparent 70%);
    }
    .ari-hero-v2 .hero-cross { position: absolute; top: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #a9b0bc; user-select: none; }
    .ari-hero-v2 .hero-cross.left { left: 32px; }
    .ari-hero-v2 .hero-cross.right { right: 32px; }
    .ari-hero-v2 .hero-inner {
      position: relative; max-width: 1320px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center; gap: 34px;
    }
    .ari-hero-v2 .eyebrow {
      display: inline-flex; align-items: center; gap: 14px;
      border: 1px solid rgba(22,41,79,.18); border-radius: 999px;
      padding: 9px 20px; background: rgba(255,255,255,.7); backdrop-filter: blur(4px);
    }
    .ari-hero-v2 .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #2e7d5b; animation: heroPulseDot 2.4s ease-in-out infinite; }
    .ari-hero-v2 .eyebrow span:last-child { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .22em; color: #5b6472; }
    @keyframes heroPulseDot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
    .ari-hero-v2 h1 {
      margin: 0; font-weight: 600; color: var(--navy); font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(44px, 5.8vw, 84px); line-height: 1.08; letter-spacing: -0.015em;
      max-width: 18em; text-wrap: balance;
    }
    .ari-hero-v2 h1 .dim { color: var(--muted); }
    .ari-hero-v2 .hero-copy {
      margin: 0; max-width: 760px;
      font-size: 20px; line-height: 1.62; color: var(--body); text-wrap: pretty;
    }
    .ari-hero-v2 .hero-copy strong { color: var(--navy); font-weight: 600; }
    .ari-hero-v2 .hero-ctas { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
    .ari-hero-v2 .meta-row {
      display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: center; justify-content: center;
      margin-top: 10px; margin-bottom: 50px;
      font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .16em; color: var(--meta);
    }
    .ari-hero-v2 .meta-row span { display: flex; align-items: center; gap: 8px; }
    .ari-hero-v2 .meta-row i { width: 4px; height: 4px; background: var(--navy); border-radius: 50%; }

    .ari-hero-v2 .product-window {
      width: 100%; max-width: 1060px; margin-top: 28px;
      background: #fff; border: 1px solid var(--line); border-bottom: none;
      border-radius: 14px 14px 0 0; box-shadow: 0 -14px 44px rgba(22,41,79,.10); overflow: hidden;
    }
    .ari-hero-v2 .window-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 18px; border-bottom: 1px solid rgba(22,41,79,.08); background: #fbfcfd;
    }
    .ari-hero-v2 .window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6dae2; }
    .ari-hero-v2 .window-bar span { margin-left: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: #a9b0bc; }
    .ari-hero-v2 .window-body { display: grid; grid-template-columns: 200px 1fr 260px; height: 190px; }
    .ari-hero-v2 .pane { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
    .ari-hero-v2 .pane-left { border-right: 1px solid var(--line-soft); }
    .ari-hero-v2 .pane-main { padding: 18px 22px; gap: 12px; }
    .ari-hero-v2 .pane-right { border-left: 1px solid var(--line-soft); background: #fbfcfd; padding: 16px; }
    .ari-hero-v2 .pane-right .label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #a9b0bc; }
    .ari-hero-v2 .bar { height: 9px; border-radius: 4px; background: #eef0f4; }
    .ari-hero-v2 .bar.strong { background: #e6e9ef; }
    .ari-hero-v2 .bar.title { height: 12px; background: #dfe3ea; }
    .ari-hero-v2 .card-row { display: flex; gap: 10px; margin-top: 6px; }
    .ari-hero-v2 .card-row div { height: 30px; flex: 1; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 6px; }

    /* ================= Dark theme ================= */
    /* Hero goes full-bleed dark so it merges seamlessly with the dark nav (like the mock). */
    .theme-dark .ari-hero-v2 {
      --muted: #8492ad;
      --body: #aab4c7;
      --meta: #7a86a0;
      margin: 0; border-radius: 0;
      background: radial-gradient(ellipse 90% 70% at 50% -10%, #1a2c52 0%, #0f1f42 45%, #0b183a 100%);
    }
    .theme-dark .ari-hero-v2 h1 { color: #f3f6fc; }
    .theme-dark .ari-hero-v2 h1 .dim { color: #7f8caa; }
    .theme-dark .ari-hero-v2 .hero-grid {
      background-image: radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1px);
    }
    .theme-dark .ari-hero-v2 .hero-glow {
      background: radial-gradient(ellipse at 50% 0%, rgba(120,150,220,.16), transparent 70%);
    }
    .theme-dark .ari-hero-v2 .hero-cross { color: #4a5878; }
    .theme-dark .ari-hero-v2 .eyebrow { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
    .theme-dark .ari-hero-v2 .eyebrow span:last-child { color: #aeb9cf; }
    .theme-dark .ari-hero-v2 .btn-primary { background: #eef2f8; color: #0d1b38; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
    .theme-dark .ari-hero-v2 .btn-primary:hover { background: #fff; color: #0d1b38; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
    .theme-dark .ari-hero-v2 .btn-secondary { background: transparent; color: #dfe6f2; border-color: rgba(255,255,255,.24); }
    .theme-dark .ari-hero-v2 .btn-secondary:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); color: #fff; }
    .theme-dark .ari-hero-v2 .meta-row i { background: #6f7c96; }
    .theme-dark .ari-hero-v2 .hero-copy strong { color: #fff; }
    /* product-window */
    .theme-dark .ari-hero-v2 .product-window { background: #0e2049; border-color: rgba(255,255,255,.08); box-shadow: 0 -14px 44px rgba(0,0,0,.4); }
    .theme-dark .ari-hero-v2 .window-bar { background: #10234f; border-bottom-color: rgba(255,255,255,.06); }
    .theme-dark .ari-hero-v2 .window-bar i { background: #33436b; }
    .theme-dark .ari-hero-v2 .window-bar span { color: #7f8caa; }
    .theme-dark .ari-hero-v2 .pane-left { border-right-color: rgba(255,255,255,.05); }
    .theme-dark .ari-hero-v2 .pane-right { background: #10234f; border-left-color: rgba(255,255,255,.05); }
    .theme-dark .ari-hero-v2 .pane-right .label { color: #6f7c96; }
    .theme-dark .ari-hero-v2 .bar { background: #1c3160; }
    .theme-dark .ari-hero-v2 .bar.strong { background: #24406f; }
    .theme-dark .ari-hero-v2 .bar.title { background: #2a4a80; }
    .theme-dark .ari-hero-v2 .card-row div { background: #14264d; border-color: rgba(255,255,255,.05); }

    /* Theme toggle button (in the nav) */
    #theme-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; padding: 0; border-radius: 8px;
      border: 1px solid rgba(3,39,86,.2); background: transparent; cursor: pointer;
      color: rgb(3,39,86); transition: background .2s, border-color .2s, color .2s;
    }
    #theme-toggle:hover { background: rgba(3,39,86,.08); }
    #theme-toggle svg { width: 18px; height: 18px; display: block; }
    #theme-toggle .ti-sun { display: none; }
    .theme-dark #theme-toggle { color: #eaf0fb; border-color: rgba(255,255,255,.22); }
    .theme-dark #theme-toggle:hover { background: rgba(255,255,255,.08); }
    .theme-dark #theme-toggle .ti-moon { display: none; }
    .theme-dark #theme-toggle .ti-sun { display: block; }

/* ============ 3D module marquee (/modules) ============ */
/* Homepage band: sits flush between the hero screenshot and the 001-004 feature cards. */
.marquee-band { display: block; background: #f4f5f8; line-height: 0; }
.marquee-band .marquee3d { display: flex; line-height: normal; }
.theme-dark .marquee-band { background: #0b183a; }

.marquee3d { width: 100%; height: 400px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .marquee3d__scale { width: 1720px; height: 1720px; flex-shrink: 0; transform: scale(0.82); }
    .marquee3d__plane {
      position: relative; top: 50%; left: 50%; width: 100%; height: 100%;
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
      transform-origin: center;
      transform: translate(-50%, -50%) rotateX(55deg) rotateZ(-45deg);
      transform-style: preserve-3d;
    }
    .marquee3d__col { display: flex; flex-direction: column; gap: 32px; }
    .marquee3d__col img {
      width: 100%; aspect-ratio: 970 / 700; object-fit: cover; object-position: top left;
      border-radius: 12px; display: block; background: #fff;
      outline: 1px solid rgba(2, 6, 23, 0.06); box-shadow: 0 24px 60px -34px rgba(16, 24, 27, 0.45);
    }
    /* Even columns drift down, odd columns drift up — mismatched durations keep it out of sync. */
    .marquee3d__col--1 { animation: marq-down 8s ease-in-out infinite alternate; }
    .marquee3d__col--2 { animation: marq-up 12s ease-in-out infinite alternate; }
    .marquee3d__col--3 { animation: marq-down 8s ease-in-out infinite alternate; animation-delay: -4s; }
    .marquee3d__col--4 { animation: marq-up 12s ease-in-out infinite alternate; animation-delay: -6s; }
    @keyframes marq-down { from { transform: translateY(0); } to { transform: translateY(100px); } }
    @keyframes marq-up   { from { transform: translateY(0); } to { transform: translateY(-100px); } }
    @media (min-width: 1500px) { .marquee3d__scale { transform: scale(0.98); } .marquee3d { height: 400px; } }
    @media (prefers-reduced-motion: reduce) {
      .marquee3d__col--1, .marquee3d__col--2, .marquee3d__col--3, .marquee3d__col--4 { animation: none; }
    }

/* ============ Community module library (homepage) ============ */
.cml { background: #f2f4f8; padding: 120px 0 130px; }
.cml__inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.cml__title {
  margin: 0; text-align: center; font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(38px, 4.4vw, 58px); font-weight: 700; line-height: 1.14;
  letter-spacing: -0.02em; color: #16294f;
}
.cml__title .dim { display: block; color: #a2a9b4; }
.cml__copy {
  margin: 30px auto 0; max-width: 620px; text-align: center;
  font-size: 17.5px; line-height: 1.6; color: #5b6472; text-wrap: pretty;
}
.cml__grid { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 42px 40px; }
.cml__card { display: flex; align-items: flex-start; gap: 18px; }

.cml__win {
  flex: 0 0 74px; width: 74px; height: 74px;
  background: #fff; border: 1px solid rgba(22,41,79,.10);
  border-radius: 10px; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(22,41,79,.5);
}
.cml__winbar {
  display: flex; align-items: center; gap: 3px;
  padding: 7px 8px; background: #fbfcfd; border-bottom: 1px solid rgba(22,41,79,.07);
}
.cml__winbar i { width: 4px; height: 4px; border-radius: 50%; background: #dfe3ea; }
.cml__winbody { padding: 9px 9px 0; display: flex; flex-direction: column; gap: 6px; }
.cml__bar { height: 5px; border-radius: 3px; background: #eceef3; }
.cml__bar.strong { background: #e2e6ee; }

.cml__text { min-width: 0; padding-top: 2px; }
.cml__name {
  margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 700;
  letter-spacing: -0.01em; color: #16294f;
}
.cml__badge {
  background: #16294f; color: #fff; border-radius: 5px; padding: 3px 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .12em;
  white-space: nowrap;
}
.cml__desc { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: #5b6472; }

.theme-dark .cml { background: #0b183a; }
.theme-dark .cml__title { color: #f3f6fc; }
.theme-dark .cml__title .dim { color: #6c7a9c; }
.theme-dark .cml__copy { color: #aab4c7; }
.theme-dark .cml__win { background: #0d1b3f; border-color: rgba(255,255,255,.10); box-shadow: 0 20px 44px -32px rgba(0,0,0,.75); }
.theme-dark .cml__winbar { background: #10234f; border-bottom-color: rgba(255,255,255,.07); }
.theme-dark .cml__winbar i { background: #33436b; }
.theme-dark .cml__bar { background: #1c3160; }
.theme-dark .cml__bar.strong { background: #24406f; }
.theme-dark .cml__name { color: #eaf0fb; }
.theme-dark .cml__desc { color: #8492ad; }
.theme-dark .cml__badge { background: #eef2f8; color: #0d1b38; }

@media (max-width: 1180px) { .cml__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============ "Build your own modules" intro (homepage, above the demo video) ============ */
.bym { background: #fff; padding: 0; }
.bym__panel {
  background: #f4f5f8;
  padding: 96px 48px 104px;
  text-align: center;
}
.bym__title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #16294f;
  text-wrap: balance;
}
.bym__title .dim { color: #a2a9b4; }
.bym__copy {
  margin: 30px auto 0;
  max-width: 660px;
  font-family: 'Outfit', sans-serif;
  font-size: 17.5px;
  line-height: 1.7;
  color: #5b6472;
  text-wrap: pretty;
}

.theme-dark .bym { background: #0b183a; }
.theme-dark .bym__panel { background: #0d1b3f; }
.theme-dark .bym__title { color: #f3f6fc; }
.theme-dark .bym__title .dim { color: #6c7a9c; }
.theme-dark .bym__copy { color: #aab4c7; }

/* ---- Three feature cards under the builder mockup (same width as .mbx) ---- */
.bym__cards {
  margin: 28px auto 0; max-width: 886px; text-align: left;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.bym__card {
  background: #fff; border: 1px solid #e8ebf0; border-radius: 14px; padding: 24px 24px 26px;
}
.bym__cardname {
  margin: 0; font-family: 'Outfit', sans-serif; font-size: 17px;
  font-weight: 700; letter-spacing: -0.01em; color: #16294f;
}
.bym__carddesc {
  margin: 12px 0 0; font-family: 'Outfit', sans-serif; font-size: 14px;
  line-height: 1.6; color: #5b6472; text-wrap: pretty;
}

.theme-dark .bym__card { background: #10234f; border-color: rgba(255,255,255,.07); }
.theme-dark .bym__cardname { color: #f3f6fc; }
.theme-dark .bym__carddesc { color: #aab4c7; }

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

/* ---- ARI Module Builder mockup (inside the .bym panel) ---- */
.mbx {
  margin: 58px auto 0; max-width: 886px; text-align: left;
  background: #fff; border: 1px solid rgba(22,41,79,.09); border-radius: 17px;
  overflow: hidden; box-shadow: 0 40px 79px -53px rgba(22,41,79,.65);
}
.mbx__bar {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 14px 19px; border-bottom: 1px solid rgba(22,41,79,.07); background: #fbfcfd;
}
.mbx__bar i { width: 8px; height: 8px; border-radius: 50%; background: #dfe3ea; }
.mbx__bar span {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; color: #9aa3b2;
}
.mbx__body { padding: 26px 31px 25px; display: flex; flex-direction: column; gap: 17px; }

.mbx__ask {
  align-self: flex-end; max-width: 81%;
  background: #16294f; color: #fff; border-radius: 11px; padding: 17px 19px;
  font-size: 14.5px; line-height: 1.45; font-weight: 500; text-wrap: pretty;
}
.mbx__row { display: flex; align-items: flex-start; gap: 14px; }
.mbx__avatar {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(22,41,79,.10); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: #8f99a9;
}
.mbx__say {
  max-width: 86%; background: #f2f4f8; border-radius: 11px; padding: 14px 18px;
  font-size: 14px; line-height: 1.45; color: #2b3a55; text-wrap: pretty;
}
.mbx__say.wide { max-width: 94%; }
.mbx__say.indent { margin-left: 51px; max-width: calc(94% - 51px); }

.mbx__gen {
  margin-left: 51px; max-width: calc(94% - 51px);
  background: #f2f4f8; border-radius: 11px; padding: 18px 19px 19px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #2b3a55;
}
.mbx__genhead { display: flex; align-items: center; gap: 9px; color: #2b3a55; }
.mbx__files { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mbx__file {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-size: 12.5px; color: #2b3a55;
}
.mbx__file.pending { color: #9aa3b2; }
.mbx__tag {
  flex: none; background: #e4e8ef; border-radius: 5px; padding: 4px 8px;
  font-size: 11.5px; color: #5b6472;
}
.mbx__file.pending .mbx__tag { background: transparent; color: #9aa3b2; }

.mbx__checks {
  margin-left: 51px; max-width: calc(94% - 51px);
  background: #f2f4f8; border-radius: 11px; padding: 17px 19px;
  font-family: 'IBM Plex Mono', monospace; display: flex; flex-direction: column; gap: 8px;
}
.mbx__check { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #2b3a55; }
.mbx__check span:first-child { color: #3f9a72; font-size: 13px; }

.mbx__input {
  margin-top: 6px; display: flex; align-items: center; gap: 13px;
  border: 1px solid rgba(22,41,79,.10); border-radius: 11px; padding: 13px 13px 13px 18px;
  background: #fbfcfd;
}
.mbx__input em {
  flex: 1; font-style: normal; font-size: 14px; color: #9aa3b2;
  display: flex; align-items: center; gap: 10px;
}
.mbx__input em::before {
  content: ''; width: 13px; height: 9px; flex: none;
  border: 1.2px solid #c3cad6; border-radius: 3px;
}
.mbx__send {
  flex: none; width: 41px; height: 41px; border-radius: 9px; background: #16294f;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15.5px;
}

.theme-dark .mbx { background: #0d1b3f; border-color: rgba(255,255,255,.10); box-shadow: 0 40px 79px -53px rgba(0,0,0,.8); }
.theme-dark .mbx__bar { background: #10234f; border-bottom-color: rgba(255,255,255,.07); }
.theme-dark .mbx__bar i { background: #33436b; }
.theme-dark .mbx__bar span { color: #6c7a9c; }
.theme-dark .mbx__ask { background: #2f4c8f; color: #f3f6fc; }
.theme-dark .mbx__avatar { background: #10234f; border-color: rgba(255,255,255,.10); color: #8492ad; }
.theme-dark .mbx__say, .theme-dark .mbx__gen, .theme-dark .mbx__checks { background: #10234f; color: #dbe4f5; }
.theme-dark .mbx__check { color: #dbe4f5; }
.theme-dark .mbx__check span:first-child { color: #5fbf94; }
.theme-dark .mbx__genhead, .theme-dark .mbx__file { color: #dbe4f5; }
.theme-dark .mbx__file.pending { color: #6c7a9c; }
.theme-dark .mbx__tag { background: #1c3160; color: #aab4c7; }
.theme-dark .mbx__file.pending .mbx__tag { background: transparent; color: #6c7a9c; }
.theme-dark .mbx__input { background: #10234f; border-color: rgba(255,255,255,.10); }
.theme-dark .mbx__input em { color: #6c7a9c; }
.theme-dark .mbx__input em::before { border-color: #33436b; }
.theme-dark .mbx__send { background: #2f4c8f; color: #f3f6fc; }

@media (max-width: 860px) {
  .mbx__body { padding: 19px 17px; }
  .mbx__ask, .mbx__say, .mbx__say.wide { max-width: 90%; }
  .mbx__gen, .mbx__checks, .mbx__say.indent { margin-left: 0; max-width: 100%; }
  .mbx__bar span { display: none; }
  /* long path names have no spaces — let them break so the tag stays inside */
  .mbx__file > span:first-child { min-width: 0; overflow-wrap: anywhere; }
}


/* ============ "Power for your teams. Control for your org." (homepage) ============ */
.ent { padding: 120px 0 0; --muted: #a2a9b4; }
.ent__inner { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.ent__title {
  margin: 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(40px, 4.4vw, 62px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.02; color: #16294f;
}
.ent__title .dim { color: var(--muted); }
.ent__copy {
  margin: 28px 0 0; max-width: 32em;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: #97a3a3; text-wrap: pretty;
}

.ent__list { margin-top: 70px; display: flex; flex-direction: column; gap: 20px; }
.ent__card {
  background: #f7f8fa; border: 1px solid #eef1f0; border-radius: 20px; padding: 52px 56px;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  column-gap: 56px; align-items: center;
}
.ent__side { min-width: 0; }
.ent__eyebrow { display: flex; align-items: center; gap: 14px; }
.ent__num {
  width: 38px; height: 38px; border-radius: 10px; background: #e7e9f5;
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 500; color: #4a5bd0;
}
.ent__label {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  letter-spacing: .14em; color: #16294f;
}
.ent__h {
  margin: 26px 0 0; font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 30px;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: #16294f; text-wrap: balance;
}
.ent__p { margin: 20px 0 0; max-width: 26em; font-size: 16px; line-height: 1.6; color: #6b7779; text-wrap: pretty; }

.ent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ent__tile {
  background: #fff; border: 1px solid #eaedec; border-radius: 12px; padding: 20px 22px;
  display: flex; gap: 12px; align-items: baseline;
  font-size: 15.5px; line-height: 1.4; color: #1a2327; text-wrap: pretty;
}
.ent__arrow { flex: none; font-size: 15px; color: #4a5bd0; }

/* the video band sits between two dark sections - carry the dark ground through */
.theme-dark .ent { background: #0b183a; }
.theme-dark .ent__title { color: #f3f6fc; }
.theme-dark .ent__title .dim { color: rgb(108, 122, 156); }
.theme-dark .ent__copy { color: #aab4c7; }
.theme-dark .ent__card { background: #0d1b3f; border-color: rgba(255,255,255,.08); }
.theme-dark .ent__num { background: #1b2c56; color: #e8eefb; }
.theme-dark .ent__label { color: #fff; }
.theme-dark .ent__h { color: #f3f6fc; }
.theme-dark .ent__p { color: #aab4c7; }
.theme-dark .ent__tile { background: #101f45; border-color: rgba(255,255,255,.08); color: #dbe4f5; }
.theme-dark .ent__arrow { color: #8492ad; }

/* ============ Our manifesto ============
   Two-column statement: copy left, artwork right. Palette and type follow
   the .ent / .bym blocks; the art sits borderless on the section background. */
.mfs { background: #fff; padding: 120px 0 80px; overflow: hidden; }
.mfs__inner {
  max-width: 1180px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: 72px; align-items: center;
}
.mfs__side { min-width: 0; }
.mfs__eyebrow {
  display: block; font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px; letter-spacing: .14em; color: #97a3a3;
}
.mfs__title {
  margin: 18px 0 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(38px, 4.4vw, 58px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.025em; color: #16294f; text-wrap: balance;
}
.mfs__lead {
  margin: 26px 0 0; max-width: 30em; font-family: 'Outfit', sans-serif;
  font-size: 18.5px; line-height: 1.6; color: #3f4b5c; text-wrap: pretty;
}
.mfs__copy {
  margin: 22px 0 0; max-width: 30em; font-family: 'Outfit', sans-serif;
  font-size: 17px; line-height: 1.7; color: #8a94a4; text-wrap: pretty;
}
.mfs__cta {
  display: inline-block; margin-top: 36px; text-decoration: none;
  background: #16294f; color: #fff;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: .06em;
  padding: 14px 24px; border-radius: 8px;
  transition: background .2s, box-shadow .2s;
}
.mfs__cta:hover { background: #0f1d3a; box-shadow: 0 10px 24px rgba(22,41,79,.3); }

/* The artwork is inlined rather than an <img> so these tokens reach it — an
   external SVG renders in its own document, where the page's vars don't apply.
   The SVG carries light-mode fallbacks; these restate them and flip for dark. */
.mfs__frame {
  aspect-ratio: 4 / 3;
  --mi-paper:      #ffffff;
  --mi-paper-line: rgba(22, 41, 79, .12);
  --mi-shadow:     rgba(10, 20, 40, .18);
  --mi-title:      rgba(22, 41, 79, .9);
  --mi-ink:        rgba(22, 41, 79, .3);
  --mi-ink-strong: rgba(22, 41, 79, .5);
  --mi-sig:        rgba(74, 108, 178, .9);
  --mi-sig-soft:   rgba(74, 108, 178, .5);
  --mi-well:       #ffffff;
  --mi-well-line:  rgba(22, 41, 79, .2);
  --mi-well-mouth: #0a1428;
  --mi-pen:        #16294f;
  --mi-pen-line:   rgba(231, 235, 243, .35);
  --mi-pen-band:   rgba(231, 235, 243, .8);
  --mi-nib:        #eef0f4;
}
.mfs__svg { display: block; width: 100%; height: 100%; transform: scale(1.2); transform-origin: center; }

.theme-dark .mfs { background: #0b183a; }
.theme-dark .mfs__eyebrow { color: #6c7a9c; }
.theme-dark .mfs__title { color: #f3f6fc; }
.theme-dark .mfs__lead { color: #dfe6f2; }
.theme-dark .mfs__copy { color: #8b97b0; }
.theme-dark .mfs__cta { background: #eef2f8; color: #0d1b38; }
.theme-dark .mfs__cta:hover { background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
/* Dark: the sheet lifts off the ground instead of going white, and the ink
   inverts to a light tint. A pure-white page here would blow out the section. */
.theme-dark .mfs__frame {
  --mi-paper:      #1b2c56;
  --mi-paper-line: rgba(255, 255, 255, .10);
  --mi-shadow:     rgba(0, 0, 0, .45);
  --mi-title:      rgba(234, 240, 251, .95);
  --mi-ink:        rgba(195, 208, 234, .35);
  --mi-ink-strong: rgba(195, 208, 234, .62);
  --mi-sig:        rgba(148, 154, 255, .9);
  --mi-sig-soft:   rgba(148, 154, 255, .5);
  --mi-well:       #24406f;
  --mi-well-line:  rgba(255, 255, 255, .10);
  --mi-well-mouth: #0a1428;
  --mi-pen:        #2f4c8f;
  --mi-pen-line:   rgba(231, 235, 243, .35);
  --mi-pen-band:   rgba(231, 235, 243, .8);
  --mi-nib:        #eef0f4;
}

@media (max-width: 900px) {
  .mfs { padding: 90px 0 60px; }
  .mfs__inner { grid-template-columns: 1fr; row-gap: 44px; padding: 0 22px; }
}

@media (max-width: 1024px) {
  .ent__card { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 44px 36px; }
  .ent__p { max-width: none; }
}
@media (max-width: 640px) {
  .ent { padding-top: 80px; }
  .ent__inner { padding: 0 22px; }
  .ent__grid { grid-template-columns: 1fr; }
}


/* ============ "Everything your security review will ask for." (homepage) ============ */
.sdp { background: #f2f4f8; padding: 116px 0; --muted: #a2a9b4; }
.sdp__inner { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.sdp__head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  column-gap: 56px; align-items: start;
}
.sdp__eyebrow {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  letter-spacing: .14em; color: #8a9597;
}
.sdp__title {
  margin: 26px 0 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(36px, 3.8vw, 57px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.06; color: #16294f;
  text-wrap: balance;
}
.sdp__copy {
  margin: 8px 0 0; font-size: 19px;
  line-height: 1.55; color: var(--muted); text-wrap: pretty;
}

.sdp__grid { margin-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sdp__card {
  background: #fff; border: 1px solid #e8ebf0; border-radius: 16px; padding: 28px 24px 32px;
}
.sdp__icon {
  width: 44px; height: 44px; border-radius: 11px; background: #f1f3f7;
  display: flex; align-items: center; justify-content: center;
}
.sdp__icon i { width: 15px; height: 15px; border: 2px solid #16294f; border-radius: 5px; display: block; }
.sdp__name {
  margin: 28px 0 0; font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #16294f;
}
.sdp__desc { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: #5b6472; text-wrap: pretty; }

.theme-dark .sdp { background: #0b183a; }
.theme-dark .sdp__eyebrow { color: #7f8caa; }
.theme-dark .sdp__title { color: #f3f6fc; }
.theme-dark .sdp__copy { color: #aab4c7; }
.theme-dark .sdp__card { background: #0d1b3f; border-color: rgba(255,255,255,.08); }
.theme-dark .sdp__icon { background: #1b2c56; }
.theme-dark .sdp__icon i { border-color: #c3d0ea; }
.theme-dark .sdp__name { color: #f3f6fc; }
.theme-dark .sdp__desc { color: #aab4c7; }

/* Use-cases grid band: continues the hero's grey ground behind the cards. */
.uc-band { background: #f4f5f8; }
.theme-dark .uc-band { background: #0b183a; }

/* ===== Security page bands =====
   Every band is an inset rounded panel with a gutter of page ground between
   them; deployment and the closing CTA are deep-navy inversions. */
.sec-band { border-radius: 24px; margin: 10px 10px 0; overflow: hidden; }
.sec-cta.sec-band { margin-bottom: 10px; }
.sec-hero {
  position: relative; overflow: hidden; text-align: center;
  background: #f4f5f8; padding: 96px 48px 88px;
}
.sec-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(22, 41, 79, .10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, black 25%, transparent 78%);
}
.sec-hero__cross { position: absolute; top: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #a9b0bc; user-select: none; }
.sec-hero__cross--left  { left: 32px; }
.sec-hero__cross--right { right: 32px; }
.sec-hero__inner { position: relative; max-width: 900px; margin: 0 auto; }
.sec-hero__pill {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: .18em; color: #8a9597; background: #fff;
  border: 1px solid #e3e6ee; border-radius: 999px; padding: 8px 18px;
}
.sec-hero__title {
  margin: 30px 0 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(46px, 5.2vw, 80px); line-height: 1.04; font-weight: 600;
  letter-spacing: -.035em; color: #16294f; text-wrap: balance;
}
.sec-hero__title .dim { color: #a2a9b4; }
.sec-hero__lead { margin: 26px auto 0; max-width: 710px; font-size: 17.5px; font-weight: 500; line-height: 1.65; color: #5b6472; text-wrap: pretty; }
.sec-hero__actions { margin-top: 34px; display: flex; justify-content: center; gap: 12px; }
.sec-btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .08em;
  padding: 14px 24px; border-radius: 8px;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.sec-btn--primary { background: #16294f; color: #fff; border: 1px solid #16294f; }
.sec-btn--primary:hover { background: #0d1b38; border-color: #0d1b38; }
.sec-btn--ghost { background: #fff; color: #16294f; border: 1px solid rgba(22, 41, 79, .22); }
.sec-btn--ghost:hover { border-color: #16294f; }
.sec-hero__meta {
  margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .14em; color: #8a9597;
}
.sec-hero__meta span::before { content: '•'; margin-right: 9px; color: #b9c0cd; }

.sec-dep { background: #0d1734; padding: 110px 0; }
.sec-dep__inner { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.sec-dep__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .14em; color: #8b97b0; }
.sec-dep__title {
  margin: 22px 0 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(36px, 3.8vw, 58px); font-weight: 600; line-height: 1.06;
  letter-spacing: -.03em; color: #f3f6fc; max-width: 14em; text-wrap: balance;
}
.sec-dep__grid { margin-top: 54px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sec-dep__card {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 26px 26px 30px;
}
.sec-dep__cardtop { display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
.sec-dep__num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em; color: #8b97b0; }
.sec-dep__badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em;
  color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 3px; padding: 3px 7px;
}
.sec-dep__name { margin: 16px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #f3f6fc; }
.sec-dep__desc { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #aab4c7; text-wrap: pretty; }

.sec-flow { background: #f4f5f8; padding: 110px 0; }
.sec-flow__inner {
  max-width: 1320px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: 72px; align-items: center;
}
.sec-flow__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .14em; color: #8a9597; }
.sec-flow__title {
  margin: 22px 0 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 3.2vw, 48px); font-weight: 600; line-height: 1.08;
  letter-spacing: -.03em; color: #16294f; text-wrap: balance;
}
.sec-flow__copy { margin: 22px 0 0; font-size: 16.5px; line-height: 1.65; color: #5b6472; text-wrap: pretty; }
.sec-flow__list { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.sec-flow__item { display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.55; color: #5b6472; text-wrap: pretty; }
.sec-flow__itemnum { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #8a9597; flex-shrink: 0; }

.sec-diag {
  background: #fff; border: 1px solid #e8ebf0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -45px rgba(16, 24, 27, .35);
}
.sec-diag__bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid #edf0f4; }
.sec-diag__dots { display: flex; gap: 5px; }
.sec-diag__dots i { width: 8px; height: 8px; border-radius: 50%; background: #dfe3ea; }
.sec-diag__label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; color: #8a9597; }
.sec-diag__body { padding: 28px; }
.sec-diag__zone { border: 1.5px dashed #c9d0dd; border-radius: 10px; padding: 22px; }
.sec-diag__zonelabel { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; color: #8a9597; }
.sec-diag__node {
  margin-top: 14px; background: #f2f4f8; border: 1px solid #e3e6ee; border-radius: 8px;
  padding: 13px 10px; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .12em; color: #33415c;
}
.sec-diag__link { width: 1px; height: 14px; background: #c9d0dd; margin: 14px auto 0; }
.sec-diag__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec-diag__foot { margin-top: 20px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; color: #8a9597; }

.sec-cta {
  background: radial-gradient(ellipse 55% 70% at 50% 0%, #1d3059 0%, #0d1734 60%);
  padding: 130px 48px; text-align: center;
}
.sec-cta__title {
  margin: 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; font-weight: 600;
  letter-spacing: -.035em; color: #f3f6fc; text-wrap: balance;
}
.sec-cta__title .dim { color: #8b97b0; }
.sec-cta__copy { margin: 24px auto 0; max-width: 550px; font-size: 16px; line-height: 1.6; color: #aab4c7; text-wrap: pretty; }
.sec-cta__actions { margin-top: 36px; display: flex; justify-content: center; gap: 12px; }
.sec-btn--light { background: #eef2f8; color: #0d1b38; border: 1px solid #eef2f8; }
.sec-btn--light:hover { background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
.sec-btn--outline { background: transparent; color: #dfe6f2; border: 1px solid rgba(255, 255, 255, .28); }
.sec-btn--outline:hover { border-color: #fff; color: #fff; }

.theme-dark .sec-hero {
  background: radial-gradient(ellipse 90% 70% at 50% -10%, #1a2c52 0%, #0f1f42 45%, #0b183a 100%);
}
.theme-dark .sec-hero__grid { background-image: radial-gradient(circle, rgba(255, 255, 255, .10) 1px, transparent 1px); }
.theme-dark .sec-hero__cross { color: #4a5878; }
.theme-dark .sec-hero__pill { background: #0d1b3f; border-color: rgba(255, 255, 255, .12); color: #7f8caa; }
.theme-dark .sec-hero__title { color: #f3f6fc; }
.theme-dark .sec-hero__title .dim { color: #7f8caa; }
.theme-dark .sec-hero__lead { color: #aab4c7; }
.theme-dark .sec-btn--primary { background: #eaf0fb; color: #0b183a; border-color: #eaf0fb; }
.theme-dark .sec-btn--primary:hover { background: #fff; border-color: #fff; }
.theme-dark .sec-btn--ghost { background: #0d1b3f; color: #eaf0fb; border-color: rgba(255, 255, 255, .18); }
.theme-dark .sec-btn--ghost:hover { border-color: rgba(255, 255, 255, .45); }
.theme-dark .sec-hero__meta { color: #7f8caa; }
.theme-dark .sec-hero__meta span::before { color: #4a5878; }
.theme-dark .sec-dep { background: #0f1f42; }
.theme-dark .sec-dep__badge { color: #eaf0fb; border-color: rgba(255, 255, 255, .4); }
.theme-dark .sec-flow { background: #0b183a; }
.theme-dark .sec-flow__eyebrow { color: #7f8caa; }
.theme-dark .sec-flow__title { color: #f3f6fc; }
.theme-dark .sec-flow__copy, .theme-dark .sec-flow__item { color: #aab4c7; }
.theme-dark .sec-flow__itemnum { color: #7f8caa; }
.theme-dark .sec-diag { background: #0d1b3f; border-color: rgba(255, 255, 255, .10); box-shadow: none; }
.theme-dark .sec-diag__bar { border-bottom-color: rgba(255, 255, 255, .08); }
.theme-dark .sec-diag__dots i { background: #1b2c56; }
.theme-dark .sec-diag__zone { border-color: rgba(255, 255, 255, .22); }
.theme-dark .sec-diag__node { background: #101f45; border-color: rgba(255, 255, 255, .10); color: #c3d0ea; }
.theme-dark .sec-diag__link { background: #33415c; }
.theme-dark .sec-cta { background: radial-gradient(ellipse 55% 70% at 50% 0%, #1a2c52 0%, #0f1f42 60%); }

@media (max-width: 1024px) {
  .sdp { padding: 100px 0; }
  .sdp__head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .sdp__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sdp__inner { padding: 0 22px; }
  .sdp__grid { grid-template-columns: 1fr; }
}

/* ============ Dark mode for the inline-styled sub-pages ============
   The exported pages carry their palette in inline style attributes, so their
   dark values are hooked on dk-* classes added to the same elements. Only
   .theme-dark is affected - light mode renders from the inline styles alone. */
html.theme-dark, html.theme-dark body { background: #0b183a; }
.theme-dark .dk-page      { background: #0b183a !important; }
.theme-dark .dk-surface   { background: #0d1b3f !important; }
.theme-dark .dk-surface-2 { background: #101f45 !important; }
.theme-dark .dk-ink       { color: #eaf0fb !important; }
.theme-dark .dk-body      { color: #aab4c7 !important; }
.theme-dark .dk-muted     { color: #7f8caa !important; }
.theme-dark .dk-border    { border-color: rgba(255, 255, 255, .12) !important; }

/* per-page link colors defined in each export's own <style> block */
.theme-dark [data-sc-name="architect"] a { color: #949aff; }
.theme-dark [data-sc-name="architect"] a:hover { color: #b9bdff; }
.theme-dark [data-sc-name="hackathon"] a { color: #eaf0fb; }
.theme-dark .dk-accent { color: #6fd3a8 !important; }

/* Solid CTA button: the light-mode near-black ground disappears against the
   dark page, so invert it to the light-on-dark pairing the dark theme uses. */
.theme-dark .dk-cta { background: #eaf0fb !important; color: #0b183a !important; }
.theme-dark .dk-indigo { color: #949aff !important; }

/* ============ Site chrome + homepage sections ============ */
/* Two tiers, both prefixed because style.css is shared by every page and the
   bare names `page`, `nav`, `faq` and `cta` are already taken elsewhere in dist/:
     site-*  chrome reused across pages (page shell, nav, closing CTA, footer)
     hp-*    homepage-only sections (features, video, pricing, FAQ, newsletter)
   A page-specific block gets its own prefix instead — see mf-* for /manifesto. */

/* Page shell. No min-width: the site is responsive — pages reflow through the
   max-width breakpoints in this file, and the mobile menu (end of file) takes
   over the nav below 1360px. */
.site-page {
  background: #fff;
  color: #10181b;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
/* The shell shows through wherever a section paints no ground of its own. */
.theme-dark .site-page { background: #0b183a; color: #eaf0fb; }

/* ===== Features strip (001-004) ===== */
.hp-feat {
  background: #f7f8fa; margin: 0; border-radius: 0; overflow: hidden;
  border-top: 1px solid rgba(22, 41, 79, .22);
  border-bottom: 1px solid rgba(22, 41, 79, .22);
}
.hp-feat__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hp-feat__cell { padding: 36px 40px 48px; }
.hp-feat__cell + .hp-feat__cell { border-left: 1px solid rgba(22, 41, 79, .22); }
.hp-feat__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .22em; color: #9aa0a8;
}
.hp-feat__title {
  margin-top: 20px; font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: #10181b;
}
.hp-feat__desc {
  margin-top: 12px; font-family: 'Space Grotesk', sans-serif;
  font-size: 16.5px; line-height: 1.55; color: #5d646c;
}

.theme-dark .hp-feat {
  background: #0b183a;
  border-top-color: rgba(255, 255, 255, .24);
  border-bottom-color: rgba(255, 255, 255, .24);
}
.theme-dark .hp-feat__cell + .hp-feat__cell { border-left-color: rgba(255, 255, 255, .24); }
.theme-dark .hp-feat__num { color: #7f8caa; }
.theme-dark .hp-feat__title { color: #dfe6f2; }
.theme-dark .hp-feat__desc { color: #7f8caa; }

/* ===== Pricing =====
   Follows the .sdp / .ent band system: tinted ground in light, #0b183a in dark,
   navy ink, IBM Plex Mono eyebrow, Outfit display. The featured plan inverts to
   navy on the light band and lifts to a bordered surface on the dark one, so it
   reads as emphasis in both themes rather than as a second theme. */
.hp-pri { background: #f2f4f8; padding: 50px 0 130px; }
.hp-pri__inner { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.hp-pri__eyebrow {
  text-align: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: .14em; color: #8a9597;
}
.hp-pri__title {
  margin: 26px auto 0; max-width: 16em; text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(40px, 4.4vw, 62px); font-weight: 600;
  line-height: 1.02; letter-spacing: -0.03em; color: #16294f; text-wrap: balance;
}
.hp-pri__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 70px auto 0; max-width: 1140px; align-items: stretch;
}
/* Three ~360px cards need the full measure; below it they stack as a single
   centered column (the 700px block keeps the tighter phone spacing). */
@media (max-width: 1080px) {
  .hp-pri__grid { grid-template-columns: 1fr; max-width: 560px; }
}
.hp-pri__card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e8ebf0; border-radius: 16px;
  padding: 30px 28px 34px;
}
.hp-pri__head { display: flex; align-items: center; gap: 10px; }
.hp-pri__name {
  margin: 0; font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #16294f;
}
.hp-pri__badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em;
  color: #4a5bd0; background: #e7e9f5; border-radius: 100px; padding: 5px 10px;
}
.hp-pri__price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.hp-pri__amount {
  font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; color: #16294f;
}
.hp-pri__period {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: .08em; color: #8a9597;
}
.hp-pri__blurb {
  margin: 16px 0 0; font-size: 15.5px; line-height: 1.55;
  color: #5b6472; min-height: 2.8em; text-wrap: pretty;
}
.hp-pri__rule { height: 1px; background: #e8ebf0; margin: 24px 0; }
.hp-pri__feats { display: flex; flex-direction: column; gap: 12px; }
.hp-pri__feat {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 15px; line-height: 1.45; color: #5b6472; text-wrap: pretty;
}
.hp-pri__tick { flex: none; color: #2e7d5b; }
.hp-pri__spacer { flex: 1 1 0%; }
.hp-pri__cta {
  margin-top: 30px; text-align: center; text-decoration: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .06em;
  padding: 14px 0; border-radius: 8px;
  background: #fff; color: #16294f; border: 1px solid rgba(22, 41, 79, .22);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.hp-pri__cta:hover { background: #fbfcfe; border-color: #16294f; }
.hp-pri__note { text-align: center; margin-top: 36px; font-size: 15px; color: #8a9597; text-wrap: pretty; }

/* Featured plan on the light band — navy ground, light ink. */
.hp-pri__card--feat { background: #16294f; border-color: #16294f; }
.hp-pri__card--feat .hp-pri__name,
.hp-pri__card--feat .hp-pri__amount { color: #f3f6fc; }
.hp-pri__card--feat .hp-pri__badge { background: rgba(255, 255, 255, .14); color: #dfe6f2; }
.hp-pri__card--feat .hp-pri__period { color: #8b97b0; }
.hp-pri__card--feat .hp-pri__blurb,
.hp-pri__card--feat .hp-pri__feat { color: #aab4c7; }
.hp-pri__card--feat .hp-pri__rule { background: rgba(255, 255, 255, .12); }
.hp-pri__card--feat .hp-pri__tick { color: #6fd3a8; }
.hp-pri__card--feat .hp-pri__cta { background: #eef2f8; color: #0d1b38; border-color: #eef2f8; }
.hp-pri__card--feat .hp-pri__cta:hover { background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }

.theme-dark .hp-pri { background: #0b183a; }
.theme-dark .hp-pri__eyebrow { color: #7f8caa; }
.theme-dark .hp-pri__title { color: #f3f6fc; }
.theme-dark .hp-pri__card { background: #0d1b3f; border-color: rgba(255, 255, 255, .08); }
.theme-dark .hp-pri__name,
.theme-dark .hp-pri__amount { color: #f3f6fc; }
.theme-dark .hp-pri__badge { background: #1b2c56; color: #c3d0ea; }
.theme-dark .hp-pri__period { color: #7f8caa; }
.theme-dark .hp-pri__blurb,
.theme-dark .hp-pri__feat { color: #aab4c7; }
.theme-dark .hp-pri__rule { background: rgba(255, 255, 255, .10); }
.theme-dark .hp-pri__tick { color: #6fd3a8; }
.theme-dark .hp-pri__cta { background: transparent; color: #dfe6f2; border-color: rgba(255, 255, 255, .24); }
.theme-dark .hp-pri__cta:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .5); color: #fff; }
.theme-dark .hp-pri__note { color: #7f8caa; }

/* On the dark band the featured card lifts instead of inverting — a navy card on
   a navy ground needs the contrast to run the other way. */
.theme-dark .hp-pri__card--feat { background: #101f45; border-color: rgba(111, 211, 168, .30); }
.theme-dark .hp-pri__card--feat .hp-pri__badge { background: rgba(111, 211, 168, .16); color: #6fd3a8; }
.theme-dark .hp-pri__card--feat .hp-pri__cta { background: #eef2f8; color: #0d1b38; border-color: #eef2f8; }
.theme-dark .hp-pri__card--feat .hp-pri__cta:hover { background: #fff; color: #0d1b38; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }

@media (max-width: 700px) {
  .hp-pri { padding: 40px 0 90px; }
  .hp-pri__inner { padding: 0 22px; }
  .hp-pri__grid { grid-template-columns: 1fr; margin-top: 50px; }
  .hp-pri__blurb { min-height: 0; }
}

/* ===== FAQ =====
   Two-column: a sticky left rail (eyebrow, two-tone title, contact CTA) beside
   the accordion. Same band system as .hp-pri / .sdp — the hairline keeps it from
   merging with the pricing band above, which carries the same ground. */
.hp-faq { background: #f2f4f8; border-top: 1px solid rgba(22, 41, 79, .07); padding: 130px 0; }
.hp-faq__inner {
  max-width: 1180px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: 70px; align-items: start;
}
.hp-faq__side { position: sticky; top: 120px; min-width: 0; }
.hp-faq__eyebrow {
  display: block; font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: .14em; color: #8a9597;
}
.hp-faq__title {
  margin: 22px 0 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(34px, 3.6vw, 52px); font-weight: 700;
  line-height: 1.06; letter-spacing: -0.03em; color: #16294f;
}
.hp-faq__dim { display: block; color: #a2a9b4; }
.hp-faq__lead {
  margin: 28px 0 0; max-width: 22em;
  font-size: 17px; line-height: 1.6; color: #5b6472; text-wrap: pretty;
}
.hp-faq__cta {
  display: inline-block; margin-top: 30px; text-decoration: none;
  background: #fff; color: #16294f; border: 1px solid rgba(22, 41, 79, .18);
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .14em;
  padding: 16px 28px; border-radius: 12px;
  transition: background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.hp-faq__cta:hover { border-color: #16294f; box-shadow: 0 10px 24px rgba(22, 41, 79, .12); }

.hp-faq__list { min-width: 0; }
.hp-faq__item { border-bottom: 1px solid #dfe3ea; }
.hp-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 32px 0; font-family: 'Outfit', sans-serif;
  font-size: 20.5px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.3; color: #16294f; text-wrap: pretty;
}
/* Scoped: .faq-plus is also used by /hackathon, which styles it inline.
   The rotate-on-open rule at the top of this file keys off the bare class and
   turns the + into the ×. */
.hp-faq .faq-plus {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(22, 41, 79, .16);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; color: #8a9597;
  transition: transform .25s, background .2s, border-color .2s, color .2s;
}
.hp-faq__q:hover .faq-plus { border-color: rgba(22, 41, 79, .4); color: #16294f; }
/* The question is a real <h3> so agents, search engines and screen readers see
   the Q&A hierarchy. It inherits the row's type and carries the row's flex
   layout, so the rendering is identical to the <span> it replaced. */
.hp-faq__qtext {
  font: inherit; letter-spacing: inherit; color: inherit;
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px;
}

.hp-faq__item[open] .faq-plus { background: #e5e9f1; border-color: transparent; color: #16294f; }
.hp-faq__a {
  margin: 0; padding: 4px 0 36px; max-width: 44em;
  font-size: 16.5px; line-height: 1.68; color: #5b6472; text-wrap: pretty;
}

.theme-dark .hp-faq { background: #0b183a; border-top-color: rgba(255, 255, 255, .06); }
.theme-dark .hp-faq__eyebrow { color: #7f8caa; }
.theme-dark .hp-faq__title { color: #f3f6fc; }
.theme-dark .hp-faq__dim { color: #6c7a9c; }
.theme-dark .hp-faq__lead { color: #aab4c7; }
.theme-dark .hp-faq__cta { background: #eef2f8; color: #0d1b38; border-color: #eef2f8; }
.theme-dark .hp-faq__cta:hover { background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.theme-dark .hp-faq__item { border-bottom-color: rgba(255, 255, 255, .08); }
.theme-dark .hp-faq__q { color: #f3f6fc; }
.theme-dark .hp-faq .faq-plus { border-color: rgba(255, 255, 255, .18); color: #7f8caa; }
.theme-dark .hp-faq__q:hover .faq-plus { border-color: rgba(255, 255, 255, .45); color: #fff; }
.theme-dark .hp-faq__item[open] .faq-plus { background: #1b2c56; border-color: transparent; color: #dfe6f2; }
.theme-dark .hp-faq__a { color: #aab4c7; }
/* Links inside an answer keep the answer's own colour in every state - the
   browser's default blue is near-unreadable on the dark navy ground, and a
   visited link must not shift colour mid-sentence either. The underline
   follows currentColor, so the link still reads as a link. */
.theme-dark .hp-faq__a a,
.theme-dark .hp-faq__a a:visited,
.theme-dark .hp-faq__a a:hover,
.theme-dark .hp-faq__a a:focus,
.theme-dark .hp-faq__a a:active { color: #aab4c7; }

@media (max-width: 1000px) {
  .hp-faq { padding: 100px 0; }
  .hp-faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
  .hp-faq__side { position: static; }
  .hp-faq__lead { max-width: 32em; }
}
@media (max-width: 640px) {
  .hp-faq { padding: 80px 0; }
  .hp-faq__inner { padding: 0 22px; }
  .hp-faq__q { font-size: 18px; gap: 16px; padding: 24px 0; }
  .hp-faq__qtext { gap: 16px; }
  .hp-faq .faq-plus { width: 30px; height: 30px; font-size: 15px; }
}

/* ===== Newsletter =====
   The panel inverts against its page in BOTH themes so it reads as a distinct
   call to action rather than another card: navy on the light ground, white on
   the dark one. Every child therefore needs a value per theme. */
.hp-nws { max-width: 1180px; margin: 0 auto; padding: 110px 48px 0; }
.hp-nws__panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  column-gap: 56px; align-items: center;
  background: #16294f; border: 1px solid #16294f; border-radius: 20px;
  padding: 56px 56px;
}
.hp-nws__copy, .hp-nws__side { min-width: 0; }
.hp-nws__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: .14em; color: #8b97b0;
}
.hp-nws__title {
  margin: 18px 0 0; max-width: 18em; font-family: 'Outfit', sans-serif;
  font-size: clamp(24px, 2.2vw, 30px); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.025em; color: #f3f6fc; text-wrap: pretty;
}
.hp-nws__text {
  margin: 18px 0 0; max-width: 32em;
  font-size: 16px; line-height: 1.6; color: #aab4c7; text-wrap: pretty;
}
.hp-nws__form { display: flex; gap: 12px; }
.hp-nws__input {
  flex: 1 1 0%; min-width: 0;
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 15.5px;
  color: #16294f; background: #fff; border: 1px solid transparent;
  border-radius: 10px; padding: 15px 16px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.hp-nws__input::placeholder { color: #8a9597; }
.hp-nws__input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.hp-nws__btn {
  cursor: pointer; background: #4a5bd0; color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .14em;
  border: 1px solid #4a5bd0; padding: 0 26px; border-radius: 10px; white-space: nowrap;
  transition: background .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
.hp-nws__btn:hover { background: #3d4cba; border-color: #3d4cba; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.hp-nws__btn:disabled { cursor: default; opacity: .6; box-shadow: none; }
/* script.js owns this element's `display` at runtime and flags the outcome with
   data-ok, so the palette stays here and can theme. */
.hp-nws__status {
  margin: 12px 0 0; font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px; color: #aab4c7;
}
.hp-nws__status[data-ok="1"] { color: #6fd3a8; }
.hp-nws__status[data-ok="0"] { color: #ff9b9b; }

/* Dark ground -> white panel, and the ink flips back to navy. */
.theme-dark .hp-nws__panel { background: #fff; border-color: #fff; }
.theme-dark .hp-nws__eyebrow { color: #8a9597; }
.theme-dark .hp-nws__title { color: #16294f; }
.theme-dark .hp-nws__text { color: #5b6472; }
.theme-dark .hp-nws__input {
  background: #f4f5f8; border-color: rgba(22, 41, 79, .18); color: #16294f;
}
.theme-dark .hp-nws__input::placeholder { color: #8a9597; }
.theme-dark .hp-nws__input:focus { border-color: #16294f; box-shadow: 0 0 0 3px rgba(22, 41, 79, .10); }
.theme-dark .hp-nws__btn { background: #16294f; color: #fff; border-color: #16294f; }
.theme-dark .hp-nws__btn:hover { background: #0f1d3a; border-color: #0f1d3a; box-shadow: 0 10px 24px rgba(22, 41, 79, .3); }
.theme-dark .hp-nws__status { color: #5b6472; }
.theme-dark .hp-nws__status[data-ok="1"] { color: #2e7d5b; }
.theme-dark .hp-nws__status[data-ok="0"] { color: #c82626; }

@media (max-width: 900px) {
  .hp-nws { padding: 80px 22px 0; }
  .hp-nws__panel { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding: 40px 28px; }
  .hp-nws__title, .hp-nws__text { max-width: none; }
}
@media (max-width: 520px) {
  .hp-nws__form { flex-direction: column; }
  .hp-nws__btn { padding: 15px 0; }
}

/* ===== Closing CTA ===== */
.site-cta {
  padding: 120px 0 130px;
  background: linear-gradient(105deg, #0b183a 0%, #0f1f42 70%, #1a2c52 100%);
}
.site-cta__inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.site-cta__title {
  margin: 0; font-size: 36px; line-height: 1.4; font-weight: 500;
  letter-spacing: -.01em; color: #eaf0fb; max-width: 18em;
}
.site-cta__dim { color: #7a86a0; }
.site-cta__row { display: flex; align-items: center; gap: 14px; margin-top: 80px; }
.site-cta__btn {
  display: inline-block; text-decoration: none;
  background: #eef2f8; color: #0d1b38;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .06em;
  padding: 14px 24px; border-radius: 8px;
}
.site-cta__btn--ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #e7ebf3;
}

/* ===== Footer ===== */
/* Full-bleed band + inner container, like .hp-pri and .site-cta. The band must
   carry the background: putting it on a max-width element leaves the page shell
   showing through the gutters on viewports wider than 1440px. */
.site-ftr { background: #fff; font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; }
.site-ftr__inner { max-width: 1440px; margin: 0 auto; padding: 110px 48px 50px; }
.site-ftr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(150px, 200px));
  column-gap: 40px;
  border-top: 1px solid #e8ebf0; padding-top: 70px; margin-top: 0;
}
.site-ftr__logo { display: flex; align-items: baseline; gap: 0; }
.site-ftr__logoname,
.site-ftr__logotld {
  font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: #16294f;
}
.site-ftr__blurb { margin: 22px 0 0; font-size: 16.5px; line-height: 1.6; color: #5b6472; max-width: 22em; }
.site-ftr__socials { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.site-ftr__social { text-decoration: none; color: #16294f; font-size: 16px; }
.site-ftr__head {
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: #8a9597;
}
.site-ftr__links { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.site-ftr__link {
  text-decoration: none; color: #16294f; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
  transition: color .2s;
}
.site-ftr__link:hover, .site-ftr__social:hover { color: #4a5bd0; }
.site-ftr__bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #e8ebf0; margin-top: 70px; padding-bottom: 28px;
}
.site-ftr__copy { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #5b6472; }
.site-ftr__word {
  margin-top: 70px; text-align: center;
  font-size: clamp(90px, 17vw, 260px); font-weight: 700;
  letter-spacing: -.04em; line-height: .9; color: #16294f;
}

/* ===== Top nav =====
   The theme script at the bottom of index.html owns this header's background,
   box-shadow and backdrop-filter (repainted on scroll and on theme toggle) and
   the logo / link / button colours. Do not restate those properties here: a
   JS-set inline style outranks any rule in this file, so declarations below
   would be dead weight that still reads as authoritative.

   The matching inline values left in index.html are the LIGHT palette, and are
   only a first paint. Dark is the default theme, so a default load shows a
   light nav over the dark hero until the script runs. That predates this
   extraction and is unchanged by it; closing it means adding .theme-dark
   .site-nav rules, which is a visual change rather than a refactor.
   Everything static lives below. */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; margin: 0; border-radius: 0;
  position: sticky; top: 0; z-index: 50;
  transition: padding .3s, background .3s, box-shadow .3s, border-color .3s,
              backdrop-filter .3s, -webkit-backdrop-filter .3s;
}
.site-nav__brand { text-decoration: none; display: flex; align-items: baseline; gap: 7px; }
.site-nav__logoname {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  transition: color .25s;
}
.site-nav__links {
  display: flex; align-items: center; gap: 26px;
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
}
.site-nav__link { text-decoration: none; transition: color .25s; }
.site-nav__actions { display: flex; align-items: center; gap: 14px; }
.site-nav__cta {
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .06em;
  padding: 11px 20px; border-radius: 8px;
  transition: background .25s, color .25s;
}

/* Footer in dark mode. Ported from the /manifesto design, which had it and the
   homepage did not; the footer is shared chrome, so it themes on every page. */
.theme-dark .site-ftr { background: #0b183a; }
.theme-dark .site-ftr__grid { border-top-color: rgba(255, 255, 255, .08); }
.theme-dark .site-ftr__bottom { border-bottom-color: rgba(255, 255, 255, .08); }
.theme-dark .site-ftr__logoname,
.theme-dark .site-ftr__logotld { color: #f3f6fc; }
.theme-dark .site-ftr__head { color: #6c7a9c; }
.theme-dark .site-ftr__blurb,
.theme-dark .site-ftr__copy { color: #aab4c7; }
/* The extra .site-ftr ancestor outranks the per-page dark anchor colors
   (.theme-dark [data-sc-name="…"] a) that would otherwise leak into this
   shared footer on pages like /architect. */
.theme-dark .site-ftr .site-ftr__social,
.theme-dark .site-ftr .site-ftr__link { color: #f3f6fc; }
.theme-dark .site-ftr__word { color: #16294f; }
.theme-dark .site-ftr .site-ftr__link:hover,
.theme-dark .site-ftr .site-ftr__social:hover { color: #949aff; }

/* ============ /privacy, /terms — legal pages ============
   Minimal prose layout on the shared shell and the site's navy tokens. The copy
   is placeholder: replace the body text before these are treated as binding. */
.lgl { background: #fff; padding: 90px 0 40px; }
.lgl__wrap { max-width: 780px; margin: 0 auto; padding: 0 48px; }
main[data-screen-label="Terms"] .lgl__wrap, main[data-screen-label="Privacy"] .lgl__wrap { max-width: 999px; }
.lgl__eyebrow {
  display: block; font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: .14em; color: #8a9597;
}
.lgl__title {
  margin: 22px 0 0; font-family: 'Outfit', sans-serif;
  font-size: clamp(34px, 3.6vw, 52px); font-weight: 700;
  line-height: 1.06; letter-spacing: -0.03em; color: #16294f;
}
.lgl__meta {
  margin: 18px 0 0; font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: .08em; color: #8a9597;
}
.lgl__note {
  margin: 40px 0 0; padding: 18px 20px; border-radius: 12px;
  background: #f7f8fa; border: 1px solid #e8ebf0;
  font-size: 15px; line-height: 1.6; color: #5b6472;
}
.lgl__body { margin-top: 40px; }
.lgl__body h2 {
  margin: 44px 0 0; font-family: 'Outfit', sans-serif;
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #16294f;
}
.lgl__body h2:first-child { margin-top: 0; }
.lgl__body p, .lgl__body li {
  margin: 16px 0 0; font-size: 16.5px; line-height: 1.7; color: #5b6472; text-wrap: pretty;
}
.lgl__body ul { margin: 8px 0 0; padding-left: 22px; }
.lgl__body h3 {
  margin: 28px 0 0; font-family: 'Outfit', sans-serif;
  font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; color: #16294f;
}
.lgl__body strong { font-weight: 600; color: #3a4556; }
.lgl__body a { color: #4a5bd0; }

.theme-dark .lgl { background: #0b183a; }
.theme-dark .lgl__eyebrow, .theme-dark .lgl__meta { color: #7f8caa; }
.theme-dark .lgl__title, .theme-dark .lgl__body h2, .theme-dark .lgl__body h3 { color: #f3f6fc; }
.theme-dark .lgl__body p, .theme-dark .lgl__body li { color: #aab4c7; }
.theme-dark .lgl__body strong { color: #d6dcea; }
.theme-dark .lgl__note { background: #0d1b3f; border-color: rgba(255, 255, 255, .08); color: #aab4c7; }
.theme-dark .lgl__body a { color: #949aff; }

@media (max-width: 640px) {
  .lgl { padding: 60px 0 20px; }
  .lgl__wrap { padding: 0 22px; }
}

/* ============ /manifesto — editorial article ============ */
/* Token-driven: dark mode re-points the custom properties rather than restating
   every colour, so only the handful of gradients below need a .theme-dark rule.
   .mf-page follows .site-page in the cascade and re-skins the shared shell. */
.mf-page {
  --navy:      #16294f;
  --body:      #4d5666;
  --muted:     #7d8593;
  --muted-2:   #a2a9b4;
  --surface:   #f4f5f8;
  --line-soft: rgba(22, 41, 79, .07);
  --accent:    #2e7d5b;
  --mono:      'IBM Plex Mono', monospace;
  --display:   'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sans:      'Outfit', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  background: var(--surface);
  color: var(--navy);
  font-family: var(--sans);
}
.mf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }

.mf-head {
  position: relative; overflow: hidden;
  background: var(--surface); padding: 96px 48px 26px; text-align: center;
}
.mf-head__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(22, 41, 79, .10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, black 25%, transparent 78%);
}
.mf-head__glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 720px; height: 340px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(22, 41, 79, .07), transparent 70%);
}
.mf-head__cross {
  position: absolute; top: 28px;
  font-family: var(--mono); font-size: 11px; color: #a9b0bc; user-select: none;
}
.mf-head__cross--left  { left: 32px; }
.mf-head__cross--right { right: 32px; }
.mf-head__inner { position: relative; max-width: 900px; margin: 0 auto; }
.mf-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--muted);
}
.mf-title {
  margin: 34px 0 0; font-size: clamp(56px, 6.6vw, 96px); line-height: 1.02;
  font-weight: 600; letter-spacing: -.035em; color: var(--navy); text-wrap: balance;
}
.mf-lead {
  margin: 30px auto 0; max-width: 700px;
  font-size: 22px; line-height: 1.55; color: var(--body); text-wrap: pretty;
}

.mf-body { background: var(--surface); padding: 72px 48px 120px; }
.mf-prose { max-width: 720px; margin: 0 auto; }
.mf-sec { scroll-margin-top: 100px; }
.mf-sec + .mf-sec { margin-top: 74px; }
.mf-sec__title {
  margin: 0; font-size: 30px; line-height: 1.25; font-weight: 600;
  letter-spacing: -.02em; color: var(--navy); text-wrap: pretty;
}
.mf-sec__p {
  margin: 26px 0 0; font-size: 18.5px; line-height: 1.78;
  color: var(--body); text-wrap: pretty;
}

.mf-sign { background: #e9ecf3; padding: 110px 0; border-top: 1px solid var(--line-soft); }
.mf-sign__quote {
  margin: 0; font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; font-weight: 600;
  letter-spacing: -.025em; color: var(--navy); max-width: 20em; text-wrap: pretty;
}
.mf-sign__by {
  margin-top: 44px; display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; color: var(--body);
}
.mf-sign__dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Dark: re-point the tokens, then only what a token cannot express. */
.theme-dark .mf-page {
  --navy:      #f3f6fc;
  --body:      #aab4c7;
  --muted:     #7a86a0;
  --muted-2:   #6c7a9c;
  --surface:   #0b183a;
  --line-soft: rgba(255, 255, 255, .07);
}
.theme-dark .mf-head {
  background: radial-gradient(ellipse 90% 70% at 50% -10%, #1a2c52 0%, #0f1f42 45%, #0b183a 100%);
}
.theme-dark .mf-head__grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .10) 1px, transparent 1px);
}
.theme-dark .mf-head__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(120, 150, 220, .16), transparent 70%);
}
.theme-dark .mf-head__cross { color: #4a5878; }
.theme-dark .mf-sign { background: #0f1f42; }

/* ============ /ai-ready — AI Readiness Check ============ */
/* Token-driven like .mf-page: dark mode re-points the custom properties below
   rather than restating every colour. .air-page follows .site-page in the
   cascade and re-skins the shared shell.
   The three views (landing / questionnaire / result) all live in this one
   document; assets/ai-ready.js swaps `hidden` between them so the site nav and
   footer stay put the whole way through. */
.air-page {
  --navy:       #16294f;
  --body:       #4d5666;
  --muted:      #7d8593;
  --surface:    #f4f5f8;
  --card:       #ffffff;
  --card-2:     #fafbfd;
  --line:       rgba(22, 41, 79, .14);
  --line-soft:  rgba(22, 41, 79, .07);
  --accent:     #16294f;
  --accent-tint:rgba(22, 41, 79, .10);
  --on-accent:  #ffffff;
  --warn:       #b06b1f;
  --warn-tint:  rgba(176, 107, 31, .09);
  --bad:        #b3261e;
  --mono:       'IBM Plex Mono', monospace;
  --display:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sans:       'Outfit', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  background: var(--surface);
  color: var(--navy);
  font-family: var(--sans);
}
.air-wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }

/* ---- shared atoms ---- */
.air-eyebrow {
  display: block; font-family: var(--mono);
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.air-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 24px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.air-btn--primary { background: var(--accent); color: var(--on-accent); }
.air-btn--primary:hover { background: #276a4d; }
.air-btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.air-btn--ghost:hover { border-color: var(--navy); }
.air-btn--quiet {
  background: transparent; color: var(--body); border: 0; padding: 8px 10px;
  text-transform: none; letter-spacing: .04em;
}
.air-btn--quiet:hover { color: var(--navy); }
.air-btn[disabled] { opacity: .35; cursor: not-allowed; }
.air-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 24px 60px -46px rgba(16, 24, 27, .5);
}

/* ---- page header (mirrors .mf-head, split for the scorecard) ---- */
.air-head { position: relative; overflow: hidden; background: var(--surface); padding: 84px 0 76px; }
.air-head__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(22, 41, 79, .10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, black 25%, transparent 78%);
}
.air-head__glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 720px; height: 340px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(22, 41, 79, .07), transparent 70%);
}
.air-head__cross { position: absolute; top: 28px; font-family: var(--mono); font-size: 11px; color: #a9b0bc; user-select: none; }
.air-head__cross--left  { left: 32px; }
.air-head__cross--right { right: 32px; }
/* Same 1180/48 measure as .air-wrap, so the hero's left edge lines up with the
   section headings below it rather than sitting a gutter further out. */
.air-head__inner {
  position: relative; max-width: 1180px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.air-title {
  margin: 26px 0 0; font-family: var(--display);
  font-size: clamp(40px, 4.6vw, 55px); line-height: 1.05;
  font-weight: 600; letter-spacing: -.03em; color: var(--navy); text-wrap: balance;
}
.air-lead { margin: 24px 0 0; max-width: 30em; font-size: 19px; line-height: 1.62; color: var(--body); text-wrap: pretty; }
.air-head__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 32px; }
.air-note { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--muted); }

/* privacy reassurance box */
.air-privacy {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; max-width: 520px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-2);
}
.air-privacy__icon { color: var(--navy); flex-shrink: 0; display: grid; place-items: center; }
.air-privacy__text { font-size: 15px; line-height: 1.5; color: var(--navy); }
.air-privacy__text strong { color: var(--navy); font-weight: 600; }
.theme-dark .air-privacy__icon,
.theme-dark .air-privacy__text,
.theme-dark .air-privacy__text strong { color: #fff; }

/* sample scorecard graphic */
.air-score { padding: 26px 28px 22px; width: 100%; max-width: 430px; margin-left: auto; }
.air-score__top { display: flex; align-items: flex-end; justify-content: space-between; }
.air-score__num { font-family: var(--mono); font-size: 34px; font-weight: 500; letter-spacing: -.02em; color: var(--navy); }
.air-score__unit { font-size: 15px; color: var(--muted); }
.air-score__rows { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.air-score__row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 14px; }
.air-score__label { font-size: 14px; color: var(--body); }
.air-score__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.air-badge {
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-tint); padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.air-track { height: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-soft); overflow: hidden; }
.air-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 1s cubic-bezier(.2, .7, .2, 1); }

/* ---- landing body sections ---- */
.air-sec { padding: 76px 0; border-top: 1px solid var(--line-soft); }
.air-sec__head { max-width: 640px; margin-bottom: 40px; }
.air-h2 {
  margin: 12px 0 0; font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.14;
  font-weight: 600; letter-spacing: -.025em; color: var(--navy); text-wrap: pretty;
}
.air-p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); max-width: 46em; }

.air-meas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Only when the card count leaves an orphan on the 3-column grid (3n+1 cards,
   e.g. ai-ready's seven) does the last card take the full row; complete rows
   of 3 or 6 stay in their columns. Scoped to .air-meas so the cells reused in
   other grids (affiliates stat/feature grids) are unaffected. */
.air-meas > .air-meas__cell:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.air-meas__cell { padding: 26px 26px 28px; }
.air-meas__num { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; color: var(--accent); }
.air-meas__title { margin: 14px 0 8px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--navy); }
.air-meas__copy { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }

.air-learn__lede {
  margin: 16px 0 0; font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.36; font-weight: 500;
  letter-spacing: -.02em; color: var(--navy); text-wrap: pretty;
}
.air-learn__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.air-learn__item { display: flex; gap: 14px; align-items: flex-start; }
.air-learn__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); margin-top: 8px; flex-shrink: 0; }
.air-learn__title { margin: 0 0 5px; font-size: 17px; font-weight: 600; color: var(--navy); }
.air-learn__copy { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); }

/* ---- questionnaire ---- */
.air-quiz { padding: 0 0 40px; }
/* Sits under the sticky .site-nav rather than over the viewport — the whole
   point of this rebuild is that the site chrome stays reachable. The offsets
   come from assets/ai-ready.js, which measures the chrome it has to clear. */
.air-prog {
  position: sticky; top: var(--air-nav-h, 67px); z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line-soft);
  padding: 16px 48px 14px;
}
.air-prog__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1084px; margin: 0 auto; }
.air-prog__label {
  flex: 1; text-align: center; font-family: var(--mono); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.air-prog__pct { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.air-segs { display: flex; gap: 5px; max-width: 1084px; margin: 12px auto 0; }
.air-seg { height: 4px; flex: 1; border-radius: 999px; background: var(--line); transition: background .3s ease; }
.air-seg--on { background: var(--accent); }

.air-layout { display: flex; gap: 64px; align-items: flex-start; padding-top: 56px; }
.air-col { flex: 1; min-width: 0; max-width: 700px; }
.air-toccol { width: 264px; flex-shrink: 0; position: sticky; top: calc(var(--air-chrome-h, 146px) + 16px); }

.air-sechead { margin-bottom: 44px; }
.air-sectitle {
  margin: 12px 0 0; font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08;
  font-weight: 600; letter-spacing: -.03em; color: var(--navy);
}
.air-secblurb { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--body); max-width: 34em; }
.air-guidance {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 15px; font-style: italic; color: var(--muted);
}

.air-qlist { display: flex; flex-direction: column; gap: 44px; }
.air-q__head { display: flex; gap: 14px; align-items: baseline; }
.air-q__num { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--accent); flex-shrink: 0; padding-top: 2px; }
.air-q__prompt { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.34; letter-spacing: -.01em; color: var(--navy); }
.air-q__help { margin: 10px 0 0 26px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.air-q__body { margin-top: 18px; }

.air-choices { display: flex; flex-direction: column; gap: 10px; }
.air-choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 20px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--navy); font-family: inherit; font-size: 17px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.air-choice:hover { border-color: var(--accent); }
.air-choice--on { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.air-radio {
  width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--line);
  display: grid; place-items: center; flex-shrink: 0; background: var(--card);
}
.air-choice--on .air-radio { border-color: var(--accent); }
/* The dot ships with every option and is revealed by the selected state, so
   picking an answer is a class toggle rather than a re-render. */
.air-radio__dot { display: none; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); }
.air-choice--on .air-radio__dot { display: block; }

.air-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.air-scale__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 92px; padding: 18px 8px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.air-scale__btn:hover { border-color: var(--accent); }
.air-scale__btn--on {
  background: var(--accent); border-color: var(--accent);
  transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(16, 24, 27, .7);
}
.air-scale__num { font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--navy); }
.air-scale__label { font-size: 13px; line-height: 1.25; text-align: center; color: var(--body); }
.air-scale__btn--on .air-scale__num,
.air-scale__btn--on .air-scale__label { color: var(--on-accent); }
.air-scale__legend {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--muted);
}

.air-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 16px 18px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--navy);
  font-family: inherit; font-size: 16px; line-height: 1.55;
}
.air-textarea:focus { outline: none; border-color: var(--accent); }

/* section table of contents */
.air-toc__list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.air-toc__item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 7px 6px; border-radius: 10px;
  font-family: inherit; cursor: pointer; transition: background .15s ease;
}
.air-toc__item:hover { background: var(--line-soft); }
.air-toc__dot {
  width: 30px; height: 30px; border-radius: 999px; border: 1.5px solid var(--line);
  display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--mono); font-size: 13px; color: var(--muted); transition: all .2s ease;
}
.air-toc__label { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: var(--body); }
.air-toc__item--done .air-toc__dot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.air-toc__item--on .air-toc__dot { border-width: 2px; border-color: var(--navy); color: var(--navy); font-weight: 700; }
.air-toc__item--on .air-toc__label { color: var(--navy); font-weight: 700; }
.air-toc__note { margin: 18px 6px 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--muted); }

.air-navbar {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.air-navbar__hint { flex: 1; text-align: center; font-size: 14px; color: var(--muted); }

/* ---- result ---- */
.air-res { padding: 0 0 40px; }
.air-res__hero { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: start; padding: 76px 0 56px; }
.air-res__title {
  margin: 18px 0 0; font-family: var(--display);
  font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06;
  font-weight: 600; letter-spacing: -.03em; color: var(--navy);
}
.air-res__level { color: var(--accent); }
.air-res__band { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.air-res__blurb { margin: 24px 0 0; max-width: 34em; font-size: 17.5px; line-height: 1.62; color: var(--body); }
.air-res__score { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.air-res__scorecap { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.air-ladder { display: flex; gap: 6px; flex-wrap: wrap; }
.air-ladder__item {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  white-space: nowrap; flex-shrink: 0;
}
.air-ladder__num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.air-ladder__label { font-size: 13.5px; color: var(--body); }
.air-ladder__item--passed .air-ladder__num { color: var(--accent); }
.air-ladder__item--on { background: var(--accent); border-color: var(--accent); }
.air-ladder__item--on .air-ladder__num,
.air-ladder__item--on .air-ladder__label { color: var(--on-accent); font-weight: 600; }

.air-bd { padding: 34px; }
.air-bd__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; row-gap: 26px; }
.air-bd__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.air-bd__label { font-size: 16.5px; font-weight: 500; color: var(--navy); }
.air-bd__meta { display: inline-flex; align-items: center; gap: 12px; }
.air-bd__tag { font-size: 13px; color: var(--muted); }
.air-bd__pct { font-family: var(--mono); font-size: 15px; color: var(--body); }

.air-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0; }
.air-panel { padding: 28px; }
.air-panel--good { background: var(--accent-tint); border-color: rgba(22, 41, 79, .28); }
.air-panel--warn { background: var(--warn-tint); border-color: rgba(176, 107, 31, .28); }
.air-panel--good .air-eyebrow { color: var(--accent); }
.air-panel--warn .air-eyebrow { color: var(--warn); }
.air-panel__list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.air-panel__item { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.air-panel__label { font-size: 17px; font-weight: 500; color: var(--navy); }
.air-panel__pct { font-family: var(--mono); font-size: 16px; }
.air-panel--good .air-panel__pct { color: var(--accent); }
.air-panel--warn .air-panel__pct { color: var(--warn); }
.air-panel__note { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--body); }

.air-list { padding: 34px; display: flex; flex-direction: column; gap: 22px; }
.air-list__item { padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.air-list__item:last-child { padding-bottom: 0; border-bottom: 0; }
.air-list__prompt { display: flex; gap: 14px; align-items: baseline; margin: 0; font-size: 16.5px; font-weight: 500; color: var(--navy); }
.air-list__num { font-family: var(--mono); font-size: 13px; color: var(--accent); flex-shrink: 0; }
.air-list__sec { font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.air-list__answer { margin: 12px 0 0 27px; max-width: 44em; font-family: var(--display); font-size: 19px; line-height: 1.55; color: var(--navy); }
.air-list__empty { margin: 10px 0 0 27px; font-size: 15.5px; font-style: italic; color: var(--muted); }
.air-list__flag { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; color: var(--bad); }

.air-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card);
}
.air-steps li {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
}
/* Close the grid's edges so no rule runs into the rounded corner. Every result
   level ships five steps, so the odd tail below is the usual case, not an edge. */
.air-steps li:nth-child(even) { border-right: 0; }
.air-steps li:last-child { border-bottom: 0; }
.air-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.air-steps li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.air-steps__num { font-family: var(--mono); font-size: 13px; color: var(--accent); flex-shrink: 0; padding-top: 2px; }
.air-steps__text { font-size: 16px; line-height: 1.45; color: var(--navy); }

.air-res__cta { margin-top: 40px; padding: 44px; text-align: center; }
.air-res__ctalede {
  margin: 0 auto; max-width: 18em; font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 29px); line-height: 1.32; font-weight: 500;
  letter-spacing: -.02em; color: var(--navy);
}
.air-res__ctarow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* Dark: re-point the tokens, then only what a token cannot express. */
.theme-dark .air-page {
  --navy:       #f3f6fc;
  --body:       #aab4c7;
  --muted:      #7a86a0;
  --surface:    #0b183a;
  --card:       #0f1f42;
  --card-2:     #132549;
  --line:       rgba(255, 255, 255, .13);
  --line-soft:  rgba(255, 255, 255, .07);
  --accent:     #ffffff;
  --accent-tint:rgba(255, 255, 255, .13);
  --on-accent:  #0b183a;
  --warn:       #d99a4e;
  --warn-tint:  rgba(217, 154, 78, .12);
  --bad:        #f0857c;
}
.theme-dark .air-head {
  background: radial-gradient(ellipse 90% 70% at 50% -10%, #1a2c52 0%, #0f1f42 45%, #0b183a 100%);
}
.theme-dark .air-head__grid { background-image: radial-gradient(circle, rgba(255, 255, 255, .10) 1px, transparent 1px); }
.theme-dark .air-head__glow { background: radial-gradient(ellipse at 50% 0%, rgba(120, 150, 220, .16), transparent 70%); }
.theme-dark .air-head__cross { color: #4a5878; }
.theme-dark .air-head__actions .air-note { color: #fff; }
.theme-dark .air-btn--primary:hover { background: #e6ebf5; }
.theme-dark .air-track { background: #0b183a; }
.theme-dark .air-panel--good { border-color: rgba(255, 255, 255, .34); }
.theme-dark .air-panel--warn { border-color: rgba(217, 154, 78, .34); }

/* The questionnaire and result views are print-friendly: "Download your
   results" is window.print(), so drop the site chrome and the controls.
   Dark is the default theme, and browsers don't print backgrounds — its
   near-white tokens would land on white paper — so re-point the dark
   palette back to the light values before anything else. */
@media print {
  .site-nav, .site-cta, .site-ftr, .air-print-hide { display: none !important; }
  .theme-dark .site-page { background: #fff; color: #16294f; }
  .theme-dark .air-page {
    --navy:       #16294f;
    --body:       #4d5666;
    --muted:      #7d8593;
    --surface:    #ffffff;
    --card:       #ffffff;
    --card-2:     #fafbfd;
    --line:       rgba(22, 41, 79, .14);
    --line-soft:  rgba(22, 41, 79, .07);
    --accent:     #16294f;
    --accent-tint:rgba(22, 41, 79, .10);
    --on-accent:  #ffffff;
    --warn:       #b06b1f;
    --warn-tint:  rgba(176, 107, 31, .09);
    --bad:        #b3261e;
  }
  /* The few dark rules that bypass the tokens; borders and text do print. */
  .theme-dark .air-track { background: #ffffff; }
  .theme-dark .air-panel--good { border-color: rgba(22, 41, 79, .28); }
  .theme-dark .air-panel--warn { border-color: rgba(176, 107, 31, .28); }
  .theme-dark .air-head__actions .air-note { color: #7d8593; }
  .air-page { background: #fff; }
  .air-card { box-shadow: none; }
}

/* ============================================================
   Responsive layer — mobile menu + breakpoints for the shared
   chrome and every page styled from this file. Pages with their
   own <style> block (/use-cases, /modules, /security, /hackathon,
   /architect) carry their section breakpoints inline; the rules
   here still give them the nav, menu, CTA band and footer.
   ============================================================ */

/* ===== Mobile menu (≤1360px) =====
   The collapse point is where the centered desktop link strip starts
   overlapping the actions cluster, not a device class — below it the
   hamburger takes over.
   CSS-only: the checkbox (first child of .site-nav) drives the overlay via
   sibling selectors, so it works on the pages that load no script. Colors in
   the panel are !important on purpose — the desktop link colors are inline
   styles repainted by the theme script, and the menu opts out of that. */
.site-nav__check { display: none; }
.site-nav__burger { display: none; }
.site-nav__link--cta { display: none; }

@media (max-width: 1360px) {
  .site-nav { padding: 12px 20px; }

  /* Hamburger — 48px touch target, bars drawn from one span */
  .site-nav__burger {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: -4px -10px -4px 0;
    cursor: pointer; border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .site-nav__burger-bar { position: relative; display: block; }
  .site-nav__burger-bar,
  .site-nav__burger-bar::before,
  .site-nav__burger-bar::after {
    width: 24px; height: 2px; border-radius: 2px; background: #16294f;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .25s;
  }
  .site-nav__burger-bar::before,
  .site-nav__burger-bar::after { content: ""; position: absolute; left: 0; }
  .site-nav__burger-bar::before { top: -8px; }
  .site-nav__burger-bar::after { top: 8px; }
  .theme-dark .site-nav__burger-bar,
  .theme-dark .site-nav__burger-bar::before,
  .theme-dark .site-nav__burger-bar::after { background: #eaf0fb; }

  .site-nav__check:checked ~ .site-nav__actions .site-nav__burger-bar { background: transparent !important; }
  .site-nav__check:checked ~ .site-nav__actions .site-nav__burger-bar::before { transform: translateY(8px) rotate(45deg); }
  .site-nav__check:checked ~ .site-nav__actions .site-nav__burger-bar::after { transform: translateY(-8px) rotate(-45deg); }

  /* The panel. Negative z-index keeps it under the bar's own children
     (brand, theme toggle, burger) while the header's z-index:50 stacking
     context still paints it above all page content. */
  .site-nav__links {
    position: fixed; inset: 0; z-index: -1;
    left: 0; transform: translateY(12px); white-space: normal;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 104px 26px calc(30px + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff;
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }
  .theme-dark .site-nav__links { background: #0b183a; }
  .site-nav__check:checked ~ .site-nav__links {
    opacity: 1; visibility: visible; transform: none;
  }

  /* Spacious rows: ~56px tap targets, hairline separators. Capped and centered
     so the panel keeps a column shape on tablet-width viewports too. */
  .site-nav__link {
    display: block; padding: 18px 8px;
    width: 100%; max-width: 560px; margin-inline: auto;
    font-size: 15px; letter-spacing: .18em;
    color: #0d1b38 !important;
    border-bottom: 1px solid rgba(22, 41, 79, .10);
  }
  .site-nav__link:active { background: rgba(22, 41, 79, .05); }
  .theme-dark .site-nav__link {
    color: #eaf0fb !important;
    border-bottom-color: rgba(255, 255, 255, .10);
  }
  .theme-dark .site-nav__link:active { background: rgba(255, 255, 255, .05); }

  /* The primary action, restated inside the panel */
  .site-nav__link--cta {
    display: block; margin-top: 30px; text-align: center;
    width: 100%; max-width: 560px; margin-inline: auto;
    background: #16294f; color: #fff !important;
    border: 0; border-radius: 12px;
    padding: 19px 20px; font-size: 13.5px; letter-spacing: .14em;
  }
  .site-nav__link--cta:active { background: #0d1b38; }
  .theme-dark .site-nav__link--cta { background: #eaf0fb; color: #0b183a !important; }

  body:has(.site-nav__check:checked) { overflow: hidden; }
}

/* On phones the bar slims to brand + toggle + burger; GET STARTED lives in the
   panel (and stays in the bar on tablet widths, where there is room). */
@media (max-width: 640px) {
  .site-nav__cta { display: none; }
}

/* ===== Shared chrome ===== */
@media (max-width: 900px) {
  .site-ftr__inner { padding: 70px 24px 40px; }
  .site-ftr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px; row-gap: 48px; padding-top: 50px;
  }
  .site-ftr__grid > div:first-child { grid-column: 1 / -1; }
  .site-ftr__bottom {
    flex-direction: column; align-items: flex-start; gap: 12px;
    margin-top: 56px; padding-bottom: 24px;
  }
  .site-ftr__word { margin-top: 50px; }
}

@media (max-width: 640px) {
  .site-cta { padding: 80px 0 90px; }
  .site-cta__inner { padding: 0 24px; }
  .site-cta__title { font-size: 28px; max-width: none; }
  .site-cta__row { margin-top: 46px; flex-wrap: wrap; }
  .site-cta__btn { width: 100%; text-align: center; padding: 16px 20px; }
}

/* ===== Homepage hero ===== */
@media (max-width: 900px) {
  .ari-hero-v2 { padding: 72px 24px 0; }
  .ari-hero-v2 .hero-cross { display: none; }
  .ari-hero-v2 h1 { font-size: clamp(38px, 9.4vw, 64px); }
  .ari-hero-v2 .hero-copy { font-size: 17.5px; }
}
@media (max-width: 720px) {
  .ari-hero-v2 .window-body { grid-template-columns: 1fr; height: 170px; }
  .ari-hero-v2 .pane-left, .ari-hero-v2 .pane-right { display: none; }
}
@media (max-width: 560px) {
  .ari-hero-v2 { padding: 60px 20px 0; }
  .ari-hero-v2 .hero-inner { gap: 26px; }
  .ari-hero-v2 .hero-ctas { flex-direction: column; align-self: stretch; gap: 12px; }
  .ari-hero-v2 .btn-hero { width: 100%; padding: 17px 20px; }
  .ari-hero-v2 .eyebrow { padding: 8px 16px; }
  .ari-hero-v2 .eyebrow span:last-child { font-size: 11px; letter-spacing: .14em; }
  .ari-hero-v2 .meta-row { gap: 10px 22px; }
}

/* ===== Homepage: 3D marquee band ===== */
@media (max-width: 700px) {
  .marquee3d { height: 280px; }
  .marquee3d__scale { transform: scale(.62); }
}

/* ===== Homepage: community module library ===== */
@media (max-width: 860px) {
  .cml { padding: 90px 0; }
  .cml__inner { padding: 0 24px; }
  .cml__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; margin-top: 54px; }
}
@media (max-width: 560px) {
  .cml__grid { grid-template-columns: 1fr; }
}

/* ===== Homepage: 001-004 features strip ===== */
@media (max-width: 1024px) {
  .hp-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-feat__cell + .hp-feat__cell { border-left: 0; }
  .hp-feat__cell:nth-child(even) { border-left: 1px solid rgba(22, 41, 79, .22); }
  .hp-feat__cell:nth-child(n+3) { border-top: 1px solid rgba(22, 41, 79, .22); }
  .theme-dark .hp-feat__cell:nth-child(even) { border-left-color: rgba(255, 255, 255, .24); }
  .theme-dark .hp-feat__cell:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .24); }
}
@media (max-width: 560px) {
  .hp-feat__grid { grid-template-columns: 1fr; }
  .hp-feat__cell { padding: 28px 24px 36px; }
  .hp-feat__cell:nth-child(even) { border-left: 0; }
  .hp-feat__cell:nth-child(n+2) { border-top: 1px solid rgba(22, 41, 79, .22); }
  .theme-dark .hp-feat__cell:nth-child(n+2) { border-top-color: rgba(255, 255, 255, .24); }
}

/* ===== Security page bands ===== */
@media (max-width: 900px) {
  .sec-band { border-radius: 16px; margin: 8px 8px 0; }
  .sec-hero { padding: 72px 24px 64px; }
  .sec-hero__cross { display: none; }
  .sec-hero__title { font-size: clamp(38px, 9vw, 56px); }
  .sec-dep { padding: 80px 0; }
  .sec-dep__inner { padding: 0 24px; }
  .sec-dep__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .sec-flow { padding: 80px 0; }
  .sec-flow__inner { grid-template-columns: 1fr; row-gap: 48px; padding: 0 24px; }
  .sec-cta { padding: 90px 24px; }
}
@media (max-width: 560px) {
  .sec-hero__actions, .sec-cta__actions { flex-direction: column; align-items: stretch; }
  .sec-btn { padding: 16px 20px; }
}

/* ===== /manifesto ===== */
@media (max-width: 700px) {
  .mf-wrap { padding: 0 24px; }
  .mf-head { padding: 72px 24px 22px; }
  .mf-head__cross { display: none; }
  .mf-title { font-size: clamp(40px, 11vw, 56px); }
  .mf-lead { font-size: 18.5px; }
  .mf-body { padding: 56px 24px 90px; }
  .mf-sec + .mf-sec { margin-top: 56px; }
  .mf-sec__title { font-size: 25px; }
  .mf-sec__p { font-size: 17px; }
  .mf-sign { padding: 80px 0; }
}

/* ===== /ai-ready + /affiliates (air-*) ===== */
@media (max-width: 1024px) {
  .air-layout { flex-direction: column; gap: 40px; padding-top: 40px; }
  .air-toccol { display: none; } /* the sticky progress bar stays */
  .air-col { max-width: none; }
}
@media (max-width: 900px) {
  .air-wrap { padding: 0 24px; }
  .air-head { padding: 60px 0 56px; }
  .air-head__cross { display: none; }
  .air-head__inner { grid-template-columns: 1fr; gap: 44px; padding: 0 24px; }
  .air-score { margin-left: 0; max-width: none; }
  .air-meas { grid-template-columns: 1fr; }
  .air-learn__row { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .air-sec { padding: 60px 0; }
  .air-prog { padding: 12px 24px; }
  .air-res__hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 44px; }
  .air-res__score { align-items: flex-start; }
  .air-bd__grid { grid-template-columns: 1fr; }
  .air-panels { grid-template-columns: 1fr; }
  .air-bd, .air-list { padding: 24px; }
  .air-res__cta { padding: 36px 24px; }
  .air-steps { grid-template-columns: 1fr; }
  .air-steps li { border-right: 0; }
  .air-steps li:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
}
/* /affiliates carries two grids as inline styles (stats row, program cards);
   the classes exist only so these overrides can reach them — hence !important. */
@media (max-width: 1024px) {
  .air-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .air-cardgrid3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) {
  .air-statgrid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .air-scale { gap: 6px; }
  .air-scale__btn { min-height: 60px; padding: 12px 4px 10px; }
  .air-scale__label { display: none; } /* the legend below the row still names the ends */
  .air-scale__num { font-size: 20px; }
  .air-navbar { flex-wrap: wrap; }
  .air-navbar__hint { display: none; }
  .air-head__actions .air-btn { width: 100%; justify-content: center; box-sizing: border-box; }
}