:root {
  --paper: #f4f1e8;
  --paper-deep: #e7e1d2;
  --ink: #11110f;
  --muted: #68675f;
  --line: rgba(17, 17, 15, 0.15);
  --orange: #ff6b35;
  --yellow: #f2cb5c;
  --blue: #5c78ff;
  --green: #78a984;
  --dark: #151713;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 20px; top: -60px; z-index: 100; padding: 12px 18px;
  background: var(--ink); color: white; border-radius: 99px; transition: top .2s;
}
.skip-link:focus { top: 20px; }

.site-header {
  position: fixed; z-index: 15; top: 0; left: 0; right: 0; height: 84px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 72px); transition: background .3s, height .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  height: 68px; background: rgba(244, 241, 232, .88); border-color: var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.brand, .footer-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img, .footer-brand img, .window-brand img, .research-mark img {
  mix-blend-mode: multiply; border-radius: 6px;
}
.brand span, .footer-brand strong { font-size: 18px; font-weight: 740; letter-spacing: -.045em; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav a { text-decoration: none; font-size: 14px; font-weight: 590; }
.site-nav a:not(.nav-cta) { position: relative; }
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -5px;
  background: currentColor; transition: right .25s;
}
.site-nav a:hover::after { right: 0; }
.nav-cta { padding: 12px 18px; color: var(--paper); background: var(--ink); border-radius: 99px; }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; }

.hero {
  max-width: 1440px; margin: 0 auto; padding: 150px clamp(24px, 5vw, 72px) 100px;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  overflow: hidden;
}
.eyebrow { margin: 0 0 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .15em; font-weight: 750; }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 12px 4px 0; background: currentColor; }
h1, h2, h3, p { text-wrap: balance; }
h1, h2 { margin: 0; font-weight: 590; letter-spacing: -.06em; line-height: .96; }
h1 { max-width: 720px; font-size: clamp(64px, 7.3vw, 112px); }
h1 em, h2 em { font-family: var(--serif); font-weight: 400; }
.hero-intro { max-width: 590px; margin: 34px 0; color: var(--muted); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 32px; min-height: 54px;
  padding: 0 24px; border-radius: 99px; text-decoration: none; font-size: 14px; font-weight: 680;
  transition: transform .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: var(--orange); }
.text-link { font-size: 14px; text-underline-offset: 6px; font-weight: 680; }
.text-link span { display: inline-block; margin-left: 5px; transition: transform .2s; }
.text-link:hover span { transform: translate(3px, -3px); }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 590px; margin: 70px 0 0; }
.hero-proof div { border-top: 1px solid var(--line); padding-top: 12px; }
.hero-proof dt { color: var(--muted); font-family: var(--serif); font-size: 12px; }
.hero-proof dd { margin: 16px 0 0; font-size: 13px; font-weight: 650; }

.hero-visual { position: relative; width: min(100%,1200px); aspect-ratio: 1.6; margin: 90px auto 0; display: grid; place-items: center; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-one { width: 540px; height: 540px; background: var(--yellow); right: -8%; top: 4%; }
.orb-two { width: 220px; height: 220px; background: var(--orange); left: -3%; bottom: 0; opacity: .9; }
.product-window {
  position: relative; z-index: 2; width: min(100%, 690px); border: 1px solid rgba(17,17,15,.28);
  border-radius: 20px; background: rgba(252, 250, 244, .92); overflow: hidden;
  box-shadow: 0 40px 90px rgba(43, 37, 22, .2); transform: rotate(1.5deg);
}
.window-bar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.window-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.window-controls { display: flex; gap: 6px; }
.window-controls i { width: 7px; height: 7px; background: rgba(17,17,15,.22); border-radius: 50%; }
.window-body { display: grid; grid-template-columns: 66px 1fr; min-height: 430px; }
.mock-sidebar { padding: 24px 13px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 15px; align-items: center; }
.mock-sidebar span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); }
.mock-sidebar .active { color: white; background: var(--ink); }
.mock-workspace { position: relative; padding: 30px 38px 26px; }
.mode-pill { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; font-weight: 680; }
.mode-pill i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
.chat-line { width: fit-content; max-width: 78%; margin: 38px 0 26px auto; padding: 12px 16px; background: #e9e6de; border-radius: 16px 16px 4px 16px; font-size: 13px; }
.chat-response { display: grid; grid-template-columns: 32px 1fr; gap: 12px; font-size: 13px; line-height: 1.5; }
.chat-response p { margin: 1px 0 8px; }
.chat-response .muted { color: var(--muted); }
.mini-mark { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 9px; font-family: var(--serif); }
.diagram { margin-top: 22px; padding: 18px; display: flex; gap: 24px; align-items: center; justify-content: center; background: var(--paper); border-radius: 12px; }
.square-shape { width: 48px; height: 48px; border: 2px solid var(--ink); transform: skewY(8deg); }
.triangle-shape { width: 0; height: 0; border-left: 31px solid transparent; border-right: 31px solid transparent; border-bottom: 54px solid var(--blue); }
.arrow { color: var(--muted); font-size: 22px; }
.prompt-bar { position: absolute; left: 38px; right: 38px; bottom: 26px; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 12px; background: #fffdf8; }
.prompt-bar button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: white; background: var(--ink); }
.floating-note { position: absolute; z-index: 3; padding: 13px 17px; border: 1px solid rgba(17,17,15,.2); border-radius: 12px; background: rgba(250,248,240,.9); box-shadow: 0 16px 35px rgba(20,20,10,.13); font-size: 12px; font-weight: 680; backdrop-filter: blur(10px); }
.floating-note span { margin-right: 7px; color: var(--orange); }
.note-one { top: -58px; left: 32px; transform: rotate(-3deg); }
.note-two { right: 32px; bottom: -58px; transform: rotate(2deg); }

.ticker { overflow: hidden; border-block: 1px solid var(--line); background: #eeeadf; }
.ticker div { width: max-content; padding: 20px 0; display: flex; align-items: center; gap: 28px; animation: ticker 28s linear infinite; }
.ticker span { font-size: 13px; font-weight: 680; text-transform: uppercase; letter-spacing: .08em; }
.ticker i { color: var(--orange); font-style: normal; }
@keyframes ticker { to { transform: translateX(-35%); } }

.product-tour { position: relative; height: 320vh; color: var(--ink); background: var(--orange); }
.product-tour-sticky { position: sticky; top: 0; height: 100vh; padding: 96px 24px 24px; overflow: hidden; display: flex; flex-direction: column; }
.tour-heading { width: min(100%, var(--max)); margin: 0 auto 18px; display: flex; justify-content: space-between; align-items: end; }
.tour-heading .eyebrow { margin-bottom: 10px; }
.tour-heading h2 { margin: 0; font-size: clamp(40px, 5vw, 64px); line-height: .87; letter-spacing: -.06em; }
.tour-heading h2 em { font-family: var(--serif); font-weight: 400; }
.tour-heading > p { margin: 0 4px 4px 0; font-size: 12px; font-weight: 720; line-height: 1.5; text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.tour-heading > p b { display: inline-block; margin-left: 5px; animation: scroll-cue 1.3s ease-in-out infinite; }
.tour-mobile-cue { display: none; }
.tour-heading > p small { color: rgba(17,17,15,.58); font-size: 8px; font-weight: 580; }
@keyframes scroll-cue { 50% { transform: translateY(4px); } }
.app-showcase { width: min(100%,1370px); height: clamp(430px,calc(100vh - 242px),590px); min-height: 0; margin: 0 auto; display: grid; grid-template-columns: 178px minmax(0,1fr); overflow: hidden; color: #f7f7fa; background: #1b1b21; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; box-shadow: 0 34px 85px rgba(42,20,9,.32); }
.app-showcase-sidebar { position: relative; padding: 17px 13px; border-right: 1px solid #35353d; background: #202027; }
.app-showcase-brand { display: flex; gap: 9px; align-items: center; margin-bottom: 24px; font-size: 9px; }
.app-showcase-brand span { width: 25px; height: 25px; display: grid; place-items: center; color: #17171b; background: #f4f1e8; border-radius: 7px; font: italic 10px var(--serif); }
.create-links { display: flex; flex-direction: column; gap: 9px; }
.create-links > span { display: flex; align-items: center; gap: 8px; color: #d7d7dc; font-size: 8px; font-weight: 650; }
.create-links i { width: 21px; height: 21px; display: grid; place-items: center; color: white; border-radius: 6px; font-size: 8px; font-style: normal; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.create-blue { background: #287dff; }.create-purple { background: #8172ee; }.create-green { background: #35ae63; }
.app-showcase-sidebar > small { display: block; margin: 24px 0 10px; color: #83838d; font-size: 6px; letter-spacing: .14em; }
.mini-frame-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-frame-grid > span { min-width: 0; padding: 8px 6px; display: flex; gap: 6px; align-items: center; overflow: hidden; border: 1px solid #37373f; border-radius: 7px; background: #292930; color: #d0d0d5; font-size: 6px; white-space: nowrap; }
.mini-frame-grid i { color: #5aa4ff; font-size: 9px; font-style: normal; }
.mini-frame-grid span:nth-child(2) i, .mini-frame-grid span:nth-child(7) i { color: #47c47b; }
.mini-frame-grid span:nth-child(4) i, .mini-frame-grid span:nth-child(8) i { color: #ff6680; }
.mini-frame-grid span:nth-child(5) i { color: #bd74ff; }
.showcase-user { position: absolute; left: 13px; right: 13px; bottom: 14px; padding-top: 12px; display: flex; gap: 8px; align-items: center; border-top: 1px solid #393940; color: #a5a5ad; font-size: 7px; }
.showcase-user b { width: 22px; height: 22px; display: grid; place-items: center; color: white; background: #467feb; border-radius: 50%; font-size: 6px; }
.app-showcase-main { position: relative; min-width: 0; padding: 15px 0 22px; overflow: hidden; }
.showcase-search { height: 32px; margin: 0 15px 14px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #96969f; background: #27272e; border: 1px solid #33333b; border-radius: 8px; font-size: 7px; }
.showcase-search i { padding: 4px 6px; border: 1px solid #414149; border-radius: 4px; font-style: normal; font-size: 6px; }
.project-viewport { height: calc(100% - 47px); overflow: hidden; }
.project-strip { width: max-content; height: 100%; padding: 0 15px; display: flex; gap: 13px; will-change: transform; }
.project-panel { position: relative; flex: 0 0 clamp(310px,29vw,405px); height: 100%; overflow: hidden; border: 1px solid #3b3b43; border-radius: 13px; background: #25252c; box-shadow: 0 12px 25px rgba(0,0,0,.08); }
.project-intro, .project-divider, .project-finish { padding: clamp(27px,3vw,43px); display: flex; flex-direction: column; justify-content: center; }
.panel-label { position: absolute; left: clamp(27px,3vw,43px); top: 27px; display: flex; gap: 12px; align-items: center; color: #a4a4ad; font-size: 7px; text-transform: uppercase; letter-spacing: .13em; }
.panel-label span { font: italic 14px var(--serif); color: #65a8ff; }
.project-intro h3, .project-divider h3, .project-finish h3 { margin: 0; font-size: clamp(34px,3.8vw,54px); line-height: .94; letter-spacing: -.055em; }
.project-intro h3 em, .project-divider h3 em, .project-finish h3 em { font-family: var(--serif); font-weight: 400; }
.project-intro p, .project-divider p { max-width: 240px; margin: 23px 0 0; color: #96969f; font-size: 10px; line-height: 1.55; }
.panel-arrow { position: absolute; right: 30px; bottom: 27px; width: 44px; height: 44px; display: grid; place-items: center; color: #1c1c20; background: var(--orange); border-radius: 50%; font-size: 18px; }
.project-card { display: grid; grid-template-rows: 64% 36%; background: #212127; }
.project-art { position: relative; overflow: hidden; }
.project-meta { padding: 18px 20px; }
.project-meta > span { color: #8b8b94; font-size: 6px; text-transform: uppercase; letter-spacing: .1em; }
.project-meta h3 { margin: 8px 0 5px; font-size: clamp(17px,1.7vw,23px); letter-spacing: -.035em; }
.project-meta p { margin: 0; color: #92929b; font-size: 8px; }
.city-art { background: #9bcc86; }
.city-art .sun { position: absolute; width: 105px; height: 105px; right: 24px; top: 24px; border: 1px solid #173d2a; border-radius: 50%; background: #f4df77; }
.city-art i { position: absolute; bottom: 0; width: 19%; background: #235c3e; border: 1px solid #173d2a; }
.city-art i:nth-of-type(1) { left: 5%; height: 42%; }.city-art i:nth-of-type(2) { left: 24%; height: 65%; }.city-art i:nth-of-type(3) { left: 43%; height: 51%; }.city-art i:nth-of-type(4) { left: 62%; height: 73%; }
.city-art b { position: absolute; left: 10%; top: 18%; width: 45%; height: 2px; background: #173d2a; transform: rotate(-12deg); }
.city-art::after { content: "CITIES THAT BREATHE"; position: absolute; left: 22px; top: 23px; max-width: 145px; color: #173d2a; font: 24px/.86 var(--serif); }
.flight-art { color: #f4edd7; background: #3556c8; }
.flight-art > span { position: absolute; left: 22px; top: 20px; z-index: 2; font-size: clamp(37px,4vw,60px); font-weight: 760; letter-spacing: -.07em; }
.flight-line { position: absolute; width: 150%; height: 120px; left: -25%; top: 42%; border: 3px solid #f2b24f; border-color: #f2b24f transparent transparent; border-radius: 50%; transform: rotate(-15deg); }
.flight-art i { position: absolute; width: 88px; height: 22px; right: 18%; bottom: 25%; background: #f4edd7; clip-path: polygon(0 42%,100% 0,72% 54%,100% 100%); transform: rotate(-12deg); }
.ocean-art { background: linear-gradient(#6247a6,#172145); }
.ocean-art > span { position: absolute; left: 24px; top: 22px; color: #e8876b; font: 52px/1 var(--serif); }
.ocean-art > span small { font-size: 14px; }
.ocean-art i { position: absolute; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.ocean-art i:nth-of-type(1) { width: 180px; height: 180px; right: -30px; bottom: -20px; }.ocean-art i:nth-of-type(2) { width: 115px; height: 115px; right: 12px; bottom: 15px; }.ocean-art i:nth-of-type(3) { width: 55px; height: 55px; right: 44px; bottom: 46px; background: #e8876b; border: 0; }
.ocean-art b { position: absolute; left: 26px; bottom: 24px; width: 90px; height: 1px; background: #e8876b; }
.project-divider { color: var(--ink); background: #ded8ef; border-color: #c8c0dd; }
.project-divider .panel-label { color: #64616f; }.project-divider .panel-label span { color: #674ec4; }.project-divider p { color: #696675; }
.document-lines { position: absolute; left: 43px; right: 43px; bottom: 41px; }
.document-lines i { display: block; height: 2px; margin-top: 8px; background: rgba(17,17,15,.2); }.document-lines i:nth-child(2) { width: 77%; }.document-lines i:nth-child(3) { width: 91%; }.document-lines i:nth-child(4) { width: 55%; }
.field-art { color: #163f32; background: #d5ddb5; }
.field-art > span { position: absolute; left: 24px; top: 24px; font: 43px/.82 var(--serif); }
.field-art .leaf { position: absolute; right: 14%; top: 10%; font: 150px/1 var(--serif); transform: rotate(-18deg); }
.field-art i { position: absolute; left: 24px; right: 24px; bottom: 23px; height: 1px; background: #163f32; }
.future-art { background: #f29a75; }
.future-art > span { position: absolute; left: 20px; top: 12px; z-index: 2; font-size: 72px; font-weight: 760; letter-spacing: -.08em; }
.future-art > div { position: absolute; width: 180px; height: 180px; right: -25px; bottom: -35px; border: 2px solid var(--ink); border-radius: 50%; }
.future-art i { position: absolute; width: 100%; height: 1px; left: 0; background: var(--ink); transform-origin: left; }.future-art i:nth-of-type(1) { top: 44%; transform: rotate(12deg); }.future-art i:nth-of-type(2) { top: 59%; transform: rotate(-8deg); }.future-art i:nth-of-type(3) { top: 76%; transform: rotate(5deg); }
.garden-art { color: #18362b; background: #e5c757; }
.garden-art > span { position: absolute; right: 17px; top: 14px; font: 49px var(--serif); }
.garden-grid { position: absolute; width: 72%; height: 72%; left: 18px; bottom: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.garden-grid i { position: relative; background: #6f9e5e; border: 1px solid #18362b; }.garden-grid i::before { content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-style: normal; }
.project-finish { align-items: flex-start; color: var(--ink); background: var(--yellow); border-color: #c5a642; }
.project-finish img { margin-bottom: 27px; mix-blend-mode: multiply; border-radius: 12px; }
.project-finish a { position: absolute; left: 43px; right: 43px; bottom: 31px; padding-top: 15px; display: flex; justify-content: space-between; border-top: 1px solid rgba(17,17,15,.3); text-decoration: none; font-size: 10px; font-weight: 720; }
.showcase-progress { position: absolute; left: 15px; right: 15px; bottom: 9px; height: 2px; background: #36363e; }
.showcase-progress i { display: block; width: 0; height: 100%; background: #63a3ff; }

.mini-render { position: relative; z-index: 2; overflow: hidden; background: #f7f4ec; border: 1px solid rgba(17,17,15,.22); border-radius: 16px; box-shadow: 0 30px 72px rgba(42,31,17,.22); }
.mini-render img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; image-rendering: -webkit-optimize-contrast; }
.hero-mini-render { width: 100%; transform: none; }

.app-showcase.mini-tour-window { height: clamp(440px,calc(100vh - 235px),620px); display: block; overflow: hidden; color: var(--ink); background: #e8e4da; border-color: rgba(17,17,15,.25); }
.mini-tour-topbar { height: 46px; padding: 0 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #f8f6ef; border-bottom: 1px solid rgba(17,17,15,.13); }
.mini-tour-topbar > div { display: flex; align-items: center; gap: 8px; }.mini-tour-topbar img { width: 22px; height: 22px; mix-blend-mode: multiply; border-radius: 4px; }.mini-tour-topbar strong { font-size: 8px; }.mini-tour-topbar > span { color: var(--muted); font-size: 7px; }.mini-tour-topbar > small { justify-self: end; color: var(--muted); font-size: 7px; font-weight: 700; }
.project-viewport.mini-tour-viewport { height: calc(100% - 55px); padding: 14px 0 8px; }
.project-strip.mini-tour-track { height: 100%; padding: 0 14px; gap: 14px; }
.mini-tour-panel { flex: 0 0 var(--tour-panel-width,min(1080px,76vw)); height: 100%; margin: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0,1fr) 78px; background: #fbfaf6; border: 1px solid rgba(17,17,15,.15); border-radius: 11px; box-shadow: 0 12px 28px rgba(31,28,20,.1); }
.mini-tour-panel > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-bottom: 1px solid rgba(17,17,15,.12); image-rendering: -webkit-optimize-contrast; }
.cover-wall { min-height: 0; padding: clamp(12px,1.8vw,24px); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: clamp(9px,1.2vw,16px); overflow: hidden; background: #ece8dd; border-bottom: 1px solid rgba(17,17,15,.12); }
.work-cover { position: relative; min-width: 0; overflow: hidden; padding: clamp(14px,1.7vw,24px); display: flex; flex-direction: column; border: 1px solid rgba(17,17,15,.16); border-radius: 9px; color: #151510; isolation: isolate; }
.work-cover small { position: relative; z-index: 2; font-size: clamp(6px,.55vw,8px); font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.work-cover strong { position: relative; z-index: 2; margin: auto 0; font-size: clamp(23px,2.6vw,39px); line-height: .83; letter-spacing: -.065em; text-transform: uppercase; }
.work-cover span { position: relative; z-index: 2; font-size: clamp(7px,.68vw,10px); font-weight: 620; }
.cover-breathe { background: #a8d090; }.cover-breathe::before { content: ""; position: absolute; width: 32%; aspect-ratio: 1; right: 8%; top: 12%; background: #f2d36d; border: 1px solid #264d35; border-radius: 50%; }.cover-breathe::after { content: ""; position: absolute; width: 58%; height: 45%; right: -4%; bottom: 0; background: linear-gradient(90deg,#28613f 0 29%,transparent 29% 34%,#28613f 34% 67%,transparent 67% 72%,#28613f 72%); }
.cover-flight { color: #fff9e9; background: #4960d4; }.cover-flight::before { content: ""; position: absolute; width: 130%; height: 75%; left: -18%; top: 46%; border: 2px solid #f1bb53; border-color: #f1bb53 transparent transparent; border-radius: 50%; transform: rotate(-8deg); }.cover-flight::after { content: ""; position: absolute; width: 24%; height: 13%; right: 14%; bottom: 18%; background: #fff4d5; clip-path: polygon(0 50%,100% 0,70% 50%,100% 100%); }
.cover-field { color: #183c2d; background: #cbdba9; }.cover-field::before,.cover-field::after { content: ""; position: absolute; width: 75%; aspect-ratio: 1; right: -27%; top: -30%; border: 1px solid rgba(24,60,45,.48); border-radius: 50%; }.cover-field::after { width: 58%; right: -19%; top: -20%; }
.cover-future { background: #f39b78; }.cover-future::before { content: ""; position: absolute; width: 48%; aspect-ratio: 1; right: -10%; bottom: -35%; border: 2px solid #171711; border-radius: 50%; }.cover-future::after { content: ""; position: absolute; inset: 42% -10% auto -10%; height: 1px; background: #171711; transform: rotate(-8deg); box-shadow: 0 44px 0 #171711; }
.cover-signal { color: #fff8e8; background: #1c304a; }.cover-signal::before { content: ""; position: absolute; width: 29%; aspect-ratio: 1; right: 10%; top: 15%; background: #ff7148; border: clamp(7px,1vw,14px) solid rgba(255,113,72,.2); border-radius: 50%; }
.cover-data { background: #f1d15b; }.cover-data::before { content: ""; position: absolute; width: 13%; height: 26%; right: 28%; bottom: 18%; background: #4b63d2; box-shadow: 38px 0 0 #4b63d2, -38px 20px 0 #4b63d2; }
.cover-classroom { color: #fff7db; background: #5650be; }.cover-classroom::before { content: ""; position: absolute; width: 0; height: 0; right: 13%; bottom: 17%; border-left: clamp(28px,3.4vw,50px) solid transparent; border-right: clamp(28px,3.4vw,50px) solid transparent; border-bottom: clamp(50px,6vw,86px) solid #f1cd59; transform: rotate(14deg); }
.cover-editorial { color: #f7f1e3; background: #23231f; }.cover-editorial::before { content: ""; position: absolute; width: 72%; height: 1px; right: -8%; top: 42%; background: #f06f47; transform: rotate(-21deg); }
.cover-pitch { background: #f17850; }.cover-pitch::before { content: ""; position: absolute; width: 48%; aspect-ratio: 1; right: -12%; top: -25%; background: #433fc5; border-radius: 50%; }
.cover-brief { background: #b8cbee; }.cover-brief::before { content: ""; position: absolute; inset: 13% 10% auto auto; width: 31%; aspect-ratio: 1; border: 1px solid rgba(23,44,74,.42); border-radius: 50%; }.cover-brief::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 23%; height: 2px; background: rgba(23,44,74,.36); box-shadow: 0 12px 0 rgba(23,44,74,.27),0 24px 0 rgba(23,44,74,.18); }
.cover-essay { color: #fff8e8; background: linear-gradient(135deg,#db8058 0 48%,#263b68 48%); }.cover-essay::before { content: ""; position: absolute; width: 38%; aspect-ratio: 1; right: 12%; top: 16%; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; }
.cover-notes { background: #d8c5ea; }.cover-notes::before,.cover-notes::after { content: ""; position: absolute; width: 30%; aspect-ratio: .82; right: 23%; top: 22%; background: #f1ca55; transform: rotate(8deg); }.cover-notes::after { right: 9%; top: 36%; background: #ef8062; transform: rotate(-7deg); }
.cover-charter { background: #eee5cf; }.cover-charter::before { content: ""; position: absolute; inset: 18% 10%; border: 1px solid rgba(17,17,15,.45); }.cover-charter::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: rgba(17,17,15,.4); }
.cover-budget { background: #a8d6ad; }.cover-budget::before { content: ""; position: absolute; width: 13%; height: 25%; right: 30%; bottom: 18%; background: #4966d2; box-shadow: 38px -16px 0 #ef7b59,-38px 12px 0 #f0cb56; }
.cover-survey { background: #f2a184; }.cover-survey::before { content: ""; position: absolute; width: 42%; aspect-ratio: 1; right: -8%; bottom: -28%; border: 2px solid rgba(94,45,38,.52); border-radius: 50%; box-shadow: 0 0 0 18px rgba(94,45,38,.08); }
.cover-calendar { color: #fff8e6; background-color: #1e344f; background-image: linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size: 38px 38px; }
.cover-progress { background: #d9c6e8; }.cover-progress::before { content: ""; position: absolute; width: 35%; aspect-ratio: 1; right: 10%; top: 20%; border: clamp(9px,1.2vw,17px) solid #5a64d4; border-right-color: #ef7959; border-radius: 50%; transform: rotate(25deg); }
.cover-growth { background: #9bd0c2; }.cover-growth::before { content: ""; position: absolute; width: 58%; height: 2px; right: 8%; top: 53%; background: #245b50; transform: rotate(-24deg); box-shadow: 0 34px 0 rgba(36,91,80,.34); }.cover-growth::after { content: ""; position: absolute; width: 10px; height: 10px; right: 12%; top: 32%; background: #f3cc57; border: 1px solid #245b50; border-radius: 50%; box-shadow: -62px 30px 0 #f3cc57,-125px 61px 0 #f3cc57; }
.mini-tour-panel figcaption { padding: 13px 16px; display: grid; grid-template-columns: 90px 1fr; gap: 15px; align-items: start; }
.mini-tour-panel figcaption > span { padding-top: 3px; color: var(--muted); font-size: 6px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.mini-tour-panel figcaption h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -.025em; }.mini-tour-panel figcaption p { margin: 0; color: var(--muted); font-size: 7px; }
.mini-tour-window .showcase-progress { background: rgba(17,17,15,.15); }.mini-tour-window .showcase-progress i { background: var(--orange); }

.section-mini-render { padding: 0; transform: none !important; }
.library-window.section-mini-render { width: min(100%,1200px); min-height: 0; margin: 0 auto; }
.learning-visual.section-mini-render { width: min(100%,1200px); min-height: 0; margin: 0 auto; display: block; }

.section { padding: 140px max(24px, calc((100vw - var(--max)) / 2)); }
.section-heading { display: grid; grid-template-columns: 1fr 1.3fr .9fr; align-items: end; gap: 40px; margin-bottom: 70px; }
.section-heading .eyebrow { align-self: start; }
.section-heading h2, .learning-copy h2, .knowledge h2, .interactables h2, .frames h2, .education h2, .research h2, .platforms h2, .closing h2 { font-size: clamp(48px, 6vw, 82px); }
.section-heading > p:last-child { max-width: 330px; margin: 0 0 4px auto; color: var(--muted); line-height: 1.65; font-size: 15px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { min-height: 610px; padding: 25px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.feature-learn { background: #e8e1d3; }
.feature-create { background: #f1c85b; }
.feature-build { background: #8796de; }
.feature-number { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 750; }
.feature-art { position: relative; height: 295px; margin: 35px 0 26px; }
.feature-card h3 { margin: auto 0 12px; font-size: 32px; letter-spacing: -.045em; }
.feature-card p { min-height: 66px; margin: 0 0 25px; color: rgba(17,17,15,.68); line-height: 1.55; font-size: 14px; }
.feature-card a { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(17,17,15,.18); text-decoration: none; font-size: 12px; font-weight: 700; }
.feature-card a span { transition: transform .2s; }
.feature-card a:hover span { transform: translateX(4px); }
.question-ring { position: absolute; width: 130px; height: 130px; left: 50%; top: 50%; display: grid; place-items: center; transform: translate(-50%, -50%); border: 1px solid var(--ink); border-radius: 50%; font: italic 80px/1 var(--serif); }
.question-ring::before, .question-ring::after { content: ""; position: absolute; border: 1px solid rgba(17,17,15,.2); border-radius: 50%; }
.question-ring::before { inset: -34px; }
.question-ring::after { inset: -66px; }
.hint-stack span { position: absolute; padding: 8px 12px; background: var(--paper); border-radius: 7px; font-size: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.hint-stack span:nth-child(1) { top: 15px; left: 4px; }
.hint-stack span:nth-child(2) { right: 0; top: 105px; }
.hint-stack span:nth-child(3) { left: 25px; bottom: 3px; background: var(--orange); color: white; }
.page { position: absolute; width: 180px; height: 235px; left: 50%; top: 50%; padding: 35px 28px; background: #fffdf7; border: 1px solid var(--ink); border-radius: 3px; }
.page-back { transform: translate(-42%, -55%) rotate(7deg); opacity: .6; }
.page-front { transform: translate(-58%, -48%) rotate(-5deg); box-shadow: 8px 12px 0 rgba(17,17,15,.12); }
.page-front i { display: block; height: 3px; margin-bottom: 12px; background: var(--ink); opacity: .55; }
.page-front i:nth-child(2) { width: 60%; }
.page-front i:nth-child(5) { width: 75%; }
.page-front b { display: block; height: 55px; margin: 20px 0; background: var(--orange); opacity: .8; }
.spark { position: absolute; top: 12px; right: 28px; font-size: 38px; }
.model-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(17,17,15,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,15,.5) 1px, transparent 1px); background-size: 28px 28px; transform: perspective(500px) rotateX(60deg) scale(1.2); }
.wire-cube { position: absolute; width: 120px; height: 120px; left: 50%; top: 50%; transform: translate(-50%, -55%) rotate(30deg) skew(-7deg); border: 3px solid var(--ink); background: rgba(244,241,232,.14); }
.wire-cube::before { content: ""; position: absolute; inset: 18px -38px -38px 38px; border: 3px solid var(--ink); }
.wire-cube i, .wire-cube b, .wire-cube span { position: absolute; height: 3px; width: 54px; background: var(--ink); transform-origin: left; }
.wire-cube i { left: 0; bottom: 0; transform: rotate(42deg); }
.wire-cube b { right: -55px; top: -1px; transform: rotate(42deg); }
.wire-cube span { left: 117px; bottom: -2px; transform: rotate(42deg); }
.model-art small { position: absolute; bottom: 2px; right: 5px; font: 10px monospace; }

.knowledge { display: grid; grid-template-columns: minmax(0,1fr); gap: 70px; align-items: start; background: #dcd7ee; }
.knowledge-copy { max-width: 820px; }
.knowledge-copy > p:not(.eyebrow) { max-width: 570px; margin: 30px 0 40px; color: rgba(17,17,15,.65); font-size: 17px; line-height: 1.7; }
.knowledge-points { border-top: 1px solid rgba(17,17,15,.22); }
.knowledge-points div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid rgba(17,17,15,.22); }
.knowledge-points span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 760; }
.knowledge-points p { margin: 0; color: rgba(17,17,15,.64); font-size: 13px; line-height: 1.5; }
.library-window { overflow: hidden; min-width: 0; border: 1px solid rgba(17,17,15,.32); border-radius: 18px; background: #f8f6ef; box-shadow: 26px 28px 0 rgba(17,17,15,.11); transform: translate3d(0,var(--motion-shift,0px),0) scale(var(--motion-scale,1)) rotate(1.2deg); }
.library-topbar { height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.library-topbar > div { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.library-mark { width: 28px; height: 28px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 8px; font: italic 15px var(--serif); }
.library-topbar button { padding: 9px 13px; color: white; background: var(--ink); border: 0; border-radius: 9px; font-size: 10px; }
.library-body { display: grid; grid-template-columns: 54px 1fr; min-height: 540px; }
.library-rail { padding: 18px 10px; display: flex; flex-direction: column; gap: 11px; align-items: center; border-right: 1px solid var(--line); }
.library-rail i { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); border-radius: 9px; font-style: normal; font-size: 13px; }
.library-rail .selected { color: white; background: var(--ink); }
.library-content { min-width: 0; padding: 27px; }
.library-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.library-heading small { color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.library-heading h3 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.04em; }
.library-heading > span { padding: 7px 10px; background: #ebe7df; border-radius: 99px; font-size: 8px; }
.library-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 12px; }
.source-card { position: relative; min-width: 0; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; }
.source-card h4 { margin: 8px 0; font-size: 14px; letter-spacing: -.02em; }
.source-card p, .source-card > span { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.source-type { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.source-featured { min-height: 235px; color: white; background: #25251f; }
.source-featured .source-type, .source-featured p { color: rgba(255,255,255,.6); }
.source-featured h4 { max-width: 160px; font: 25px/1.05 var(--serif); }
.source-featured > p { position: absolute; left: 18px; bottom: 17px; }
.source-orbit { position: absolute; width: 145px; height: 145px; right: -35px; bottom: -25px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.source-orbit::before, .source-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.source-orbit::before { inset: 22px -12px; }.source-orbit::after { inset: -12px 22px; }
.source-orbit i { position: absolute; width: 7px; height: 7px; background: var(--yellow); border-radius: 50%; }
.source-orbit i:nth-child(1) { left: 15px; top: 27px; }.source-orbit i:nth-child(2) { right: 20px; top: 12px; }.source-orbit i:nth-child(3) { left: 46px; bottom: 12px; }
.source-note { min-height: 235px; background: var(--yellow); }
.source-note h4 { margin-top: 24px; font: 22px/1.1 var(--serif); }
.source-note > span { position: absolute; left: 18px; bottom: 17px; color: rgba(17,17,15,.55); }
.source-slide { min-height: 130px; display: flex; align-items: center; gap: 13px; }
.mini-slide { flex: 0 0 90px; height: 73px; padding: 13px; background: #d9d3f1; }
.mini-slide b { display: block; width: 60%; height: 5px; margin-bottom: 13px; background: var(--ink); }
.mini-slide i { display: block; height: 2px; margin-bottom: 7px; background: rgba(17,17,15,.5); }
.source-suggestion { min-height: 130px; display: grid; grid-template-columns: 28px 1fr auto; gap: 7px; align-items: center; background: #d7e6d8; }
.source-suggestion > span { width: 25px; height: 25px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 50%; }
.source-suggestion > b { font-weight: 400; }

.interactables { color: var(--paper); background: var(--dark); }
.interactables-heading { display: grid; grid-template-columns: .7fr 1.35fr .7fr; gap: 45px; align-items: end; margin-bottom: 70px; }
.interactables-heading .eyebrow { align-self: start; }
.interactables-heading h2 em { color: var(--yellow); }
.interactables-heading > p:last-child { margin: 0; color: #a5a69e; line-height: 1.65; font-size: 15px; }
.interactable-demo { --demo-color: var(--yellow); display: grid; grid-template-columns: 1.28fr .72fr; min-height: 650px; overflow: hidden; border: 1px solid rgba(244,241,232,.3); border-radius: 22px; background: #23241f; transform: translate3d(0,var(--motion-shift,0px),0) scale(var(--motion-scale,1)); }
.demo-stage { position: relative; padding: 32px; display: grid; place-items: center; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px; }
.demo-canvas { position: relative; width: min(92%, 650px); aspect-ratio: 1.22; padding: clamp(28px,4vw,58px); color: var(--ink); background: var(--demo-color); border-radius: 3px; box-shadow: 20px 24px 0 rgba(0,0,0,.25); transition: background .35s; }
.demo-kicker { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; font-weight: 760; }
.demo-canvas h3 { position: relative; z-index: 2; margin: 45px 0 0; max-width: 480px; font-size: clamp(42px,6vw,76px); line-height: .92; letter-spacing: -.06em; }
.demo-canvas h3 span { font-family: var(--serif); font-weight: 400; font-style: italic; }
.demo-shape { position: absolute; width: 180px; height: 180px; right: 8%; bottom: 11%; border: 2px solid var(--ink); border-radius: 50%; transform: rotate(calc(var(--demo-turn, 64) * 1deg)); transition: transform .2s; }
.demo-shape::before, .demo-shape::after { content: ""; position: absolute; background: var(--ink); }
.demo-shape::before { width: 2px; top: -38px; bottom: -38px; left: 50%; }.demo-shape::after { height: 2px; left: -38px; right: -38px; top: 50%; }
.demo-shape i { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; background: var(--demo-color); }
.demo-shape i:nth-child(1) { left: 50%; top: -10px; }.demo-shape i:nth-child(2) { right: -10px; top: 50%; }.demo-shape i:nth-child(3) { left: 15%; bottom: 5%; }
.demo-progress { position: absolute; left: 9%; right: 9%; bottom: 10%; height: 2px; background: rgba(17,17,15,.25); }
.demo-progress i { display: block; width: 64%; height: 100%; background: var(--ink); }
.demo-canvas > small { position: absolute; left: 9%; bottom: 5%; font-size: 7px; letter-spacing: .12em; }
.demo-collaborators { position: absolute; right: 20px; top: 20px; display: flex; }
.demo-collaborators i { width: 30px; height: 30px; margin-left: -6px; display: grid; place-items: center; color: var(--ink); background: var(--paper); border: 2px solid #23241f; border-radius: 50%; font: 9px var(--sans); }
.demo-collaborators i:nth-child(2) { background: #d9d3f1; }.demo-collaborators i:nth-child(3) { background: var(--orange); }
.control-deck { padding: 38px 32px; color: var(--ink); background: #eeeadf; }
.control-deck-head { display: flex; justify-content: space-between; padding-bottom: 24px; margin-bottom: 40px; border-bottom: 1px solid rgba(17,17,15,.16); font-size: 11px; font-weight: 720; }
.control-deck-head i { color: #547d59; font-style: normal; }
.control-deck label { display: flex; justify-content: space-between; margin-bottom: 18px; font-size: 12px; font-weight: 700; }
.control-deck output { font: italic 14px var(--serif); }
.control-deck input[type="range"] { width: 100%; height: 3px; margin: 0 0 52px; accent-color: var(--ink); cursor: grab; }
.control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; padding-bottom: 40px; border-bottom: 1px solid rgba(17,17,15,.16); }
.control-row > div > span { display: block; margin-bottom: 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.swatches { display: flex; gap: 7px; }
.swatches button { width: 25px; height: 25px; padding: 0; border: 1px solid rgba(17,17,15,.3); border-radius: 50%; background: var(--swatch); cursor: pointer; }
.swatches button:nth-child(1) { background: #f2cb5c; }.swatches button:nth-child(2) { background: #7890ff; }.swatches button:nth-child(3) { background: #8fb799; }.swatches button:nth-child(4) { background: #ff7950; }
.swatches button.selected { outline: 2px solid var(--ink); outline-offset: 3px; }
.shuffle-button { min-height: 44px; padding: 0 13px; display: flex; justify-content: space-between; align-items: center; color: white; background: var(--ink); border: 0; border-radius: 10px; font-size: 10px; cursor: pointer; }
.shuffle-button span { font-size: 17px; }
.interactable-types { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 35px; }
.interactable-types span { padding: 8px 10px; border: 1px solid rgba(17,17,15,.2); border-radius: 99px; color: var(--muted); font-size: 9px; }

[data-scroll-motion] { will-change: transform; transition: transform .09s linear; }

.learning { display: grid; grid-template-columns: minmax(0,1fr); gap: 70px; align-items: start; background: #e9e4d8; }
.learning-copy { max-width: 820px; }
.learning-visual { min-height: 600px; position: relative; display: grid; place-items: center; transform: translate3d(0,var(--motion-shift,0px),0) scale(var(--motion-scale,1)); }
.lesson-card { border: 1px solid var(--ink); background: #f8f5ec; box-shadow: 18px 18px 0 var(--orange); }
.lesson-main { width: min(100%, 520px); min-height: 520px; padding: 38px; transform: rotate(-2deg); }
.lesson-label { display: block; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 720; text-transform: uppercase; letter-spacing: .12em; }
.lesson-main h3 { max-width: 350px; margin: 32px 0; font: 40px/1.05 var(--serif); }
.force-diagram { position: relative; height: 210px; margin: 0 15px 24px; }
.ground { position: absolute; left: 0; right: 0; top: 115px; height: 2px; background: var(--ink); }
.block { position: absolute; width: 82px; height: 62px; left: 50%; top: 53px; transform: translateX(-50%); background: var(--yellow); border: 2px solid var(--ink); }
.force-up, .force-down { position: absolute; left: 52%; font: italic 17px var(--serif); }
.force-up { top: 8px; }
.force-down { top: 130px; }
.lesson-question { padding: 15px 18px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }
.lesson-side { position: absolute; width: 180px; right: -20px; top: 50px; padding: 18px; box-shadow: -8px 9px 0 var(--blue); transform: rotate(5deg); }
.lesson-side span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.lesson-side strong { display: block; margin: 12px 0; font: 32px var(--serif); }
.lesson-side small { font-size: 13px; color: var(--muted); }
.lesson-side div { display: flex; gap: 5px; }
.lesson-side i { width: 30px; height: 4px; background: var(--blue); }
.lesson-side i:nth-child(n+3) { background: #ddd9cf; }
.learning-copy > p:not(.eyebrow) { max-width: 520px; margin: 30px 0 40px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 17px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 620; }
.check-list li:last-child { border-bottom: 1px solid var(--line); }
.check-list span { color: var(--muted); font: italic 12px var(--serif); }

.frames { background: var(--paper); }
.frames-heading { display: grid; grid-template-columns: 1.5fr .7fr; gap: 80px; align-items: end; margin-bottom: 65px; }
.frames-heading > p { max-width: 410px; margin: 0; color: var(--muted); line-height: 1.7; font-size: 15px; }
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.frame-card { min-height: 360px; padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; transition: transform .25s, box-shadow .25s; }
.frame-card:hover { transform: translateY(-5px); box-shadow: 0 17px 35px rgba(17,17,15,.1); }
.frame-card > span { font: italic 11px var(--serif); color: var(--muted); }
.frame-icon { width: 108px; height: 108px; margin: 40px auto; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 55px/1 var(--serif); }
.frame-card h3 { margin: auto 0 9px; font-size: 27px; letter-spacing: -.04em; }
.frame-card p { margin: 0; color: var(--muted); font-size: 12px; }
.frame-modeler { background: #ebddcf; }.frame-grapher { background: #d7e7da; }.frame-doodle { background: #f1cd65; }.frame-capture { background: #ccd6ee; }.frame-studio { background: #e7d6e8; }.frame-tweaks { background: #e4e1d7; }
.cube-icon { transform: rotate(12deg); }.graph-icon { font-family: var(--sans); }

.possibilities { color: var(--paper); background: var(--dark); }
.section-heading-light { grid-template-columns: 1fr 2.2fr; }
.section-heading-light h2 { font-family: var(--serif); font-weight: 400; }
.capability { display: grid; grid-template-columns: 70px 1fr 1.3fr 40px; gap: 30px; align-items: center; padding: 35px 5px; border-top: 1px solid rgba(244,241,232,.22); transition: padding .25s, color .25s; }
.capability:last-child { border-bottom: 1px solid rgba(244,241,232,.22); }
.capability:hover { padding-inline: 20px; color: var(--yellow); }
.capability > span { font: italic 13px var(--serif); color: #a5a69e; }
.capability h3 { margin: 0; font-size: clamp(30px, 4vw, 54px); letter-spacing: -.04em; }
.capability p { margin: 0; color: #a5a69e; line-height: 1.5; font-size: 14px; }
.capability i { font-size: 20px; font-style: normal; }

.education { display: grid; grid-template-columns: .84fr 1.16fr; gap: clamp(60px,8vw,120px); align-items: center; background: #657cef; }
.education-copy > p:not(.eyebrow) { max-width: 590px; margin: 30px 0 40px; color: rgba(17,17,15,.7); font-size: 17px; line-height: 1.65; }
.education-features article { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 17px 0; border-top: 1px solid rgba(17,17,15,.25); }
.education-features article:last-child { border-bottom: 1px solid rgba(17,17,15,.25); }
.education-features article > span { padding-top: 3px; font: italic 11px var(--serif); }
.education-features h3 { margin: 0 0 5px; font-size: 14px; }
.education-features p { margin: 0; color: rgba(17,17,15,.67); font-size: 12px; line-height: 1.45; }
.classroom-preview { overflow: hidden; border: 1px solid var(--ink); border-radius: 18px; background: #f7f4eb; box-shadow: 22px 24px 0 rgba(17,17,15,.16); transform: translate3d(0,var(--motion-shift,0px),0) scale(var(--motion-scale,1)) rotate(-1.1deg); }
.classroom-bar { height: 60px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.classroom-bar > div { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.classroom-bar > div span { width: 29px; height: 29px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 8px; font-size: 9px; }
.classroom-bar > i { padding: 7px 10px; color: #4053b2; background: #e4e7fa; border-radius: 99px; font-size: 8px; font-style: normal; }
.classroom-welcome { padding: 30px 30px 20px; }
.classroom-welcome small { font-size: 8px; letter-spacing: .13em; color: var(--muted); }
.classroom-welcome h3 { margin: 7px 0; font-size: 27px; letter-spacing: -.04em; }
.classroom-welcome p { margin: 0; color: var(--muted); font-size: 11px; }
.classroom-stats { padding: 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.classroom-stats article { min-height: 125px; padding: 17px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 11px; background: white; }
.classroom-stats span { font-size: 8px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.classroom-stats strong { margin: 15px 0 auto; font: 25px var(--serif); }
.classroom-stats small { color: var(--muted); font-size: 8px; }
.classroom-activity { margin: 16px 30px 30px; padding: 19px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.activity-title { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 10px; }
.activity-title span { color: var(--muted); }
.activity-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.activity-row > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-style: normal; font-size: 10px; }
.activity-green { background: #dceadd; }.activity-yellow { background: #fae8a9; }.activity-blue { background: #dfe4fc; }
.activity-row div { display: flex; flex-direction: column; gap: 3px; }
.activity-row strong { font-size: 9px; }.activity-row span { color: var(--muted); font-size: 8px; }.activity-row b { padding: 5px 7px; color: var(--muted); background: #efede7; border-radius: 99px; font-size: 7px; font-weight: 600; }

.research { display: grid; grid-template-columns: 1fr 1fr; min-height: 780px; align-items: center; gap: 7vw; background: var(--green); }
.research-copy > p:not(.eyebrow) { max-width: 600px; margin: 35px 0 50px; line-height: 1.7; color: rgba(17,17,15,.69); font-size: 17px; }
.research-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(17,17,15,.28); }
.research-metrics div { padding: 22px 10px 0 0; }
.research-metrics strong { display: block; margin-bottom: 9px; font: 35px var(--serif); }
.research-metrics span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.research-mark { position: relative; width: min(100%, 530px); aspect-ratio: 1; display: grid; place-items: center; margin: auto; border: 1px solid rgba(17,17,15,.3); border-radius: 50%; transform: translate3d(0,var(--motion-shift,0px),0) scale(var(--motion-scale,1)); }
.research-mark::before { content: ""; position: absolute; inset: 16%; border: 1px dashed rgba(17,17,15,.38); border-radius: 50%; }
.research-mark img { width: 40%; border-radius: 50%; }
.energy-orbit { position: absolute; border: 1px solid rgba(17,17,15,.35); border-radius: 50%; }
.orbit-one { inset: 5% 24%; animation: orbit 12s linear infinite; }
.orbit-two { inset: 24% 5%; animation: orbit 16s linear infinite reverse; }
.energy-orbit::after { content: ""; position: absolute; width: 12px; height: 12px; left: 50%; top: -6px; background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; }
@keyframes orbit { to { transform: rotate(360deg); } }
.watt-label { position: absolute; right: -14px; bottom: 16%; padding: 10px 14px; background: var(--paper); border: 1px solid var(--ink); transform: rotate(-5deg); font: 12px monospace; }

.platforms { min-height: 720px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; overflow: hidden; background: #e7e1d2; }
.platforms-copy > p:not(.eyebrow) { max-width: 540px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.device-stage { position: relative; min-height: 460px; transform: translate3d(0,var(--motion-shift,0px),0) scale(var(--motion-scale,1)); }
.device { position: absolute; padding: 8px; border: 2px solid var(--ink); border-radius: 14px; background: var(--ink); box-shadow: 18px 22px 0 rgba(17,17,15,.12); }
.device > div { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 16px; background: var(--paper); border-radius: 6px; }
.desktop-device { width: 520px; height: 325px; left: 0; top: 20px; }
.desktop-device::after { content: ""; position: absolute; width: 130px; height: 60px; left: 50%; bottom: -60px; transform: translateX(-50%); border-bottom: 10px solid var(--ink); border-left: 38px solid transparent; border-right: 38px solid transparent; }
.tablet-device { width: 235px; height: 315px; right: -20px; bottom: 0; transform: rotate(4deg); }
.phone-device { width: 116px; height: 220px; left: 32%; bottom: -15px; transform: rotate(-5deg); }
.device-logo { width: 30px; height: 30px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 8px; font: italic 14px var(--serif); }
.device i, .device b { display: block; background: #d7d2c7; border-radius: 5px; }
.desktop-device i { width: 58%; height: 35px; margin: 20px 0 9px; }.desktop-device i:nth-of-type(2) { width: 76%; height: 125px; background: var(--yellow); }.desktop-device i:nth-of-type(3) { width: 34%; height: 9px; }
.tablet-device b { height: 115px; margin: 20px 0 10px; background: #8796de; }.tablet-device i { height: 38px; margin-top: 8px; }
.phone-device b { height: 60px; margin: 18px 0 8px; background: var(--orange); }.phone-device i { height: 25px; margin-top: 7px; }

.closing { min-height: 700px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); background: var(--orange); }
.closing .eyebrow::before { display: none; }
.closing h2 { font-size: clamp(60px, 8vw, 112px); }
.closing .button { margin-top: 50px; }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--yellow); }
.site-footer { min-height: 150px; padding: 40px max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: center; background: var(--paper); }
.site-footer p { margin: 0; color: var(--muted); font-size: 12px; }
.copyright { text-align: right; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.feature-card:nth-child(2) { transition-delay: .1s; }
.feature-card:nth-child(3) { transition-delay: .2s; }

@media (max-width: 1180px) {
  .site-nav { gap: 20px; }
  .site-nav a { font-size: 12px; }
}

@media (max-width: 1050px) {
  .product-tour-sticky { padding-top: 90px; }
  .app-showcase { grid-template-columns: 150px minmax(0,1fr); }
  .hero { grid-template-columns: 1fr; padding-top: 135px; }
  .hero-copy { max-width: 800px; }
  .hero-visual { width: 100%; margin: 95px auto 0; }
  .section-heading { grid-template-columns: 1fr 2fr; }
  .section-heading > p:last-child { grid-column: 2; margin-left: 0; }
  .feature-card { min-height: 560px; }
  .knowledge { grid-template-columns: 1fr; }
  .knowledge-copy { max-width: 800px; }
  .library-window { width: 100%; margin: 0 auto; }
  .interactables-heading { grid-template-columns: 1fr 2fr; }
  .interactables-heading > p:last-child { grid-column: 2; }
  .interactable-demo { grid-template-columns: 1fr; }
  .demo-stage { min-height: 610px; }
  .frame-grid { grid-template-columns: repeat(2, 1fr); }
  .learning { grid-template-columns: 1fr; }
  .learning-visual { width: 100%; margin: auto; }
  .learning-copy { max-width: 750px; }
  .education { grid-template-columns: 1fr; }
  .education-copy { max-width: 800px; }
  .classroom-preview { width: min(760px, 100%); margin: auto; }
  .research { min-height: auto; }
  .platforms { grid-template-columns: 1fr; }
  .platforms-copy { max-width: 760px; }
  .device-stage { width: min(720px, 100%); margin: 0 auto; }
}

@media (max-width: 760px) {
  .site-header { height: 70px; padding-inline: 20px; }
  .menu-toggle { position: relative; z-index: 17; display: grid; gap: 6px; }
  .menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 1px; background: var(--ink); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:nth-last-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0 0 auto; width: 100%; height: 100vh; height: 100dvh; z-index: 16; padding: 110px 24px 40px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: var(--paper); transform: translateY(-105%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .site-nav.open { transform: none; }
  .site-nav a { padding: 22px 4px; border-bottom: 1px solid var(--line); font-size: 27px; letter-spacing: -.04em; }
  .nav-cta { margin-top: 22px; text-align: center; color: white; border-radius: 99px; font-size: 16px !important; }
  .product-tour { height: auto; }
  .product-tour-sticky { position: relative; height: auto; min-height: 0; padding: 100px 20px 75px; overflow: hidden; }
  .tour-heading { display: block; margin-bottom: 34px; }
  .tour-heading h2 { font-size: 54px; }
  .tour-heading > p { margin-top: 24px; text-align: left; }
  .tour-heading > p small { display: none; }
  .tour-desktop-cue { display: none; }
  .tour-mobile-cue { display: inline; }
  .app-showcase { width: 110%; height: 560px; margin-left: -5%; grid-template-columns: 1fr; transform: none !important; border-radius: 13px; }
  .app-showcase-sidebar { display: none; }
  .app-showcase-main { padding-top: 12px; }
  .mini-tour-topbar { grid-template-columns: 1fr auto; }.mini-tour-topbar > span { display: none; }
  .showcase-search { margin-inline: 11px; }
  .project-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .project-viewport::-webkit-scrollbar { display: none; }
  .project-strip { padding-inline: 11px; transform: none !important; }
  .project-panel { flex-basis: 82vw; scroll-snap-align: center; }
  .mini-tour-panel { flex-basis: 82vw; grid-template-rows: minmax(0,1fr) 74px; scroll-snap-align: center; }.mini-tour-panel figcaption { grid-template-columns: 1fr; gap: 4px; }.mini-tour-panel figcaption > span { display: none; }.mini-tour-panel figcaption h3 { font-size: 13px; }
  .cover-wall { padding: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); gap: 8px; }
  .work-cover { padding: 11px; }.work-cover strong { font-size: 18px; }.work-cover span { font-size: 7px; }
  .project-intro h3, .project-divider h3, .project-finish h3 { font-size: 42px; }
  .showcase-progress { display: none; }
  .hero { min-height: auto; padding: 120px 20px 70px; }
  h1 { font-size: clamp(54px, 16vw, 78px); }
  .hero-proof { margin-top: 55px; }
  .hero-proof dd { font-size: 11px; }
  .hero-visual { min-height: 0; margin-top: 35px; }
  .orb-one { width: 410px; height: 410px; }
  .hero-mini-render { width: 100%; transform: none; }
  .product-window { width: 115%; transform: translateX(3%) rotate(1.5deg); }
  .window-body { min-height: 390px; grid-template-columns: 52px 1fr; }
  .mock-workspace { padding: 24px 24px 20px; }
  .prompt-bar { left: 24px; right: 24px; }
  .note-one, .note-two { display: none; }
  .section { padding: 95px 20px; }
  .section-heading { display: block; margin-bottom: 45px; }
  .section-heading h2 { margin-bottom: 28px; }
  .section-heading > p:last-child { margin: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 570px; }
  .knowledge { gap: 60px; }
  .knowledge-points div { grid-template-columns: 75px 1fr; }
  .library-window { width: 110%; margin-left: -5%; }
  .library-body { min-height: 470px; grid-template-columns: 43px 1fr; }
  .library-content { padding: 18px 14px; }
  .library-heading > span { display: none; }
  .library-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .source-card { padding: 13px; }
  .source-featured, .source-note { min-height: 210px; }
  .source-featured h4, .source-note h4 { font-size: 18px; }
  .source-slide, .source-suggestion { min-height: 105px; }
  .mini-slide { display: none; }
  .interactables-heading { display: block; }
  .interactables-heading h2 { margin-bottom: 28px; }
  .interactable-demo { min-height: 0; }
  .demo-stage { min-height: 440px; padding: 18px; }
  .demo-canvas { width: 96%; padding: 28px 24px; }
  .demo-canvas h3 { margin-top: 35px; font-size: clamp(40px,12vw,58px); }
  .demo-shape { width: 110px; height: 110px; right: 12%; }
  .control-deck { padding: 28px 22px; }
  .frames-heading { grid-template-columns: 1fr; gap: 30px; }
  .frame-grid { grid-template-columns: 1fr; }
  .frame-card { min-height: 315px; }
  .frame-icon { margin-block: 26px; }
  .learning { gap: 70px; }
  .learning-visual { min-height: 520px; }
  .lesson-main { min-height: 460px; padding: 26px; }
  .lesson-main h3 { font-size: 32px; }
  .lesson-side { width: 150px; right: -5px; top: 25px; }
  .capability { grid-template-columns: 40px 1fr 30px; gap: 12px; padding-block: 27px; }
  .capability p { display: none; }
  .education { gap: 60px; }
  .classroom-preview { width: 108%; margin-left: -4%; }
  .classroom-stats { padding-inline: 18px; }
  .classroom-activity { margin-inline: 18px; }
  .activity-row b { display: none; }
  .research { grid-template-columns: 1fr; }
  .research-mark { margin-top: 35px; }
  .platforms { min-height: auto; }
  .device-stage { min-height: 390px; transform: scale(.8); transform-origin: left top; width: 125%; margin-bottom: -75px; }
  .site-footer { grid-template-columns: 1fr; padding-block: 50px; }
  .copyright { text-align: left; }
}

@media (max-width: 420px) {
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .hero-proof { gap: 8px; }
  .chat-line { max-width: 95%; }
  .diagram { gap: 14px; }
  .floating-note { font-size: 10px; }
  .research-metrics { gap: 7px; }
  .research-metrics span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .product-tour { height: auto; padding: 120px 24px; }
  .product-tour-sticky { position: relative; height: auto; padding: 0; overflow: visible; }
  .app-showcase { height: 610px; transform: none !important; }
  .project-viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .project-strip { transform: none !important; }
  .project-panel { scroll-snap-align: start; }
  .mini-tour-panel { scroll-snap-align: start; }
  [data-scroll-motion] { transform: none !important; }
}