@import url("/typography.css");
/* Section 01: shared MiSans typography and navigation controls. */
:root { --nav01-paper:#fdfdfc }
.site-nav,.nav01-menu,.hero-bottom {
  font-family:var(--font-ui);
  font-synthesis:none;
  font-optical-sizing:auto;
  --nav01-ink:#202d4b;
  --nav01-muted:#626e87;
  --nav01-line:#25396626;
  --nav01-accent:#4059c7;
  --nav01-radius:999px;
  color:var(--nav01-ink);
}
.site-nav { position:sticky;top:0;z-index:100;height:var(--nav);padding:0;border:0;background:none;display:block;transition:transform .36s cubic-bezier(.22,1,.36,1) }
.nav01-bar { height:var(--nav);display:flex;align-items:center;padding:0 var(--gutter);gap:32px;background:var(--nav01-surface,var(--nav01-paper));transition:height .36s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s;position:relative }
.nav01-bar::after { content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--nav01-line);opacity:0;transition:opacity .3s }
.site-nav[data-compact="true"] .nav01-bar { height:calc(var(--nav) - 8px) }
.site-nav[data-compact="true"] .nav01-bar::after { opacity:1 }
.site-nav[data-tone="dark"] { --nav01-ink:#f6f7fb;--nav01-line:#f6f7fb4d }
.nav01-brand { flex-shrink:0;width:175px;min-height:44px;display:flex;align-items:center;background:var(--nav01-paper);isolation:isolate }
.nav01-brand img { width:100%;height:44px;object-fit:contain;mix-blend-mode:multiply }
.site-nav[data-tone="dark"] .nav01-brand { background:#18223b }
.site-nav[data-tone="dark"] .nav01-brand img { filter:grayscale(1) invert(1);mix-blend-mode:screen }
.nav01-links { display:flex;align-items:center;gap:34px;margin:auto;font-size:15px;font-weight:500;line-height:1.5 }
.nav01-links a { display:flex;align-items:center;min-height:44px;padding:10px 0;position:relative;white-space:nowrap }
.nav01-links a::after { content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .24s }
.nav01-links a[aria-current]::after { transform:scaleX(1) }
.nav01-actions { display:flex;align-items:center;gap:12px }
.nav01-inquiry,.nav01-toggle,.nav01-close {
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  gap:18px;padding:0 20px;border:1px solid transparent;border-radius:var(--nav01-radius);
  font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;
  transition:background-color .2s,border-color .2s,color .2s,transform .12s;
}
.nav01-inquiry { background:var(--nav01-accent);color:#fff }
.nav01-inquiry b { display:flex;align-items:center;font-weight:400 }
.nav01-toggle,.nav01-close { background:transparent;border-color:var(--nav01-line);color:inherit }
.site-nav[data-tone="dark"] .nav01-inquiry { background:#e3e9ff;color:#263d98 }
.nav01-menu svg,.site-nav svg { display:block;width:20px;height:20px;flex-shrink:0;transition:transform .24s cubic-bezier(.22,1,.36,1) }
.nav01-toggle i,.nav01-close i { width:20px;height:20px;display:block;position:relative;flex-shrink:0 }
.nav01-toggle i span,.nav01-close i span { position:absolute;left:0;top:6px;width:20px;height:1.5px;background:currentColor;transition:transform .24s,width .24s }
.nav01-toggle i span:last-child { top:13px;width:14px }
.nav01-close i span { top:9px;transform:rotate(45deg) }
.nav01-close i span:last-child { transform:rotate(-45deg) }
.nav01-inquiry:active,.nav01-toggle:active,.nav01-close:active,.nav01-audience-entries a:active { transform:scale(.975) }
.site-nav :is(a,button):focus-visible,.nav01-menu :is(a,button):focus-visible { outline:2px solid var(--nav01-accent);outline-offset:4px }
.site-nav[data-tone="dark"] :is(a,button):focus-visible { outline-color:#becdff }
body[data-chapter="day-cycle"] .site-nav,body[data-chapter="solutions"] .site-nav,body[data-chapter="system-stack"] .site-nav { transform:translateY(-100%) }
.site-nav:focus-within { transform:translateY(0)!important }

.nav01-menu { position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--nav01-paper);overflow:auto;overscroll-behavior:contain }
.nav01-menu::backdrop { background:#18223b26 }
.nav01-menu-shell { min-height:100%;display:flex;flex-direction:column;padding:0 var(--gutter) }
.nav01-menu-top { display:flex;align-items:center;justify-content:space-between;min-height:var(--nav);gap:24px;border-bottom:1px solid var(--nav01-line);flex-shrink:0 }
.nav01-menu-caption { font-size:14px;font-weight:400;letter-spacing:.02em;color:var(--nav01-muted);margin-left:auto;margin-right:36px }
.nav01-menu-body { flex:1;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:clamp(48px,7vw,100px);padding:clamp(40px,7vh,70px) 0;align-items:center }
.nav01-index h2 { font-size:14px;font-weight:500;letter-spacing:0;display:flex;align-items:center;gap:22px;margin-bottom:26px;line-height:1.6 }
.nav01-index h2 span { font-size:13px;font-weight:400;letter-spacing:.08em;color:var(--nav01-muted) }
.nav01-index nav { border-top:1px solid var(--nav01-line) }
.nav01-index nav>a { display:flex;align-items:center;min-height:clamp(86px,10.6vh,106px);gap:26px;border-bottom:1px solid var(--nav01-line);position:relative }
.nav01-number { font-size:14px;font-weight:400;color:var(--nav01-muted);font-variant-numeric:tabular-nums;min-width:22px }
.nav01-link-title { display:grid;grid-template-columns:clamp(220px,19vw,288px) auto;align-items:baseline;gap:18px;line-height:1.3;transition:transform .3s cubic-bezier(.22,1,.36,1) }
.nav01-link-label { font-size:clamp(36px,3.45vw,52px);font-weight:500;letter-spacing:-.015em;white-space:nowrap }
.nav01-link-title small { font-size:13px;font-weight:400;letter-spacing:.025em;color:var(--nav01-muted);white-space:nowrap }
.nav01-arrow { display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;flex-shrink:0;border:1px solid transparent;border-radius:50%;color:#667698;transition:background-color .22s,color .22s,border-color .22s }
.nav01-index a:focus-visible .nav01-arrow { background:var(--nav01-accent);color:#fff }
.nav01-audience { border-left:1px solid var(--nav01-line);padding:14px 0 14px 42px }
.nav01-audience-label { font-size:24px;font-weight:500;letter-spacing:-.01em;margin-bottom:28px;line-height:1.6 }
.nav01-audience-entries { display:grid;gap:14px }
.nav01-audience-entries a { width:100%;min-height:150px;padding:23px 22px;background:#fff;text-align:left;display:flex;align-items:center;gap:14px;border:1px solid #d4dbef;border-radius:22px;transition:background-color .22s,border-color .22s,transform .12s }
.nav01-audience-entries small { display:block;font-size:13px;font-weight:400;letter-spacing:.05em;color:var(--nav01-muted);line-height:1.5 }
.nav01-audience-entries strong { display:block;font-size:26px;font-weight:500;letter-spacing:-.01em;margin-top:8px;line-height:1.4 }
.nav01-audience-entries em { display:block;font-size:14px;font-weight:400;font-style:normal;color:var(--nav01-muted);margin-top:10px;line-height:1.7 }
.nav01-audience-entries b { display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid #cbd5f2;color:var(--nav01-accent);margin-left:auto;transition:background-color .22s,color .22s,border-color .22s }
.nav01-audience-note { font-size:14px;color:var(--nav01-muted);margin-top:22px;line-height:1.7 }
.nav01-menu-foot { display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px;letter-spacing:.01em;padding:22px 0 24px;border-top:1px solid var(--nav01-line);line-height:1.7;color:var(--nav01-muted) }
.nav01-menu-foot>a { display:flex;align-items:center;gap:18px;color:var(--nav01-ink) }
.nav01-menu-foot svg { width:16px;height:16px }
.nav01-menu-foot>span:last-child { font-size:13px;letter-spacing:.08em }
.nav01-menu[open] .nav01-index nav>a { animation:nav01-arrive .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(120ms + var(--item)*45ms) }
.nav01-menu[open] .nav01-audience { animation:nav01-arrive .7s .18s cubic-bezier(.22,1,.36,1) both }
.nav01-menu.is-closing .nav01-menu-body { opacity:0;transform:translateY(-8px);transition:opacity .22s,transform .3s }
@keyframes nav01-arrive { from { opacity:0;transform:translateY(22px) } to { opacity:1;transform:translateY(0) } }

/* The first-screen actions share the navigation's font, color and pill controls. */
.hero { background:var(--nav01-paper) }
.hero-actions { gap:12px }
.hero-actions .button,.hero-discover {
  min-height:56px;padding:0 24px;border:1px solid transparent;border-radius:var(--nav01-radius);
  font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;
  transition:background-color .22s,border-color .22s,transform .16s;
}
.hero-actions .button-solid { background:var(--nav01-accent);color:#fff }
.hero-actions .button-paper,.hero-discover { background:var(--nav01-paper);color:var(--nav01-ink);border-color:#e1e5ed }
.hero-discover { gap:24px }
.hero-bottom :is(button,a)>span { display:inline-flex;align-items:center;justify-content:center;min-width:22px;transition:transform .22s cubic-bezier(.22,1,.36,1) }
.hero-discover>span { font-size:20px }
.hero-bottom :is(button,a):focus-visible { outline:2px solid var(--nav01-accent);outline-offset:4px;box-shadow:0 0 0 3px #fff }
.hero-bottom :is(button,a):active { transform:scale(.975) }

@media(hover:hover) {
  .hero-actions .button-solid:hover { background:#3046a4 }
  .hero-actions .button-paper:hover,.hero-discover:hover { background:#eef1fc;border-color:#afbee8 }
  .hero-actions .button:hover>span { transform:translate(2px,-2px) }
  .hero-discover:hover>span { transform:translateY(3px) }
  .nav01-links a:hover::after { transform:scaleX(1) }
  .nav01-inquiry:hover { background:#3046a4 }
  .site-nav[data-tone="dark"] .nav01-inquiry:hover { background:#cbd7ff }
  .nav01-inquiry:hover svg { transform:translate(2px,-2px) }
  .nav01-toggle:hover,.nav01-close:hover { background:#e7ecfc;border-color:#a2b2e4;color:#263d98 }
  .nav01-toggle:hover i span:last-child { width:20px }
  .nav01-index a:hover .nav01-link-title { transform:translateX(8px) }
  .nav01-index a:hover .nav01-arrow { background:var(--nav01-accent);color:white }
  .nav01-audience-entries a:hover { background:#eaf0ff;border-color:#8fa3e1 }
  .nav01-audience-entries a:hover b { background:var(--nav01-accent);border-color:var(--nav01-accent);color:white }
  .nav01-audience-entries a:hover svg { transform:translate(2px,-2px) }
  .nav01-menu-foot>a:hover { color:var(--nav01-accent) }
}
@media(max-width:1199px) {
  .nav01-bar{gap:22px}.nav01-links{gap:24px}.nav01-actions{gap:10px}
  .nav01-menu-body{gap:48px;grid-template-columns:minmax(0,1.35fr) minmax(310px,1fr)}
  .nav01-link-title{display:block}.nav01-link-title small{display:none}
  .nav01-audience{padding-left:30px}.nav01-audience-entries a{padding:22px 18px}
  .nav01-audience-label{font-size:22px}.nav01-audience-entries strong{font-size:24px}
}
@media(max-width:899px) {
  .nav01-brand{width:155px}.nav01-brand img{height:41px}.nav01-links{display:none}.nav01-actions{margin-left:auto}
  .nav01-menu-caption{margin-right:16px}.nav01-menu-body{grid-template-columns:1fr;gap:32px;padding:34px 0}
  .nav01-index h2{margin-bottom:22px}.nav01-index nav>a{min-height:80px}
  .nav01-link-title{display:flex;gap:28px}.nav01-link-label{font-size:38px}.nav01-link-title small{display:block}
  .nav01-audience{padding:26px 0 0;border-left:0;border-top:1px solid var(--nav01-line)}
  .nav01-audience-label{font-size:20px;margin-bottom:20px}.nav01-audience-entries{grid-template-columns:1fr 1fr;gap:16px}
  .nav01-audience-entries a{min-height:142px}.nav01-audience-note{margin-top:16px}.nav01-menu-foot>span:last-child{display:none}
}
@media(max-width:559px) {
  .hero-actions{gap:10px}.hero-actions .button{min-height:52px;font-size:14px;padding:0 18px}
  .nav01-bar{gap:12px}.nav01-brand{width:138px}.nav01-brand img{height:38px}.nav01-actions{gap:8px}
  .nav01-inquiry{font-size:14px;gap:10px;padding:0 14px}.nav01-inquiry svg{width:17px;height:17px}
  .nav01-toggle{width:44px;padding:0}.nav01-toggle>span{display:none}.nav01-menu-caption{display:none}
  .nav01-close{font-size:14px;gap:12px;padding:0 15px}.nav01-menu-body{padding:20px 0 16px;gap:20px;align-content:start}
  .nav01-index h2{font-size:13px;gap:18px;margin-bottom:16px}.nav01-index h2 span{font-size:13px;letter-spacing:.035em}
  .nav01-index nav>a{min-height:60px;gap:15px}.nav01-number{font-size:13px;min-width:20px}
  .nav01-link-label{font-size:30px;letter-spacing:-.01em}.nav01-link-title small{display:none}
  .nav01-arrow{width:32px;height:32px}.nav01-arrow svg{width:19px;height:19px}
  .nav01-audience{padding:0;border:0}.nav01-audience-label{font-size:18px;margin-bottom:14px}
  .nav01-audience-entries{grid-template-columns:1fr;gap:10px}.nav01-audience-entries a{padding:15px 17px;min-height:90px}
  .nav01-audience-entries small{display:none}.nav01-audience-entries strong{font-size:21px;margin:0}
  .nav01-audience-entries em{font-size:13px;margin-top:5px}.nav01-audience-entries b{width:36px;height:36px}
  .nav01-audience-note{display:none}.nav01-menu-foot{padding:14px 0 16px;font-size:13px;gap:10px}
  .nav01-menu-foot>span:first-child{display:none}.nav01-menu-foot>a{gap:16px}
}
@media(max-width:359px) {
  .nav01-bar{gap:8px}.nav01-brand{width:110px}.nav01-inquiry{padding:0 11px;gap:8px}
  .nav01-link-label{font-size:28px}.nav01-index nav>a{gap:12px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-bottom :is(button,a,span) { transition:none!important }
  .hero-bottom :is(button,a):active,.hero-bottom :is(button,a):hover>span { transform:none }
  .site-nav,.nav01-menu *,.nav01-bar,.nav01-bar::after,.nav01-links a::after,.nav01-inquiry svg,.nav01-toggle i span { animation:none!important;transition:none!important }
  .nav01-index a:hover .nav01-link-title,.nav01-inquiry:hover svg,.nav01-audience-entries a:hover svg,
  .nav01-inquiry:active,.nav01-toggle:active,.nav01-close:active,.nav01-audience-entries a:active { transform:none }
  .nav01-menu.is-closing .nav01-menu-body { opacity:1;transform:none }
}