/*
Theme Name: ThinkBRICK Academy
Theme URI: https://www.thinkbrick.de
Author: ThinkBRICK Academy
Description: Maßgeschneidertes WordPress-Theme für die ThinkBRICK Academy Homepage.
Version: 1.0.55
Text Domain: thinkbrick-academy
*/

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/geist-latin.woff2') format('woff2');
}

:root { --font-geist: 'Geist', Arial, sans-serif; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body.page { margin: 0; overflow-x: hidden; overflow-y: auto; background: #eee8df; color: #17262c; font-family: var(--font-geist); }
body, button, a { -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; }
img { max-width: 100%; }
::selection { background: #55b9b0; color: #fffdf8; }

.page {
  --ink: #17262c;
  --ink-2: #20353b;
  --paper: #fffdf8;
  --sand: #eee8df;
  --teal: #55b9b0;
  --teal-light: #bfe9e4;
  --teal-dark: #2d8079;
  --cta-neon: #58e7df;
  min-height: 100vh;
  overflow: hidden;
  color: #17262c;
  background: var(--sand);
  font-family: var(--font-geist), Arial, sans-serif;
}

.page * { box-sizing: border-box; }
.page a { color: inherit; text-decoration: none; }

.siteHeader {
  height: 82px;
  padding: 0 clamp(24px, 5vw, 78px);
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--paper);
  background: var(--ink);
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.headerInner {
  width: min(1500px, 100%);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
}
.logo { width: clamp(190px, 19vw, 265px); margin-right: auto; }
.logo img { width: 100%; height: auto; display: block; }
.nav { display: flex; align-items: stretch; gap: clamp(7px, 1.4vw, 23px); }
.navItem { position: relative; display: flex; align-items: center; }
.navTrigger {
  min-height: 44px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 740;
  white-space: nowrap;
  transition: color .2s ease;
}
.navDirect {
  min-height: 44px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  color: var(--paper);
  font-size: 16px;
  font-weight: 740;
  white-space: nowrap;
  transition: color .2s ease;
}
.navDirect:hover,
.navDirect:focus-visible { color: var(--teal-light); outline: none; }
.navItem:hover .navTrigger,
.navItem:focus-within .navTrigger { color: var(--teal-light); }
.navDropdown {
  width: 272px;
  padding: 9px 14px;
  position: absolute;
  z-index: 80;
  left: 50%;
  top: calc(100% - 2px);
  display: grid;
  gap: 0;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 9px 0 var(--teal-dark);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .18s ease, transform .18s ease;
}
.navItem:first-child .navDropdown { left: 0; transform: translate(0, 10px); }
.navItem:last-of-type .navDropdown { left: auto; right: 0; transform: translate(0, 10px); }
.navItem:hover .navDropdown,
.navItem:focus-within .navDropdown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.navItem:first-child:hover .navDropdown,
.navItem:first-child:focus-within .navDropdown,
.navItem:last-of-type:hover .navDropdown,
.navItem:last-of-type:focus-within .navDropdown { transform: translate(0, 0); }
.navDropdown>a {
  min-height: 43px;
  padding: 9px 7px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(23, 38, 44, .17);
  transition: transform .18s ease, color .18s ease;
}
.navDropdown>a:last-child { border-bottom: 0; }
.navDropdown>a strong { font-size: 14px; font-weight: 680; line-height: 1.25; }
.navDropdown>a:hover,
.navDropdown>a:focus-visible {
  color: var(--teal-dark);
  outline: none;
  transform: translateX(3px);
}
.mobileMenu { display: none; }
.mobileMenu>summary { list-style: none; }
.mobileMenu>summary::-webkit-details-marker { display: none; }

.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.heroStage {
  width: min(100%, 1600px);
  min-height: 750px;
  margin-inline: auto;
  padding: 72px clamp(24px, 6vw, 104px) 78px;
  position: relative;
  display: grid;
  grid-template-columns: .93fr 1.07fr;
  align-items: center;
  gap: clamp(42px, 6vw, 102px);
}
.hero::after {
  content: '';
  width: 240px;
  height: 240px;
  position: absolute;
  right: -105px;
  bottom: -120px;
  border: 2px solid rgba(23, 38, 44, .12);
  transform: rotate(18deg);
}
.heroArt {
  min-height: 575px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  transform: scale(.9);
  transform-origin: center;
}
.heroGrid {
  position: absolute;
  z-index: -2;
  inset: 28px 7% 14px;
  border: 1px solid rgba(23, 38, 44, .18);
  background-image:
    linear-gradient(rgba(23, 38, 44, .15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .15) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: rotate(-7deg);
  animation: heroGridDrift 12s ease-in-out infinite alternate;
}
.heroGrid::after {
  content: '';
  position: absolute;
  inset: 15% -7% 8% 7%;
  border: 3px solid var(--teal-light);
  transform: rotate(7deg);
}
.heroStack { width: min(590px, 92%); display: flex; flex-direction: column; align-items: flex-start; }
.heroBrick {
  --shift: 0px;
  --tilt: 0deg;
  --entry: -90px;
  width: 80%;
  min-height: 118px;
  margin-top: -4px;
  padding: 5px 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset -16px -13px 0 rgba(23, 38, 44, .085), 13px 15px 0 rgba(23, 38, 44, .12);
  font-family: var(--font-geist), Arial, sans-serif;
  font-size: clamp(72px, 7vw, 116px);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.045em;
  animation: brickDrop 1s cubic-bezier(.2, .88, .26, 1.15) both;
}
.heroThink { --shift: 0px; --tilt: -1.3deg; --entry: -130px; animation-delay: .18s; }
.heroCheck { --shift: 86px; --tilt: 1deg; --entry: 130px; width: 84%; color: white; background: var(--teal-dark); animation-delay: .8s; }
.heroBrickWord { --shift: 32px; --tilt: -.5deg; --entry: -100px; width: 82%; color: var(--paper); background: var(--ink); animation-delay: 1.42s; }
.stackLabel {
  position: absolute;
  z-index: 4;
  right: 2%;
  top: 11%;
  padding: 12px 14px;
  color: white;
  background: var(--ink);
  border: 2px solid var(--paper);
  font: 800 9px/1 monospace;
  letter-spacing: .1em;
  transform: rotate(5deg);
  animation: labelFloat 4s ease-in-out 2.3s infinite alternate both;
}
.heroPlus { position: absolute; left: 4%; top: 20%; color: var(--teal-dark); font-size: 58px; font-weight: 300; transform: rotate(-8deg); }
.heroTab { width: 68px; height: 38px; position: absolute; right: 1%; bottom: 10%; border: 4px solid var(--teal-dark); transform: rotate(8deg); }

.heroCopy { position: relative; z-index: 4; }
.kicker {
  display: inline-block;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--teal);
  font: 800 9px/1 monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.mobileHeroArt { display: none; }
.heroCopy h1 {
  margin: 32px 0 0;
  font-family: var(--font-geist), Arial, sans-serif;
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.heroCopy h1 em { display: block; color: var(--teal-dark); font-style: normal; }
.heroHeadlineFirst { display: inline; }
.mobileHeroHeadline { display: none; }
.heroCopy>p { max-width: 720px; margin: 32px 0 0; color: #536064; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.45; }
.heroActions { margin-top: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.primaryButton {
  min-height: 58px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  gap: 19px;
  border: 3px solid var(--ink);
  background: var(--teal);
  box-shadow: 8px 9px 0 var(--ink);
  font-size: 12px;
  font-weight: 900;
  transition: transform .2s, box-shadow .2s;
}
.primaryButton b { min-width: 54px; min-height: 55px; display: grid; place-items: center; border-left: 3px solid var(--ink); font-size: 21px; }
.primaryButton:hover { transform: translate(-4px, -4px); box-shadow: 12px 13px 0 var(--ink); }
.textLink { padding: 9px 0; display: inline-flex; align-items: center; gap: 17px; border-bottom: 2px solid var(--ink); font-size: 12px; font-weight: 900; }
.partners { margin-top: 52px; }
.partners small { color: #737d7f; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.partnerLogos { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; }
.partnerLogos a { width: auto; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.partnerLogos img { display: block; height: auto; flex: 0 0 auto; object-fit: contain; }
.partnerLogos a:nth-child(1) img { width: 104px; }
.partnerLogos a:nth-child(2) img { width: 120px; transform: translateY(-2px); }
.partnerLogos a:nth-child(3) img { width: 118px; transform: translateY(3px); }
.partnerLogos a:nth-child(4) img { width: 108px; transform: translateY(-8px); }

.methodSection {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: white;
  background: var(--ink);
  border-block: 2px solid var(--ink);
}
.methodStage {
  width: min(100%, 1600px);
  min-height: 560px;
  margin-inline: auto;
  padding: 88px clamp(24px, 6vw, 104px);
  position: relative;
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  align-items: center;
  gap: clamp(50px, 6vw, 110px);
}
.methodGrid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(191, 233, 228, .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 233, 228, .25) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation: methodGridDrift 15s ease-in-out infinite alternate;
}
.methodCopy { position: relative; z-index: 5; padding: 0 0 18px 34px; }
.methodCopy>span { display: inline-block; padding: 7px 9px; color: var(--ink); background: var(--teal-light); border: 2px solid white; font: 850 9px/1 monospace; text-transform: uppercase; letter-spacing: .09em; }
.methodCopy h2 { margin: 22px 0 0; font-size: clamp(28px, 2.65vw, 43px); line-height: .94; letter-spacing: -.045em; }
.methodCopy h2 em { display: block; color: var(--teal); font-style: normal; }
.mobileMethodHeadline { display: none; }
.methodCopy p { max-width: 420px; margin: 24px 0 0; color: #b2bec0; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.55; }
.methodCorner {
  width: 74px;
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 0;
  border-left: 2px solid rgba(255, 255, 255, .55);
  border-block: 2px solid rgba(255, 255, 255, .55);
  pointer-events: none;
}

.methodItems { min-height: 340px; position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: clamp(18px, 2.2vw, 40px); }
.methodTrack { height: 3px; position: absolute; z-index: -1; left: 9%; right: 8%; top: 46%; background: rgba(255, 255, 255, .36); }
.methodTrack::before,
.methodTrack::after { content: ''; width: 13px; height: 13px; position: absolute; top: 50%; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); transform: translateY(-50%); }
.methodTrack::before { left: 0; }.methodTrack::after { right: 0; }
.methodTrack i { width: 17px; height: 17px; position: absolute; top: 50%; left: 0; border: 4px solid var(--ink); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(85, 185, 176, .22); transform: translate(-50%, -50%); animation: methodRunner 6s ease-in-out infinite; }
.methodItem { min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.methodItem img { width: min(220px, 100%); height: auto; display: block; filter: drop-shadow(9px 12px 0 rgba(85, 185, 176, .12)); }
.methodItem strong {
  width: min(250px, 92%);
  min-height: 60px;
  margin-top: -8px;
  padding: 11px 16px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--teal-light);
  border: 3px solid var(--ink);
  box-shadow: 7px 8px 0 var(--teal-dark);
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.15;
}
.methodIndex { position: absolute; z-index: 5; right: 9%; top: 8%; padding: 7px 8px; color: var(--teal); background: var(--ink); border: 1px solid rgba(255, 255, 255, .6); font: 800 8px/1 monospace; }
.methodPractice { transform: translateY(18px) rotate(-1.3deg); }
.methodAgile { transform: translateY(-20px) rotate(.7deg); }
.methodSupport { transform: translateY(23px) rotate(-.8deg); }
.methodPlus { position: absolute; left: 38%; top: 45px; color: rgba(255, 255, 255, .42); font-size: 64px; font-weight: 200; }
.methodDot { width: 18px; height: 18px; position: absolute; left: 25%; bottom: 45px; border: 4px solid var(--ink); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.methodSlashes { position: absolute; right: 4%; top: 36px; color: var(--teal); font: 900 34px/1 monospace; transform: rotate(-8deg); }

.riskSection {
  min-height: 100vh;
  padding: 62px clamp(22px, 4vw, 68px) 52px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sand);
}
.grid {
  position: absolute;
  z-index: -4;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(23, 38, 44, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .08) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: rotate(-1.2deg) scale(1.04);
  animation: gridDrift 18s ease-in-out infinite alternate;
}
.grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 15%, var(--sand) 77%);
}
.giantWord {
  position: absolute;
  z-index: -3;
  left: -2vw;
  bottom: -3.8vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23, 38, 44, .095);
  font-size: clamp(110px, 16vw, 286px);
  font-weight: 950;
  line-height: .72;
  letter-spacing: -.08em;
  white-space: nowrap;
  pointer-events: none;
}

.heading {
  width: min(980px, 100%);
  position: relative;
  z-index: 8;
  text-align: center;
}
.heading>span {
  display: inline-block;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  font: 850 10px/1 monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-1deg);
  box-shadow: 5px 5px 0 var(--teal-light);
}
.heading h1 {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 950;
  line-height: .91;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.heading h1 em { display: block; color: var(--teal-dark); font-style: normal; }

.maze {
  width: min(1760px, 96vw);
  height: auto;
  aspect-ratio: 1420 / 770;
  margin-top: 22px;
  position: relative;
  z-index: 2;
  container-type: inline-size;
}
.maze::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 5% 2% 2%;
  background: rgba(255, 253, 248, .32);
  border: 2px solid rgba(23, 38, 44, .14);
  transform: skewY(-1deg);
  box-shadow: 16px 18px 0 rgba(23, 38, 44, .06);
}

.wallLayer,
.routeLayer { position: absolute; inset: 9% 4% 7%; }
.wall,
.route {
  --x: 0%;
  --y: 0%;
  --length: 10%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  transform-origin: 0 0;
}
.horizontal { width: var(--length); height: 0; }
.vertical { width: 0; height: var(--length); }
.wall { border-color: rgba(23, 38, 44, .46); border-style: solid; }
.wall.horizontal { border-width: 3px 0 0; }
.wall.vertical { border-width: 0 0 0 3px; }
.wallStrong { border-color: var(--ink); }
.wallSoft { border-color: rgba(45, 128, 121, .34); }
.wall::after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  border-radius: 50%;
  background: var(--ink);
  opacity: .28;
}
.wall.horizontal::after { right: -3px; top: -5px; }
.wall.vertical::after { left: -5px; bottom: -3px; }

.route {
  z-index: 3;
  filter: drop-shadow(0 0 7px rgba(85, 185, 176, .32));
  opacity: .62;
}
.route.horizontal {
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 20px, transparent 20px 29px);
  animation: dashHorizontal 1.4s linear infinite;
}
.route.vertical {
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--teal) 0 20px, transparent 20px 29px);
  animation: dashVertical 1.4s linear infinite;
}

.runner {
  width: 18px;
  height: 18px;
  position: absolute;
  z-index: 5;
  left: 3%;
  top: 86%;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 5px var(--teal), 0 0 0 11px rgba(85, 185, 176, .18);
  transform: translate(-50%, -50%);
  animation: solveMaze 11s linear infinite;
}
.runner b {
  position: absolute;
  inset: -16px;
  border: 1px solid var(--teal-dark);
  border-radius: 50%;
  animation: runnerPulse 1.1s ease-out infinite;
}

.scanBeam {
  width: 21%;
  height: 90%;
  position: absolute;
  z-index: -1;
  left: -25%;
  top: 6%;
  opacity: .35;
  background: linear-gradient(90deg, transparent, rgba(85, 185, 176, .15), transparent);
  border-left: 1px solid rgba(45, 128, 121, .35);
  transform: skewX(-7deg);
  animation: scan 9s ease-in-out infinite;
}

.deadEnd {
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.deadEnd::before,
.deadEnd::after {
  content: '';
  width: 11px;
  position: absolute;
  border-top: 2px solid var(--ink);
  transform: rotate(45deg);
}
.deadEnd::after { transform: rotate(-45deg); }
.deadEnd i {
  position: absolute;
  inset: -10px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  animation: deadPulse 3.2s ease-out infinite;
}
.deadOne { left: 17%; top: 31%; }
.deadTwo { right: 28%; top: 20%; }
.deadThree { left: 29%; bottom: 15%; }
.deadFour { right: 12%; bottom: 22%; }
.deadTwo i { animation-delay: -.8s; }
.deadThree i { animation-delay: -1.6s; }
.deadFour i { animation-delay: -2.4s; }

.startTag,
.exitTag {
  width: 17.05%;
  min-height: 0;
  aspect-ratio: 1.92 / 1;
  position: absolute;
  z-index: 4;
  padding: clamp(15px, 1.48cqw, 26px) clamp(16px, 1.62cqw, 29px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 2px solid rgba(23, 38, 44, .72);
  box-shadow: 11px 12px 0 var(--teal-dark);
  transform: rotate(-3deg);
}
.startTag { left: 8%; bottom: 1%; color: white; background: var(--ink); }
.exitTag { right: 8%; top: 2%; background: var(--teal); transform: rotate(3deg); }
.startTag small,
.exitTag small { display: block; font: 850 clamp(8px, .7cqw, 12px)/1 monospace; letter-spacing: .12em; }
.startTag strong,
.exitTag strong { display: block; margin-top: clamp(9px, .92cqw, 16px); font-size: clamp(20px, 2.5cqw, 42px); font-weight: 900; line-height: .88; letter-spacing: -.055em; }
.startTag small { color: var(--teal); }
.startTag::after,
.exitTag::after {
  content: '';
  width: 48px;
  position: absolute;
  right: 18px;
  bottom: 14px;
  border-top: 5px solid currentColor;
}

.riskCard {
  width: 16.34%;
  aspect-ratio: 1.06 / 1;
  padding: clamp(15px, 1.4cqw, 25px) clamp(15px, 1.4cqw, 25px) clamp(14px, 1.27cqw, 23px);
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(23, 38, 44, .62);
  box-shadow: 9px 10px 0 var(--teal-dark);
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.riskCard:hover { transform: translate(-4px, -5px) rotate(0); box-shadow: 13px 15px 0 var(--teal-dark); }
.riskCard>span { color: var(--teal-dark); font: 900 clamp(8px, .7cqw, 12px)/1 monospace; letter-spacing: .13em; }
.riskCard h2 {
  max-width: 215px;
  margin: auto 0 0;
  font-size: clamp(14px, 1.62cqw, 28px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.riskCard p {
  width: 100%;
  max-width: 215px;
  margin: 16px 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 38, 44, .62);
  font-size: clamp(9px, .92cqw, 16px);
  font-weight: 650;
  line-height: 1.42;
}
.riskCard>i {
  width: 32px;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -16px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(23, 38, 44, .72);
  border-radius: 50%;
  background: var(--teal);
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}
.riskOne { left: 29%; top: 8%; transform: rotate(2deg); }
.riskTwo { left: 21%; top: 43%; background: var(--teal-light); transform: rotate(-1.5deg); }
.riskThree { left: 49%; top: 31%; background: var(--teal-light); transform: rotate(1.2deg); }
.riskFour { left: 45%; bottom: 6%; transform: rotate(1.5deg); }

.plus,
.slashes,
.tab { position: absolute; z-index: 7; pointer-events: none; }
.plus { left: 12%; top: 25%; color: var(--ink); font-size: 54px; font-weight: 300; transform: rotate(8deg); }
.slashes { right: 15%; bottom: 22%; color: var(--teal-dark); font: 900 35px/1 monospace; transform: rotate(-7deg); }
.tab { width: 62px; height: 34px; right: 7%; top: 43%; border: 3px solid var(--teal-dark); transform: rotate(6deg); }

.cta {
  min-height: 58px;
  margin-top: 42px;
  padding: 0 24px;
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  border: 3px solid var(--ink);
  background: var(--teal);
  box-shadow: 8px 9px 0 var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
}
.cta b { min-height: 55px; min-width: 57px; display: grid; place-items: center; border-left: 3px solid var(--ink); font-size: 22px; }
.cta:hover { transform: translate(-4px, -4px); box-shadow: 12px 13px 0 var(--ink); }

.learningWorld {
  min-height: 1180px;
  padding: 94px clamp(22px, 4vw, 68px) 104px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}
.learningGrid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(191, 233, 228, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 233, 228, .22) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 88%, transparent);
}
.learningHeading {
  width: min(980px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 8;
  text-align: center;
}
.learningHeading>span {
  display: inline-block;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--teal-light);
  border: 2px solid var(--paper);
  box-shadow: 5px 5px 0 var(--teal-dark);
  font: 850 10px/1 monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.learningHeading h2 {
  max-width: 900px;
  margin: 25px auto 0;
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.06em;
}
.learningHeading h2 em { display: block; color: var(--teal); font-style: normal; }
.learningHeading p {
  max-width: 760px;
  margin: 27px auto 0;
  color: #aebbbc;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.55;
}

.learningBoard {
  width: min(1760px, 96vw);
  min-height: 0;
  aspect-ratio: 1420 / 1080;
  margin: 76px auto 0;
  position: relative;
  z-index: 2;
}
.learningBoard::before {
  content: none;
}
.learningBoardLabel {
  min-width: 260px;
  padding: 15px 18px;
  position: absolute;
  z-index: 7;
  left: 2%;
  top: -22px;
  color: var(--ink);
  background: var(--teal);
  border: 1px solid var(--paper);
  box-shadow: 8px 9px 0 var(--teal-dark);
  transform: rotate(-2deg);
}
.learningBoardLabel small,
.learningBoardLabel strong { display: block; }
.learningBoardLabel small { font: 850 9px/1 monospace; letter-spacing: .11em; }
.learningBoardLabel strong { margin-top: 9px; font-size: 15px; font-weight: 900; letter-spacing: -.02em; }

.platformPanel,
.knowledgePanel,
.communityPanel {
  position: absolute;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(23, 38, 44, .62);
  box-shadow: 13px 14px 0 var(--teal-dark);
}
.platformPanel { width: 58%; left: 4%; top: 6%; z-index: 4; transform: rotate(-1.4deg); }
.knowledgePanel { --panel-tilt: 1.7deg; width: 21.83%; aspect-ratio: 1 / 1; right: 7%; top: 12.5%; z-index: 7; display: flex; flex-direction: column; container-type: inline-size; transform: rotate(var(--panel-tilt)); }
.communityPanel { --panel-tilt: 1.2deg; width: 26.76%; aspect-ratio: 1 / 1; right: 5%; bottom: 4%; z-index: 6; display: flex; flex-direction: column; container-type: inline-size; background: var(--teal-light); transform: rotate(var(--panel-tilt)); }
.platformPanel,
.knowledgePanel,
.communityPanel,
.levelPanel { transition: transform .25s, box-shadow .25s; }
.platformPanel:hover,
.knowledgePanel:hover,
.communityPanel:hover,
.levelPanel:hover { z-index: 12; transform: translate(-3px, -7px) rotate(0); box-shadow: 11px 13px 0 var(--teal-dark); }
.productChrome {
  height: 39px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  background: var(--ink);
}
.productChrome>span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(85, 185, 176, .18);
  animation: livePulse 1.8s ease-out infinite;
}
.productChrome small { font: 800 9px/1 monospace; letter-spacing: .12em; }
.productChrome i { margin-left: auto; color: var(--teal-light); font: 900 11px/1 monospace; letter-spacing: .12em; }
.platformCrop { aspect-ratio: 1.43 / 1; overflow: hidden; background: var(--paper); }
.platformCrop img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 4%; }
.knowledgePanel>.productChrome,
.communityPanel>.productChrome {
  height: 10.2cqw;
  min-height: 0;
  padding: 0 3.7cqw;
  flex: 0 0 auto;
  gap: 2.6cqw;
}
.knowledgePanel>.productChrome>span,
.communityPanel>.productChrome>span {
  width: 2.35cqw;
  height: 2.35cqw;
  box-shadow: 0 0 0 1.05cqw rgba(85, 185, 176, .18);
}
.knowledgePanel>.productChrome small,
.communityPanel>.productChrome small {
  font-size: 2.35cqw;
  white-space: nowrap;
}
.knowledgePanel>.productChrome i,
.communityPanel>.productChrome i {
  font-size: 2.35cqw;
  white-space: nowrap;
}
.knowledgeMock { min-height: 0; padding: 5.2cqw 5cqw 3.7cqw; flex: 1 1 auto; display: flex; flex-direction: column; background: var(--paper); }
.knowledgeMock header { display: grid; grid-template-columns: 7cqw 1fr 7.3cqw; align-items: start; gap: 2.55cqw; }
.knowledgeMock header>span { width: 7cqw; height: 7cqw; display: grid; place-items: center; color: #168242; border: .52cqw solid #168242; border-radius: 50%; font-size: 3.9cqw; font-weight: 900; }
.knowledgeMock header h3 { margin: 0; color: #168242; font-size: 4.1cqw; line-height: 1.2; letter-spacing: -.01em; }
.knowledgeMock header>b { width: 7.3cqw; height: 7.3cqw; display: grid; place-items: center; color: var(--paper); background: var(--teal); border-radius: 1.05cqw; font-size: 3.9cqw; }
.correctAnswer { min-height: 21cqw; margin-top: 5.2cqw; padding: 3.8cqw 3.1cqw; display: grid; grid-template-columns: 5.9cqw 1fr 5.2cqw; align-items: center; gap: 2.45cqw; background: #e1f1e7; border-left: .78cqw solid #168242; }
.correctAnswer i { width: 5.2cqw; height: 5.2cqw; display: grid; place-items: center; color: #168242; border: .26cqw solid #a9d2b8; background: var(--paper); font-size: 3.1cqw; font-style: normal; font-weight: 900; }
.correctAnswer p { margin: 0; font-size: 3.45cqw; font-weight: 760; line-height: 1.3; }
.correctAnswer b { color: #168242; font-size: 4.15cqw; }
.knowledgeStatus { margin-top: auto; padding-top: 3.4cqw; display: flex; justify-content: space-between; gap: 3.1cqw; border-top: .26cqw solid rgba(23, 38, 44, .18); color: #657174; font: 850 2.2cqw/1 monospace; letter-spacing: .08em; }
.knowledgeStatus strong { color: var(--teal-dark); }
.communityMock { min-height: 0; padding: 2.8cqw 3.2cqw 3cqw; flex: 1 1 auto; display: flex; flex-direction: column; background: var(--paper); }
.communityPost { height: 100%; padding: .65cqw .85cqw 0; display: flex; flex-direction: column; }
.communityPost header { display: flex; align-items: center; gap: 2.15cqw; }
.communityPost header>div { min-width: 0; flex: 1; }
.communityPost header>div>span { display: flex; align-items: center; gap: 1.5cqw; }
.communityPost header>b {
  width: 8.1cqw;
  height: 8.1cqw;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--teal-dark);
  border: .42cqw solid var(--ink);
  border-radius: 50%;
  box-shadow: .64cqw .64cqw 0 var(--teal);
  font: 900 2.55cqw/1 monospace;
}
.communityPost header strong,
.communityPost header small { display: block; }
.communityPost header strong { color: var(--ink); font-size: 2.75cqw; line-height: 1; }
.communityPost header i { padding: .85cqw 1.28cqw; color: var(--teal-dark); background: var(--teal-light); font-size: 1.9cqw; font-style: normal; font-weight: 850; line-height: 1; white-space: nowrap; }
.communityPost header small { margin-top: 1.05cqw; color: #687174; font-size: 2.15cqw; font-weight: 680; }
.communityPost header em { align-self: flex-start; color: var(--ink); font: 900 4.45cqw/.75 Arial, sans-serif; font-style: normal; }
.communityPost h3 { max-width: 87cqw; margin: 3.8cqw 0 0; font-size: 5.15cqw; line-height: 1.02; letter-spacing: -.025em; }
.communityPost>p { margin: 2.7cqw 0 0; color: #3f4d50; font-size: 2.78cqw; font-weight: 650; line-height: 1.36; }
.threadMeta { margin-top: auto; padding: 2cqw .42cqw; display: flex; justify-content: space-between; border-top: .21cqw solid #d9dddd; color: #687174; font-size: 2.1cqw; font-weight: 700; }
.threadMeta span:first-child { display: flex; align-items: center; gap: 1.05cqw; }
.threadMeta b { width: 4.45cqw; height: 4.45cqw; display: grid; place-items: center; border: .21cqw solid #dde2e2; background: #fff; font-size: 2.35cqw; }
.threadActions { min-height: 7.8cqw; margin-inline: -4.05cqw; padding: 0 3.62cqw; display: flex; align-items: center; gap: 3.4cqw; border-top: .21cqw solid #d9dddd; border-bottom: .21cqw solid #d9dddd; color: var(--ink); font-size: 2.05cqw; }
.threadActions span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.threadActions span:first-child { color: var(--teal-dark); }
.threadActions i { margin-left: auto; font-style: normal; }
.platformPanel>footer,
.knowledgePanel>footer,
.communityPanel>footer {
  min-height: 77px;
  padding: 15px 18px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}
.platformPanel>footer span,
.knowledgePanel>footer span,
.communityPanel>footer span { flex: 0 0 auto; color: var(--teal-dark); font: 850 9px/1 monospace; letter-spacing: .11em; }
.platformPanel>footer strong,
.knowledgePanel>footer strong,
.communityPanel>footer strong { max-width: 390px; text-align: right; font-size: clamp(14px, 1.35vw, 20px); line-height: 1.08; }
.knowledgePanel>footer,
.communityPanel>footer {
  height: 20cqw;
  min-height: 0;
  padding: 3.9cqw 4.7cqw 4.15cqw;
  flex: 0 0 auto;
  gap: 5.7cqw;
}
.knowledgePanel>footer span,
.communityPanel>footer span { font-size: 2.35cqw; }
.knowledgePanel>footer strong { max-width: 53cqw; font-size: 5.45cqw; }
.communityPanel>footer { height: 18.5cqw; background: var(--paper); }
.communityPanel>footer strong { max-width: 59cqw; font-size: 4.65cqw; }

.levelPanel {
  --panel-tilt: -2deg;
  width: 18.66%;
  min-height: 0;
  aspect-ratio: 1.1 / 1;
  padding: 21px 22px 19px;
  position: absolute;
  z-index: 8;
  left: 22%;
  bottom: 3%;
  overflow: hidden;
  container-type: inline-size;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--paper);
  box-shadow: 11px 12px 0 var(--teal-dark);
  transform: rotate(var(--panel-tilt));
}
.levelPanel>span { position: relative; z-index: 2; color: var(--teal); font: 850 9px/1 monospace; letter-spacing: .13em; }
.levelRow { margin-top: 19px; position: relative; z-index: 2; display: flex; align-items: center; gap: 5cqw; }
.levelRow>b {
  width: 24cqw;
  height: 24cqw;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--teal);
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 5px 6px 0 var(--teal-dark);
  font-size: 13cqw;
  line-height: 1;
  animation: levelPop 4.8s ease-in-out infinite;
}
.levelRow small,
.levelRow strong { display: block; }
.levelRow>div { min-width: 0; }
.levelRow small { color: var(--teal-light); font: 900 10px/1 monospace; letter-spacing: .14em; }
.levelRow strong { margin-top: 7px; font-size: clamp(19px, 8.6cqw, 26px); line-height: .9; letter-spacing: -.05em; white-space: nowrap; }
.levelProgress { height: 9px; margin-top: 20px; position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(255, 253, 248, .5); background: rgba(255, 253, 248, .12); }
.levelProgress i { width: 86%; height: 100%; display: block; background: var(--teal); animation: levelFill 4.8s ease-in-out infinite; }
.levelPanel footer { margin-top: 15px; position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; color: var(--teal-light); font-size: 11px; }
.levelPanel footer strong { color: var(--paper); }
.levelConfetti { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.levelConfetti i { width: 5px; height: 14px; position: absolute; display: block; background: var(--teal); opacity: 0; animation: confettiBurst 4.8s ease-out infinite; }
.levelConfetti i:nth-child(1) { left: 8%; top: 30%; --x: -18px; --r: 84deg; }
.levelConfetti i:nth-child(2) { left: 17%; top: 12%; --x: 13px; --r: -61deg; background: var(--paper); animation-delay: -.15s; }
.levelConfetti i:nth-child(3) { left: 31%; top: 18%; --x: -8px; --r: 118deg; animation-delay: -.3s; }
.levelConfetti i:nth-child(4) { left: 43%; top: 8%; --x: 22px; --r: -92deg; background: var(--teal-light); animation-delay: -.1s; }
.levelConfetti i:nth-child(5) { left: 56%; top: 21%; --x: -14px; --r: 72deg; animation-delay: -.25s; }
.levelConfetti i:nth-child(6) { left: 69%; top: 10%; --x: 8px; --r: -131deg; background: var(--paper); animation-delay: -.4s; }
.levelConfetti i:nth-child(7) { left: 82%; top: 24%; --x: -20px; --r: 99deg; background: var(--teal-light); animation-delay: -.2s; }
.levelConfetti i:nth-child(8) { left: 92%; top: 14%; --x: 12px; --r: -70deg; animation-delay: -.35s; }
.levelConfetti i:nth-child(9) { left: 25%; top: 42%; --x: -25px; --r: 123deg; background: var(--paper); animation-delay: -.55s; }
.levelConfetti i:nth-child(10) { left: 50%; top: 38%; --x: 20px; --r: -106deg; animation-delay: -.45s; }
.levelConfetti i:nth-child(11) { left: 75%; top: 43%; --x: -17px; --r: 76deg; background: var(--paper); animation-delay: -.65s; }
.levelConfetti i:nth-child(12) { left: 87%; top: 48%; --x: 15px; --r: -117deg; background: var(--teal-light); animation-delay: -.5s; }

.brickRail {
  width: 39%;
  position: absolute;
  z-index: 2;
  left: 36%;
  top: 54%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  transform: rotate(17deg);
}
.brickRail i {
  width: 42px;
  height: 20px;
  display: block;
  border: 1px solid var(--teal);
  background: rgba(85, 185, 176, .12);
  animation: brickSignal 2.7s ease-in-out infinite;
}
.brickRail i:nth-child(2) { animation-delay: -.3s; }
.brickRail i:nth-child(3) { animation-delay: -.6s; }
.brickRail i:nth-child(4) { animation-delay: -.9s; }
.brickRail i:nth-child(5) { animation-delay: -1.2s; }
.brickRail i:nth-child(6) { animation-delay: -1.5s; }
.brickRail i:nth-child(7) { animation-delay: -1.8s; }
.brickRail i:nth-child(8) { animation-delay: -2.1s; }
.brickRail i:nth-child(9) { animation-delay: -2.4s; }
.learningPlus,
.learningSlashes,
.learningOutline { position: absolute; z-index: 3; pointer-events: none; }
.learningPlus { left: 65%; top: 5%; color: var(--teal); font-size: 58px; font-weight: 200; transform: rotate(9deg); }
.learningSlashes { right: 2%; bottom: 31%; color: var(--teal); font: 900 34px/1 monospace; transform: rotate(-7deg); }
.learningOutline { width: 70px; height: 38px; left: 1%; top: 46%; border: 3px solid rgba(191, 233, 228, .5); transform: rotate(7deg); }

.learningBenefits {
  width: min(1220px, 92vw);
  margin: 62px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: clamp(28px, 4vw, 60px);
}
.learningBenefits article { padding-top: 21px; border-top: 1px solid rgba(255, 255, 255, .28); }
.learningBenefits article>span { color: var(--teal); font: 850 9px/1 monospace; letter-spacing: .12em; }
.learningBenefits h3 { margin: 15px 0 0; font-size: clamp(23px, 2vw, 32px); line-height: 1; letter-spacing: -.04em; }
.learningBenefits p { max-width: 480px; margin: 15px 0 0; color: #9eadaf; font-size: 13px; line-height: 1.55; }
.learningBenefits>a {
  min-height: 58px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--ink);
  background: var(--teal);
  border: 2px solid var(--paper);
  box-shadow: 8px 9px 0 var(--teal-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.learningBenefits>a b { min-width: 53px; min-height: 54px; display: grid; place-items: center; border-left: 2px solid var(--paper); font-size: 21px; }
.learningBenefits>a:hover { transform: translate(-3px, -4px); box-shadow: 11px 13px 0 var(--teal-dark); }

.voicesSection {
  min-height: 1180px;
  padding: 112px clamp(22px, 4vw, 68px) 104px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}
.voicesGrid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(23, 38, 44, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .09) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent, #000 13%, #000 91%, transparent);
}
.voicesHeading {
  width: min(1120px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 8;
  text-align: center;
}
.voicesHeading>span {
  display: inline-block;
  padding: 8px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--teal);
  font: 850 10px/1 monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.voicesHeading h2 {
  max-width: 1050px;
  margin: 25px auto 0;
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.065em;
}
.voicesHeading h2 em { display: block; color: var(--teal-dark); font-style: normal; }
.voicesHeading p {
  max-width: 720px;
  margin: 28px auto 0;
  color: #5e6a6d;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.55;
}
.voicesBoard {
  width: min(1500px, 96vw);
  aspect-ratio: 1420 / 1120;
  margin: 88px auto 0;
  position: relative;
  z-index: 2;
  container-type: inline-size;
}
.voicesBoard::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 1.5% 1.2% 1%;
  border: 1px solid rgba(23, 38, 44, .25);
  background: rgba(238, 232, 223, .52);
  box-shadow: 18px 20px 0 rgba(45, 128, 121, .12);
  transform: rotate(.55deg);
}
.voicesBoardLabel {
  min-width: 21cqw;
  padding: 1.05cqw 1.3cqw;
  position: absolute;
  z-index: 9;
  left: 61%;
  top: -1.7cqw;
  color: var(--ink);
  background: var(--teal);
  border: .13cqw solid var(--ink);
  box-shadow: .7cqw .75cqw 0 var(--teal-dark);
  transform: rotate(-1.4deg);
}
.voicesBoardLabel small,
.voicesBoardLabel strong { display: block; }
.voicesBoardLabel small { font: 850 .61cqw/1 monospace; letter-spacing: .13em; }
.voicesBoardLabel strong { margin-top: .55cqw; font-size: .96cqw; font-weight: 900; }
.videoCase,
.voiceQuote {
  position: absolute;
  border: .13cqw solid rgba(23, 38, 44, .72);
  transition: transform .25s, box-shadow .25s;
}
.videoCase {
  width: 40%;
  z-index: 3;
  overflow: hidden;
  background: var(--ink);
  box-shadow: .9cqw 1cqw 0 var(--teal-dark);
}
.videoCaseOne { left: 4%; top: 5%; transform: rotate(-1.5deg); }
.videoCaseTwo { right: 4%; bottom: 4%; transform: rotate(1.4deg); }
.videoCaseOne:hover,
.videoCaseTwo:hover { z-index: 8; transform: translate(-.3cqw, -.5cqw) rotate(0); box-shadow: 1.1cqw 1.2cqw 0 var(--teal-dark); }
.voiceChrome {
  height: 3.4cqw;
  padding: 0 1.35cqw;
  display: flex;
  align-items: center;
  gap: .9cqw;
  color: var(--paper);
  background: var(--ink);
}
.voiceChrome>span {
  width: .7cqw;
  height: .7cqw;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 .34cqw rgba(85, 185, 176, .2);
  animation: livePulse 1.8s ease-out infinite;
}
.voiceChrome small,
.voiceChrome i { font: 850 .74cqw/1 monospace; letter-spacing: .13em; }
.voiceChrome i { margin-left: auto; color: var(--teal-light); font-style: normal; }
.wistiaFrame { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #0d181c; }
.wistiaFrame iframe { width: 100%; height: 100%; position: absolute; inset: 0; display: block; border: 0; }
.videoCase>footer {
  min-height: 5.7cqw;
  padding: 1.25cqw 1.6cqw 1.35cqw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2cqw;
  color: var(--paper);
}
.videoCase>footer span { flex: 0 0 auto; color: var(--teal); font: 850 .76cqw/1 monospace; letter-spacing: .12em; }
.videoCase>footer strong { max-width: 25cqw; text-align: right; font-size: 1.12cqw; line-height: 1.12; }
.voiceQuote {
  width: 31.5%;
  z-index: 5;
  padding: 1.85cqw 1.95cqw 1.5cqw;
  background: var(--paper);
  box-shadow: .8cqw .9cqw 0 var(--teal-dark);
}
.voiceQuoteOne { right: 7%; top: 16%; transform: rotate(2.1deg); }
.voiceQuoteTwo { left: 8%; bottom: 18%; transform: rotate(-2deg); }
.voiceQuote:hover { z-index: 9; transform: translate(-.3cqw, -.5cqw) rotate(0); box-shadow: 1.1cqw 1.2cqw 0 var(--teal-dark); }
.voiceQuote>span {
  height: 2.8cqw;
  display: block;
  color: var(--teal-dark);
  font: 900 4.4cqw/.8 Georgia, serif;
}
.voiceQuote p { margin: 0; font-size: 1.02cqw; font-weight: 670; line-height: 1.48; }
.voiceQuote footer {
  margin-top: 1.2cqw;
  padding-top: .95cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: .1cqw solid rgba(23, 38, 44, .24);
}
.voiceQuote footer strong { font-size: .94cqw; }
.voiceQuote footer b { color: var(--teal-dark); font-size: .9cqw; letter-spacing: .18em; }
.voicesRoute {
  width: 19%;
  height: 35%;
  position: absolute;
  z-index: 1;
  left: 41%;
  top: 32.5%;
}
.voicesRoute::before,
.voicesRoute::after {
  content: '';
  width: 0;
  height: 50%;
  position: absolute;
  border-left: .42cqw dashed rgba(85, 185, 176, .55);
}
.voicesRoute::before { left: 0; bottom: 0; }
.voicesRoute::after { right: 0; top: 0; }
.voicesRoute i {
  width: 1.3cqw;
  height: 1.3cqw;
  position: absolute;
  left: -.85cqw;
  bottom: -.85cqw;
  border: .28cqw solid var(--ink);
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 .55cqw rgba(85, 185, 176, .22);
  animation: proofPulse 2.2s ease-in-out infinite;
}
.voicesRoute b {
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
  border-top: .42cqw dashed rgba(85, 185, 176, .55);
}
.voicesPlus,
.voicesSlashes,
.voicesStamp { position: absolute; z-index: 7; pointer-events: none; }
.voicesPlus { right: 1%; top: 11%; color: var(--ink); font-size: 4.4cqw; font-weight: 200; transform: rotate(7deg); }
.voicesSlashes { left: 1%; bottom: 10%; color: var(--teal-dark); font: 900 2.6cqw/1 monospace; transform: rotate(-5deg); }
.voicesStamp {
  width: 8.1cqw;
  height: 8.1cqw;
  left: 46%;
  top: calc(50% - 4.05cqw);
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--paper);
  background: var(--ink);
  border: .18cqw solid var(--paper);
  border-radius: 50%;
  box-shadow: .65cqw .7cqw 0 var(--teal);
  transform: rotate(-7deg);
  animation: stampFloat 4s ease-in-out infinite alternate;
}
.voicesStamp small,
.voicesStamp strong,
.voicesStamp span { display: block; }
.voicesStamp small,
.voicesStamp span { font: 850 .5cqw/1 monospace; letter-spacing: .12em; }
.voicesStamp strong { margin: .3cqw 0; color: var(--teal); font-size: 2cqw; line-height: .8; }
.curriculumSection {
  min-height: 930px;
  padding: 110px clamp(24px, 5vw, 86px) 100px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  border-top: 2px solid var(--ink);
}
.curriculumGrid {
  display: none;
}
.curriculumInner {
  width: min(1600px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .76fr 1.24fr;
  align-items: center;
  gap: clamp(50px, 5vw, 100px);
}
.curriculumCopy { position: relative; z-index: 4; transform: translateY(-34px); }
.curriculumCopy>span {
  display: inline-block;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--teal-light);
  border: 2px solid var(--paper);
  box-shadow: 5px 5px 0 var(--teal-dark);
  font: 850 10px/1 monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.curriculumCopy h2 {
  max-width: 570px;
  margin: 25px 0 0;
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 540;
  line-height: .91;
  letter-spacing: -.06em;
}
.curriculumCopy h2 em { display: block; color: var(--teal); font-style: normal; }
.curriculumCopy>p {
  max-width: 470px;
  margin: 28px 0 0;
  color: #a8b5b7;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
}
.curriculumResults {
  max-width: 590px;
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px 34px;
}
.curriculumResults>span {
  display: grid;
  grid-template-columns: 23px 1fr;
  align-items: start;
  gap: 11px;
  color: var(--paper);
}
.curriculumResults>span b {
  color: var(--teal);
  font: 900 clamp(16px, 1.1vw, 19px)/1 sans-serif;
}
.curriculumResults>span strong {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 750;
  line-height: 1.25;
}
.curriculumCta {
  min-height: 58px;
  margin-top: 38px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--teal);
  border: 2px solid var(--paper);
  box-shadow: 8px 9px 0 var(--teal-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
}
.curriculumCta:hover { transform: translate(-3px, -4px); box-shadow: 11px 13px 0 var(--teal-dark); }
.page .primaryButton,
.page .cta,
.page .learningBenefits>a,
.page .curriculumCta { color: var(--ink); }
.curriculumOrbit {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  position: relative;
  container-type: inline-size;
  perspective: 1000px;
}
.curriculumOrbit::before,
.curriculumOrbit::after { content: none; }
.curriculumRing {
  position: absolute;
  z-index: -1;
  width: 65.5cqw;
  height: 65.5cqw;
  left: 53%;
  top: 44%;
  border: .13cqw solid rgba(85, 185, 176, .42);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8cqw rgba(85, 185, 176, .04), 0 0 0 15.5cqw rgba(85, 185, 176, .025);
}
.curriculumCore {
  width: 8.6cqw;
  height: 8.6cqw;
  position: absolute;
  z-index: 1;
  left: calc(50% - 4.3cqw);
  top: calc(50% - 4.3cqw);
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--ink);
  background: var(--teal);
  border: .16cqw solid var(--paper);
  border-radius: 50%;
  box-shadow: .65cqw .7cqw 0 rgba(0, 0, 0, .35);
}
.curriculumCore small,
.curriculumCore span { font: 850 .52cqw/1 monospace; letter-spacing: .12em; }
.curriculumCore strong { margin: .32cqw 0; font-size: 2.3cqw; line-height: .78; }
.curriculumBrick {
  --brick-bg: var(--paper);
  --brick-ink: var(--ink);
  --delay: 0s;
  width: 30.1cqw;
  height: 16cqw;
  padding: 2.3cqw;
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--brick-ink);
  background: var(--brick-bg);
  border: .26cqw solid var(--ink);
  border-radius: .5cqw;
  box-shadow: inset -2.45cqw -2.18cqw 0 rgba(23, 38, 44, .1), 2.3cqw 2.45cqw 0 rgba(0, 0, 0, .22);
  transform: rotate(-5deg) skewY(2deg);
  scale: .82;
  animation: curriculumFloat 6s ease-in-out var(--delay) infinite alternate;
  transition: transform .3s;
}
.curriculumBrick::after {
  content: none;
}
.curriculumBrick span {
  position: relative;
  z-index: 1;
  font: 900 1.4cqw/1 monospace;
  letter-spacing: .06em;
}
.curriculumBrick strong {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  text-align: right;
  max-width: 25cqw;
  font-size: 2.05cqw;
  font-weight: 560;
  line-height: .95;
  text-transform: uppercase;
}
.curriculumBrick:hover {
  z-index: 20;
  transform: translateY(-2.3cqw) rotate(0);
}
.curriculumBrickOne { --delay: 0s; left: 7%; top: 8%; }
.curriculumBrickTwo { --brick-bg: var(--teal-light); --delay: -1s; left: 42%; top: 3%; }
.curriculumBrickThree { --brick-bg: var(--teal); --delay: -2s; left: 5%; top: 36%; }
.curriculumBrickFour { --brick-bg: var(--teal-dark); --brick-ink: var(--paper); --delay: -3s; left: 38%; top: 39%; }
.curriculumBrickFive { --delay: -4s; right: -1%; top: 28%; }
.curriculumBrickSix { --brick-bg: var(--teal); --delay: -2s; left: 20%; bottom: 16%; }
.curriculumBrickSeven { --delay: -5s; right: 9%; bottom: 15%; }
.curriculumPlus,
.curriculumSlashes,
.curriculumCaption { position: absolute; z-index: 2; }
.curriculumPlus { left: 2%; top: 4%; color: rgba(191, 233, 228, .55); font-size: 4.5cqw; font-weight: 200; transform: rotate(8deg); }
.curriculumSlashes { right: 4%; top: 5%; color: var(--teal); font: 900 2.4cqw/1 monospace; transform: rotate(-6deg); }
.curriculumCaption { left: 4%; bottom: 0; color: rgba(191, 233, 228, .62); font: 850 clamp(11px, 1.33cqw, 15px)/1 monospace; letter-spacing: .16em; }

.founderSection {
  min-height: 920px;
  padding: 104px clamp(24px, 5vw, 86px) 112px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border-top: 2px solid var(--ink);
}
.founderGrid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(23, 38, 44, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .08) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%);
}
.founderInner { width: min(1500px, 100%); margin-inline: auto; }
.founderHeading { position: relative; z-index: 5; }
.founderHeading>span {
  display: inline-block;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--teal);
  font: 850 10px/1 monospace;
  letter-spacing: .11em;
  transform: rotate(-1deg);
}
.founderHeading h2 {
  max-width: 940px;
  margin: 28px 0 0;
  font-size: clamp(34px, 3.55vw, 58px);
  font-weight: 760;
  line-height: .94;
  letter-spacing: -.055em;
}
.founderHeading h2 em { display: block; color: var(--teal-dark); font-style: normal; }
.founderBoard {
  min-height: 640px;
  margin-top: 56px;
  position: relative;
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  align-items: center;
  gap: clamp(38px, 5vw, 86px);
}
.founderPortrait {
  min-height: 610px;
  position: relative;
  z-index: 3;
}
.founderPhotoFrame {
  width: min(500px, 88%);
  height: 560px;
  position: absolute;
  left: 4%;
  top: 5px;
  overflow: hidden;
  background: var(--teal-light);
  border: 2px solid var(--ink);
  box-shadow: 18px 20px 0 var(--teal-dark);
  clip-path: polygon(3% 0, 100% 2%, 97% 94%, 12% 100%, 0 14%);
  transform: rotate(-1.4deg);
}
.founderPhotoFrame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg, transparent 50%, rgba(23, 38, 44, .2) 100%);
  mix-blend-mode: multiply;
}
.founderPhotoFrame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 57% center;
  filter: saturate(.86) contrast(1.04);
  transition: transform .55s ease, filter .55s ease;
}
.founderPortrait:hover .founderPhotoFrame img { transform: scale(1.035); filter: saturate(1) contrast(1.03); }
.founderIdentity {
  width: min(390px, 76%);
  min-height: 128px;
  padding: 21px 25px 20px;
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 10px 11px 0 var(--teal);
  transform: rotate(1.5deg);
}
.founderIdentity span,
.founderClaim,
.founderProofs article>span { font: 850 10px/1 monospace; letter-spacing: .14em; }
.founderIdentity span { color: var(--teal); }
.founderIdentity strong { margin-top: 9px; font-size: clamp(23px, 2vw, 31px); line-height: 1; }
.founderIdentity small { margin-top: 8px; color: #aebabc; font-size: 12px; }
.founderStatement {
  max-width: 760px;
  position: relative;
  z-index: 4;
  padding: 20px 0 0;
  transform: translateY(-34px);
}
.founderClaim {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--teal-dark);
}
.founderClaim::before { content: ''; width: 34px; height: 3px; background: var(--teal); }
.founderStatement blockquote {
  max-width: 730px;
  margin: 27px 0 0;
  padding: 0 0 0 30px;
  position: relative;
  border-left: 4px solid var(--teal);
  font-size: clamp(22px, 1.9vw, 31px);
  font-weight: 720;
  line-height: 1.14;
  letter-spacing: -.035em;
}
.founderStatement blockquote::after {
  content: '';
  width: 78px;
  height: 12px;
  position: absolute;
  right: 6%;
  bottom: -19px;
  background: var(--teal-light);
  transform: rotate(-2deg);
}
.founderStatement>p {
  max-width: 680px;
  margin: 37px 0 0 34px;
  color: #687477;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
}
.founderProofs {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}
.founderProofs article {
  min-height: 178px;
  padding: 20px 19px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 7px 8px 0 var(--teal-dark);
  transition: transform .25s, box-shadow .25s;
}
.founderProofs article:nth-child(2) { background: var(--teal-light); transform: translateY(13px) rotate(-.7deg); }
.founderProofs article:nth-child(3) { transform: translateY(-7px) rotate(.6deg); }
.founderProofs article:hover { z-index: 4; transform: translate(-3px, -7px) rotate(0); box-shadow: 11px 13px 0 var(--teal-dark); }
.founderProofs article>span { color: var(--teal-dark); font-size: 8px; line-height: 1.25; }
.founderProofs article>strong { margin-top: 21px; color: var(--ink); font-size: clamp(32px, 3vw, 46px); line-height: .85; letter-spacing: -.06em; }
.founderProofs article>p { margin: auto 0 0; color: #526064; font-size: 12px; font-weight: 700; line-height: 1.35; }
.founderPlus { position: absolute; z-index: 1; right: 2%; top: -9%; color: var(--teal); font-size: 65px; font-weight: 200; transform: rotate(7deg); }
.founderSlashes { position: absolute; z-index: 1; left: 43%; bottom: 1%; color: var(--teal-dark); font: 900 31px/1 monospace; transform: rotate(-8deg); }
.founderTrace {
  height: 3px;
  position: absolute;
  z-index: 1;
  left: 38%;
  right: 2%;
  bottom: 4%;
  background: repeating-linear-gradient(90deg, var(--teal-light) 0 24px, transparent 24px 42px);
}
.founderTrace i {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--teal);
  transform: translate(-50%, -50%);
  animation: founderTraceRun 7s ease-in-out infinite;
}

.reviewsSection {
  padding: 92px 0 94px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  border-top: 2px solid var(--ink);
}
.reviewsGrid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(191, 233, 228, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 233, 228, .22) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.reviewsInner { width: 100%; margin-inline: auto; }
.reviewsHeading { position: relative; z-index: 4; }
.reviewsHeading>span {
  display: inline-block;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--teal-light);
  border: 2px solid var(--paper);
  box-shadow: 5px 5px 0 var(--teal-dark);
  font: 850 10px/1 monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.reviewsHeading {
  width: min(1500px, calc(100% - clamp(48px, 10vw, 172px)));
  margin-inline: auto;
  text-align: center;
}
.reviewsHeading h2 {
  max-width: 980px;
  margin: 28px auto 0;
  font-size: clamp(34px, 3.55vw, 58px);
  font-weight: 760;
  line-height: .94;
  letter-spacing: -.055em;
}
.reviewsHeading h2 em { color: var(--teal); font-style: normal; }
.reviewsHeading p {
  max-width: 650px;
  margin: 25px auto 0;
  color: #a8b6b8;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
}
.reviewsTickerShell { position: relative; }
.reviewsTickerShell::after {
  content: '';
  position: absolute;
  z-index: 20;
  inset: 20px 0 25px;
  pointer-events: none;
  background: rgba(12, 29, 35, .72);
  opacity: 0;
  backdrop-filter: blur(3px);
  transition: opacity .22s ease;
}
.reviewsTickerShell:has(.reviewCard:is(:hover, :focus))::after { opacity: 1; }
.reviewsViewport {
  margin-top: 46px;
  padding: 34px 0 40px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.reviewsViewport::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(191, 233, 228, .46) 0 18px, transparent 18px 34px);
}
.reviewsTrack {
  width: max-content;
  display: flex;
  align-items: center;
  will-change: transform;
  animation: reviewMarquee 72s linear infinite;
}
.reviewsViewport:has(.reviewCard:hover) .reviewsTrack,
.reviewsViewport:focus-within .reviewsTrack { animation-play-state: paused; }
.reviewsGroup {
  padding-right: 29px;
  display: flex;
  align-items: center;
  gap: 29px;
}
.reviewCard {
  --review-tilt: 0deg;
  width: 308px;
  height: 208px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  padding: 21px 22px 20px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--sand);
  border: 2px solid var(--paper);
  outline: none;
  box-shadow: 9px 10px 0 var(--teal-dark);
  transform: rotate(var(--review-tilt));
  transition: transform .28s ease, box-shadow .28s ease;
}
.reviewCard:hover,
.reviewCard:focus-visible {
  z-index: 12;
  transform: scale(1.025) rotate(0);
  box-shadow: 12px 14px 0 var(--teal-dark);
}
.reviewCard header span,
.reviewCard footer span {
  font: 850 8px/1.2 monospace;
  letter-spacing: .13em;
}
.reviewCard:nth-child(3n + 1) { --review-tilt: .65deg; }
.reviewCard:nth-child(3n + 2) { --review-tilt: -.7deg; }
.reviewCard:nth-child(3n) { --review-tilt: .25deg; }
.reviewCard header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reviewCard header span { color: var(--teal-dark); }
.reviewCard header b { color: var(--teal-dark); font-size: 10px; letter-spacing: .12em; }
.reviewCard blockquote {
  margin: 20px 0 16px;
  font-size: 13px;
  font-weight: 690;
  line-height: 1.36;
  letter-spacing: -.015em;
}
.reviewCard footer {
  margin-top: auto;
  padding-top: 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(23, 38, 44, .27);
}
.reviewCard footer strong { font-size: 12px; }
.reviewCard footer span { color: #6c787a; font-size: 8px; text-align: right; }
.reviewFeature { width: 350px; height: 220px; background: var(--sand); }
.reviewFeature blockquote { font-size: 14px; line-height: 1.35; }
.reviewCompact { width: 268px; height: 196px; }
.reviewCompact blockquote { font-size: 12px; }
.reviewWide { width: 330px; height: 210px; background: var(--sand); }
.reviewPopups {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.reviewPopup {
  width: min(560px, calc(100% - 44px));
  min-height: 302px;
  padding: 34px 37px 31px;
  position: absolute;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--sand);
  border: 3px solid var(--paper);
  box-shadow: 17px 19px 0 var(--teal-dark);
  opacity: 0;
  transform: translateY(18px) scale(.88) rotate(-1deg);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, .85, .22, 1.15);
}
.reviewPopup header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.reviewPopup header span { color: var(--teal-dark); font: 850 10px/1.2 monospace; letter-spacing: .14em; }
.reviewPopup header b { color: var(--teal-dark); font-size: 13px; letter-spacing: .15em; }
.reviewPopup blockquote {
  margin: 33px 0 27px;
  font-size: clamp(20px, 1.65vw, 26px);
  font-weight: 720;
  line-height: 1.24;
  letter-spacing: -.025em;
}
.reviewPopup footer {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-top: 2px solid rgba(23, 38, 44, .25);
}
.reviewPopup footer strong { font-size: 15px; }
.reviewPopup footer span { color: #657174; font: 850 8px/1.2 monospace; letter-spacing: .12em; text-align: right; }
.reviewsTickerShell:has(.reviewCard[data-review='0']:is(:hover, :focus)) .reviewPopup[data-review='0'],
.reviewsTickerShell:has(.reviewCard[data-review='1']:is(:hover, :focus)) .reviewPopup[data-review='1'],
.reviewsTickerShell:has(.reviewCard[data-review='2']:is(:hover, :focus)) .reviewPopup[data-review='2'],
.reviewsTickerShell:has(.reviewCard[data-review='3']:is(:hover, :focus)) .reviewPopup[data-review='3'],
.reviewsTickerShell:has(.reviewCard[data-review='4']:is(:hover, :focus)) .reviewPopup[data-review='4'],
.reviewsTickerShell:has(.reviewCard[data-review='5']:is(:hover, :focus)) .reviewPopup[data-review='5'],
.reviewsTickerShell:has(.reviewCard[data-review='6']:is(:hover, :focus)) .reviewPopup[data-review='6'],
.reviewsTickerShell:has(.reviewCard[data-review='7']:is(:hover, :focus)) .reviewPopup[data-review='7'],
.reviewsTickerShell:has(.reviewCard[data-review='8']:is(:hover, :focus)) .reviewPopup[data-review='8'],
.reviewsTickerShell:has(.reviewCard[data-review='9']:is(:hover, :focus)) .reviewPopup[data-review='9'] {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-.35deg);
}
.reviewsPlus,
.reviewsSlashes { position: absolute; z-index: -1; color: var(--teal); }
.reviewsPlus { right: 4%; top: -4%; font-size: 55px; font-weight: 200; transform: rotate(8deg); }
.reviewsSlashes { left: 3%; bottom: 4%; font: 900 25px/1 monospace; transform: rotate(-8deg); }
.reviewsCtaWrap {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.reviewsCta {
  min-width: 270px;
  min-height: 62px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink) !important;
  background: var(--teal);
  border: 2px solid var(--paper);
  box-shadow: 9px 10px 0 var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .015em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}
.reviewsCta:hover {
  transform: translate(-3px, -4px);
  box-shadow: 13px 14px 0 var(--teal-dark);
}

.faqSection {
  padding: 94px clamp(24px, 5vw, 86px) 100px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border-top: 2px solid var(--ink);
}
.faqGrid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(23, 38, 44, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .09) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, #000, transparent 43%, transparent 100%);
}
.faqInner {
  width: min(1320px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: start;
  gap: clamp(58px, 7vw, 124px);
}
.faqIntro {
  position: sticky;
  top: 130px;
}
.faqIntro>span,
.finalCtaInner>span {
  display: inline-block;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--teal-light);
  font: 850 10px/1 monospace;
  letter-spacing: .13em;
  transform: rotate(-.7deg);
}
.faqIntro h2 {
  max-width: 620px;
  margin: 30px 0 0;
  font-size: clamp(34px, 3.55vw, 58px);
  font-weight: 760;
  line-height: .96;
  letter-spacing: -.055em;
}
.faqIntro h2 em {
  display: block;
  color: var(--teal-dark);
  font-style: normal;
}
.faqIntro>p {
  max-width: 480px;
  margin: 29px 0 0;
  color: #697478;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 560;
  line-height: 1.55;
}
.faqSignal {
  width: 178px;
  height: 156px;
  margin: 48px 0 0 28px;
  padding: 19px;
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 9px 10px 0 var(--teal-dark);
  transform: rotate(-2deg);
}
.faqSignal::before {
  content: '';
  position: absolute;
  inset: 46px 0 auto;
  height: 1px;
  background: rgba(191, 233, 228, .4);
}
.faqSignal small { font: 800 8px/1 monospace; letter-spacing: .13em; }
.faqSignal strong {
  position: absolute;
  right: 20px;
  bottom: -13px;
  color: var(--teal);
  font-size: 112px;
  font-weight: 440;
  line-height: 1;
}
.faqSignal i {
  width: 12px;
  height: 12px;
  position: absolute;
  left: 18px;
  bottom: 18px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--teal);
  animation: faqSignalPulse 1.8s ease-in-out infinite;
}
.faqList {
  width: min(680px, 100%);
  justify-self: end;
  padding-top: 36px;
  display: grid;
  gap: 11px;
}
.faqItem {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 6px 0 var(--teal-light);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.faqItem:nth-child(even) { transform: translateX(8px); }
.faqItem:hover {
  z-index: 2;
  transform: translate(-3px, -4px);
  box-shadow: 8px 9px 0 var(--teal-dark);
}
.faqItem:nth-child(even):hover { transform: translate(5px, -4px); }
.faqItem[open] { background: var(--teal-light); box-shadow: 6px 7px 0 var(--teal-dark); }
.faqItem summary {
  min-height: 66px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 35px 1fr 35px;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  list-style: none;
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary>span {
  color: var(--teal-dark);
  font: 850 9px/1 monospace;
  letter-spacing: .12em;
}
.faqItem summary>strong {
  font-size: clamp(13px, .95vw, 16px);
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.faqItem summary>i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  transition: transform .25s ease, background .25s ease;
}
.faqItem[open] summary>i { color: var(--paper); background: var(--teal-dark); transform: rotate(45deg); }
.faqAnswer { padding: 0 66px 20px; }
.faqAnswer p {
  margin: 0;
  padding-top: 15px;
  color: #425156;
  border-top: 1px solid rgba(23, 38, 44, .3);
  font-size: clamp(12px, .86vw, 14px);
  font-weight: 560;
  line-height: 1.5;
}

.finalCtaSection {
  min-height: 580px;
  padding: 74px clamp(24px, 5vw, 86px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--teal-light);
  border-top: 2px solid var(--ink);
}
.finalCtaGrid {
  position: absolute;
  z-index: -5;
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(23, 38, 44, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .18) 1px, transparent 1px);
  background-size: 58px 58px;
}
.finalBuild {
  width: min(960px, 72vw);
  height: min(460px, 50vw);
  position: absolute;
  z-index: -3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
}
.finalBuild i {
  width: 22%;
  height: 24%;
  position: absolute;
  display: block;
  border: 2px solid rgba(23, 38, 44, .24);
  background: rgba(255, 253, 248, .17);
  box-shadow: 8px 9px 0 rgba(45, 128, 121, .18);
  opacity: .76;
  animation: finalBrickBuild 7s cubic-bezier(.55, 0, .2, 1) infinite both;
}
.finalBuild i:nth-child(1) { left: 0; bottom: 0; --brick-x: -24px; --brick-y: 48px; animation-delay: 0s; }
.finalBuild i:nth-child(2) { left: 23%; bottom: 0; --brick-x: 0; --brick-y: 54px; animation-delay: .14s; }
.finalBuild i:nth-child(3) { left: 46%; bottom: 0; --brick-x: 14px; --brick-y: 50px; animation-delay: .28s; }
.finalBuild i:nth-child(4) { left: 69%; bottom: 0; --brick-x: 26px; --brick-y: 58px; animation-delay: .42s; }
.finalBuild i:nth-child(5) { left: 11.5%; bottom: 27%; --brick-x: -26px; --brick-y: 35px; animation-delay: .56s; }
.finalBuild i:nth-child(6) { left: 34.5%; bottom: 27%; --brick-x: 8px; --brick-y: 46px; animation-delay: .7s; }
.finalBuild i:nth-child(7) { left: 57.5%; bottom: 27%; --brick-x: 27px; --brick-y: 42px; animation-delay: .84s; }
.finalBuild i:nth-child(8) { left: 0; bottom: 54%; --brick-x: -36px; --brick-y: 28px; animation-delay: .98s; }
.finalBuild i:nth-child(9) { left: 23%; bottom: 54%; --brick-x: -6px; --brick-y: 33px; animation-delay: 1.12s; }
.finalBuild i:nth-child(10) { left: 46%; bottom: 54%; --brick-x: 16px; --brick-y: 30px; animation-delay: 1.26s; }
.finalBuild i:nth-child(11) { left: 69%; bottom: 54%; --brick-x: 32px; --brick-y: 38px; animation-delay: 1.4s; }
.finalFloat {
  width: 104px;
  height: 60px;
  position: absolute;
  z-index: -1;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 7px 8px 0 var(--teal-dark);
  animation: finalFloat 4.8s ease-in-out infinite alternate;
}
.finalFloatFour { left: 7%; bottom: 10%; background: transparent; transform: rotate(15deg); animation-delay: -2.4s; }
.finalPlus {
  position: absolute;
  z-index: -1;
  right: 9%;
  top: 16%;
  color: var(--ink);
  font-size: 58px;
  font-weight: 240;
  line-height: 1;
  opacity: .72;
  transform: rotate(8deg);
}
.finalCtaInner {
  width: min(1500px, 100%);
  position: relative;
  z-index: 4;
  text-align: center;
}
.finalCtaInner>span { box-shadow: 6px 6px 0 var(--teal-dark); }
.finalCtaInner h2 {
  margin: 38px auto 0;
  font-size: clamp(41px, 5.3vw, 80px);
  font-weight: 520;
  line-height: .87;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.finalCtaInner h2 em { color: var(--teal-dark); font-style: normal; }
.finalCtaInner a {
  min-width: 292px;
  min-height: 68px;
  margin-top: 54px;
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--teal);
  border: 2px solid var(--paper);
  box-shadow: 9px 10px 0 var(--ink);
  font-size: 15px;
  font-weight: 850;
  transition: transform .2s ease, box-shadow .2s ease;
}
.finalCtaInner a:hover { transform: translate(-3px, -4px); box-shadow: 13px 14px 0 var(--ink); }

/* Primary actions use contrast and a permanent neon-turquoise depth edge. */
.primaryButton,
.cta,
.learningBenefits>a,
.curriculumCta,
.reviewsCta,
.finalCtaInner a {
  min-height: 64px;
  padding: 0;
  border: 1px solid var(--ink);
  box-shadow: 8px 9px 0 var(--cta-neon);
  font-size: clamp(13px, .95vw, 16px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .025em;
  text-transform: uppercase;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.primaryButton>span,
.cta>span,
.learningBenefits>a>span,
.curriculumCta>span,
.reviewsCta>span,
.finalCtaInner a>span {
  min-height: inherit;
  padding: 14px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.primaryButton,
.cta,
.finalCtaInner a {
  color: var(--paper) !important;
  background: var(--ink);
}
.learningBenefits>a,
.curriculumCta,
.reviewsCta {
  color: var(--ink) !important;
  background: var(--paper);
  border-color: var(--ink);
}
.primaryButton:hover,
.cta:hover,
.learningBenefits>a:hover,
.curriculumCta:hover,
.reviewsCta:hover,
.finalCtaInner a:hover,
.primaryButton:focus-visible,
.cta:focus-visible,
.learningBenefits>a:focus-visible,
.curriculumCta:focus-visible,
.reviewsCta:focus-visible,
.finalCtaInner a:focus-visible {
  transform: scale(1.04);
  box-shadow: 8px 9px 0 var(--cta-neon);
  filter: none;
}

.footer {
  padding: 0 clamp(24px, 5vw, 86px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  border-top: 2px solid var(--ink);
}
.footerGrid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .19;
  background-image:
    linear-gradient(rgba(191, 233, 228, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 233, 228, .22) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, #000, #000 66%, transparent 100%);
}
.footerInner {
  width: min(1500px, 100%);
  margin-inline: auto;
  padding: 28px 0 14px;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(52px, 7vw, 118px);
}
.footerLead img { width: min(220px, 78%); height: auto; display: block; }
.footerSlogan {
  margin: 10px 0 0;
  display: inline-block;
  padding: 6px 9px;
  color: var(--ink);
  background: var(--teal);
  border: 1px solid var(--paper);
  box-shadow: 4px 4px 0 var(--teal-dark);
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.015em;
  transform: rotate(-.7deg);
}
.footerSocials {
  margin-top: 14px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footerSocials a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--paper);
  border: 1px solid rgba(255, 253, 248, .38);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.footerSocials a:hover {
  color: var(--ink);
  background: var(--teal-light);
  border-color: var(--teal-light);
  transform: translateY(-3px);
}
.footerSocials svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footerSocials .socialFill,
.footerSocials .socialDot {
  fill: currentColor;
  stroke: none;
}
.footerNav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
}
.footerNav>div { display: flex; flex-direction: column; align-items: flex-start; }
.footerNav strong {
  margin-bottom: 12px;
  color: var(--teal);
  font: 850 8px/1 monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.footerNav a {
  width: 100%;
  padding: 7px 0;
  color: #c4ced0;
  border-bottom: 1px solid rgba(255, 253, 248, .15);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.25;
  transition: color .18s ease, padding-left .18s ease;
}
.footerNav a:hover { padding-left: 4px; color: var(--paper); }
.footerBottom {
  grid-column: 1 / -1;
  margin-top: 15px;
  padding-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #849397;
  border-top: 1px solid rgba(255, 253, 248, .18);
  font: 750 8px/1.3 monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footerBottom>div { display: flex; gap: 25px; }
.footerBottom a:hover { color: var(--paper); }
.footerPlus {
  position: absolute;
  z-index: -1;
  right: 4.7%;
  top: 14%;
  color: var(--teal);
  font-size: 38px;
  font-weight: 240;
  opacity: .6;
  transform: rotate(9deg);
}
.footerBrick {
  width: 68px;
  height: 42px;
  position: absolute;
  z-index: -1;
  left: 32.5%;
  top: 54%;
  border: 2px solid rgba(191, 233, 228, .5);
  transform: translateY(-50%) rotate(13deg);
}

.floatingContact {
  width: 66px;
  height: 66px;
  position: fixed;
  z-index: 200;
  right: 28px;
  bottom: 28px;
}
.floatingContact[open]::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(10, 23, 28, .62);
  backdrop-filter: blur(2px);
}
.floatingContact>summary {
  width: 66px;
  height: 66px;
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--teal);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 7px 8px 0 rgba(23, 38, 44, .35);
  list-style: none;
  transition: transform .2s ease, background .2s ease;
}
.floatingContact>summary::-webkit-details-marker { display: none; }
.floatingContact>summary:hover { transform: translate(-2px, -3px); }
.contactOpenIcon,
.contactCloseIcon { grid-area: 1 / 1; font-size: 28px; font-weight: 520; line-height: 1; }
.contactOpenIcon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
}
.contactOpenIcon svg,
.contactMenuIcon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contactIconFill { fill: currentColor; stroke: none; }
.contactCloseIcon { display: none; font-size: 34px; font-weight: 300; }
.floatingContact[open]>summary { background: var(--teal-light); }
.floatingContact[open] .contactOpenIcon { display: none; }
.floatingContact[open] .contactCloseIcon { display: block; }
.contactMenu {
  width: 310px;
  position: absolute;
  right: 0;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.contactMenu a {
  width: 100%;
  min-height: 61px;
  padding: 0 17px 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 7px 0 var(--teal-dark);
  opacity: 0;
  transform: translateY(12px);
  animation: contactReveal .28s ease forwards;
  transition: background .18s ease, transform .18s ease;
}
.contactMenu a:nth-child(1) { width: 70%; animation-delay: .03s; }
.contactMenu a:nth-child(2) { width: 88%; animation-delay: .07s; }
.contactMenu a:nth-child(3) { width: 78%; animation-delay: .11s; }
.contactMenu a:nth-child(4) { animation-delay: .15s; }
.contactMenu a:hover { background: var(--teal-light); transform: translateX(-4px); }
.contactMenu strong { font-size: 14px; font-weight: 800; }
.contactMenuIcon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.contactChatIcon {
  width: 38px;
  min-width: 38px;
  height: 38px;
}
.contactChatIcon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.1;
}
.contactMenuIcon svg { width: 25px; height: 25px; }

@keyframes contactReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes faqSignalPulse {
  50% { transform: scale(1.4); box-shadow: 0 0 0 8px rgba(85, 185, 176, .16); }
}

@keyframes finalBrickBuild {
  0%, 8% { opacity: 0; transform: translate(var(--brick-x), var(--brick-y)) rotate(-5deg); }
  23%, 78% { opacity: .76; transform: translate(0, 0) rotate(0); }
  94%, 100% { opacity: 0; transform: translate(0, -16px) rotate(1deg); }
}

@keyframes finalFloat {
  to { translate: 0 12px; }
}

@keyframes curriculumFloat {
  50% { translate: 0 -9px; }
}

@keyframes founderTraceRun {
  0%, 8% { left: 0; }
  92%, 100% { left: 100%; }
}

/* Desktop headlines need enough leading for umlauts and tall capitals to breathe. */
@media (min-width: 921px) {
  .heroCopy h1,
  .methodCopy h2,
  .heading h1,
  .learningHeading h2,
  .voicesHeading h2,
  .curriculumCopy h2,
  .founderHeading h2,
  .reviewsHeading h2,
  .faqIntro h2 {
    line-height: 1.02;
  }

  .finalCtaInner h2 { line-height: 1; }
}

@keyframes reviewMarquee {
  to { transform: translateX(-50%); }
}

@keyframes brickDrop {
  0% { opacity: 0; transform: translate3d(var(--entry), -280px, 0) rotate(-8deg) scale(.92); }
  62% { opacity: 1; transform: translate3d(var(--shift), 14px, 0) rotate(0deg) scale(1.015); }
  78% { transform: translate3d(var(--shift), -6px, 0) rotate(var(--tilt)) scale(.995); }
  100% { opacity: 1; transform: translate3d(var(--shift), 0, 0) rotate(var(--tilt)) scale(1); }
}
@keyframes heroGridDrift {
  from { transform: rotate(-7deg) translate3d(-7px, 4px, 0); }
  to { transform: rotate(-5.5deg) translate3d(10px, -6px, 0); }
}
@keyframes labelFloat {
  from { transform: translateY(0) rotate(5deg); }
  to { transform: translateY(10px) rotate(3deg); }
}
@keyframes methodGridDrift {
  from { transform: translate3d(-18px, 0, 0); }
  to { transform: translate3d(18px, 7px, 0); }
}
@keyframes methodRunner {
  0%, 8% { left: 0; }
  45%, 55% { left: 50%; }
  92%, 100% { left: 100%; }
}
@keyframes gridDrift {
  from { transform: rotate(-1.2deg) scale(1.04) translate3d(-9px, -4px, 0); }
  to { transform: rotate(.4deg) scale(1.06) translate3d(11px, 8px, 0); }
}
@keyframes dashHorizontal { to { background-position: 29px 0; } }
@keyframes dashVertical { to { background-position: 0 29px; } }
@keyframes scan {
  0%, 12% { left: -25%; opacity: 0; }
  23% { opacity: .42; }
  74% { opacity: .42; }
  88%, 100% { left: 108%; opacity: 0; }
}
@keyframes runnerPulse {
  from { opacity: .85; transform: scale(.45); }
  to { opacity: 0; transform: scale(1.25); }
}
@keyframes deadPulse {
  0%, 55% { opacity: 0; transform: scale(.55); }
  78% { opacity: .7; }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes solveMaze {
  0%, 5% { left: 22%; top: 86%; }
  23% { left: 42%; top: 86%; }
  40% { left: 42%; top: 56%; }
  49% { left: 46%; top: 56%; }
  68% { left: 46%; top: 22%; }
  84% { left: 77%; top: 22%; }
  92% { left: 77%; top: 12%; }
  98%, 100% { left: 87%; top: 12%; }
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(85, 185, 176, .45); }
  100% { box-shadow: 0 0 0 9px rgba(85, 185, 176, 0); }
}
@keyframes brickSignal {
  0%, 28%, 100% { background: rgba(85, 185, 176, .1); transform: translateY(0); }
  12% { background: var(--teal); transform: translateY(-5px); }
}
@keyframes levelFill {
  0%, 14% { width: 18%; }
  56%, 100% { width: 86%; }
}
@keyframes levelPop {
  0%, 49%, 100% { transform: scale(1) rotate(0); }
  56% { transform: scale(1.12) rotate(-5deg); }
  66% { transform: scale(1) rotate(0); }
}
@keyframes confettiBurst {
  0%, 49% { opacity: 0; transform: translate3d(0, -8px, 0) rotate(0); }
  55% { opacity: .9; }
  78% { opacity: .75; }
  94%, 100% { opacity: 0; transform: translate3d(var(--x), 110px, 0) rotate(var(--r)); }
}
@keyframes proofPulse {
  0%, 100% { transform: scale(.8); box-shadow: 0 0 0 .35cqw rgba(85, 185, 176, .28); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 .8cqw rgba(85, 185, 176, .05); }
}
@keyframes stampFloat {
  from { transform: translateY(-.35cqw) rotate(-8deg); }
  to { transform: translateY(.45cqw) rotate(-4deg); }
}
@keyframes mobileLaptopFloat {
  from { transform: translateY(-2px) rotate(-1.2deg); }
  to { transform: translateY(3px) rotate(-1.2deg); }
}
@keyframes mobileYoutubeDive {
  0%, 15% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  26% { opacity: 1; transform: translateY(8%) rotate(-4deg) scale(.98); }
  42%, 100% { opacity: 0; transform: translateY(142%) rotate(-15deg) scale(.86); }
}
@keyframes mobileWaterRise {
  0%, 20% { opacity: 0; transform: translateY(105%); }
  29% { opacity: 1; transform: translateY(43%); }
  39% { opacity: 1; transform: translateY(12%); }
  45%, 52% { opacity: 1; transform: translateY(20%); }
  62%, 100% { opacity: 0; transform: translateY(105%); }
}
@keyframes mobileSplash {
  0%, 28% { opacity: 0; translate: 0 9px; scale: .5; }
  37% { opacity: 1; translate: 0 -28px; scale: 1; }
  47%, 100% { opacity: 0; translate: 0 -44px; scale: .7; }
}
@keyframes mobileWaterRipple {
  0%, 30% { opacity: 0; transform: scale(.25, .4); }
  39% { opacity: .95; transform: scale(.85, .5); }
  50%, 100% { opacity: 0; transform: scale(1.55, .7); }
}
@keyframes mobileRevealScene {
  0%, 43% { opacity: 0; transform: scale(.96); }
  51%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes mobileThinkReveal {
  0%, 46% { opacity: 0; transform: translateY(-62px) rotate(-2deg); }
  56%, 100% { opacity: 1; transform: translateY(0) rotate(-1deg); }
}
@keyframes mobileCheckReveal {
  0%, 52% { opacity: 0; transform: translateX(65px) rotate(2deg); }
  62%, 100% { opacity: 1; transform: translateX(0) rotate(1deg); }
}
@keyframes mobileBrickReveal {
  0%, 58% { opacity: 0; transform: translateY(-44px) rotate(-1deg); }
  68%, 100% { opacity: 1; transform: translateY(0) rotate(-.5deg); }
}

@media (max-width: 920px) {
  .siteHeader { height: 70px; }
  .nav { display: none; }
  .logo { width: 176px; }
  .mobileMenu {
    display: block;
    position: relative;
    margin-left: auto;
  }
  .mobileMenu>summary {
    width: 48px;
    min-width: 48px;
    height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    border: 1px solid rgba(255, 253, 248, .42);
    cursor: pointer;
    user-select: none;
  }
  .mobileMenu>summary:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
  }
  .mobileMenuIcon {
    width: 22px;
    height: 16px;
    position: relative;
    display: block;
  }
  .mobileMenuIcon i {
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    display: block;
    background: currentColor;
    transition: top .2s ease, transform .2s ease, opacity .15s ease;
  }
  .mobileMenuIcon i:nth-child(1) { top: 0; }
  .mobileMenuIcon i:nth-child(2) { top: 7px; }
  .mobileMenuIcon i:nth-child(3) { top: 14px; }
  .mobileMenu[open] .mobileMenuIcon i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .mobileMenu[open] .mobileMenuIcon i:nth-child(2) { opacity: 0; }
  .mobileMenu[open] .mobileMenuIcon i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .mobileMenuPanel {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 92px);
    padding: 20px 20px 18px;
    position: absolute;
    z-index: 90;
    right: 0;
    top: calc(100% + 12px);
    overflow-y: auto;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 9px 10px 0 var(--teal-dark);
  }
  .mobileMenuGroup { padding: 0; }
  .mobileMenuGroup+ .mobileMenuGroup { border-top: 1px solid rgba(23, 38, 44, .2); }
  .mobileMenuGroup>summary {
    min-height: 48px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    color: var(--teal-dark);
    cursor: pointer;
    font: 850 12px/1 monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .mobileMenuGroup>summary::-webkit-details-marker { display: none; }
  .mobileMenuGroup>summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .mobileMenuGroup>summary>i {
    width: 9px;
    height: 9px;
    margin: -4px 5px 0 0;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease, margin .18s ease;
  }
  .mobileMenuGroup[open]>summary>i { margin-top: 4px; transform: rotate(225deg); }
  .mobileMenuGroup>div {
    margin: 0 0 9px;
    padding-left: 13px;
    display: none;
    border-left: 2px solid var(--teal-light);
  }
  .mobileMenuGroup[open]>div { display: grid; }
  .mobileMenuGroup a,
  .mobileMenuBlog {
    min-height: 39px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(23, 38, 44, .12);
    font-size: 15px;
    font-weight: 680;
    line-height: 1.2;
  }
  .mobileMenuGroup a:focus-visible,
  .mobileMenuGroup a:hover,
  .mobileMenuBlog:focus-visible,
  .mobileMenuBlog:hover { color: var(--teal-dark); outline: none; }
  .mobileMenuBlog {
    min-height: 48px;
    margin-top: 0;
    padding: 0 3px;
    justify-content: flex-start;
    color: var(--teal-dark);
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(23, 38, 44, .2);
    font: 850 12px/1 monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .heroStage { min-height: auto; padding-top: 62px; grid-template-columns: 1fr; }
  .heroCopy { order: 1; }
  .heroArt { display: none; }
  .heroCopy h1,
  .methodCopy h2,
  .heading h1,
  .learningHeading h2,
  .voicesHeading h2,
  .curriculumCopy h2,
  .founderHeading h2,
  .reviewsHeading h2,
  .faqIntro h2 {
    line-height: 1.01;
  }
  .finalCtaInner h2 { line-height: .98; }
  .heroCopy h1 { max-width: 760px; margin-inline: auto; text-align: center; }
  .heroHeadlineFirst,
  .heroCopy h1 em { display: block; white-space: nowrap; }
  .heroCopy h1 em { margin-top: 4px; }
  .mobileHeroArt {
    width: min(600px, 88%);
    aspect-ratio: 1.55 / 1;
    margin: 38px auto 0;
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
  }
  .mobileHeroGrid {
    position: absolute;
    z-index: -2;
    inset: 1% 0 5%;
    border: 1px solid rgba(23, 38, 44, .18);
    background-image:
      linear-gradient(rgba(23, 38, 44, .13) 1px, transparent 1px),
      linear-gradient(90deg, rgba(23, 38, 44, .13) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: rotate(-2.5deg);
  }
  .mobileHeroLabel {
    padding: 8px 11px;
    position: absolute;
    z-index: 5;
    right: 1%;
    top: 0;
    color: var(--paper);
    background: var(--ink);
    border: 2px solid var(--paper);
    box-shadow: 5px 5px 0 var(--teal-dark);
    font: 850 8px/1 monospace;
    letter-spacing: .1em;
    transform: rotate(3deg);
  }
  .mobileLaptop {
    width: 86%;
    position: relative;
    transform: rotate(-1.5deg);
    animation: mobileLaptopFloat 4.5s ease-in-out infinite alternate;
  }
  .mobileLaptopScreen {
    aspect-ratio: 1.52 / 1;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border: 4px solid var(--ink);
    box-shadow: 12px 13px 0 rgba(23, 38, 44, .15);
  }
  .mobileScreenStage {
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #f3eee6;
  }
  .mobileYoutubeMock {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    overflow: hidden;
    background: var(--paper);
    border: 0;
    box-shadow: none;
    transform-origin: 50% 88%;
    animation: mobileYoutubeDive 7s cubic-bezier(.42, 0, .72, 1) infinite;
  }
  .mobileYoutubeTopbar {
    height: 16%;
    padding: 0 2.5%;
    display: flex;
    align-items: center;
    gap: 2.4%;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
  }
  .mobileWindowDots { display: flex; gap: 3px; }
  .mobileWindowDots>i {
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 50%;
    background: var(--teal);
  }
  .mobileWindowDots>i:nth-child(2) { background: var(--teal-light); }
  .mobileWindowDots>i:nth-child(3) { background: var(--ink); }
  .mobileYoutubeTopbar>b {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--ink);
    font: 900 clamp(5px, .9vw, 7px)/1 monospace;
    letter-spacing: .08em;
  }
  .mobileYoutubeTopbar>b>i {
    width: 15px;
    height: 11px;
    display: grid;
    place-items: center;
    color: var(--paper);
    background: var(--teal);
    border: 1px solid var(--ink);
    font-size: 5px;
    font-style: normal;
  }
  .mobileYoutubeTopbar>label {
    height: 15px;
    margin-left: auto;
    padding-left: 5px;
    display: flex;
    align-items: center;
    flex: 0 1 42%;
    color: #777d7d;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--teal-light);
    font: 750 clamp(4px, .7vw, 6px)/1 sans-serif;
  }
  .mobileYoutubeTopbar>label>i {
    width: 16px;
    height: 100%;
    margin-left: auto;
    display: grid;
    place-items: center;
    color: var(--ink);
    border-left: 2px solid var(--ink);
    font-size: 8px;
    font-style: normal;
  }
  .mobileYoutubeTopbar>em { color: var(--teal-dark); font-size: 9px; font-style: normal; }
  .mobileYoutubeBody {
    height: 84%;
    padding: 2.5%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36%;
    gap: 2.5%;
    background: var(--paper);
  }
  .mobileYoutubeMain {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .mobilePodcastFrame {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--ink);
  }
  .mobilePodcastFrame>img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 47%;
    filter: saturate(.72) contrast(1.06) brightness(.96);
  }
  .mobilePodcastFrame::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(90deg, rgba(85, 185, 176, .08), transparent 40% 70%, rgba(23, 38, 44, .1));
    pointer-events: none;
  }
  .mobilePodcastFrame>b {
    width: 24px;
    height: 18px;
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 48%;
    display: grid;
    place-items: center;
    color: var(--paper);
    background: var(--teal);
    border: 1px solid var(--paper);
    font-size: 7px;
    transform: translate(-50%, -50%);
  }
  .mobileYoutubeMain>strong {
    margin-top: 5px;
    padding: 4px 5px 3px;
    display: block;
    overflow: hidden;
    color: var(--ink);
    background: var(--teal-light);
    border-left: 3px solid var(--teal-dark);
    font-size: clamp(6px, 1.1vw, 9px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mobileYoutubeMain>small {
    margin-top: 3px;
    padding-left: 5px;
    display: block;
    color: var(--teal-dark);
    font: 850 clamp(4px, .7vw, 6px)/1 monospace;
    letter-spacing: .07em;
  }
  .mobileYoutubeSidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4efe7;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--teal-dark);
  }
  .mobileYoutubeSidebar>b {
    min-height: 19px;
    padding: 4px 5px 3px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--paper);
    background: var(--ink);
    font: 900 clamp(4px, .72vw, 6px)/1 monospace;
    letter-spacing: .13em;
  }
  .mobileYoutubeSidebar>img {
    width: 100%;
    height: calc(100% - 19px);
    display: block;
    flex: 1 1 auto;
    object-fit: cover;
    object-position: 50% 0;
    filter: saturate(.84) contrast(1.04);
  }
  .mobileRecommendationList {
    min-height: 0;
    padding: 4px;
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    background: var(--paper);
  }
  .mobileRecommendation {
    min-height: 0;
    display: grid;
    grid-template-columns: 51% minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    overflow: hidden;
    border-bottom: 1px solid rgba(23, 38, 44, .26);
  }
  .mobileRecommendation:last-child { border-bottom: 0; }
  .mobileRecommendation>span {
    width: 92%;
    height: calc(100% - 7px);
    display: block;
    justify-self: center;
    overflow: hidden;
    background-image: url('./brand/mobile-youtube-suggestions-sketch-v2.png?v=1');
    background-repeat: no-repeat;
    background-size: 100% 400%;
    background-position: center var(--thumb-position);
    border: 1px solid var(--ink);
  }
  .mobileRecommendation>strong {
    color: var(--ink);
    font-size: clamp(4px, .76vw, 6px);
    font-weight: 900;
    line-height: 1.08;
  }
  .mobileWater {
    height: 43%;
    position: absolute;
    z-index: 4;
    left: -5%;
    right: -5%;
    bottom: -6%;
    background:
      linear-gradient(180deg, rgba(188, 229, 224, .96) 0 16%, var(--teal) 17% 60%, #318d89 61% 100%);
    clip-path: polygon(0 21%, 7% 12%, 15% 19%, 24% 9%, 34% 20%, 45% 11%, 56% 21%, 67% 10%, 78% 19%, 89% 8%, 100% 18%, 100% 100%, 0 100%);
    opacity: 0;
    transform: translateY(100%);
    animation: mobileWaterRise 7s ease infinite;
  }
  .mobileWater::before {
    content: '';
    width: 46%;
    height: 16%;
    position: absolute;
    z-index: 2;
    left: 27%;
    top: 4%;
    border: 3px solid rgba(255, 253, 248, .9);
    border-radius: 50%;
    opacity: 0;
    animation: mobileWaterRipple 7s ease infinite;
  }
  .mobileWater::after {
    content: '';
    height: 3px;
    position: absolute;
    left: 3%;
    right: 3%;
    top: 22%;
    background: rgba(255, 253, 248, .72);
    box-shadow: 0 9px 0 rgba(188, 229, 224, .3), 0 18px 0 rgba(23, 38, 44, .08);
    transform: rotate(-1deg);
  }
  .mobileWater>i {
    width: 8px;
    height: 15px;
    position: absolute;
    z-index: 3;
    top: 3%;
    display: block;
    background: var(--teal-light);
    border: 1px solid var(--ink);
    border-radius: 55% 55% 55% 0;
    opacity: 0;
    animation: mobileSplash 7s ease infinite;
  }
  .mobileWater>i:nth-child(1) { left: 31%; rotate: -32deg; }
  .mobileWater>i:nth-child(2) { left: 43%; top: -3%; rotate: -10deg; }
  .mobileWater>i:nth-child(3) { right: 39%; top: -6%; rotate: 13deg; }
  .mobileWater>i:nth-child(4) { right: 29%; rotate: 32deg; }
  .mobileBrandReveal {
    position: absolute;
    z-index: 6;
    inset: 4% 8% 7%;
    overflow: hidden;
    background: var(--paper);
    border: 2px solid var(--teal-light);
    opacity: 0;
    animation: mobileRevealScene 7s ease infinite;
  }
  .mobileRevealGrid {
    position: absolute;
    z-index: 0;
    inset: 9% 8%;
    background-image:
      linear-gradient(rgba(23, 38, 44, .09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(23, 38, 44, .09) 1px, transparent 1px);
    background-size: 34px 34px;
    border: 1px solid rgba(23, 38, 44, .13);
    transform: rotate(-2deg);
  }
  .mobileRevealStack {
    position: absolute;
    z-index: 3;
    inset: 9% 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .mobileRevealStack>span {
    width: 66%;
    min-height: 26%;
    margin-top: -1%;
    padding: 1% 5% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: var(--paper);
    border: 3px solid var(--ink);
    box-shadow: 6px 7px 0 rgba(23, 38, 44, .13);
    font-size: clamp(25px, 5.5vw, 44px);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.045em;
    opacity: 0;
  }
  .mobileRevealStack>span:nth-child(1) { margin-left: -12%; animation: mobileThinkReveal 7s ease infinite; }
  .mobileRevealStack>span:nth-child(2) { margin-left: 10%; color: var(--paper); background: var(--teal-dark); animation: mobileCheckReveal 7s ease infinite; }
  .mobileRevealStack>span:nth-child(3) { margin-left: -2%; color: var(--paper); background: var(--ink); animation: mobileBrickReveal 7s ease infinite; }
  .mobileRevealPlus {
    position: absolute;
    z-index: 4;
    left: 3%;
    top: 28%;
    color: var(--teal-dark);
    font-size: clamp(24px, 5vw, 38px);
    font-style: normal;
    font-weight: 300;
    transform: rotate(-8deg);
  }
  .mobileRevealTab {
    width: 7%;
    height: 6%;
    position: absolute;
    z-index: 4;
    right: 4%;
    bottom: 7%;
    border: 2px solid var(--teal-dark);
    transform: rotate(7deg);
  }
  .mobileLaptopBase {
    width: 112%;
    height: 42px;
    margin-left: -6%;
    padding: 8px 13% 7px;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 3%;
    background: var(--teal);
    border: 4px solid var(--ink);
    border-top: 0;
    box-shadow: 10px 11px 0 rgba(23, 38, 44, .15);
    transform: perspective(260px) rotateX(38deg);
    transform-origin: top;
  }
  .mobileLaptopBase>span {
    width: 10%;
    height: 10px;
    display: block;
    background: var(--paper);
    border: 1px solid var(--ink);
  }
  .mobileLaptopBase>b {
    width: 20%;
    height: 5px;
    position: absolute;
    left: 40%;
    bottom: 3px;
    background: var(--ink);
  }
  .mobileHeroPlus { position: absolute; left: 2%; top: 18%; color: var(--teal-dark); font-size: 42px; font-weight: 300; transform: rotate(-8deg); }
  .mobileHeroTab { width: 49px; height: 28px; position: absolute; right: 1%; bottom: 6%; border: 3px solid var(--teal-dark); transform: rotate(7deg); }
  .methodStage { min-height: auto; grid-template-columns: 1fr; padding-block: 82px 92px; }
  .methodCopy { max-width: 680px; }
  .methodItems { width: 100%; min-height: 330px; }
  .methodItem img { width: min(190px, 100%); }
  .riskSection { min-height: auto; padding-top: 48px; }
  .heading h1 em { display: inline; }
  .maze {
    width: min(680px, 100%);
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    margin-top: 42px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .maze::before { inset: -24px -6vw -18px; }
  .wallLayer,
  .routeLayer,
  .scanBeam,
  .deadEnd { opacity: .34; pointer-events: none; }
  .wallLayer,
  .routeLayer { inset: -18px -12vw; }
  .startTag,
  .exitTag {
    width: auto;
    min-height: 116px;
    position: relative;
    inset: auto;
    z-index: 8;
    transform: none;
  }
  .riskCard {
    width: auto;
    min-height: 0;
    position: relative;
    inset: auto;
    transform: none;
  }
  .riskCard:hover { transform: translate(-3px, -4px); }
  .plus { left: auto; right: -13px; top: -42px; }
  .slashes { right: auto; left: -13px; bottom: -39px; }
  .tab { display: none; }
  .cta { margin-top: 62px; }
  .learningWorld { min-height: 0; padding-top: 82px; }
  .learningBoard {
    width: min(720px, 100%);
    min-height: 0;
    aspect-ratio: auto;
    margin-top: 68px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .learningBoard::before { inset: -28px -6vw -24px; }
  .learningBoardLabel {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    justify-self: start;
    order: 1;
  }
  .platformPanel,
  .knowledgePanel,
  .communityPanel,
  .levelPanel {
    width: auto;
    position: relative;
    inset: auto;
  }
  .platformPanel { grid-column: 1 / -1; order: 2; transform: rotate(-.7deg); }
  .knowledgePanel { --panel-tilt: 1deg; width: min(300px, 90%); order: 3; justify-self: center; transform: rotate(var(--panel-tilt)); }
  .levelPanel { --panel-tilt: -1deg; width: min(260px, 84%); order: 4; justify-self: center; transform: rotate(var(--panel-tilt)); }
  .communityPanel { --panel-tilt: .7deg; width: min(380px, 100%); grid-column: 1 / -1; order: 5; aspect-ratio: 1 / 1; justify-self: end; transform: rotate(var(--panel-tilt)); }
  .brickRail { display: none; }
  .learningPlus { left: auto; right: -12px; top: 35%; }
  .learningSlashes { right: auto; left: -17px; bottom: 27%; }
  .learningOutline { display: none; }
  .learningBenefits { width: min(720px, 100%); grid-template-columns: 1fr 1fr; }
  .learningBenefits>a { grid-column: 1 / -1; justify-self: start; }
  .voicesSection { min-height: 0; padding-top: 86px; }
  .voicesBoard {
    width: min(720px, 100%);
    aspect-ratio: auto;
    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .voicesBoard::before { inset: -28px -6vw -24px; }
  .voicesBoardLabel,
  .videoCase,
  .voiceQuote,
  .voicesStamp { position: relative; inset: auto; }
  .voicesBoardLabel { width: min(390px, 88%); min-width: 0; padding: 15px 18px; order: 1; justify-self: start; }
  .voicesBoardLabel small { font-size: 9px; }
  .voicesBoardLabel strong { margin-top: 8px; font-size: 15px; }
  .videoCase { width: 100%; }
  .videoCaseOne { order: 2; transform: rotate(-.7deg); }
  .voiceQuoteOne { order: 3; justify-self: end; transform: rotate(.8deg); }
  .videoCaseTwo { order: 4; transform: rotate(.7deg); }
  .voiceQuoteTwo { order: 5; justify-self: start; transform: rotate(-.7deg); }
  .voiceQuote { width: min(500px, 84%); padding: 25px 27px 22px; }
  .voiceQuote>span { height: 41px; font-size: 62px; }
  .voiceQuote p { font-size: 14px; }
  .voiceQuote footer { margin-top: 20px; padding-top: 15px; }
  .voiceQuote footer strong { font-size: 13px; }
  .voiceQuote footer b { font-size: 12px; }
  .voiceChrome { height: 42px; padding-inline: 16px; gap: 11px; }
  .voiceChrome>span { width: 9px; height: 9px; }
  .voiceChrome small,
  .voiceChrome i { font-size: 9px; }
  .videoCase>footer { min-height: 72px; padding: 16px 19px 17px; }
  .videoCase>footer span { font-size: 9px; }
  .videoCase>footer strong { max-width: 390px; font-size: 16px; }
  .voicesStamp { width: 122px; height: 122px; order: 6; justify-self: center; }
  .voicesStamp small,
  .voicesStamp span { font-size: 8px; }
  .voicesStamp strong { margin: 7px 0; font-size: 30px; }
  .voicesRoute,
  .voicesPlus,
  .voicesSlashes { display: none; }
  .curriculumSection { min-height: 0; padding-top: 88px; }
  .curriculumInner { grid-template-columns: 1fr; gap: 60px; }
  .curriculumCopy { max-width: 760px; transform: none; }
  .curriculumCopy h2 { max-width: 680px; }
  .curriculumResults { max-width: 700px; }
  .curriculumOrbit { width: min(820px, 100%); justify-self: center; }
  .founderSection { min-height: 0; padding-top: 88px; }
  .founderHeading h2 { max-width: 760px; }
  .founderBoard {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 66px;
  }
  .founderPortrait {
    width: min(620px, 100%);
    min-height: 620px;
    justify-self: center;
  }
  .founderPhotoFrame { width: min(500px, 84%); }
  .founderIdentity { right: 3%; }
  .founderStatement {
    width: min(760px, 100%);
    max-width: none;
    justify-self: center;
    transform: none;
  }
  .founderTrace { display: none; }
  .founderSlashes { left: auto; right: 4%; bottom: 44%; }
  .reviewsSection { padding-top: 82px; }
  .faqSection { padding-top: 88px; }
  .faqInner { grid-template-columns: 1fr; gap: 62px; }
  .faqIntro { max-width: 760px; position: relative; top: auto; }
  .faqIntro>p { max-width: 580px; }
  .faqSignal {
    margin: 0;
    position: absolute;
    right: 0;
    bottom: -16px;
    transform: scale(.84) rotate(-2deg);
    transform-origin: right bottom;
  }
  .faqList { width: min(800px, 100%); padding-top: 0; }
  .finalCtaSection { min-height: 550px; }
  .finalBuild { width: min(860px, 88vw); height: min(430px, 54vw); }
  .footerInner { grid-template-columns: 1fr; gap: 38px; }
  .footerLead { max-width: 560px; }
  .footerNav { max-width: 760px; }
  .footerBrick { display: none; }
}

@media (max-width: 560px) {
  .siteHeader {
    height: 66px;
    min-height: 66px;
    padding: 7px 16px;
  }
  .headerInner {
    min-height: 0;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .logo { width: 152px; margin-right: auto; }
  .nav {
    display: none;
  }
  .navItem { position: static; }
  .navTrigger {
    width: 100%;
    min-height: 31px;
    padding-inline: 3px;
    justify-content: center;
    gap: 3px;
    background: rgba(255, 253, 248, .06);
    border: 1px solid rgba(255, 253, 248, .12);
    font-size: 9px;
  }
  .navDirect {
    width: 100%;
    min-height: 31px;
    padding-inline: 3px;
    justify-content: center;
    background: rgba(255, 253, 248, .06);
    border: 1px solid rgba(255, 253, 248, .12);
    font-size: 9px;
  }
  .navDropdown,
  .navItem:first-child .navDropdown,
  .navItem:last-of-type .navDropdown {
    width: auto;
    max-height: 65vh;
    padding: 13px;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    overflow-y: auto;
    transform: translateY(8px);
  }
  .navItem:hover .navDropdown,
  .navItem:focus-within .navDropdown,
  .navItem:first-child:hover .navDropdown,
  .navItem:first-child:focus-within .navDropdown,
  .navItem:last-of-type:hover .navDropdown,
  .navItem:last-of-type:focus-within .navDropdown { transform: translateY(0); }
  .navDropdown>a { min-height: 36px; }
  .heroStage { padding: 48px 18px 58px; }
  .kicker,
  .methodCopy>span,
  .heading>span,
  .learningHeading>span,
  .voicesHeading>span,
  .curriculumCopy>span,
  .founderHeading>span,
  .reviewsHeading>span,
  .faqIntro>span,
  .finalCtaInner>span {
    width: fit-content;
    max-width: 100%;
    display: block;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(7px, 2.15vw, 9px);
  }
  .heroCopy h1,
  .methodCopy h2,
  .heading h1,
  .learningHeading h2,
  .voicesHeading h2,
  .curriculumCopy h2,
  .founderHeading h2,
  .reviewsHeading h2,
  .faqIntro h2 {
    line-height: 1.06;
  }
  .heroCopy h1 { font-size: clamp(20px, 5.9vw, 31px); }
  .mobileHeroArt { width: 88%; margin-top: 30px; aspect-ratio: 1.34 / 1; }
  .mobileHeroGrid { inset: 2% 1% 7%; background-size: 27px 27px; }
  .mobileHeroLabel { right: 0; top: -2%; padding: 7px 8px; font-size: 9px; }
  .mobileLaptop { width: 94%; }
  .mobileLaptopScreen { border-width: 3px; box-shadow: 8px 9px 0 rgba(23, 38, 44, .15); }
  .mobileYoutubeMock { width: 100%; left: 0; }
  .mobileYoutubeTopbar>label { flex-basis: 34%; }
  .mobileYoutubeBody { grid-template-columns: minmax(0, 1fr) 37%; }
  .mobileYoutubeSidebar { border-width: 1.5px; box-shadow: 3px 3px 0 var(--teal-dark); }
  .mobileYoutubeSidebar>b { min-height: 15px; padding: 3px 4px 2px; }
  .mobileYoutubeSidebar>img { height: calc(100% - 15px); }
  .mobilePodcastFrame>b { width: 22px; height: 16px; }
  .mobileRevealStack>span {
    width: 72%;
    border-width: 2px;
    font-size: clamp(24px, 8.8vw, 34px);
    box-shadow: 5px 6px 0 rgba(23, 38, 44, .13);
  }
  .mobileLaptopBase { height: 32px; border-width: 3px; border-top: 0; }
  .mobileLaptopBase>span { height: 8px; }
  .mobileHeroPlus { left: 0; top: 18%; font-size: 34px; }
  .mobileHeroTab { width: 39px; height: 23px; right: 0; bottom: 6%; }
  .heroCopy>p { margin-top: 24px; }
  .heroActions { align-items: flex-start; flex-direction: column; }
  .primaryButton { width: calc(100% - 10px); justify-content: center; padding-inline: 16px; font-size: 10px; }
  .partners { margin-top: 42px; }
  .heroArt { min-height: 430px; transform: none; }
  .heroGrid { inset: 28px 5% 10px; background-size: 34px 34px; }
  .heroBrick { min-height: 82px; padding-inline: 13px; border-width: 3px; font-size: clamp(56px, 17vw, 78px); }
  .heroCheck { --shift: 45px; }
  .heroBrickWord { --shift: 18px; }
  .stackLabel { right: 1%; top: 9%; font-size: 7px; }
  .heroPlus { left: 0; top: 16%; font-size: 44px; }
  .methodStage { padding: 65px 18px 76px; }
  .methodCopy { padding: 0 0 18px 28px; }
  .methodCopy h2 { font-size: clamp(20px, 5.9vw, 31px); }
  .methodItems { min-height: 0; grid-template-columns: 1fr; gap: 6px; }
  .methodTrack { display: none; }
  .methodItem { transform: none; }
  .methodItem img { width: 180px; }
  .methodItem strong { width: min(270px, 84%); margin-top: -16px; }
  .methodItem:nth-child(3) { margin-left: 32px; }
  .methodItem:nth-child(4) { margin-right: 32px; }
  .methodPlus { left: auto; right: 12px; top: 31px; }
  .methodDot { left: 18px; bottom: 22px; }
  .methodSlashes { display: none; }
  .riskSection { padding-inline: 18px; }
  .heading h1 { font-size: clamp(20px, 5.9vw, 31px); }
  .maze { grid-template-columns: 1fr; gap: 14px; }
  .startTag { width: 80%; justify-self: start; }
  .exitTag { width: 80%; justify-self: end; }
  .riskCard { min-height: 0; padding: 24px; }
  .riskCard:nth-of-type(even) { margin-left: 18px; }
  .riskCard:nth-of-type(odd) { margin-right: 18px; }
  .wallLayer,
  .routeLayer,
  .scanBeam,
  .deadEnd { display: none; }
  .maze::before { inset: -22px -30px -20px; }
  .cta { width: calc(100% - 20px); padding-inline: 17px; justify-content: center; font-size: 10px; }
  .giantWord { display: none; }
  .learningWorld { padding: 68px 18px 78px; }
  .learningHeading h2 { font-size: clamp(20px, 5.9vw, 31px); }
  .learningHeading h2 em { display: inline; }
  .learningBoard { grid-template-columns: 1fr; gap: 16px; }
  .learningBoardLabel,
  .platformPanel,
  .knowledgePanel,
  .levelPanel,
  .communityPanel { grid-column: auto; }
  .learningBoardLabel { min-width: 0; width: 88%; }
  .knowledgePanel { width: min(290px, 90%); justify-self: center; }
  .levelPanel { width: min(250px, 82%); justify-self: center; }
  .communityPanel { width: min(350px, 100%); aspect-ratio: 1 / 1; justify-self: center; }
  .platformCrop { aspect-ratio: 1.35 / 1; }
  .platformPanel>footer { align-items: flex-start; flex-direction: column; gap: 9px; }
  .platformPanel>footer strong { text-align: left; }
  .learningPlus,
  .learningSlashes { display: none; }
  .learningBenefits { grid-template-columns: 1fr; margin-top: 55px; }
  .learningBenefits>a { grid-column: auto; width: calc(100% - 10px); justify-content: center; font-size: 9px; }
  .voicesSection { padding: 70px 18px 76px; }
  .voicesHeading h2 { font-size: clamp(20px, 5.9vw, 31px); }
  .voicesHeading h2 em { display: inline; }
  .voicesBoard { gap: 18px; }
  .voiceQuote { width: 89%; padding: 21px 20px 18px; }
  .voiceQuote p { font-size: 12px; }
  .voiceQuote footer b { letter-spacing: .1em; }
  .videoCase>footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .videoCase>footer strong { max-width: none; text-align: left; font-size: 15px; }
  .voiceChrome i { display: none; }
  .curriculumSection { padding: 72px 18px 80px; }
  .curriculumCopy h2 { font-size: clamp(20px, 5.9vw, 31px); }
  .curriculumCopy>p { margin-top: 22px; }
  .curriculumResults { margin-top: 36px; grid-template-columns: 1fr; gap: 15px; }
  .curriculumOrbit {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    padding: 30px 0 8px;
  }
  .curriculumOrbit::before,
  .curriculumOrbit::after,
  .curriculumRing,
  .curriculumCore,
  .curriculumPlus,
  .curriculumSlashes,
  .curriculumCaption { display: none; }
  .curriculumBrick {
    width: auto;
    height: auto;
    min-height: 108px;
    padding: 16px;
    position: relative;
    inset: auto;
    border-width: 1px;
    box-shadow: 7px 8px 0 rgba(0, 0, 0, .42);
    transform: rotate(0);
    scale: 1;
    animation: none;
  }
  .curriculumBrick span { font-size: 9px; }
  .curriculumBrick strong { font-size: 18px; }
  .curriculumBrickSeven { width: calc(50% - 7px); grid-column: 1 / -1; justify-self: center; }
  .founderSection { padding: 72px 18px 84px; }
  .founderHeading h2 { font-size: clamp(20px, 5.9vw, 31px); }
  .founderBoard { margin-top: 42px; gap: 25px; }
  .founderPortrait { min-height: 510px; }
  .founderPhotoFrame {
    width: 88%;
    height: 460px;
    left: 3%;
  }
  .founderIdentity {
    width: 82%;
    min-height: 112px;
    padding: 18px 20px;
    right: 1%;
  }
  .founderStatement blockquote { padding-left: 20px; font-size: 22px; }
  .founderStatement>p { margin-left: 24px; }
  .founderProofs { grid-template-columns: 1fr; gap: 14px; }
  .founderProofs article,
  .founderProofs article:nth-child(2),
  .founderProofs article:nth-child(3) {
    min-height: 140px;
    transform: none;
  }
  .founderProofs article>strong { margin-top: 16px; }
  .founderPlus,
  .founderSlashes { display: none; }
  .reviewsSection { padding: 72px 0 76px; }
  .reviewsHeading { width: calc(100% - 36px); }
  .reviewsHeading h2 { font-size: clamp(20px, 5.9vw, 31px); }
  .reviewsHeading h2 em { display: block; }
  .reviewsViewport {
    margin-top: 38px;
    padding: 22px 18px 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    mask-image: none;
  }
  .reviewsViewport::-webkit-scrollbar { display: none; }
  .reviewsTrack { animation: none; }
  .reviewsGroup { gap: 14px; padding-right: 0; }
  .reviewsGroup[aria-hidden='true'] { display: none; }
  .reviewsTickerShell::after,
  .reviewPopups { display: none; }
  .reviewCard,
  .reviewCompact,
  .reviewFeature,
  .reviewWide {
    width: min(82vw, 320px);
    height: 220px;
    padding: 22px 20px 19px;
    scroll-snap-align: center;
    transform: none;
  }
  .reviewCard blockquote,
  .reviewFeature blockquote,
  .reviewCompact blockquote { margin-top: 20px; font-size: 13px; line-height: 1.38; }
  .reviewCard:hover,
  .reviewCard:focus-visible { transform: scale(1.025); }
  .reviewsPlus,
  .reviewsSlashes { display: none; }
  .reviewsCtaWrap { margin-top: 3px; padding-inline: 18px; }
  .reviewsCta { width: min(100%, 330px); min-width: 0; min-height: 58px; }
  .faqSection { padding: 72px 18px 82px; }
  .faqInner { gap: 43px; }
  .faqIntro h2 { font-size: clamp(20px, 5.9vw, 31px); }
  .faqIntro h2 em { display: inline; }
  .faqIntro>p { margin-top: 22px; }
  .faqSignal {
    width: 148px;
    height: 126px;
    margin: 34px 0 0 18px;
    position: relative;
    right: auto;
    bottom: auto;
    transform: rotate(-2deg);
  }
  .faqSignal strong { right: 16px; bottom: -10px; font-size: 88px; }
  .faqList { gap: 14px; }
  .faqItem:nth-child(even) { transform: none; }
  .faqItem:hover,
  .faqItem:nth-child(even):hover { transform: translate(-2px, -3px); }
  .faqItem summary {
    min-height: 76px;
    padding: 16px;
    grid-template-columns: 32px 1fr 36px;
    gap: 10px;
  }
  .faqItem summary>span { font-size: 9px; }
  .faqItem summary>strong { font-size: 14px; }
  .faqItem summary>i { width: 34px; height: 34px; font-size: 18px; }
  .faqAnswer { padding: 0 18px 21px 58px; }
  .faqAnswer p { padding-top: 16px; font-size: 13px; }
  .finalCtaSection { min-height: 390px; padding: 33px 18px 54px; }
  .finalBuild {
    width: 138vw;
    height: 420px;
    opacity: .68;
  }
  .finalFloat { width: 31px; height: 19px; border-width: 1px; box-shadow: 3px 3px 0 var(--teal-dark); }
  .finalFloatFour { left: 4%; bottom: 7%; }
  .finalPlus { right: 5%; top: 17%; font-size: 20px; }
  .finalCtaInner h2 { margin-top: 29px; font-size: clamp(27px, 7.4vw, 38px); line-height: 1.01; }
  .finalCtaInner a {
    width: calc(100% - 24px);
    min-width: 0;
    min-height: 60px;
    margin-top: 44px;
    font-size: 13px;
  }
  .footer { padding-inline: 18px; }
  .footerInner { padding: 64px 0 16px; gap: 30px; }
  .footerLead {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footerLead img { width: 220px; margin-inline: auto; }
  .footerSlogan { margin-inline: auto; font-size: 12px; }
  .footerSocials {
    margin-top: 28px;
    padding-left: 0;
    justify-content: center;
    gap: 12px;
  }
  .footerSocials a { width: 51px; height: 51px; }
  .footerSocials svg { width: 27px; height: 27px; }
  .footerNav { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footerNav>div:last-child { grid-column: 1 / -1; }
  .footerNav strong { margin-bottom: 14px; }
  .footerNav a { font-size: 12px; }
  .footerBottom { margin-top: 6px; align-items: flex-start; flex-direction: column; }
  .footerPlus { right: 5%; top: 8%; font-size: 42px; }
  .footerBrick { display: none; }
  .floatingContact { width: 58px; height: 58px; right: 16px; bottom: 16px; }
  .floatingContact>summary { width: 58px; height: 58px; }
  .contactMenu { width: min(300px, calc(100vw - 32px)); right: 0; bottom: 72px; }
  .contactMenu a,
  .contactMenu a:nth-child(1),
  .contactMenu a:nth-child(2),
  .contactMenu a:nth-child(3) { width: 100%; min-height: 56px; }
  .contactMenu strong { font-size: 13px; }

  /* Mobile compositions follow the approved section sketches. */
  .heroStage {
    padding: 44px 22px 62px;
  }
  .heroCopy { text-align: center; }
  .heroCopy h1 {
    width: 100%;
    max-width: 420px;
    margin: 25px auto 0;
    font-size: clamp(20px, 5.65vw, 29px);
    text-align: center;
  }
  .desktopHeroHeadline { display: none; }
  .mobileHeroHeadline {
    width: 100%;
    display: block;
  }
  .mobileHeroHeadline>span,
  .mobileHeroHeadline>em {
    display: block;
    white-space: nowrap;
  }
  .mobileHeroHeadline>span>em {
    margin: 0;
    display: inline;
  }
  .mobileHeroArt {
    width: min(76%, 300px);
    margin: 38px auto 0;
  }
  .heroCopy>p {
    max-width: 350px;
    margin: 38px auto 0;
    font-size: clamp(11px, 3.15vw, 13px);
    line-height: 1.55;
    text-align: left;
  }
  .heroActions {
    margin-top: 31px;
    align-items: center;
    gap: 23px;
  }
  .primaryButton {
    width: auto;
    min-width: min(276px, calc(100% - 12px));
    min-height: 54px;
  }
  .textLink { font-size: clamp(12px, 3.15vw, 13px); }
  .partners {
    margin-top: 37px;
    text-align: center;
  }
  .partners small { font-size: 9px; }
  .partnerLogos {
    margin-top: 17px;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .partnerLogos a { height: 29px; }
  .partnerLogos a:nth-child(1) img { width: 70px; }
  .partnerLogos a:nth-child(2) img { width: 76px; }
  .partnerLogos a:nth-child(3) img { width: 72px; }
  .partnerLogos a:nth-child(4) img { width: 70px; transform: translateY(-5px); }

  .methodStage { padding: 70px 20px 88px; }
  .methodCopy {
    max-width: 410px;
    padding: 0 10px 34px 29px;
  }
  .methodCopy h2 { margin-top: 20px; }
  .desktopMethodHeadline { display: none; }
  .mobileMethodHeadline {
    width: 100%;
    display: block;
  }
  .mobileMethodHeadline>span,
  .mobileMethodHeadline>em {
    display: block;
    white-space: nowrap;
  }
  .mobileMethodHeadline>span>em {
    margin: 0;
    display: inline;
  }
  .methodCopy p {
    max-width: 340px;
    margin-top: 24px;
    font-size: clamp(12px, 3.35vw, 14px);
    line-height: 1.5;
  }
  .methodCorner { top: 34px; bottom: 26px; }
  .methodItems {
    min-height: 0;
    margin-top: -32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 24px;
  }
  .methodItem,
  .methodItem:nth-child(3),
  .methodItem:nth-child(4) {
    margin: 0;
    transform: none;
  }
  .methodItem img { width: min(120px, 35vw); }
  .methodItem strong {
    width: min(150px, 92%);
    min-height: 40px;
    margin-top: -8px;
    padding: 8px 9px;
    font-size: clamp(9px, 2.6vw, 12px);
  }
  .methodPractice {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
    transform: translateY(-5px) rotate(-1.4deg);
  }
  .methodAgile {
    grid-column: 1;
    transform: translate(5px, -4px) rotate(1.2deg);
  }
  .methodSupport {
    grid-column: 2;
    transform: translate(-5px, -4px) rotate(-1.2deg);
  }
  .methodIndex { right: 3%; top: 8%; }

  .riskSection {
    padding: 66px 14px 76px;
  }
  .heading {
    width: calc(100% - 16px);
  }
  .heading h1 {
    max-width: 410px;
    margin-top: 23px;
  }
  .heading h1 em { display: block; }
  .maze {
    width: min(440px, 100%);
    margin-top: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto repeat(4, auto) auto;
    gap: 30px;
    position: relative;
    isolation: isolate;
  }
  .maze::before { inset: -22px -8px -25px; }
  .startTag,
  .exitTag {
    width: min(47%, 174px);
    min-height: 83px;
    aspect-ratio: 1.9 / 1;
    padding: 14px 16px;
    position: relative;
    inset: auto;
    z-index: 7;
  }
  .startTag {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    margin-left: 6%;
    color: var(--ink);
    background: var(--teal);
    transform: rotate(-2deg);
  }
  .exitTag {
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: start;
    margin-left: 5%;
    margin-right: 0;
    color: white;
    background: var(--ink);
    transform: rotate(2deg);
  }
  .startTag small,
  .exitTag small { font-size: 7px; }
  .startTag small { color: var(--ink); }
  .exitTag small { color: var(--teal); }
  .startTag strong,
  .exitTag strong {
    margin-top: 9px;
    font-size: clamp(21px, 6.5vw, 28px);
  }
  .startTag::after,
  .exitTag::after { width: 33px; right: 13px; bottom: 10px; border-top-width: 4px; }
  .startTag::after { display: none; }
  .riskCard {
    width: min(50vw, 194px);
    min-height: 0;
    aspect-ratio: 1.03 / 1;
    padding: 14px 12px 12px;
    position: relative;
    inset: auto;
    z-index: 6;
    margin: 0;
  }
  .riskOne {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    margin-right: 13%;
    transform: rotate(1.2deg);
  }
  .riskTwo {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    margin-right: 13%;
    transform: rotate(-1deg);
  }
  .riskThree {
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    margin-left: 0;
    margin-right: 13%;
    background: var(--paper);
    transform: rotate(1deg);
  }
  .riskFour {
    grid-column: 1;
    grid-row: 5;
    justify-self: end;
    margin-left: 0;
    margin-right: 13%;
    background: var(--teal-light);
    transform: rotate(-.8deg);
  }
  .riskCard>span { font-size: clamp(6px, 1.85vw, 8px); }
  .riskCard h2 {
    max-width: 156px;
    font-size: clamp(16px, 4.65vw, 20px);
    line-height: 1.02;
  }
  .riskCard p {
    max-width: 156px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: clamp(9.5px, 2.8vw, 11.5px);
    line-height: 1.36;
  }
  .riskCard>i {
    width: 25px;
    height: 25px;
    right: -10px;
    top: -11px;
    font-size: 16px;
  }
  .wallLayer,
  .scanBeam,
  .deadEnd { display: none; }
  .routeLayer {
    display: block;
    inset: 0;
    z-index: 2;
    opacity: .72;
    pointer-events: none;
  }
  .routeLayer .route:nth-child(1),
  .routeLayer .route:nth-child(3),
  .routeLayer .route:nth-child(4),
  .routeLayer .route:nth-child(5),
  .routeLayer .route:nth-child(6),
  .routeLayer .route:nth-child(7) {
    display: none;
  }
  .routeLayer .route:nth-child(2) { --x: 18% !important; --y: 7% !important; --length: 86% !important; }
  .routeLayer::after {
    display: none;
  }
  .runner {
    z-index: 4;
    animation: solveMazeMobile 7.8s linear infinite;
  }
  .plus { left: 4%; right: auto; top: 13%; font-size: 40px; }
  .slashes { left: 3%; right: auto; bottom: 20%; font-size: 25px; }
  .tab { display: block; width: 38px; height: 22px; left: 2%; right: auto; top: 41%; border-width: 2px; }
  .cta {
    width: auto;
    min-width: min(260px, calc(100% - 34px));
    margin-top: 82px;
    min-height: 54px;
  }

  .learningWorld { padding: 72px 16px 82px; }
  .learningHeading { width: calc(100% - 16px); }
  .learningHeading p {
    max-width: 355px;
    margin-top: 26px;
    font-size: clamp(11px, 3.15vw, 13px);
    line-height: 1.55;
  }
  .learningBoard {
    width: min(430px, 100%);
    height: clamp(460px, 132vw, 560px);
    margin-top: 45px;
    display: block;
    position: relative;
  }
  .learningBoardLabel { display: none; }
  .platformPanel,
  .knowledgePanel,
  .communityPanel,
  .levelPanel {
    position: absolute;
    inset: auto;
  }
  .platformPanel {
    width: 86%;
    left: 7%;
    top: 0;
    box-shadow: 6px 7px 0 var(--teal-dark);
    transform: rotate(-.7deg);
  }
  .platformPanel>.productChrome { height: 25px; padding-inline: 9px; }
  .platformPanel>.productChrome small { font-size: 6px; }
  .platformPanel>.productChrome i { font-size: 7px; }
  .platformCrop { aspect-ratio: 1.73 / 1; }
  .platformPanel>footer {
    min-height: 46px;
    padding: 9px 10px 10px;
    align-items: flex-end;
    flex-direction: row;
    gap: 8px;
  }
  .platformPanel>footer span { font-size: 6px; }
  .platformPanel>footer strong { max-width: 180px; font-size: 10px; text-align: right; }
  .knowledgePanel {
    display: none;
  }
  .communityPanel {
    width: 48%;
    right: 2%;
    top: 47%;
    box-shadow: 6px 7px 0 var(--teal-dark);
  }
  .levelPanel {
    width: 38%;
    left: 7%;
    top: 60%;
    bottom: auto;
    aspect-ratio: 1 / 1;
    padding: 6cqw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    box-shadow: 5px 6px 0 var(--teal-dark);
  }
  .platformPanel:hover,
  .communityPanel:hover,
  .levelPanel:hover {
    transform: translate(-2px, -5px) rotate(0);
    box-shadow: 8px 9px 0 var(--teal-dark);
  }
  .levelPanel>span { align-self: center; font-size: 5cqw; }
  .levelRow { margin-top: 8cqw; justify-content: center; gap: 0; }
  .levelRow>b {
    display: none;
  }
  .levelRow>div { width: 100%; }
  .levelRow small { font-size: 7.5cqw; }
  .levelRow strong {
    margin-top: 5cqw;
    font-size: 13cqw;
    line-height: .95;
  }
  .levelProgress {
    width: 100%;
    height: 7cqw;
    margin-top: 9cqw;
  }
  .levelPanel footer {
    width: 100%;
    margin-top: 7cqw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    gap: 6cqw;
    font-size: 6cqw;
  }
  .levelPanel footer span,
  .levelPanel footer strong { text-align: center; line-height: 1.15; }
  .brickRail,
  .learningOutline,
  .learningPlus,
  .learningSlashes { display: none; }
.learningBenefits {
  width: min(430px, 100%);
  margin-top: 10px;
  gap: 0;
}
  .learningBenefits article {
    padding: 29px 0 31px;
    border-top: 1px solid rgba(191, 233, 228, .28);
  }
  .learningBenefits article h3 { font-size: 20px; }
  .learningBenefits article p { font-size: 12px; line-height: 1.55; }
  .learningBenefits>a {
    width: auto;
    min-width: min(260px, calc(100% - 24px));
    margin-top: 27px;
    justify-self: center;
    min-height: 56px;
  }

  .voicesSection { padding: 72px 18px 82px; }
  .voicesHeading p {
    max-width: 345px;
    font-size: 12px;
    line-height: 1.5;
  }
  .voicesBoard {
    width: min(400px, 100%);
    margin-top: 43px;
    gap: 30px;
  }
  .voicesBoard::before,
  .voicesBoardLabel,
  .voicesRoute,
  .voicesPlus,
  .voicesSlashes,
  .voicesStamp { display: none; }
  .videoCase { width: 100%; justify-self: center; }
  .videoCaseOne,
  .videoCaseTwo { transform: none; }
  .videoCaseOne:hover,
  .videoCaseTwo:hover { transform: translate(-3px, -4px); }
  .voiceQuote {
    width: 88%;
    padding: 22px 20px 19px;
  }
  .voiceQuoteOne,
  .voiceQuoteTwo { justify-self: center; }
  .voiceQuote p { font-size: 12px; line-height: 1.45; }

  .curriculumSection { padding: 72px 16px 84px; }
  .curriculumInner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .curriculumCopy { display: contents; }
  .curriculumCopy>span { grid-row: 1; }
  .curriculumCopy h2 {
    grid-row: 2;
    max-width: 390px;
    margin: 25px auto 0;
    font-size: clamp(24px, 6.8vw, 34px);
    text-align: center;
  }
  .curriculumCopy h2 br { display: none; }
  .curriculumCopy h2 em { display: block; }
  .curriculumCopy>p {
    grid-row: 3;
    max-width: 390px;
    margin: 25px auto 0;
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
  }
  .curriculumOrbit {
    grid-row: 4;
    width: min(410px, 100%);
    aspect-ratio: 1.12 / 1;
    margin-top: 28px;
    padding: 0;
    position: relative;
    display: block;
    justify-self: center;
  }
  .curriculumOrbit::before,
  .curriculumOrbit::after,
  .curriculumCore,
  .curriculumPlus,
  .curriculumSlashes,
  .curriculumCaption { display: none; }
  .curriculumRing {
    width: 72%;
    height: auto;
    aspect-ratio: 1 / 1;
    left: 50%;
    top: 48%;
    display: block;
    border-width: 1px;
    box-shadow: 0 0 0 8vw rgba(85, 185, 176, .035);
    transform: translate(-50%, -50%);
  }
  .curriculumBrick {
    width: 31%;
    height: 20.5%;
    min-height: 0;
    padding: 2.1%;
    position: absolute;
    z-index: 3;
    display: flex;
    border-width: 1px;
    border-radius: 2px;
    box-shadow: inset -8px -7px 0 rgba(23, 38, 44, .1), 6px 7px 0 rgba(0, 0, 0, .3);
    scale: 1;
    animation: curriculumFloat 6s ease-in-out var(--delay) infinite alternate;
  }
  .curriculumBrick span { font-size: clamp(4px, 1.25vw, 6px); }
  .curriculumBrick strong {
    max-width: 100%;
    font-size: clamp(6px, 1.8vw, 8px);
    font-weight: 560;
    line-height: 1;
  }
  .curriculumBrickOne { left: 17%; top: 7%; }
  .curriculumBrickTwo { left: 52%; top: 4%; }
  .curriculumBrickThree { left: 1%; top: 35%; }
  .curriculumBrickFour { left: 34.5%; top: 34%; }
  .curriculumBrickFive { right: 1%; top: 35%; }
  .curriculumBrickSix { left: 17%; bottom: 11%; }
  .curriculumBrickSeven { width: 31%; right: 17%; bottom: 11%; }
  .curriculumResults {
    grid-row: 5;
    width: min(390px, 100%);
    margin: 35px auto 0;
    gap: 15px;
  }
  .curriculumResults>span { grid-template-columns: 20px 1fr; gap: 9px; }
  .curriculumResults>span strong { font-size: 12px; }
  .curriculumCta {
    grid-row: 6;
    width: auto;
    min-width: min(270px, calc(100% - 34px));
    margin: 40px auto 0;
    min-height: 56px;
  }

  .founderHeading { text-align: center; }
  .founderHeading h2 {
    margin-inline: auto;
    text-align: center;
  }
  .founderPortrait {
    width: min(290px, 74.4vw);
    min-height: clamp(343px, 93.6vw, 391px);
  }
  .founderPhotoFrame {
    width: 88%;
    height: clamp(276px, 76.8vw, 326px);
    left: 1%;
  }
  .founderIdentity {
    width: 70%;
    min-height: 64px;
    padding: 9px 11px;
    bottom: 14px;
    box-shadow: 6px 7px 0 var(--teal);
  }
  .founderIdentity span { font-size: 7px; }
  .founderIdentity strong { margin-top: 5px; font-size: 16px; }
  .founderIdentity small { margin-top: 4px; font-size: 10px; }
  .founderStatement blockquote {
    padding-left: 16px;
    font-size: clamp(17px, 4.8vw, 20px);
    line-height: 1.18;
  }
  .founderStatement { transform: translateY(-14px); }
  .founderStatement>p { display: none; }
  .founderProofs {
    width: min(250px, 68%);
    margin: 35px auto 0;
    gap: 10px;
  }
  .founderProofs article,
  .founderProofs article:nth-child(2),
  .founderProofs article:nth-child(3) {
    width: 100%;
    min-height: 92px;
    padding: 11px 13px 10px;
    align-items: center;
    text-align: center;
  }
  .founderProofs article>span { font-size: 8px; }
  .founderProofs article>strong {
    margin-top: 7px;
    font-size: 32px;
  }
  .founderProofs article>p {
    margin-top: auto;
    font-size: 11px;
    line-height: 1.25;
  }

  .reviewsHeading h2 { font-size: clamp(24px, 6.8vw, 34px); }
  .reviewsViewport {
    overflow: hidden;
    scroll-snap-type: none;
    touch-action: pan-y;
  }
  .reviewsTrack { animation: reviewMarquee 72s linear infinite reverse; }
  .reviewsGroup { padding-right: 14px; }
  .reviewsGroup[aria-hidden='true'] { display: flex; }
  .reviewsViewport:has(.reviewCard:hover) .reviewsTrack,
  .reviewsViewport:focus-within .reviewsTrack { animation-play-state: running; }
  .reviewsViewport:active .reviewsTrack { animation-play-state: paused; }
  .reviewsCtaWrap { margin-top: 34px; }

  .primaryButton,
  .cta,
  .learningBenefits>a,
  .curriculumCta,
  .reviewsCta,
  .finalCtaInner a {
    width: fit-content;
    max-width: calc(100% - 24px);
    min-width: 0;
    min-height: 47px;
    height: auto;
    padding: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    font-size: clamp(12px, 3.15vw, 13px);
    line-height: 1.15;
    letter-spacing: .01em;
  }
  .primaryButton>span,
  .cta>span,
  .learningBenefits>a>span,
  .curriculumCta>span,
  .reviewsCta>span,
  .finalCtaInner a>span {
    padding: 10px clamp(17px, 4.5vw, 23px);
  }

  .faqIntro h2 {
    margin-inline: auto;
    text-align: center;
  }
  .faqSignal { display: none; }

  /* Mobile typography and scale pass. Desktop and tablet stay untouched. */
  .heroCopy h1,
  .methodCopy h2,
  .heading h1,
  .learningHeading h2,
  .voicesHeading h2,
  .curriculumCopy h2,
  .founderHeading h2,
  .reviewsHeading h2,
  .faqIntro h2 {
    font-size: clamp(24px, 6.8vw, 34px);
  }

  .finalCtaInner h2 {
    font-size: clamp(28px, 7.65vw, 39px);
    line-height: 1.06;
  }

  .heroCopy>p,
  .methodCopy p,
  .heading>p,
  .learningHeading p,
  .voicesHeading p,
  .curriculumCopy>p,
  .reviewsHeading>p,
  .faqIntro>p {
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.58;
  }

  .heroCopy>p {
    text-align: center;
  }

  .learningBenefits article p,
  .reviewCard blockquote,
  .reviewFeature blockquote,
  .reviewCompact blockquote,
  .faqAnswer p {
    font-size: clamp(13.5px, 3.8vw, 16px);
    line-height: 1.52;
  }

  .methodItem img {
    width: min(142px, 40vw);
  }
  .methodItem strong {
    width: min(164px, 94%);
    padding-inline: 7px;
    font-size: clamp(10.5px, 3.05vw, 13px);
    line-height: 1.14;
  }

  .riskCard {
    width: min(57.5vw, 223px);
    padding: 16px 14px 14px;
  }
  .riskCard>span {
    font-size: clamp(7px, 2.1vw, 9px);
  }
  .riskCard h2 {
    max-width: 180px;
    font-size: clamp(18px, 5.25vw, 23px);
  }
  .riskCard p {
    max-width: 180px;
    margin-top: 12px;
    padding-top: 12px;
    font-size: clamp(11px, 3.2vw, 13px);
  }
  .riskCard>i {
    width: 29px;
    height: 29px;
    font-size: 18px;
  }

  .platformPanel {
    width: 90%;
    left: 5%;
  }
  .communityPanel {
    width: 51%;
    right: 0;
    top: 50%;
  }
  .levelPanel {
    width: 41%;
    left: 5%;
  }

  .curriculumCopy h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.07;
  }
  .curriculumBrick strong {
    font-size: clamp(9px, 2.7vw, 12px);
    line-height: 1.12;
    text-align: right;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .curriculumBrick span {
    font-size: clamp(9px, 2.7vw, 12px);
  }
  .curriculumBrickOne strong,
  .curriculumBrickTwo strong,
  .curriculumBrickFive strong,
  .curriculumBrickSeven strong {
    font-size: 0;
    line-height: 0;
  }
  .curriculumBrickOne strong::after,
  .curriculumBrickTwo strong::after,
  .curriculumBrickFive strong::after,
  .curriculumBrickSeven strong::after {
    display: block;
    white-space: pre-line;
    font-size: clamp(9px, 2.7vw, 12px);
    line-height: 1.12;
  }
  .curriculumBrickOne strong::after {
    content: "STRATEGIE &\A PLANUNG";
  }
  .curriculumBrickTwo strong::after {
    content: "STANDORT-\A ANALYSE";
  }
  .curriculumBrickFive strong::after {
    content: "OBJEKT-\A BEWERTUNG";
  }
  .curriculumBrickSeven strong::after {
    content: "KAUF-\A ABWICKLUNG";
  }
  .curriculumResults>span strong {
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.4;
  }

  .founderProofs article>p {
    margin: 14px 0 0;
    font-size: clamp(12px, 3.35vw, 14px);
    line-height: 1.35;
  }

  .partnerLogos {
    width: min(330px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 13px;
  }
  .partnerLogos a {
    width: 100%;
    height: 49px;
  }
  .partnerLogos a:nth-child(1) img { width: min(125px, 100%); }
  .partnerLogos a:nth-child(2) img { width: min(136px, 100%); }
  .partnerLogos a:nth-child(3) img { width: min(129px, 100%); }
  .partnerLogos a:nth-child(4) img {
    width: min(125px, 100%);
    transform: translateY(-3px);
  }
}

@keyframes solveMazeMobile {
  0%, 5% { left: 18%; top: 7%; }
  100% { left: 18%; top: 93%; }
}

@media (prefers-reduced-motion: reduce) {
  .heroGrid,
  .heroBrick,
  .stackLabel,
  .methodGrid,
  .methodTrack i,
  .grid,
  .scanBeam,
  .route,
  .runner,
  .runner b,
  .deadEnd i,
  .productChrome>span,
  .levelRow>b,
  .levelProgress i,
  .levelConfetti i,
  .brickRail i,
  .voiceChrome>span,
  .voicesRoute i,
  .curriculumBrick,
  .voicesStamp,
  .founderTrace i,
  .reviewsTrack { animation: none; }
  .faqSignal i,
  .finalBuild i,
  .finalFloat,
  .contactMenu a { animation: none; }
  .mobileLaptop,
  .mobileYoutubeMock,
  .mobileWater,
  .mobileWater>i,
  .mobileBrandReveal,
  .mobileRevealStack>span { animation: none; }
  .mobileYoutubeMock,
  .mobileWater { display: none; }
  .mobileBrandReveal,
  .mobileRevealStack>span { opacity: 1; }
  .reviewsViewport { overflow-x: auto; }
  .reviewsGroup[aria-hidden='true'] { display: none; }
  .reviewCard,
  .reviewPopup,
  .reviewsCta,
  .faqItem,
  .faqItem summary>i,
  .finalCtaInner a { transition: none; }
}

/* Unpublished offer: visible information, no dead destination. */
.navPending{display:block;padding:10px 12px;line-height:1.45;font-size:14px}.navPending small{display:block;font-size:10px;opacity:.7;font-weight:400}.footerNav .navPending{padding:0;font-size:inherit}.footerNav .navPending small{font-size:10px}