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

:root { --font-geist: 'Geist', Arial, sans-serif; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { 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; }

/*
 * ThinkBRICK Community foundation
 * These semantic values are the approved starting point for every new section.
 * Individual compositions can vary, while typography, spacing and brand language
 * stay consistent with the Home and Trainingspass pages.
 */
.communityPage {
  --ink: #17262c;
  --ink-2: #20353b;
  --paper: #fffdf8;
  --sand: #eee8df;
  --teal: #55b9b0;
  --teal-light: #bfe9e4;
  --teal-dark: #2d8079;
  --cta-neon: #58e7df;
  --content-wide: 1500px;
  --content-copy: 1260px;
  --section-inline: clamp(24px, 5vw, 86px);
  --section-block: clamp(88px, 8vw, 132px);
  --headline-size: clamp(30px, 3.55vw, 58px);
  --headline-leading: .94;
  --body-size: clamp(14px, 1.15vw, 17px);
  --body-leading: 1.55;
  --kicker-size: 10px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  color: var(--ink);
  background: var(--sand);
  font-family: var(--font-geist), Arial, sans-serif;
}

.communityPage * { box-sizing: border-box; }
.communityPage a { color: inherit; text-decoration: none; }
.communityPage h1,
.communityPage h2,
.communityPage h3,
.communityPage p { margin-top: 0; }

.siteHeader {
  height: 82px;
  padding: 0 clamp(24px, 5vw, 78px);
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--paper);
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.headerInner {
  width: min(var(--content-wide), 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,
.navDirect {
  min-height: 44px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  color: var(--paper);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 740;
  white-space: nowrap;
  transition: color .2s ease;
}

.navTrigger { cursor: pointer; }
.navDirect:hover,
.navDirect:focus-visible,
.navItem:hover .navTrigger,
.navItem:focus-within .navTrigger { color: var(--teal-light); outline: none; }

.navDropdown {
  width: 272px;
  padding: 9px 14px;
  position: absolute;
  z-index: 80;
  left: 50%;
  top: calc(100% - 2px);
  display: grid;
  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 {
  height: 650px;
  min-height: 650px;
  padding: clamp(44px, 4.3vw, 55px) var(--section-inline) 90px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--teal);
}

.heroGrid {
  position: absolute;
  z-index: -5;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(23, 38, 44, .24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .24) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%);
}

.heroPaperShape {
  width: clamp(420px, 42vw, 535px);
  height: clamp(270px, 28vw, 356px);
  position: absolute;
  z-index: -4;
  left: max(-230px, -18vw);
  top: max(-190px, -15vw);
  background: transparent;
  border: 3px solid rgba(255, 253, 248, .34);
  border-radius: 48%;
  box-shadow:
    0 0 0 34px rgba(23, 38, 44, .055),
    0 0 0 68px rgba(255, 253, 248, .055);
  transform: rotate(-8deg);
}

.heroDotField {
  width: clamp(250px, 31vw, 395px);
  height: clamp(180px, 25vw, 318px);
  position: absolute;
  z-index: -2;
  right: 1%;
  top: 29%;
  opacity: .32;
  background-image: radial-gradient(circle, var(--paper) 1.5px, transparent 1.7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(135deg, transparent 0, #000 28%, #000 65%, transparent 100%);
  transform: rotate(3deg);
}

.heroEdgePattern {
  width: 34px;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 31%;
  display: grid;
  gap: 8px;
  opacity: .48;
}
.heroEdgePattern i {
  width: 34px;
  height: 12px;
  display: block;
  background: rgba(23, 38, 44, .3);
  transform: translateX(15px) skewX(-22deg);
}
.heroEdgePattern i:nth-child(even) { width: 22px; margin-left: 12px; background: rgba(255, 253, 248, .46); }
.heroEdgePattern i:nth-child(3n) { transform: translateX(9px) skewX(22deg); }

.heroInner {
  width: min(1144px, 100%);
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.heroCopy {
  width: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 5;
  text-align: center;
}

.heroKicker {
  width: fit-content;
  max-width: 100%;
  display: inline-block;
  padding: 8px 11px;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 5px 6px 0 var(--teal-dark);
  font: 850 9px/1 monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: rotate(-1deg);
  margin-inline: auto;
}

.heroCopy h1 {
  max-width: 940px;
  margin: clamp(24px, 2.35vw, 30px) auto 0;
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.heroCopy h1 > span { display: block; }
.heroCopy h1 > span:not(.heroBenefitSwap) { white-space: nowrap; }

.heroHeadlineAccent {
  color: var(--ink);
  font: inherit;
}

.heroBenefitSwap {
  anchor-name: --hero-word-line;
  width: 100%;
  min-height: 1.08em;
  margin-top: .46em;
  position: relative;
  display: grid !important;
  place-items: center;
  font-size: .96em;
  line-height: .9;
  white-space: nowrap;
}

.heroBenefitSwap em {
  --word-delay: 0s;
  grid-area: 1 / 1;
  width: fit-content;
  position: relative;
  color: var(--paper);
  font-style: normal;
  line-height: .86;
  transform: rotate(-1.2deg);
}

.heroWordFace {
  padding: .1em .16em .13em;
  display: block;
  color: var(--paper);
  background: var(--ink);
  border: .045em solid var(--ink);
  box-shadow: .11em .12em 0 var(--teal-light);
  opacity: 0;
  clip-path: inset(-15% 104% -20% -16%);
  animation: benefitCycle 15s steps(10, end) infinite;
  animation-delay: var(--word-delay);
}

.heroWordPixels {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  pointer-events: none;
}

.heroWordPixels i {
  --pixel-left: 50%;
  --pixel-top: 50%;
  --pixel-delay: 0s;
  --pixel-fly-x: 40px;
  --pixel-fly-y: 0px;
  width: 3px;
  height: 3px;
  position: absolute;
  left: var(--pixel-left);
  top: var(--pixel-top);
  display: block;
  background: var(--paper);
  box-shadow:
    4px 1px 0 rgba(255, 253, 248, .56),
    8px -1px 0 rgba(255, 253, 248, .25);
  opacity: 0;
  animation: wordPixelDrift 15s steps(6, end) infinite;
  animation-delay: calc(var(--word-delay) + var(--pixel-delay));
}
.heroWordPixels i:nth-child(3n) {
  width: 2px;
  height: 2px;
  background: var(--ink);
  box-shadow:
    3px 1px 0 rgba(23, 38, 44, .48),
    7px -1px 0 rgba(23, 38, 44, .22);
}
.heroWordPixels i:nth-child(4n) { width: 1px; height: 2px; }
.heroWordPixels i:nth-child(5n) { transform: translateY(2px); }
.heroWordPixels i:nth-child(7n) { background: var(--teal-light); box-shadow: 4px 0 0 rgba(191, 233, 228, .3); }

.heroCopy > p {
  width: 54%;
  max-width: 620px;
  margin: clamp(35px, 3.3vw, 42px) auto 0;
  color: var(--ink-2);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 540;
  line-height: 1.42;
  text-align: center;
}

.heroBenefits {
  width: fit-content;
  max-width: 76%;
  margin: 28px auto 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.35vw, 17px);
  font-weight: 720;
  line-height: 1.3;
  list-style: none;
}

.heroBenefits li::before {
  content: '•';
  margin-right: 8px;
  color: var(--paper);
}

.heroCopy .heroCta {
  min-height: 50px;
  margin: 32px auto 0;
  padding-inline: 24px;
  color: var(--paper);
  box-shadow: 7px 8px 0 var(--cta-neon);
}

.heroCopy .heroCta:hover { box-shadow: 10px 11px 0 var(--cta-neon); }

.heroVisual {
  width: clamp(154px, 14vw, 178px);
  aspect-ratio: .72 / 1;
  position: absolute;
  z-index: 4;
  left: clamp(4%, 6vw, 76px);
  top: clamp(308px, 24.6vw, 312px);
  transform: translateY(-50%) rotate(-3.5deg);
}

/* Keep the nozzle tied to the changing word instead of a viewport-specific y value. */
@supports (top: anchor(--hero-word-line center)) {
  .heroVisual {
    top: anchor(--hero-word-line center);
    transform: translateY(-9%) rotate(-3.5deg);
  }
}

.heroBottleBase,
.heroBottleTrigger {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: saturate(.94) contrast(1.06);
}

.heroBottleBase {
  position: relative;
  z-index: 2;
  -webkit-mask-image: url('../../brand/community/spray-bottle-base-mask.svg');
  mask-image: url('../../brand/community/spray-bottle-base-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.heroBottleTrigger {
  position: absolute;
  z-index: 7;
  inset: 0;
  -webkit-mask-image: url('../../brand/community/spray-bottle-trigger-mask.svg');
  mask-image: url('../../brand/community/spray-bottle-trigger-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform-origin: 70.5% 13.2%;
  animation: triggerPull 5s linear infinite;
}

.heroMist {
  width: clamp(300px, 38vw, 482px);
  height: 30%;
  position: absolute;
  z-index: 5;
  left: 81%;
  top: -3.8%;
  pointer-events: none;
}
.heroMist::before {
  content: '';
  width: 72%;
  height: 54%;
  position: absolute;
  left: -2%;
  top: 23%;
  background-image: radial-gradient(circle, rgba(255, 253, 248, .92) 0 1px, transparent 1.35px);
  background-size: 7px 6px;
  clip-path: polygon(0 44%, 100% 4%, 100% 96%, 0 56%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
  opacity: 0;
  transform-origin: left center;
  animation: sprayVeil 5s linear infinite;
}
.heroMist i {
  --spray-x: 20vw;
  --spray-y: 0px;
  --spray-delay: 0s;
  width: 6px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  background: rgba(255, 253, 248, .96);
  box-shadow:
    7px 0 0 rgba(255, 253, 248, .56),
    13px 0 0 rgba(255, 253, 248, .24);
  opacity: 0;
  animation: pixelSpray 5s steps(6, end) var(--spray-delay) infinite;
}
.heroMist i:nth-child(3n) { width: 4px; height: 1px; }
.heroMist i:nth-child(5n) { width: 3px; height: 2px; box-shadow: 5px 0 0 rgba(255, 253, 248, .5); }

.heroCornerBricks {
  width: 92px;
  height: 82px;
  position: absolute;
  z-index: 1;
  left: 1.5%;
  bottom: 7%;
  opacity: .45;
}
.heroCornerBricks i {
  width: 44px;
  height: 24px;
  position: absolute;
  display: block;
  border: 2px solid var(--ink);
}
.heroCornerBricks i:nth-child(1) { left: 0; bottom: 0; transform: rotate(3deg); }
.heroCornerBricks i:nth-child(2) { right: 0; bottom: 0; transform: rotate(-2deg); }
.heroCornerBricks i:nth-child(3) { left: 24px; top: 3px; transform: rotate(1deg); }

.heroPlus {
  position: absolute;
  z-index: 1;
  right: 4%;
  top: 12%;
  color: var(--paper);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 220;
  opacity: .7;
  transform: rotate(10deg);
}

.heroOutlineBrick {
  width: 78px;
  height: 44px;
  position: absolute;
  z-index: 1;
  right: 41%;
  top: 9%;
  border: 3px solid rgba(255, 253, 248, .72);
  transform: rotate(-8deg);
}

@keyframes triggerPull {
  0%, 7%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  1.5%, 4.5% { transform: translate3d(-1px, 0, 0) rotate(8deg); }
}

@keyframes pixelSpray {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scaleX(.55); }
  1.5% { opacity: 1; }
  10% { opacity: .94; transform: translate3d(var(--spray-x), var(--spray-y), 0) scaleX(1); }
  19% { opacity: .56; transform: translate3d(var(--spray-x), var(--spray-y), 0) scaleX(.86); }
  22.5%, 100% { opacity: 0; transform: translate3d(var(--spray-x), var(--spray-y), 0) scaleX(.7); }
}

@keyframes sprayVeil {
  0% { opacity: 0; transform: scaleX(.08); }
  1.5% { opacity: .92; }
  10% { opacity: .74; transform: scaleX(1); }
  18.5% { opacity: .38; transform: scaleX(1); }
  22.5%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes benefitCycle {
  0%, 4.55% {
    opacity: 0;
    clip-path: inset(-15% 104% -20% -16%);
  }
  6.4%, 36.333% {
    opacity: 1;
    clip-path: inset(-15% -15% -20% -16%);
  }
  38%, 100% {
    opacity: 0;
    clip-path: inset(-15% -15% -20% 116%);
  }
}

@keyframes wordPixelDrift {
  0%, 36.25% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  36.333% {
    opacity: 1;
    filter: blur(0);
  }
  39% {
    opacity: .82;
    filter: blur(.2px);
    transform: translate3d(calc(18vw + var(--pixel-fly-x)), var(--pixel-fly-y), 0) rotate(5deg) scale(.72);
  }
  43% {
    opacity: .36;
    filter: blur(.7px);
    transform: translate3d(calc(48vw + var(--pixel-fly-x)), calc(var(--pixel-fly-y) + 3px), 0) rotate(10deg) scale(.38);
  }
  46%, 100% {
    opacity: 0;
    filter: blur(1.2px);
    transform: translate3d(calc(75vw + var(--pixel-fly-x)), calc(var(--pixel-fly-y) + 5px), 0) rotate(14deg) scale(.12);
  }
}

/* Ready-to-use section primitives for the next joint design steps. */
.section {
  padding: var(--section-block) var(--section-inline);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sectionInner { width: min(var(--content-wide), 100%); margin-inline: auto; position: relative; z-index: 2; }
.sectionGrid {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 38, 44, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .075) 1px, transparent 1px);
  background-size: 58px 58px;
}

.sectionKicker {
  width: fit-content;
  max-width: 100%;
  display: inline-block;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 6px 0 var(--teal);
  font: 850 var(--kicker-size)/1 monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.sectionHeadline {
  max-width: 900px;
  margin: 25px 0 0;
  font-size: var(--headline-size);
  font-weight: 540;
  line-height: var(--headline-leading);
  letter-spacing: -.06em;
}
.sectionHeadline em { color: var(--teal-dark); font-style: normal; }

.sectionBody {
  max-width: 610px;
  margin: 28px 0 0;
  color: #536267;
  font-size: var(--body-size);
  font-weight: 440;
  line-height: var(--body-leading);
}

.primaryCta {
  width: fit-content;
  min-height: 58px;
  margin-top: 30px;
  padding: 0 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 8px 9px 0 var(--cta-neon);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: transform .18s ease, box-shadow .18s ease;
}
.primaryCta:hover { transform: translate(-2px, -2px); box-shadow: 10px 11px 0 var(--cta-neon); }

.benefitsSection {
  padding-top: clamp(86px, 7vw, 110px);
  padding-bottom: clamp(96px, 7.8vw, 124px);
  background: var(--sand);
  border-bottom: 2px solid var(--ink);
}

.benefitsSection .sectionGrid {
  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);
  /* A moving full-section background forces a repaint every frame. */
  animation: none;
}

.benefitsSection .sectionGrid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 15%, var(--sand) 77%);
}

.benefitsInner { width: min(1120px, 100%); }

.benefitsHeader {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.benefitsHeader .sectionKicker {
  margin-inline: auto;
  font-size: 10px;
}

.benefitsHeader .benefitsTitle {
  max-width: 900px;
  margin: 25px auto 0;
  color: var(--ink);
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.benefitsTitle em {
  display: block;
  color: var(--teal-dark);
  font-style: normal;
}

.benefitsHeader .benefitsIntro {
  max-width: 760px;
  margin: 27px auto 0;
  color: var(--ink-2);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 480;
  line-height: 1.55;
}

.communityNetwork {
  width: min(1120px, 100%);
  aspect-ratio: 1120 / 650;
  margin: clamp(48px, 4.2vw, 60px) auto 0;
  position: relative;
  isolation: isolate;
}

.benefitsInner .benefitsCta {
  min-height: 58px;
  margin: clamp(58px, 5vw, 76px) auto 0;
  display: flex;
  color: var(--paper);
}

.communityNetwork::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1.5% 1.2% 1%;
  background: rgba(255, 253, 248, .32);
  border: 2px solid rgba(23, 38, 44, .14);
  box-shadow: 16px 18px 0 rgba(23, 38, 44, .06);
  transform: skewY(-1deg);
}

.networkLines {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
}

.mobileNetworkLines { display: none; }
.mobileNetworkRunner { display: none; }

.networkPath {
  fill: none;
  stroke: var(--teal);
  stroke-width: 6;
  stroke-dasharray: 20 9;
  opacity: .62;
  vector-effect: non-scaling-stroke;
  animation: networkDashFlow 1.45s linear infinite;
}

.networkSignal {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.questionSignal { animation: desktopQuestionRoute 32s linear infinite; }
.answerSignal { animation: desktopAnswerRoute 32s linear infinite; }

.networkSignalCore {
  fill: var(--teal);
  stroke: var(--ink);
  stroke-width: 3;
}

.answerSignal .networkSignalCore {
  fill: var(--teal-dark);
}

.networkSignalPulse {
  fill: none;
  stroke: var(--teal-dark);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: .55;
}

.networkSignal text {
  fill: var(--paper);
  font: 950 22px/1 var(--font-geist), Arial, sans-serif;
  text-anchor: middle;
}

.networkHub {
  width: 210px;
  min-height: 158px;
  padding: 14px 16px 15px;
  position: absolute;
  z-index: 4;
  left: 53.3%;
  top: 46.3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--paper);
  background: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 7px 8px 0 var(--teal);
  transform: translate(-50%, -50%) rotate(-.5deg);
  animation: networkHubSignal 8s ease-in-out infinite;
}

.networkHub > span {
  font: 820 7px/1 monospace;
  letter-spacing: .12em;
}

.networkHub .networkAvatar {
  width: 42px;
  height: 42px;
  margin-top: 0;
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--teal-light);
  border: 2px solid var(--paper);
  box-shadow: 4px 4px 0 var(--teal-dark);
  transform: rotate(-2deg);
}

.networkAvatar svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.networkHub strong {
  margin-top: 10px;
  font-size: 20.5px;
  font-weight: 870;
  line-height: .9;
  letter-spacing: -.045em;
}

.networkHub strong em { color: var(--teal); font-style: normal; }

.networkHub small {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--teal-light);
  font: 780 7.5px/1.05 monospace;
  letter-spacing: .06em;
}

.networkHub small i {
  width: 6px;
  height: 6px;
  display: block;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(85, 185, 176, .15);
  animation: networkStatusBlink 1.1s ease-in-out infinite;
}

.networkStations { position: absolute; z-index: 3; inset: 0; }

.networkStation {
  width: 19%;
  min-height: 145px;
  padding: 16px 17px 18px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper);
  border: 1px solid rgba(23, 38, 44, .62);
  box-shadow: 9px 10px 0 var(--teal-dark);
  transition: transform .2s ease, box-shadow .2s ease;
}

.networkStation:nth-child(1) { left: 9%; top: 13%; transform: rotate(-1.2deg); }
.networkStation:nth-child(2) { left: 75%; top: 5%; transform: rotate(.7deg); }
.networkStation:nth-child(3) { left: 9%; bottom: 5%; transform: rotate(.8deg); }
.networkStation:nth-child(4) { left: 76%; bottom: 4%; transform: rotate(.9deg); }
.networkStation:nth-child(1),
.networkStation:nth-child(4) {
  background: var(--teal-light);
  box-shadow: 9px 10px 0 var(--teal-dark);
}
.networkStation:nth-child(1) .benefitIcon,
.networkStation:nth-child(4) .benefitIcon { background: var(--paper); }
.networkStation:hover { transform: translate(-3px, -4px); box-shadow: 13px 15px 0 var(--teal-dark); }

.benefitCardTop {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.benefitIcon {
  width: 38px;
  min-width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--teal-light);
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 var(--teal);
  transform: rotate(-1.5deg);
}

.benefitIcon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.8;
}

.benefitMarker {
  padding-top: 3px;
  color: var(--teal-dark);
  font: 820 7px/1.2 monospace;
  letter-spacing: .1em;
  text-align: right;
}

.networkStation h3 {
  width: 100%;
  margin: 13px 0 0;
  color: var(--ink);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 790;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-align: center;
}

.networkStation p {
  width: 100%;
  margin: 12px 0 0;
  padding-top: 12px;
  color: var(--ink-2);
  border-top: 1px solid rgba(23, 38, 44, .62);
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 460;
  line-height: 1.45;
  text-align: center;
}

.benefitsPlus {
  position: absolute;
  z-index: 1;
  left: clamp(22px, 4vw, 68px);
  top: clamp(42px, 5vw, 82px);
  color: var(--teal-dark);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 220;
  opacity: .72;
  transform: rotate(-7deg);
}

.benefitsOutlineBrick {
  width: 82px;
  height: 46px;
  position: absolute;
  z-index: 1;
  right: clamp(24px, 5vw, 86px);
  bottom: clamp(34px, 5vw, 78px);
  border: 3px solid var(--teal-dark);
  opacity: .72;
  transform: rotate(7deg);
}

@keyframes networkDashFlow {
  to { stroke-dashoffset: -29; }
}

@keyframes desktopQuestionRoute {
  0% { transform: translate(53.8393%, 35.0769%); opacity: 0; }
  .4% { opacity: 1; }
  2.9% { transform: translate(53.8393%, 22.3077%); }
  11.25% { transform: translate(29.4643%, 22.3077%); opacity: 1; }
  11.5% { transform: translate(29.4643%, 22.3077%); opacity: 0; }
  24.9% { transform: translate(61.875%, 46.1538%); opacity: 0; }
  25.3% { opacity: 1; }
  30% { transform: translate(73.2143%, 46.1538%); }
  34.5% { transform: translate(73.2143%, 28.4615%); }
  36.25% { transform: translate(77.2321%, 28.4615%); opacity: 1; }
  36.5% { transform: translate(77.2321%, 28.4615%); opacity: 0; }
  49.9% { transform: translate(48.2143%, 57.3846%); opacity: 0; }
  50.3% { opacity: 1; }
  54.9% { transform: translate(48.2143%, 80%); }
  61.25% { transform: translate(29.4643%, 80%); opacity: 1; }
  61.5% { transform: translate(29.4643%, 80%); opacity: 0; }
  74.9% { transform: translate(58.0357%, 57.3846%); opacity: 0; }
  75.3% { opacity: 1; }
  79.8% { transform: translate(58.0357%, 80%); }
  86.25% { transform: translate(77.3214%, 80%); opacity: 1; }
  86.5% { transform: translate(77.3214%, 80%); opacity: 0; }
  100% { transform: translate(53.8393%, 35.0769%); opacity: 0; }
}

@keyframes desktopAnswerRoute {
  0%, 12.4% { transform: translate(29.4643%, 22.3077%); opacity: 0; }
  12.8% { opacity: 1; }
  21% { transform: translate(53.8393%, 22.3077%); }
  23.75% { transform: translate(53.8393%, 35.0769%); opacity: 1; }
  24% { transform: translate(53.8393%, 35.0769%); opacity: 0; }
  37.4% { transform: translate(77.2321%, 28.4615%); opacity: 0; }
  37.8% { opacity: 1; }
  39.3% { transform: translate(73.2143%, 28.4615%); }
  43.8% { transform: translate(73.2143%, 46.1538%); }
  48.75% { transform: translate(61.875%, 46.1538%); opacity: 1; }
  49% { transform: translate(61.875%, 46.1538%); opacity: 0; }
  62.4% { transform: translate(29.4643%, 80%); opacity: 0; }
  62.8% { opacity: 1; }
  69% { transform: translate(48.2143%, 80%); }
  73.75% { transform: translate(48.2143%, 57.3846%); opacity: 1; }
  74% { transform: translate(48.2143%, 57.3846%); opacity: 0; }
  87.4% { transform: translate(77.3214%, 80%); opacity: 0; }
  87.8% { opacity: 1; }
  94% { transform: translate(58.0357%, 80%); }
  98.75% { transform: translate(58.0357%, 57.3846%); opacity: 1; }
  99%, 100% { transform: translate(58.0357%, 57.3846%); opacity: 0; }
}

@keyframes networkHubSignal {
  0%, 100% { transform: translate(-50%, -50%) rotate(-.5deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(.2deg) scale(1.018); }
}

@keyframes networkStatusBlink {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}

.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%;
  box-shadow: 7px 8px 0 rgba(23, 38, 44, .35);
  cursor: pointer;
  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); }
}

/* Preserve the approved 1270 × 525 hero composition on wider desktop screens. */
@media (min-width: 1270px) {
  .heroPaperShape { left: calc(50% - 864px); }
  .heroDotField { right: calc(50% - 622px); }
  .heroEdgePattern { right: calc(50% - 635px); }
  .heroCornerBricks { left: calc(50% - 616px); }
  .heroPlus { right: calc(50% - 584px); }
  .heroOutlineBrick { right: calc(50% - 114px); }
}

@media (max-width: 1100px) {
  .heroCopy { width: 100%; }
  .heroCopy > p { width: 54%; max-width: 560px; margin-inline: auto; }
}

@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;
    color: var(--teal-dark);
    cursor: pointer;
    font: 850 12px/1 monospace;
    letter-spacing: .1em;
    list-style: none;
    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;
  }
  .hero {
    height: auto;
    min-height: 0;
    padding: 58px var(--section-inline) 62px;
  }
  .heroInner { height: auto; min-height: 0; }
  .heroCopy { width: 100%; }
  .heroCopy h1 { max-width: 700px; }
  .heroCopy > p { max-width: 54%; }
  .heroVisual {
    width: clamp(128px, 16vw, 148px);
    left: -20px;
    right: auto;
    top: 25%;
    transform: translateY(-8%) rotate(-3.5deg);
  }
  .communityNetwork {
    aspect-ratio: auto;
    margin-top: 48px;
  }
  .networkLines,
  .networkRouteLayer { display: none; }
  .networkHub {
    width: min(260px, 80%);
    min-height: 136px;
    margin: 0 auto;
    position: relative;
    left: auto;
    top: auto;
    transform: rotate(-.5deg);
    animation: none;
  }
  .networkStations {
    margin-top: 38px;
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .networkStation,
  .networkStation:nth-child(n) {
    width: auto;
    min-height: 190px;
    position: relative;
    inset: auto;
  }
}

/* Wide mobile devices use a large CSS viewport despite their limited height. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: 0;
    padding-top: 38px;
    padding-bottom: 24px;
  }
  .heroInner { height: auto; min-height: 0; }
  .heroKicker {
    padding: 6px 9px;
    font-size: 8px;
  }
  .heroCopy h1 {
    max-width: 820px;
    margin-top: 22px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: .94;
  }
  .heroBenefitSwap {
    margin-top: .38em;
    font-size: .9em;
  }
  .heroCopy > p {
    width: 52%;
    max-width: 650px;
    margin-top: 29px;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.4;
  }
  .heroVisual {
    width: clamp(132px, 12.2vw, 172px);
    top: clamp(300px, 63%, 325px);
  }
  .heroPaperShape { transform: rotate(-8deg) scale(.84); transform-origin: left top; }
  .heroDotField { transform: rotate(3deg) scale(.86); transform-origin: right center; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 920px) {
  .heroVisual {
    width: clamp(132px, 18vw, 160px);
    top: clamp(300px, 63%, 325px);
  }
}

@media (max-width: 620px) {
  .communityPage {
    --section-inline: 18px;
    --section-block: 76px;
    --headline-size: clamp(30px, 8.2vw, 40px);
    --headline-leading: 1.01;
    --body-size: clamp(16px, 4.3vw, 18px);
    --body-leading: 1.55;
    --kicker-size: clamp(8px, 2.15vw, 10px);
  }
  .siteHeader { height: 66px; min-height: 66px; padding: 7px 16px; }
  .headerInner { min-height: 0; flex-wrap: nowrap; gap: 12px; }
  .logo { width: 152px; margin-right: auto; }
  .hero {
    min-height: 0;
    padding: 46px 18px 58px;
  }
  .heroGrid { background-size: 36px 36px; opacity: .15; }
  .heroPaperShape {
    width: 430px;
    height: 280px;
    left: -295px;
    top: -205px;
  }
  .heroDotField { width: 220px; height: 260px; right: -55px; top: 30%; background-size: 15px 15px; opacity: .24; }
  .heroEdgePattern { display: none; }
  .heroInner { min-height: 0; }
  .heroCopy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .heroKicker { margin-inline: auto; }
  .heroCopy h1 {
    max-width: 500px;
    margin-top: 25px;
    margin-inline: auto;
    font-size: clamp(28px, 7.7vw, 36px);
    line-height: .96;
  }
  .heroCopy h1 em { margin-top: .16em; margin-inline: auto; }
  .heroCopy > p {
    width: calc(100% - 74px);
    max-width: 310px;
    margin: 30px 0 0 auto;
    font-size: clamp(15px, 4.05vw, 17px);
    line-height: 1.48;
    text-align: left;
    text-wrap: pretty;
  }
  .heroCopy .heroCta {
    order: 4;
    margin-top: 30px;
  }
  .heroBenefits {
    order: 5;
    max-width: 100%;
    margin-top: 27px;
    gap: 8px 17px;
    font-size: clamp(14px, 3.8vw, 16px);
  }
  .heroVisual {
    width: clamp(94px, 27vw, 108px);
    left: -38px;
    right: auto;
    top: 19%;
    transform: translateY(-8%) rotate(-5deg);
  }
  .heroMist {
    width: 235px;
    left: 81%;
    right: auto;
    transform: scale(.72);
    transform-origin: left center;
  }
  .heroWordPixels i:not(:nth-child(3n + 1)),
  .heroMist i:not(:nth-child(3n + 1)) { display: none; }
  .heroWordPixels i { animation-name: mobileWordPixelDrift; }
  .heroCornerBricks { display: none; }
  .heroOutlineBrick { display: none; }
  .heroPlus { right: 4%; top: 42%; font-size: 38px; }
  .benefitsSection { padding: 78px 18px 94px; }
  .benefitsSection .sectionGrid { animation: none; }
  .benefitsHeader .sectionKicker { font-size: 9px; }
  .benefitsHeader .benefitsTitle {
    margin-top: 28px;
    font-size: clamp(30px, 8.2vw, 40px);
    line-height: 1;
  }
  .benefitsHeader .benefitsIntro {
    margin-top: 26px;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.58;
  }
  .communityNetwork {
    width: min(390px, 100%);
    height: 1240px;
    margin: 42px auto 0;
  }
  .communityNetwork::before { inset: 0 4px; }
  .mobileNetworkLines {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
    contain: paint;
  }
  .networkRouteLayer,
  .networkLines { display: none; }
  .mobileNetworkPath {
    fill: none;
    stroke: var(--teal);
    stroke-width: 6;
    stroke-dasharray: 20 9;
    vector-effect: non-scaling-stroke;
    opacity: .62;
    filter: none;
    animation: none;
  }
  .mobileNetworkRunner {
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    opacity: 0;
    color: var(--paper);
    background: var(--teal);
    border: 3px solid var(--ink);
    border-radius: 50%;
    box-shadow: 3px 4px 0 rgba(23, 38, 44, .24);
    font: 950 17px/1 var(--font-geist), Arial, sans-serif;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: left, top, opacity;
    pointer-events: none;
  }
  .mobileNetworkRunner::after {
    content: '';
    position: absolute;
    inset: -9px;
    border: 2px solid var(--teal-dark);
    border-radius: 50%;
    animation: mobileNetworkRunnerPulse 1.1s ease-out infinite;
  }
  .mobileQuestionRunner { animation: mobileQuestionRoute 32s linear infinite; }
  .mobileAnswerRunner {
    background: var(--teal-dark);
    animation: mobileAnswerRoute 32s linear infinite;
  }
  .networkSignalCore { filter: none; }
  .networkSignalPulse { animation: none; }
  .mobileNetworkSignal text { font-size: 17px; }
  .networkHub {
    width: 244px;
    min-height: 136px;
    padding: 16px 17px 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    box-shadow: 7px 8px 0 var(--teal);
    transform: translate(-50%, -50%) rotate(-.5deg);
    animation: none;
  }
  .networkHub small i { animation: none; }
  [data-mobile-motion][data-motion-active='false'] .heroWordFace,
  [data-mobile-motion][data-motion-active='false'] .heroWordPixels i,
  [data-mobile-motion][data-motion-active='false'] .heroBottleTrigger,
  [data-mobile-motion][data-motion-active='false'] .heroMist::before,
  [data-mobile-motion][data-motion-active='false'] .heroMist i,
  [data-mobile-motion][data-motion-active='false'] .sectionGrid,
  [data-mobile-motion][data-motion-active='false'] .mobileNetworkPath,
  [data-mobile-motion][data-motion-active='false'] .networkSignalPulse,
  [data-mobile-motion][data-motion-active='false'] .networkHub,
  [data-mobile-motion][data-motion-active='false'] .networkHub small i,
  [data-mobile-motion][data-motion-active='false'] .mobileNetworkRunner,
  [data-mobile-motion][data-motion-active='false'] .mobileNetworkRunner::after {
    animation-play-state: paused !important;
  }
  [data-mobile-motion][data-motion-active='false'] .networkSignals,
  [data-mobile-motion][data-motion-active='false'] .mobileNetworkSignal {
    visibility: hidden;
  }
  [data-mobile-motion][data-motion-active='false'] .mobileNetworkRunner { visibility: hidden; }
  .networkHub strong { font-size: 23px; }
  .networkStations {
    margin: 0;
    position: absolute;
    inset: 0;
    display: block;
  }
  .networkStation,
  .networkStation:nth-child(n) {
    width: min(70%, 252px);
    min-height: 194px;
    padding: 17px 18px 19px;
    position: absolute;
  }
  .networkStation:nth-child(1) { left: 0; right: auto; top: 30px; bottom: auto; transform: rotate(-1.2deg); }
  .networkStation:nth-child(2) { left: auto; right: 0; top: 278px; bottom: auto; transform: rotate(.7deg); }
  .networkStation:nth-child(3) { left: auto; right: 0; top: 778px; bottom: auto; transform: rotate(.8deg); }
  .networkStation:nth-child(4) { left: 0; right: auto; top: 1018px; bottom: auto; transform: rotate(.9deg); }
  .networkStation h3 { margin-top: 15px; font-size: 18px; }
  .networkStation p { margin-top: 10px; padding-top: 10px; font-size: 14px; line-height: 1.4; }
  .benefitsPlus { left: 10px; top: 29px; font-size: 38px; }
  .benefitsOutlineBrick { width: 58px; height: 34px; right: 18px; bottom: 32px; border-width: 2px; }
  .sectionKicker { margin-inline: auto; display: block; text-align: center; }
  .sectionHeadline { text-align: center; }
  .sectionBody { text-align: center; }
  .primaryCta { min-height: 54px; padding-inline: 22px; font-size: 13px; }
  .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; }
}

@supports (top: anchor(--hero-word-line center)) {
  @media (max-width: 620px) {
    .heroVisual {
      top: anchor(--hero-word-line center);
      transform: translateY(-8%) rotate(-5deg);
    }
  }
}

@keyframes mobileNetworkDash {
  to { stroke-dashoffset: -29; }
}

@keyframes mobileNetworkRunnerPulse {
  from { opacity: .8; transform: scale(.5); }
  to { opacity: 0; transform: scale(1.22); }
}

@keyframes mobileQuestionRoute {
  0% { left: 16.11%; top: 45%; opacity: 0; }
  .3% { opacity: 1; }
  1.1% { left: 7.22%; top: 45%; }
  11.25% { left: 7.22%; top: 18.06%; opacity: 1; }
  12% { opacity: 0; }
  24.9% { left: 83.89%; top: 47.26%; opacity: 0; }
  25.2% { opacity: 1; }
  27.5% { left: 92.78%; top: 47.26%; }
  36.25% { left: 92.78%; top: 38.06%; opacity: 1; }
  37% { opacity: 0; }
  49.9% { left: 83.89%; top: 52.42%; opacity: 0; }
  50.2% { opacity: 1; }
  52.25% { left: 92.78%; top: 52.42%; }
  61.25% { left: 92.78%; top: 62.74%; opacity: 1; }
  62% { opacity: 0; }
  74.9% { left: 16.11%; top: 52.42%; opacity: 0; }
  75.2% { opacity: 1; }
  75.9% { left: 7.22%; top: 52.42%; }
  86.25% { left: 7.22%; top: 82.1%; opacity: 1; }
  87%, 100% { opacity: 0; }
}

@keyframes mobileAnswerRoute {
  0%, 12.4% { left: 7.22%; top: 18.06%; opacity: 0; }
  12.7% { opacity: 1; }
  22.77% { left: 7.22%; top: 45%; }
  23.75% { left: 16.11%; top: 45%; opacity: 1; }
  24.5% { opacity: 0; }
  37.4% { left: 92.78%; top: 38.06%; opacity: 0; }
  37.7% { opacity: 1; }
  46.28% { left: 92.78%; top: 47.26%; }
  48.75% { left: 83.89%; top: 47.26%; opacity: 1; }
  49.5% { opacity: 0; }
  62.4% { left: 92.78%; top: 62.74%; opacity: 0; }
  62.7% { opacity: 1; }
  71.5% { left: 92.78%; top: 52.42%; }
  73.75% { left: 83.89%; top: 52.42%; opacity: 1; }
  74.5% { opacity: 0; }
  87.4% { left: 7.22%; top: 82.1%; opacity: 0; }
  87.7% { opacity: 1; }
  97.85% { left: 7.22%; top: 52.42%; }
  98.75% { left: 16.11%; top: 52.42%; opacity: 1; }
  99.5%, 100% { opacity: 0; }
}

@keyframes mobileWordPixelDrift {
  0%, 36.25% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  36.333% { opacity: 1; }
  39% {
    opacity: .82;
    transform: translate3d(calc(18vw + var(--pixel-fly-x)), var(--pixel-fly-y), 0) rotate(5deg) scale(.72);
  }
  43% {
    opacity: .36;
    transform: translate3d(calc(48vw + var(--pixel-fly-x)), calc(var(--pixel-fly-y) + 3px), 0) rotate(10deg) scale(.38);
  }
  46%, 100% {
    opacity: 0;
    transform: translate3d(calc(75vw + var(--pixel-fly-x)), calc(var(--pixel-fly-y) + 5px), 0) rotate(14deg) scale(.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .communityPage *,
  .communityPage *::before,
  .communityPage *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Campus scroll story */
.campusStory {
  height: 300svh;
  position: relative;
  color: var(--paper);
  background: var(--ink);
}

.campusStorySticky {
  height: calc(100svh - 82px);
  min-height: 650px;
  padding: clamp(76px, 6.6vh, 88px) var(--section-inline) clamp(24px, 3.2vh, 38px);
  position: sticky;
  z-index: 1;
  top: 82px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  isolation: isolate;
}

.campusStoryGrid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(191, 233, 228, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 233, 228, .095) 1px, transparent 1px);
  background-size: 54px 54px;
}

.campusStoryGrid::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, transparent 8%, rgba(23, 38, 44, .17) 55%, var(--ink) 96%),
    linear-gradient(90deg, rgba(23, 38, 44, .45), transparent 24%, transparent 76%, rgba(23, 38, 44, .45));
}

.campusStoryPlus {
  position: absolute;
  z-index: -1;
  right: 5.5%;
  top: 11%;
  color: var(--teal-light);
  font: 200 52px/1 Arial, sans-serif;
  opacity: .65;
  transform: rotate(7deg);
}

.campusStoryHeader {
  width: min(980px, 100%);
  margin-inline: auto;
  position: relative;
  z-index: 5;
  text-align: center;
}

.campusStoryHeader > span {
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--teal-light);
  border: 2px solid var(--paper);
  box-shadow: 5px 6px 0 var(--teal-dark);
  font: 850 10px/1 monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: rotate(-.8deg);
}

.campusStoryHeader h2 {
  max-width: 900px;
  margin: 25px auto 0;
  color: var(--paper);
  font-size: clamp(30px, 3.55vw, 58px);
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.campusStoryHeader h2 em {
  display: block;
  color: var(--teal);
  font-style: normal;
}

.campusStoryHeader p {
  max-width: 760px;
  margin: 27px auto 0;
  color: rgba(255, 253, 248, .7);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 480;
  line-height: 1.55;
}

.campusStoryStage {
  width: min(1180px, 100%);
  min-height: 340px;
  margin: clamp(18px, 2.6vh, 30px) auto clamp(12px, 1.8vh, 22px);
  position: relative;
  z-index: 2;
  overflow: clip;
  container-type: size;
}

  .campusScene {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(460px, 1.22fr) minmax(300px, .78fr);
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
}

.campusVisualDeckCircle {
  width: min(430px, 31cqw, 82cqh);
  aspect-ratio: 1;
  position: absolute;
  z-index: 0;
  left: 8.5%;
  top: 50%;
  border: 3px solid rgba(85, 185, 176, .34);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(85, 185, 176, .055),
    0 0 0 68px rgba(85, 185, 176, .028);
  transform: translateY(-50%);
  pointer-events: none;
}

.campusVisualDeckCircle::before {
  content: '';
  width: 32%;
  height: 3px;
  position: absolute;
  right: -9%;
  top: 29%;
  background: var(--teal);
  transform: rotate(-9deg);
}

.campusVisualDeckCircle::after {
  content: '＋';
  position: absolute;
  left: 7%;
  bottom: 8%;
  color: rgba(191, 233, 228, .7);
  font: 250 40px/1 Arial, sans-serif;
  transform: rotate(8deg);
}

.campusSceneCopy,
.campusSceneVisual {
  min-width: 0;
  will-change: opacity, transform;
}

.campusSceneCopy {
  grid-column: 2;
  grid-row: 1;
  padding-top: clamp(18px, 2.1vw, 30px);
  position: relative;
  z-index: 4;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .34s ease, transform .48s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .48s;
}

.campusSceneCopy::before {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, rgba(191, 233, 228, .82), rgba(191, 233, 228, .08));
}

.campusSceneCopy > span {
  color: var(--teal);
  font: 850 clamp(10px, .85vw, 12px)/1 monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.campusSceneCopy h3 {
  margin: clamp(15px, 1.8vw, 23px) 0 0;
  color: var(--paper);
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.052em;
}

.campusTitleLine {
  white-space: nowrap;
}

.campusSceneCopy ul {
  margin: clamp(22px, 2.3vw, 31px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(11px, 1.1vw, 15px);
  list-style: none;
}

.campusSceneCopy li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
  color: rgba(255, 253, 248, .82);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 520;
  line-height: 1.5;
}

.campusSceneCopy li svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
}

.campusSceneVisual {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 116%, 0) scale(.76);
  transform-origin: 50% 50%;
  transition:
    transform .72s cubic-bezier(.22, .8, .24, 1),
    opacity .45s ease,
    visibility 0s linear .72s;
  container-type: size;
}

.campusCarouselArrow { display: none; }

.campusSceneCurrent { z-index: 3; }
.campusSceneCurrent .campusSceneCopy {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .12s, .12s, 0s;
}
.campusSceneCurrent .campusSceneVisual {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}
.campusSceneNext { z-index: 2; }
.campusSceneNext .campusSceneVisual {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 116%, 0) scale(.72);
}
.campusScenePrevious .campusSceneVisual {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -112%, 0) scale(.88);
}
.campusSceneFuture .campusSceneVisual {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 116%, 0) scale(.72);
}

.campusVisualTag {
  padding: 8px 11px 7px;
  position: absolute;
  z-index: 8;
  color: var(--ink);
  background: var(--teal);
  border: 1px solid var(--paper);
  box-shadow: 4px 5px 0 var(--teal-dark);
  font: 850 8px/1 monospace;
  letter-spacing: .12em;
}

/* Laptop and the scrolling dashboard */
.campusLaptopWrap {
  width: min(650px, 100%, calc(100cqh * 1.51));
  height: auto;
  min-height: 0;
  aspect-ratio: 650 / 430;
  position: relative;
  display: grid;
  place-items: center;
}

.campusLaptopWrap .campusVisualTag { left: 3%; top: 16%; transform: rotate(-2deg); }

.campusLaptop {
  width: 91%;
  position: relative;
  z-index: 3;
  filter: drop-shadow(18px 22px 0 rgba(0, 0, 0, .2));
  transform: rotate(1.4deg);
}

.campusLaptopLid {
  padding: 10px 10px 12px;
  overflow: hidden;
  background: #0c171c;
  border: 2px solid var(--paper);
  border-radius: 14px 14px 7px 7px;
  box-shadow: 0 0 0 4px var(--teal-dark);
}

.campusLaptopBar {
  min-height: 27px;
  padding: 0 10px 8px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--paper);
  font-family: monospace;
}

.campusLaptopBar strong { font-size: 10px; letter-spacing: .04em; }
.campusLaptopBar span { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 7px; letter-spacing: .13em; }
.campusLaptopBar span i { width: 6px; height: 6px; display: block; background: var(--cta-neon); border-radius: 50%; box-shadow: 0 0 0 4px rgba(88, 231, 223, .13); }
.campusLaptopBar small { color: var(--teal); font-size: 8px; letter-spacing: .15em; }

.campusLaptopScreen {
  height: auto;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #faf7f1;
  border: 1px solid rgba(191, 233, 228, .6);
}

.campusDashboardImage {
  width: 112%;
  max-width: none;
  height: auto;
  margin-left: -6%;
  display: block;
  animation: campusDashboardTour 14s cubic-bezier(.6, 0, .35, 1) infinite;
  will-change: transform;
}

.campusLaptopBase {
  width: 106%;
  height: 20px;
  margin-left: -3%;
  position: relative;
  background: linear-gradient(180deg, #d9e4e3, #809496);
  border: 2px solid #0c171c;
  clip-path: polygon(4% 0, 96% 0, 100% 72%, 96% 100%, 4% 100%, 0 72%);
}

.campusLaptopBase i {
  width: 17%;
  height: 7px;
  position: absolute;
  left: 41.5%;
  top: 0;
  background: #637779;
  border-radius: 0 0 8px 8px;
}

.campusLaptopOutline {
  width: 76%;
  height: 78%;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 3%;
  border: 3px solid rgba(85, 185, 176, .45);
  transform: rotate(-4deg);
}

/* Community post and level-up overlap */
.campusCommunityVisual {
  width: min(610px, 100%, calc(100cqh * 1.419));
  height: auto;
  min-height: 0;
  aspect-ratio: 610 / 430;
  position: relative;
  container-type: inline-size;
}

.campusCommunityVisual .campusVisualTag { left: 1%; top: 4%; transform: rotate(-2deg); }

.campusPostCard {
  width: 73%;
  height: 64%;
  min-height: 0;
  padding: 4.4cqw;
  position: absolute;
  z-index: 3;
  left: 1%;
  top: 15%;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 2cqw 2.15cqw 0 var(--teal-dark);
  transform: rotate(-1.8deg);
}

.campusPostCard header { display: flex; align-items: center; gap: 1.8cqw; }
.campusPostCard header > b {
  width: 6.4cqw;
  height: 6.4cqw;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--teal-dark);
  border: max(1px, .33cqw) solid var(--ink);
  border-radius: 50%;
  box-shadow: .5cqw .5cqw 0 var(--teal);
  font: 900 1.8cqw/1 monospace;
}
.campusPostCard header > div { min-width: 0; flex: 1; }
.campusPostCard header > div > span { display: flex; align-items: center; gap: 1.3cqw; }
.campusPostCard header strong { font-size: 1.97cqw; }
.campusPostCard header i { padding: .65cqw 1cqw; color: var(--teal-dark); background: var(--teal-light); font-size: 1.31cqw; font-style: normal; font-weight: 850; }
.campusPostCard header small { margin-top: .5cqw; display: block; color: #677376; font-size: 1.48cqw; }
.campusPostCard header em { align-self: flex-start; font-size: 3.28cqw; font-style: normal; font-weight: 900; }
.campusPostCard h3 { margin: 3.1cqw 0 0; font-size: 3.77cqw; line-height: 1.03; letter-spacing: -.035em; }
.campusPostCard > p { margin: 1.8cqw 0 0; color: #425154; font-size: 1.97cqw; font-weight: 580; line-height: 1.4; }
.campusPostMeta { margin-top: auto; padding-top: 2.13cqw; display: flex; justify-content: space-between; color: #697578; border-top: 1px solid #d8dddd; font-size: 1.48cqw; font-weight: 700; }
.campusPostCard > footer { margin: 1.8cqw -1.3cqw -1.3cqw; padding: 1.64cqw 1.3cqw 0; display: flex; gap: 2.78cqw; border-top: 1px solid #d8dddd; color: var(--ink); font-size: 1.48cqw; font-weight: 750; }

.campusLevelCard {
  width: 38%;
  height: 42%;
  min-height: 0;
  padding: 2.8cqw 2.95cqw 2.45cqw;
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 10%;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink-2);
  border: 2px solid var(--paper);
  box-shadow: 1.64cqw 1.8cqw 0 var(--teal-dark);
  transform: rotate(2.2deg);
}

.campusLevelCard > span { position: relative; z-index: 2; color: var(--teal); font: 850 1.31cqw/1 monospace; letter-spacing: .13em; }
.campusLevelRow { margin-top: 2.25cqw; position: relative; z-index: 2; display: flex; align-items: center; gap: 1.85cqw; }
.campusLevelRow > b { width: 8.5cqw; height: 8.5cqw; flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); background: var(--teal); border: max(2px, .42cqw) solid var(--paper); border-radius: 50%; box-shadow: .55cqw .68cqw 0 var(--teal-dark); font-size: 4.9cqw; line-height: 1; animation: campusLevelPulse 5.4s ease-in-out infinite; }
.campusLevelRow small,
.campusLevelRow strong { display: block; }
.campusLevelRow small { color: var(--teal-light); font: 900 1.31cqw/1 monospace; letter-spacing: .14em; }
.campusLevelRow strong { margin-top: .8cqw; font-size: 3.2cqw; line-height: .9; letter-spacing: -.05em; }
.campusLevelProgress { height: 1.05cqw; margin-top: 2.15cqw; position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(255, 253, 248, .5); background: rgba(255, 253, 248, .12); }
.campusLevelProgress i { width: 86%; height: 100%; display: block; background: var(--teal); animation: campusLevelFill 5.4s ease-in-out infinite; }
.campusLevelCard footer { margin-top: 1.65cqw; position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1.3cqw; color: var(--teal-light); font-size: 1.25cqw; }
.campusLevelCard footer strong { color: var(--paper); }

.campusConfetti { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.campusConfetti i { width: 4px; height: 11px; position: absolute; display: block; background: var(--teal); opacity: 0; animation: campusConfetti 5.4s ease-out infinite; }
.campusConfetti i:nth-child(1) { left: 9%; top: 27%; --confetti-x: -18px; --confetti-r: 84deg; }
.campusConfetti i:nth-child(2) { left: 18%; top: 10%; --confetti-x: 12px; --confetti-r: -61deg; background: var(--paper); animation-delay: -.15s; }
.campusConfetti i:nth-child(3) { left: 31%; top: 18%; --confetti-x: -8px; --confetti-r: 118deg; animation-delay: -.3s; }
.campusConfetti i:nth-child(4) { left: 45%; top: 8%; --confetti-x: 22px; --confetti-r: -92deg; background: var(--teal-light); animation-delay: -.1s; }
.campusConfetti i:nth-child(5) { left: 58%; top: 21%; --confetti-x: -14px; --confetti-r: 72deg; animation-delay: -.25s; }
.campusConfetti i:nth-child(6) { left: 70%; top: 10%; --confetti-x: 8px; --confetti-r: -131deg; background: var(--paper); animation-delay: -.4s; }
.campusConfetti i:nth-child(7) { left: 82%; top: 24%; --confetti-x: -20px; --confetti-r: 99deg; background: var(--teal-light); animation-delay: -.2s; }
.campusConfetti i:nth-child(8) { left: 91%; top: 14%; --confetti-x: 12px; --confetti-r: -70deg; animation-delay: -.35s; }
.campusConfetti i:nth-child(9) { left: 29%; top: 43%; --confetti-x: -25px; --confetti-r: 123deg; background: var(--paper); animation-delay: -.55s; }
.campusConfetti i:nth-child(10) { left: 76%; top: 43%; --confetti-x: 20px; --confetti-r: -106deg; animation-delay: -.45s; }
.campusCommunityOutline { width: 61%; height: 61%; position: absolute; z-index: 1; right: 0; top: 3%; border: 3px solid rgba(85, 185, 176, .38); transform: rotate(5deg); }
.campusCommunityPlus { position: absolute; z-index: 2; right: 3%; top: 3%; color: var(--teal-light); font: 200 42px/1 Arial, sans-serif; transform: rotate(7deg); }

/* Mobile app and sequential push notifications */
.campusPhoneVisual {
  width: min(620px, 100%, calc(100cqh * 1.442));
  height: auto;
  min-height: 0;
  aspect-ratio: 620 / 430;
  position: relative;
  container-type: inline-size;
}

.campusPhoneVisual .campusVisualTag { left: 6%; top: 16%; transform: rotate(-2deg); }

.campusPhone {
  width: 30.32cqw;
  height: 57.26cqw;
  padding: 1.45cqw;
  position: absolute;
  z-index: 3;
  left: 18%;
  top: 50%;
  overflow: hidden;
  background: #071116;
  border: max(1px, .32cqw) solid var(--paper);
  border-radius: 4.84cqw;
  box-shadow: 1.61cqw 2.1cqw 0 var(--teal-dark);
  transform: translateY(-48%) rotate(-4deg);
}

.campusPhoneSpeaker { width: 11.13cqw; height: 2.74cqw; position: absolute; z-index: 5; left: 50%; top: 1.29cqw; background: #071116; border-radius: 0 0 1.94cqw 1.94cqw; transform: translateX(-50%); }
.campusPhoneScreen { height: 100%; padding: 3.06cqw 1.94cqw 2.1cqw; overflow: hidden; color: var(--ink); background: var(--paper); border-radius: 3.39cqw; }
.campusPhoneStatus { display: flex; align-items: center; justify-content: space-between; color: var(--ink); font: 800 1.29cqw/1 monospace; }
.campusPhoneStatus small { font-size: .97cqw; letter-spacing: .04em; }
.campusPhoneBrand { margin-top: 4.84cqw; display: flex; align-items: center; gap: 1.13cqw; }
.campusPhoneBrand > b { width: 5.48cqw; height: 5.48cqw; display: grid; place-items: center; color: var(--paper); background: var(--ink); box-shadow: .48cqw .48cqw 0 var(--teal); font: 900 1.61cqw/1 monospace; }
.campusPhoneBrand strong { font-size: 1.61cqw; line-height: .9; letter-spacing: -.03em; }
.campusPhoneBrand em { color: var(--teal-dark); font-style: normal; }
.campusPhoneWelcome { margin-top: 4.84cqw; padding: 2.58cqw 1.77cqw; background: var(--ink); box-shadow: .81cqw .97cqw 0 var(--teal); }
.campusPhoneWelcome small { color: var(--teal); font: 850 .97cqw/1 monospace; letter-spacing: .12em; }
.campusPhoneWelcome strong { margin-top: 1.29cqw; display: block; color: var(--paper); font-size: 2.26cqw; line-height: 1.02; letter-spacing: -.03em; }
.campusPhoneTiles { margin-top: 3.39cqw; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.29cqw; }
.campusPhoneTiles i {
  height: 8.87cqw;
  padding: 1.29cqw .97cqw .97cqw;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: var(--ink);
  background: var(--teal-light);
  border: 1px solid var(--ink);
  box-shadow: .48cqw .48cqw 0 rgba(45, 128, 121, .55);
  font-style: normal;
}
.campusPhoneTiles i:nth-child(3) { height: 6.77cqw; grid-column: 1 / -1; background: rgba(238, 232, 223, .8); }
.campusPhoneTiles svg { width: 2.74cqw; height: 2.74cqw; fill: none; stroke: currentColor; stroke-width: 1.7; }
.campusPhoneTiles span { font: 850 .97cqw/1 monospace; letter-spacing: .04em; text-transform: uppercase; }
.campusPhoneTiles i:nth-child(3) { grid-auto-flow: column; justify-content: center; gap: 7px; }
.campusPhoneTiles i:nth-child(3) svg { width: 2.42cqw; height: 2.42cqw; }

.campusNotifications { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.campusNotifications article {
  width: min(57.26cqw, 62%);
  min-height: 11.94cqw;
  padding: 1.94cqw 2.26cqw;
  position: absolute;
  left: 42%;
  top: calc(20% + var(--notification-index) * 25%);
  display: grid;
  grid-template-columns: 5.81cqw 1fr;
  gap: 1.77cqw;
  align-items: center;
  color: var(--ink);
  background: rgba(255, 253, 248, .97);
  border: max(1px, .32cqw) solid var(--ink);
  box-shadow: 1.29cqw 1.45cqw 0 var(--teal-dark);
  opacity: 0;
  transform: translate3d(35px, 10px, 0) rotate(.6deg);
  animation: campusNotification 10.5s ease-in-out infinite;
  animation-delay: calc(var(--notification-index) * 1.15s);
}

.campusNotifications article:nth-child(2) { left: 48%; transform: translate3d(35px, 10px, 0) rotate(-.7deg); }
.campusNotifications article:nth-child(3) { left: 39%; }
.campusNotifications article > span { width: 5.81cqw; height: 5.81cqw; display: grid; place-items: center; color: var(--paper); background: var(--ink); box-shadow: .48cqw .48cqw 0 var(--teal); font: 900 1.61cqw/1 monospace; }
.campusNotifications small,
.campusNotifications strong { display: block; }
.campusNotifications small { color: var(--teal-dark); font: 850 1.13cqw/1 monospace; letter-spacing: .12em; }
.campusNotifications strong { margin-top: .81cqw; font-size: 1.94cqw; line-height: 1.06; }
.campusNotifications p { margin: .81cqw 0 0; color: #526064; font-size: 1.45cqw; font-weight: 620; line-height: 1.25; }
.campusPhoneRing { width: 255px; height: 255px; position: absolute; z-index: 1; left: 5%; top: 50%; border: 3px solid rgba(85, 185, 176, .35); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 28px rgba(85, 185, 176, .06), 0 0 0 54px rgba(85, 185, 176, .035); }

.campusStoryFooter {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-bottom: clamp(24px, 3vh, 36px);
  position: relative;
  z-index: 8;
  display: grid;
  place-items: center;
}

.campusStory .campusStoryCta { min-height: 54px; color: var(--ink); background: var(--paper); box-shadow: 8px 9px 0 var(--cta-neon); }
.campusStoryCta:hover { box-shadow: 11px 12px 0 var(--cta-neon); }

@keyframes campusDashboardTour {
  0%, 11% { transform: translateY(0); }
  42%, 55% { transform: translateY(-31%); }
  86%, 100% { transform: translateY(-59%); }
}

@keyframes campusSceneRevealForward {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes campusSceneRevealBackward {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0); }
}

@keyframes campusWipeLineForward {
  0% { left: -44vw; transform: rotate(-3deg) translateY(5px); }
  100% { left: 104%; transform: rotate(-3deg) translateY(-5px); }
}

@keyframes campusWipeLineBackward {
  0% { right: -44vw; transform: rotate(3deg) translateY(-5px); }
  100% { right: 104%; transform: rotate(3deg) translateY(5px); }
}

@keyframes campusLevelPulse {
  0%, 16%, 100% { transform: scale(1); }
  22% { transform: scale(1.09) rotate(-3deg); }
  28% { transform: scale(1); }
}

@keyframes campusLevelFill {
  0%, 14% { width: 22%; }
  34%, 100% { width: 86%; }
}

@keyframes campusConfetti {
  0%, 16%, 100% { opacity: 0; transform: translate(0, 0) rotate(0); }
  19% { opacity: 1; }
  37% { opacity: 0; transform: translate(var(--confetti-x), 70px) rotate(var(--confetti-r)); }
}

@keyframes campusNotification {
  0%, 5% { opacity: 0; transform: translate3d(35px, 10px, 0) scale(.96); }
  12%, 72% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  82%, 100% { opacity: 0; transform: translate3d(14px, -8px, 0) scale(.98); }
}

@media (max-width: 1100px) {
  .campusScene { grid-template-columns: minmax(390px, 1.14fr) minmax(270px, .86fr); gap: 42px; }
  .campusLaptopScreen { height: auto; aspect-ratio: 16 / 9; }
  .campusPhone { left: 10%; }
  .campusNotifications article { width: 65%; left: 36%; }
  .campusNotifications article:nth-child(2) { left: 40%; }
  .campusNotifications article:nth-child(3) { left: 34%; }
}

@media (max-width: 900px) {
  .campusStory { height: 300svh; }
  .campusStorySticky {
    height: calc(100svh - 70px);
    min-height: 650px;
    padding: 42px 24px 24px;
    position: sticky;
    top: 70px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .campusStoryStage {
    min-height: 0;
    margin: 22px auto 14px;
    display: block;
  }
  .campusScene,
  .campusSceneReverse {
    position: absolute;
    inset: 0;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 36px;
  }
  .campusSceneCopy { width: 100%; margin: 0; text-align: left; }
  .campusSceneVisual { min-height: 0; }
  .campusSceneReverse .campusSceneCopy,
  .campusSceneReverse .campusSceneVisual { grid-row: 1; }
  .campusStoryFooter { margin-top: 0; padding-bottom: 0; }
  .campusLaptopScreen { height: auto; aspect-ratio: 16 / 9; }
  .campusPhoneVisual { min-height: 0; }
}

/* Very shallow desktop/tablet windows keep the interactive stage intact.
   The section intro has already been seen before the sticky sequence starts,
   so the pinned view prioritises the complete artwork and its copy. */
@media (min-width: 621px) and (max-height: 620px) {
  .campusStorySticky {
    height: calc(100svh - 82px);
    min-height: 0;
    padding: 16px var(--section-inline) 10px;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .campusStoryHeader { display: none; }
  .campusStoryStage {
    min-height: 0;
    margin: 0 auto 8px;
  }
  .campusSceneCopy { padding-top: 12px; }
  .campusSceneCopy h3 { margin-top: 11px; font-size: clamp(25px, 4vw, 34px); }
  .campusSceneCopy ul { margin-top: 15px; gap: 8px; }
  .campusSceneCopy li { grid-template-columns: 18px 1fr; gap: 9px; font-size: 13px; line-height: 1.35; }
  .campusStoryFooter { padding-bottom: 0; }
  .campusStory .campusStoryCta { min-height: 46px; padding-block: 11px; }
}

@media (min-width: 621px) and (max-width: 900px) and (max-height: 620px) {
  .campusStorySticky { height: calc(100svh - 70px); top: 70px; }
}

@media (max-width: 620px) {
  .campusStory {
    height: auto;
    padding-block: 84px 96px;
    overflow: hidden;
  }
  .campusStorySticky {
    --mobile-campus-visual: clamp(176px, 48vw, 194px);
    --mobile-campus-visual-large: clamp(225px, 64vw, 250px);
    height: auto;
    min-height: 0;
    padding: 0 18px;
    position: relative;
    top: auto;
    display: block;
    overflow: visible;
  }
  .campusStoryGrid { background-size: 38px 38px; }
  .campusStoryHeader > span { padding: 8px 11px; font-size: 9px; }
  .campusStoryHeader h2 {
    margin-top: 24px;
    font-size: clamp(30px, 8.2vw, 40px);
    line-height: 1;
  }
  .campusStoryHeader p {
    max-width: 440px;
    margin-top: 21px;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.5;
  }
  .campusStoryStage {
    min-height: 0;
    margin: 42px auto 0;
    overflow: visible;
    container-type: inline-size;
  }
  .campusScene,
  .campusSceneReverse {
    grid-template-columns: 1fr;
    grid-template-rows: var(--mobile-campus-visual) auto;
    align-items: stretch;
    gap: 34px;
  }
  .campusScene[data-campus-scene='0'],
  .campusScene[data-campus-scene='1'] {
    grid-template-rows: var(--mobile-campus-visual-large) auto;
  }
  .campusSceneCurrent {
    position: relative;
    inset: auto;
  }
  .campusSceneNext,
  .campusScenePrevious,
  .campusSceneFuture {
    position: absolute;
    inset: 0;
  }
  .campusSceneCopy,
  .campusSceneReverse .campusSceneCopy {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
    text-align: left;
  }
  .campusSceneVisual,
  .campusSceneReverse .campusSceneVisual {
    grid-column: 1;
    grid-row: 1;
    min-height: var(--mobile-campus-visual);
    touch-action: pan-y;
  }
  .campusCarouselArrow {
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 13;
    top: 50%;
    padding: 5px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--teal);
    color: var(--ink);
    transform: translateY(-50%);
    transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
  }
  .campusCarouselArrowPrevious { left: -2px; }
  .campusCarouselArrowNext { right: -2px; }
  .campusCarouselArrowNext::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--teal);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }
  .campusCarouselArrow:active {
    transform: translate(2px, calc(-50% + 2px));
    box-shadow: 1px 1px 0 var(--teal);
  }
  .campusCarouselArrow svg {
    width: 20px;
    height: 14px;
    overflow: visible;
  }
  .campusCarouselArrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }
  .campusCarouselArrowHidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .campusSceneCurrent .campusSceneVisual.campusSwipeHint > :first-child {
    animation: campusSwipeNudge 5.2s cubic-bezier(.22, .8, .24, 1) infinite;
  }
  .campusSwipeHint .campusCarouselArrowNext {
    animation: campusSwipeArrowNudge 5.2s cubic-bezier(.22, .8, .24, 1) infinite;
  }
  .campusSwipeHint .campusCarouselArrowNext::after {
    animation: campusSwipeHalo 5.2s ease-out infinite;
  }
  .campusSceneNext .campusSceneVisual,
  .campusSceneFuture .campusSceneVisual {
    transform: translate3d(112%, 0, 0) scale(.88);
  }
  .campusScenePrevious .campusSceneVisual {
    transform: translate3d(-112%, 0, 0) scale(.88);
  }
  .campusSceneCopy::before { display: none; }
  .campusSceneCopy > span {
    width: min(100%, 340px);
    margin-inline: auto;
    display: block;
    font-size: 9px;
  }
  .campusSceneCopy h3 {
    width: min(100%, 340px);
    margin: 10px auto 0;
    display: none;
    font-size: clamp(24px, 7.2vw, 31px);
    line-height: .98;
  }
  .campusTitleLine { white-space: normal; }
  .campusSceneCopy ul {
    width: min(100%, 340px);
    margin: 20px auto 0;
    gap: 11px;
    touch-action: pan-y;
  }
  .campusSceneCopy li {
    width: 100%;
    grid-template-columns: 17px minmax(0, auto);
    gap: 8px;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.38;
    text-align: left;
  }
  .campusSceneCopy li svg { width: 15px; height: 15px; }
  .campusVisualDeckCircle {
    width: min(54vw, 210px);
    left: 50%;
    top: calc(var(--mobile-campus-visual) / 2);
    display: block;
    transform: translate(-50%, -50%);
  }
  .campusVisualDeckCircle::before { right: -15%; }
  .campusVisualTag { display: none; }
  .campusLaptopWrap {
    scale: .92;
    transform-origin: center;
  }
  .campusCommunityVisual {
    scale: .96;
    transform-origin: center;
  }
  .campusPhoneVisual {
    scale: .82;
    transform-origin: center;
  }
  .campusLaptopWrap { min-height: 0; }
  .campusLaptopWrap .campusVisualTag { left: 2%; top: 7%; }
  .campusLaptop { width: 100%; }
  .campusLaptopLid { padding: 7px 7px 9px; border-radius: 10px 10px 5px 5px; }
  .campusLaptopBar { min-height: 23px; padding: 0 7px 6px; gap: 7px; }
  .campusLaptopBar span { font-size: 6px; }
  .campusLaptopScreen {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .campusCommunityVisual { width: 100%; }
  .campusCommunityVisual .campusVisualTag { top: 1%; }
  .campusPhoneVisual { min-height: 0; }
  .campusPhoneVisual .campusVisualTag { left: 4%; top: 8%; }
  .campusPhone { width: 130px; height: 260px; left: 8%; }
  .campusPhoneWelcome { margin-top: 22px; }
  .campusPhoneTiles { margin-top: 14px; }
  .campusNotifications article,
  .campusNotifications article:nth-child(2),
  .campusNotifications article:nth-child(3) { width: 65%; left: 34%; padding: 8px 9px; grid-template-columns: 27px 1fr; gap: 7px; }
  .campusNotifications article { min-height: 60px; top: calc(8% + var(--notification-index) * 30%); }
  .campusNotifications article > span { width: 29px; height: 29px; font-size: 8px; }
  .campusNotifications strong { font-size: 10px; }
  .campusNotifications p { font-size: 8px; }
  .campusStoryFooter { margin-top: 0; padding-top: 44px; padding-bottom: 0; }
  .campusStory .campusStoryCta {
    min-height: 58px;
    padding-inline: 27px;
    font-size: 13px;
  }
}

@keyframes campusSwipeNudge {
  0%, 18%, 50%, 78%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  34% { transform: translate3d(-9px, 0, 0) scale(1); }
  65% { transform: translate3d(-6px, 0, 0) scale(1); }
}

@keyframes campusSwipeArrowNudge {
  0%, 18%, 50%, 78%, 100% { transform: translate3d(0, -50%, 0); }
  34% { transform: translate3d(7px, -50%, 0); }
  65% { transform: translate3d(5px, -50%, 0); }
}

@keyframes campusSwipeHalo {
  0%, 18%, 48%, 100% { opacity: 0; transform: scale(.72); }
  30% { opacity: .85; transform: scale(1); }
  42% { opacity: 0; transform: scale(1.28); }
  58% { opacity: 0; transform: scale(.78); }
  67% { opacity: .72; transform: scale(1); }
  78% { opacity: 0; transform: scale(1.24); }
}

@media (prefers-reduced-motion: reduce) {
  .campusStory { height: auto; }
  .campusStorySticky { height: auto; min-height: 0; position: relative; top: auto; }
  .campusStoryStage { display: grid; gap: 90px; }
  .campusScene,
  .campusSceneReverse { position: relative; grid-template-columns: 1fr; gap: 42px; }
  .campusScene { visibility: visible !important; opacity: 1 !important; clip-path: none !important; animation: none !important; }
  .campusSceneWipe { display: none; }
  .campusSceneCopy,
  .campusSceneVisual {
    grid-column: 1;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .campusSceneCopy { grid-row: 1; }
  .campusSceneVisual { grid-row: 2; }
  .campusVisualDeckCircle { display: none; }
  .campusSceneReverse .campusSceneCopy,
  .campusSceneReverse .campusSceneVisual { grid-column: 1; }
  .campusSceneReverse .campusSceneCopy { grid-row: 1; }
  .campusSceneReverse .campusSceneVisual { grid-row: 2; }
}

/* Founder note */
.founderNote {
  padding: 76px 0 104px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}

.founderNoteGrid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(23, 38, 44, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .11) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

.founderNoteGrid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 0 22%, var(--paper) 82%);
  opacity: .54;
}

.founderQuoteTop,
.founderQuoteBottom {
  position: absolute;
  z-index: 1;
  color: var(--teal);
  font: 900 clamp(78px, 9cqi, 98px)/.65 Georgia, serif;
  opacity: .82;
  pointer-events: none;
  user-select: none;
}

.founderQuoteTop {
  right: 0;
  top: -8px;
}

.founderQuoteBottom {
  left: 0;
  bottom: -2px;
  transform: rotate(180deg);
}

.founderNoteTraceSlashes {
  position: absolute;
  z-index: 1;
  left: 33%;
  bottom: -73px;
  color: var(--teal-dark);
  font: 900 27px/1 monospace;
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

.founderNoteTrace {
  height: 3px;
  position: absolute;
  z-index: 1;
  left: 38%;
  right: 0;
  bottom: -65px;
  background: repeating-linear-gradient(90deg, var(--teal-light) 0 24px, transparent 24px 42px);
  pointer-events: none;
}

.founderNoteTrace 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: founderNoteTraceRun 7s ease-in-out infinite;
}

.founderNoteShell {
  width: min(1040px, calc(100% - 60px));
  margin-inline: auto;
  position: relative;
  z-index: 2;
  container-type: inline-size;
}

.founderNoteInner {
  width: min(78%, 820px);
  margin: 0 auto;
  padding: 0;
}

.founderNote h2 {
  max-width: 910px;
  margin: 0;
  color: var(--teal-dark);
  font-size: clamp(20px, 2.1cqi, 23px);
  font-weight: 780;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.founderNote h2 em {
  color: inherit;
  font-style: normal;
}

.founderNoteCopy {
  max-width: 930px;
  margin-top: 32px;
}

.founderNoteCopy p {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 430;
  line-height: 1.62;
  letter-spacing: -.01em;
}

.founderSignature {
  width: fit-content;
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.founderPortrait {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  position: relative;
  overflow: clip;
  display: block;
  background: #8f999c;
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--teal-dark);
}

.founderPortrait img {
  width: 260%;
  max-width: none;
  height: 260%;
  position: absolute;
  left: -95%;
  top: -16%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.founderSignature > span:last-child {
  display: grid;
  gap: 5px;
}

.founderSignature strong {
  font-size: clamp(18px, 1.9cqi, 20px);
  font-weight: 850;
  line-height: 1;
}

.founderSignature small {
  color: rgba(23, 38, 44, .72);
  font-size: clamp(13px, 1.35cqi, 14px);
  font-weight: 520;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .founderNoteShell { width: min(1040px, calc(100% - 48px)); }
}

@media (max-width: 620px) {
  .founderNote { padding: 62px 0 66px; }
  .founderNoteGrid { background-size: 38px 38px; }
  .founderNoteShell { width: min(calc(100% - 38px), 500px); }
  .founderNoteInner { width: calc(100% - 52px); }
  .founderNote h2 {
    max-width: 420px;
    font-size: clamp(23px, 6.4vw, 28px);
    line-height: 1.16;
  }
  .founderNoteCopy { margin-top: 26px; }
  .founderNoteMobileHidden { display: none; }
  .founderNoteCopy p { font-size: clamp(14px, 4vw, 17px); line-height: 1.58; }
  .founderSignature { margin-top: 29px; gap: 13px; }
  .founderPortrait { width: 64px; height: 64px; box-shadow: 3px 3px 0 var(--teal-dark); }
  .founderSignature strong { font-size: 17px; }
  .founderSignature small { font-size: 12px; }
  .founderQuoteTop,
  .founderQuoteBottom { font-size: 54px; opacity: .58; }
  .founderQuoteTop { top: -8px; right: -2px; }
  .founderQuoteBottom { left: -2px; bottom: -2px; }
  .founderNoteTraceSlashes,
  .founderNoteTrace { display: none; }
  .founderSignature small { max-width: 210px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .founderNoteTrace i {
    left: 50%;
    animation: none;
  }
}

/* Final community CTA */
.communityFinalCta {
  min-height: 580px;
  padding: clamp(86px, 7vw, 112px) var(--section-inline);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--teal-light);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.communityFinalGrid {
  position: absolute;
  z-index: -5;
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(23, 38, 44, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 38, 44, .16) 1px, transparent 1px);
  background-size: 58px 58px;
}

.communityFinalBuild {
  width: min(900px, 74vw);
  height: min(390px, 35vw);
  position: absolute;
  z-index: -3;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%) rotate(-1.8deg);
}

.communityFinalBuild i {
  width: 22%;
  height: 24%;
  position: absolute;
  display: block;
  border: 2px solid rgba(23, 38, 44, .22);
  background: rgba(255, 253, 248, .12);
  box-shadow: 7px 8px 0 rgba(45, 128, 121, .12);
  opacity: .7;
  animation: communityBrickBuild 8s cubic-bezier(.55, 0, .2, 1) infinite both;
}

.communityFinalBuild i:nth-child(1) { left: 0; bottom: 0; --brick-x: -26px; --brick-y: 48px; animation-delay: 0s; }
.communityFinalBuild i:nth-child(2) { left: 23%; bottom: 0; --brick-x: -8px; --brick-y: 54px; animation-delay: .12s; }
.communityFinalBuild i:nth-child(3) { left: 46%; bottom: 0; --brick-x: 12px; --brick-y: 52px; animation-delay: .24s; }
.communityFinalBuild i:nth-child(4) { left: 69%; bottom: 0; --brick-x: 28px; --brick-y: 58px; animation-delay: .36s; }
.communityFinalBuild i:nth-child(5) { left: 11.5%; bottom: 27%; --brick-x: -26px; --brick-y: 35px; animation-delay: .48s; }
.communityFinalBuild i:nth-child(6) { left: 34.5%; bottom: 27%; --brick-x: 5px; --brick-y: 44px; animation-delay: .6s; }
.communityFinalBuild i:nth-child(7) { left: 57.5%; bottom: 27%; --brick-x: 27px; --brick-y: 40px; animation-delay: .72s; }
.communityFinalBuild i:nth-child(8) { left: 0; bottom: 54%; --brick-x: -36px; --brick-y: 28px; animation-delay: .84s; }
.communityFinalBuild i:nth-child(9) { left: 23%; bottom: 54%; --brick-x: -8px; --brick-y: 34px; animation-delay: .96s; }
.communityFinalBuild i:nth-child(10) { left: 46%; bottom: 54%; --brick-x: 16px; --brick-y: 30px; animation-delay: 1.08s; }
.communityFinalBuild i:nth-child(11) { left: 69%; bottom: 54%; --brick-x: 34px; --brick-y: 38px; animation-delay: 1.2s; }

.communityFinalPlus {
  position: absolute;
  z-index: -1;
  right: 8%;
  top: 12%;
  color: var(--ink);
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 220;
  line-height: 1;
  opacity: .62;
  transform: rotate(10deg);
}

.communityFinalBrick {
  width: 108px;
  height: 60px;
  position: absolute;
  z-index: -1;
  left: 7%;
  bottom: 11%;
  border: 3px solid var(--ink);
  background: rgba(255, 253, 248, .18);
  box-shadow: 7px 8px 0 var(--teal-dark);
  transform: rotate(14deg);
  animation: communityFinalFloat 4.8s ease-in-out infinite alternate;
}

.communityFinalInner {
  width: min(1120px, 100%);
  position: relative;
  z-index: 2;
  text-align: center;
}

.communityFinalKicker {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 9px 12px;
  display: inline-block;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 7px 0 var(--teal-dark);
  font: 850 10px/1 monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.communityFinalInner h2 {
  max-width: 800px;
  margin: 36px auto 0;
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 780;
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.communityFinalInner h2 em {
  margin-top: .11em;
  display: block;
  color: var(--teal-dark);
  font-style: normal;
}

.communityFinalInner .communityFinalButton {
  margin-top: 46px;
  color: var(--paper);
  box-shadow: 8px 9px 0 var(--cta-neon);
}

@keyframes communityBrickBuild {
  0%, 7% { opacity: 0; transform: translate3d(var(--brick-x), var(--brick-y), 0) scale(.96); }
  20%, 82% { opacity: .7; transform: translate3d(0, 0, 0) scale(1); }
  96%, 100% { opacity: 0; transform: translate3d(0, -5px, 0) scale(1); }
}

@keyframes communityFinalFloat {
  from { transform: translateY(0) rotate(14deg); }
  to { transform: translateY(-10px) rotate(11deg); }
}

/* Community FAQ */
.communityFaq {
  padding: clamp(90px, 8vw, 126px) var(--section-inline) clamp(104px, 9vw, 142px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}

.communityFaqGrid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .32;
  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 45%, transparent 100%);
}

.communityFaqInner {
  width: min(1240px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: start;
  gap: clamp(56px, 7vw, 116px);
}

.communityFaqIntro {
  position: sticky;
  top: 126px;
}

.communityFaqIntro .sectionKicker {
  box-shadow: 6px 6px 0 var(--teal-light);
}

.communityFaqIntro h2 {
  max-width: 570px;
  margin: 28px 0 0;
  font-size: var(--headline-size);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.communityFaqIntro h2 em {
  display: block;
  color: var(--teal-dark);
  font-style: normal;
}

.communityFaqIntro > p {
  max-width: 480px;
  margin: 28px 0 0;
  color: #536267;
  font-size: var(--body-size);
  font-weight: 500;
  line-height: var(--body-leading);
}

.communityFaqSignal {
  width: 180px;
  height: 158px;
  margin: 48px 0 0 26px;
  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);
}

.communityFaqSignal::before {
  content: '';
  position: absolute;
  inset: 47px 0 auto;
  height: 1px;
  background: rgba(191, 233, 228, .42);
}

.communityFaqSignal small {
  font: 800 8px/1 monospace;
  letter-spacing: .13em;
}

.communityFaqSignal strong {
  position: absolute;
  right: 20px;
  bottom: -14px;
  color: var(--teal);
  font-size: 114px;
  font-weight: 440;
  line-height: 1;
}

.communityFaqSignal i {
  width: 12px;
  height: 12px;
  position: absolute;
  left: 18px;
  bottom: 18px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(85, 185, 176, .5);
  animation: communityFaqPulse 1.9s ease-in-out infinite;
}

.communityFaqList {
  width: min(670px, 100%);
  justify-self: end;
  padding-top: 26px;
  display: grid;
  gap: 14px;
}

.communityFaqItem {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 7px 0 var(--teal-light);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.communityFaqItem:nth-child(even) { transform: translateX(8px); }
.communityFaqItem:hover {
  z-index: 2;
  transform: translate(-3px, -3px);
  box-shadow: 9px 10px 0 var(--teal-dark);
}
.communityFaqItem:nth-child(even):hover { transform: translate(5px, -3px); }
.communityFaqItem[open] {
  background: var(--teal-light);
  box-shadow: 7px 8px 0 var(--teal-dark);
}

.communityFaqItem summary {
  min-height: 76px;
  padding: 16px 19px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  list-style: none;
}

.communityFaqItem summary::-webkit-details-marker { display: none; }

.communityFaqItem summary > span {
  color: var(--teal-dark);
  font: 850 10px/1 monospace;
  letter-spacing: .12em;
}

.communityFaqItem summary > strong {
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 780;
  line-height: 1.28;
  letter-spacing: -.02em;
}

.communityFaqItem summary > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  transition: transform .25s ease, color .25s ease, background .25s ease;
}

.communityFaqItem[open] summary > i {
  color: var(--paper);
  background: var(--teal-dark);
  transform: rotate(45deg);
}

.communityFaqAnswer { padding: 0 72px 23px; }

.communityFaqAnswer p {
  margin: 0;
  padding-top: 17px;
  color: #425156;
  border-top: 1px solid rgba(23, 38, 44, .3);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  line-height: 1.55;
}

@keyframes communityFaqPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(85, 185, 176, .5); }
  50% { box-shadow: 0 0 0 9px rgba(85, 185, 176, 0); }
}

@media (max-width: 900px) {
  .communityFinalCta { min-height: 590px; }
  .communityFinalInner h2 { max-width: 800px; }
  .communityFaqInner {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .communityFaqIntro {
    max-width: 700px;
    position: static;
  }
  .communityFaqList {
    width: min(800px, 100%);
    justify-self: start;
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .communityFinalCta {
    min-height: 520px;
    padding: 76px 20px 82px;
  }
  .communityFinalGrid { background-size: 38px 38px; }
  .communityFinalBuild { width: 118vw; height: 270px; top: 58%; }
  .communityFinalPlus { right: 4%; top: 9%; font-size: 48px; }
  .communityFinalBrick { width: 62px; height: 34px; left: 5%; bottom: 7%; }
  .communityFinalKicker { font-size: 9px; }
  .communityFinalInner h2 {
    max-width: 440px;
    margin-top: 30px;
    font-size: clamp(34px, 9.5vw, 46px);
    line-height: .94;
  }
  .communityFinalInner h2 em { margin-top: .16em; }
  .communityFinalInner .communityFinalButton {
    min-height: 54px;
    margin-top: 39px;
    padding-inline: 20px;
    font-size: 12px;
  }

  .communityFaq {
    padding: 76px 18px 92px;
  }
  .communityFaqGrid { background-size: 38px 38px; }
  .communityFaqInner { gap: 42px; }
  .communityFaqIntro { text-align: center; }
  .communityFaqIntro .sectionKicker { margin-inline: auto; }
  .communityFaqIntro h2 {
    max-width: 480px;
    margin: 25px auto 0;
    font-size: clamp(32px, 9.2vw, 44px);
  }
  .communityFaqIntro > p {
    max-width: 460px;
    margin: 25px auto 0;
    font-size: clamp(14px, 4vw, 16px);
  }
  .communityFaqSignal { display: none; }
  .communityFaqList { gap: 14px; }
  .communityFaqItem:nth-child(even) { transform: none; }
  .communityFaqItem:hover,
  .communityFaqItem:nth-child(even):hover { transform: translate(-2px, -2px); }
  .communityFaqItem summary {
    min-height: 76px;
    padding: 15px 14px;
    grid-template-columns: 30px 1fr 36px;
    gap: 10px;
  }
  .communityFaqItem summary > strong { font-size: 15px; }
  .communityFaqAnswer { padding: 0 18px 21px 54px; }
  .communityFaqAnswer p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .communityFaqSignal i { animation: none; }
  .communityFinalBuild i,
  .communityFinalBrick { animation: 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);
}
.footer .footerSlogan { margin-top: 10px; }

.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;
}
.footer .footerSocials a { color: var(--paper); }

.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;
}

.socialFill,
.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;
}
.footer .footerNav a { color: #c4ced0; }

.footer .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);
}

@media (max-width: 920px) {
  .footerInner { grid-template-columns: 1fr; gap: 38px; }
  .footerLead { max-width: 560px; }
  .footerNav { max-width: 760px; }
  .footerBrick { display: none; }
}

@media (max-width: 620px) {
  .footer { padding-inline: 18px; }
  .footerGrid { background-size: 58px 58px; }
  .footerInner { width: 100%; 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; }
}


/* 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}