@font-face { font-family: 'Open Runde'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/open-runde-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Runde'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/open-runde-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Runde'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/open-runde-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Runde'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/open-runde-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-mono-latin-500-normal.woff2) format('woff2'); }

body { margin: 0; }
a { color: #2B4ACB; text-decoration: none; }
a:hover { color: #1E3AA8; }
button { font: inherit; }
@keyframes dUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dSweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes dDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes dIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes dLane1 { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dLane2 { from { opacity: 0; transform: translateX(-188px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dLane3 { from { opacity: 0; transform: translateX(-376px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dBubble { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dHide { to { opacity: 0; visibility: hidden; height: 0; padding-top: 0; padding-bottom: 0; margin-top: -6px; } }
@keyframes dDot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes dDoc1 { from { opacity: 0; transform: translate(-64px, 26px) rotate(-9deg); } 40% { opacity: 1; transform: translate(-64px, 26px) rotate(-9deg); } to { opacity: 1; transform: translate(0, -10px) rotate(0deg); } }
@keyframes dDoc2 { from { opacity: 0; transform: translate(58px, 34px) rotate(7deg); } 40% { opacity: 1; transform: translate(58px, 34px) rotate(7deg); } to { opacity: 1; transform: translate(0, -6px) rotate(0deg); } }
@keyframes dDoc3 { from { opacity: 0; transform: translate(-10px, 70px) rotate(-3deg); } 40% { opacity: 1; transform: translate(-10px, 70px) rotate(-3deg); } to { opacity: 1; transform: translate(0, -2px) rotate(0deg); } }
@keyframes dSnap { from { opacity: 0.35; transform: translateX(9px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dRing { from { opacity: 0.8; transform: scale(0.4); } to { opacity: 0; transform: scale(1.6); } }
@keyframes dFill { from { background: #FFFFFF; color: #101A2B; border-color: #E1E6F0; } to { background: #101A2B; color: #FFFFFF; border-color: #101A2B; } }
@keyframes dSlide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dFocus { from { opacity: 0; transform: scale(0.9); filter: blur(6px); } to { opacity: 1; transform: scale(1); filter: blur(0px); } }
@keyframes dEq { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* sec04 */
@keyframes rScan { 0% { top: 0px; opacity: 0; } 4% { top: 0px; opacity: 1; } 58% { top: 254px; opacity: 1; } 62% { opacity: 0; } 100% { top: 254px; opacity: 0; } }
@keyframes rHl2 { 0%, 22.1% { background: rgba(20,49,92,0.10); } 24.1%, 88% { background: rgba(43,74,203,0.55); } 94%, 100% { background: rgba(20,49,92,0.10); } }
@keyframes rHl5 { 0%, 33.5% { background: rgba(20,49,92,0.10); } 35.5%, 88% { background: rgba(43,74,203,0.55); } 94%, 100% { background: rgba(20,49,92,0.10); } }
@keyframes rHl8 { 0%, 44.9% { background: rgba(20,49,92,0.10); } 46.9%, 88% { background: rgba(43,74,203,0.55); } 94%, 100% { background: rgba(20,49,92,0.10); } }
@keyframes rTag2 { 0%, 23.1% { opacity: 0; transform: translateX(10px); } 27.1%, 88% { opacity: 1; transform: translateX(0); } 94%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes rTag5 { 0%, 34.5% { opacity: 0; transform: translateX(10px); } 38.5%, 88% { opacity: 1; transform: translateX(0); } 94%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes rTag8 { 0%, 45.9% { opacity: 0; transform: translateX(10px); } 49.9%, 88% { opacity: 1; transform: translateX(0); } 94%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes cDig0 { 0%, 6% { transform: translateY(0); } 30.0%, 46% { transform: translateY(-728px); } 70.0%, 94% { transform: translateY(-1248px); } 100% { transform: translateY(-1248px); } }
@keyframes cDig1 { 0%, 6% { transform: translateY(0); } 31.2%, 46% { transform: translateY(-572px); } 71.2%, 94% { transform: translateY(-1092px); } 100% { transform: translateY(-1092px); } }
@keyframes cDig2 { 0%, 6% { transform: translateY(0); } 32.4%, 46% { transform: translateY(-572px); } 72.4%, 94% { transform: translateY(-1092px); } 100% { transform: translateY(-1092px); } }
@keyframes cDig3 { 0%, 6% { transform: translateY(0); } 33.6%, 46% { transform: translateY(-884px); } 73.6%, 94% { transform: translateY(-1404px); } 100% { transform: translateY(-1404px); } }
@keyframes cDig4 { 0%, 6% { transform: translateY(0); } 34.8%, 46% { transform: translateY(-676px); } 74.8%, 94% { transform: translateY(-1196px); } 100% { transform: translateY(-1196px); } }
@keyframes cDig5 { 0%, 6% { transform: translateY(0); } 36.0%, 46% { transform: translateY(-936px); } 76.0%, 94% { transform: translateY(-1456px); } 100% { transform: translateY(-1456px); } }
@keyframes cFade { 0% { opacity: 0; } 5%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cRun1 { 0%, 31% { opacity: 0; transform: translateY(6px); } 35%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; } }
@keyframes cRun2 { 0%, 71% { opacity: 0; transform: translateY(6px); } 75%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; } }
@keyframes cBar { 0%, 6% { transform: scaleX(0); } 30% { transform: scaleX(0.5); } 46% { transform: scaleX(0.5); } 70%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(1); } }
@keyframes qCard { 0% { opacity: 0; transform: translateY(16px); } 6%, 86% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes qCursor { 0%, 18% { opacity: 0; transform: translate(120px, 90px); } 24% { opacity: 1; transform: translate(120px, 90px); } 40% { transform: translate(0px, 0px); } 44% { transform: translate(0px, 0px) scale(0.86); } 48%, 62% { opacity: 1; transform: translate(0px, 0px) scale(1); } 68%, 100% { opacity: 0; transform: translate(0px, 0px); } }
@keyframes qFill { 0%, 44% { background: #FFFFFF; color: #101A2B; box-shadow: rgba(20,49,92,0.12) 0px 0px 0px 1px inset; } 48%, 100% { background: #101A2B; color: #FFFFFF; box-shadow: rgba(16,26,43,1) 0px 0px 0px 1px inset; } }
@keyframes qRing { 0%, 44% { opacity: 0; transform: scale(0.5); } 46% { opacity: 0.7; } 58%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes qSaved { 0%, 54% { opacity: 0; transform: translateY(4px); } 60%, 86% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; } }
@keyframes qDim { 0%, 44% { opacity: 1; } 50%, 100% { opacity: 0.45; } }
/* /sec04 */
/* sec03 */
@keyframes oD0 { from { transform: translateY(0); } to { transform: translateY(-484px); } }
@keyframes oD1 { from { transform: translateY(0); } to { transform: translateY(-792px); } }
@keyframes oD2 { from { transform: translateY(0); } to { transform: translateY(-616px); } }
@keyframes oD3 { from { transform: translateY(0); } to { transform: translateY(-528px); } }
@keyframes oD4 { from { transform: translateY(0); } to { transform: translateY(-440px); } }
/* /sec03 */
/* footer */
@keyframes fUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fLetter { from { opacity: 0; transform: translateY(40%); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes fFront { from { transform: translate(-50%, 8%); } to { transform: translate(-50%, 0); } }
@keyframes fBack { from { opacity: 0.85; transform: translateX(-50%) scale(1.03); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes fDriftFront { from { margin-left: -1.2%; } to { margin-left: 1.2%; } }
@keyframes fDriftBack { from { margin-left: 0.6%; } to { margin-left: -0.6%; } }
@keyframes fBreathe { from { transform: scaleY(1); } to { transform: scaleY(1.015); } }
.fl:hover { color: #101A2B !important; transform: translateX(2px); }
.fs:hover { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { footer * { animation: none !important; transition: none !important; } }
/* /footer */
@keyframes dPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

html, body { margin: 0; padding: 0; background: #FFFFFF; }
body { font-family: 'Open Runde', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #101A2B; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
html, body { overflow-x: clip; }
.page { width: 1440px; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   The page is authored against a 1440px reference frame. Every rule
   below sits inside a max-width query, so at >=1440px nothing here
   matches and the reference layout renders exactly as designed.
   Nothing is scaled: type steps down, containers go fluid, columns
   stack. The one exception is the comparison table, which is pinned to
   pixel positions and scrolls horizontally instead.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Laptop and below: the frame and its content blocks go fluid ── */
@media (max-width: 1439px) {
  .page { width: 100%; }
  .page > div[style*="width: 1440px"] { width: 100% !important; }

  /* section gutters: the authored 120px collapses with the viewport */
  [style*="px 120px"] {
    padding-left: clamp(20px, 4.5vw, 120px) !important;
    padding-right: clamp(20px, 4.5vw, 120px) !important;
  }

  /* content frames */
  [style*="display: grid"][style*="width: 1200px"],
  [style*="width: 1000px"] { width: 100% !important; }
  [style*="display: grid"][style*="width: 1200px"] { max-width: 1200px !important; }
  [style*="width: 1000px"] { max-width: 1000px !important; }

  /* alternating feature rows: the 640px illustration column becomes a cap */
  [style*="grid-template-columns: minmax(0, 1fr) 640px"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px) !important;
  }
  [style*="grid-template-columns: 640px minmax(0, 1fr)"] {
    grid-template-columns: minmax(0, 640px) minmax(0, 1fr) !important;
  }
  [style*="640px"][style*="display: grid"] { gap: clamp(32px, 4.5vw, 72px) !important; }

  /* the comparison table keeps its authored geometry and scrolls */
  .cmp-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .cmp-scroll > div { margin: 0 auto; }
}

/* ── Tablet: stacked feature rows ── */
@media (max-width: 899px) {
  [style*="grid-template-columns: minmax(0, 1fr) 640px"],
  [style*="grid-template-columns: 640px minmax(0, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  /* rows authored illustration-first read text-first once stacked */
  [style*="grid-template-columns: 640px minmax(0, 1fr)"] > *:first-child { order: 2; }

  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── Mobile ── */
@media (max-width: 639px) {
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* nav pill sheds its link group; logo + actions remain */
  .nav-links, .nav-gap { display: none !important; }
  .nav-pill { padding: 0 7px 0 14px !important; }

  /* type steps down (no transform scaling) */
  [style*="font-size: 60px"] { font-size: clamp(34px, 9vw, 60px) !important; letter-spacing: -1.4px !important; }
  [style*="font-size: 48px"] { font-size: clamp(29px, 7.6vw, 48px) !important; }
  [style*="font-size: 44px"] { font-size: clamp(27px, 7vw, 44px) !important; }
  [style*="font-size: 40px"] { font-size: clamp(26px, 6.6vw, 40px) !important; }
  [style*="font-size: 36px"] { font-size: clamp(25px, 6.2vw, 36px) !important; }
  [style*="font-size: 26px"] { font-size: clamp(21px, 5vw, 26px) !important; }
  [style*="font-size: 24px"] { font-size: clamp(20px, 4.8vw, 24px) !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }

  /* the hero CTA pair stops overflowing */
  [style*="display: flex"][style*="gap: 14px"] { flex-wrap: wrap; justify-content: center; }

  /* footer wordmark tracks the viewport instead of sitting at 480px */
  #footer-wordmark { font-size: 22vw !important; }
  #footer-sky { height: 380px !important; }
}