:root {
  --cream: #f3ede3;
  --cream-light: #fbf8f2;
  --cream-deep: #d8cbbb;
  --green: #80d88a;
  --green-dark: #275f3d;
  --green-ink: #173724;
  --blue: #091925;
  --ink: #161815;
  --muted: #62665f;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --display: "Hanken Grotesk", "Nunito Sans", system-ui, sans-serif;
  --body: "Manrope", "Nunito Sans", system-ui, sans-serif;
  --mono: "Space Mono", monospace;
  --gutter: clamp(22px, 5.5vw, 84px);
  --announce-h: 40px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html {
  background: var(--cream-light);
  scroll-behavior: smooth;
}

body {
  background: var(--cream-light);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 450;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 540;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

[data-reveal]:not([data-revealed]) > *,
[data-reveal]:not([data-revealed]) > h2 {
  opacity: 1;
  transform: none;
}

.launch-strip {
  z-index: 120;
  min-height: 40px;
  padding: 9px 48px 9px 20px;
  color: rgba(255, 255, 255, 0.86);
  background: #0b0f0c;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
}

.launch-strip p {
  line-height: 1.45;
}

.launch-link {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
  font-weight: 720;
}

.launch-close {
  right: 8px;
}

.site-header {
  z-index: 110;
  height: 82px;
  color: #fff;
  background: transparent;
  border: 0;
  position: absolute;
  top: var(--announce-h) !important;
  -webkit-transform: none !important;
  transform: none !important;
  transition:
    opacity 180ms ease,
    transform 320ms var(--ease-out);
}

.site-header[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: none !important;
  transform: none !important;
}

.site-nav {
  width: calc(100% - (2 * var(--gutter)));
  max-width: 1500px;
  grid-template-columns: 1fr auto 1fr;
  gap: 34px;
}

.wordmark {
  justify-self: start;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 680;
  letter-spacing: -0.055em;
  line-height: 1;
  text-transform: lowercase;
}

.nav-links {
  gap: 34px;
  font-size: 13px;
  font-weight: 610;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.82);
  transition: color 180ms ease;
}

.nav-links a:hover {
  color: #fff;
}

.nav-cta,
.hero-cta,
.floating-adopt,
.glass-cta,
.specs-cta,
.faq-more,
.dialog-submit {
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  /* [David 2026-08-30] Het label stond links in de pil zodra min-width de knop
     breder maakte dan de tekst. Flex zonder justify-content = flex-start. */
  justify-content: center;
  text-align: center;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -0.02em;
  transition:
    transform 180ms var(--ease-out),
    background-color 180ms ease,
    color 180ms ease;
}

.nav-cta {
  min-height: 46px;
  color: var(--ink);
  background: rgba(251, 248, 242, 0.95);
  border: 0;
  padding: 0 22px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav-cta:hover {
  color: var(--ink);
  background: #fff;
  transform: translateY(-1px);
}

.menu-button {
  width: 48px;
  height: 48px;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 5px;
  padding: 0;
  transition: transform 180ms var(--ease-out);
}

.menu-button span,
.menu-button span + span {
  width: 25px;
  height: 2px;
  margin: 0;
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
  transition:
    opacity 160ms ease,
    transform 240ms var(--ease-out);
}

.menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}

.menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  background: rgba(8, 19, 15, 0.97);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.hero {
  height: 100svh;
  min-height: 640px;
  color: #fff;
  background: var(--blue);
}

.hero-video {
  object-position: 50% 48%;
}

.hero-shade {
  background: linear-gradient(
    180deg,
    rgba(4, 9, 7, 0.2),
    rgba(4, 9, 7, 0.02) 42%,
    rgba(4, 9, 7, 0.16)
  );
}

.hero-copy {
  width: min(900px, calc(100% - 44px));
  top: 43%;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.28);
}

.hero-copy > p {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.02em;
}

.hero-copy h1 {
  font-size: clamp(60px, 6.4vw, 94px);
  font-weight: 490;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.hero-cta {
  min-height: 56px;
  margin-top: 28px;
  /* [David 2026-08-30] 14px was te klein voor een pil van 56px; label vulde 51%. */
  padding: 0 34px;
  font-size: 17px;
  color: var(--ink);
  background: var(--cream-light);
  border: 0;
  text-shadow: none;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-cta:hover {
  color: var(--ink);
  background: #fff;
  transform: translateY(-2px);
}

.hero-controls,
.film-label button {
  display: none !important;
}

.floating-waitlist {
  top: 16px !important;
  right: 18px;
  min-height: 48px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.floating-plus,
.quick-nav {
  display: none !important;
}

.floating-adopt {
  min-height: 48px;
  padding: 0 21px;
  color: var(--ink);
  background: rgba(251, 248, 242, 0.96);
  border: 1px solid rgba(22, 24, 21, 0.08);
  box-shadow: 0 10px 30px rgba(8, 14, 10, 0.14);
}

.floating-adopt:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 34px rgba(8, 14, 10, 0.18);
}

.lifestyle-chapter {
  height: 100svh;
  min-height: 680px;
  background: #766e62;
}

.lifestyle-chapter::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 9, 7, 0.28),
    transparent 38%,
    rgba(8, 9, 7, 0.54)
  );
}

.lifestyle-portrait {
  object-position: 50% 52%;
}

.lifestyle-intro,
.lifestyle-features {
  z-index: 2;
}

.lifestyle-intro {
  top: 9.5%;
  width: min(920px, calc(100% - 44px));
}

.lifestyle-intro p {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 570;
}

.lifestyle-intro h2 {
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 500;
  line-height: 0.96;
}

.lifestyle-features {
  width: min(920px, calc(100% - 44px));
  bottom: 7.5%;
  gap: clamp(24px, 5vw, 72px);
}

.feature-icon {
  width: 29px;
  height: 29px;
}

.lifestyle-features h3 {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 580;
}

.lifestyle-features p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.45;
}

.film-section {
  background: var(--cream-light);
}

.film-section .scroll-film {
  height: 175svh !important;
}

.scroll-film-sticky {
  height: 100svh;
  min-height: 640px;
}

.film-video {
  object-position: center 46%;
}

.film-shade {
  background: linear-gradient(
    180deg,
    rgba(4, 9, 7, 0.3),
    rgba(4, 9, 7, 0.03) 45%,
    rgba(4, 9, 7, 0.26)
  );
}

.film-heading,
.film-heading[data-active="false"],
.film-heading[data-active="true"] {
  opacity: 1;
  top: 11%;
  transform: none;
}

.film-heading > p {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 560;
}

.film-heading h2,
.film-section--work .film-heading h2,
.film-section--learn .film-heading h2,
.film-section--night .film-heading h2 {
  font-size: clamp(56px, 6.3vw, 92px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.film-section--work .film-heading h2 {
  display: block;
}

.film-section--work .film-heading h2 span:nth-child(2),
.film-section--learn .film-heading h2 span:last-child,
.film-section--see .film-heading h2 span:last-child {
  margin-left: 0;
}

.film-section--night .film-heading {
  top: 11%;
  left: var(--gutter);
  right: var(--gutter);
  text-align: left;
}

.film-label {
  top: 30px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.68);
}

.film-disclaimer,
.night-log {
  bottom: 34px;
}

.night-log {
  max-width: 720px;
}

.night-log dd {
  font-size: 13px;
}

.privacy-band,
.campus-saas,
.specs,
.partners,
.pricing,
.faq {
  position: relative !important;
  z-index: auto !important;
  background: var(--cream-light);
}

.privacy-band {
  padding: clamp(76px, 8vw, 112px) 0;
}

.privacy-row {
  width: min(1180px, calc(100% - (2 * var(--gutter))));
  gap: clamp(46px, 7vw, 98px);
}

.privacy-row video {
  border-radius: 2px;
}

.privacy-copy > p,
.campus-saas > header > p,
.campus-row-copy > p,
.specs > header p,
.partners > header p,
.pricing > header p,
.faq > header p {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.privacy-copy h2,
.campus-saas > header h2,
.specs > header h2,
.partners > header h2,
.pricing > header h2,
.faq > header h2,
.site-end h2 {
  margin-top: 15px;
  font-size: clamp(48px, 5.2vw, 76px);
  font-weight: 520;
  letter-spacing: -0.05em;
  line-height: 0.97;
}

.privacy-copy > span,
.campus-saas > header > span,
.campus-row-copy > span,
.specs > header span,
.partners > header > span,
.pricing > header span {
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.52;
}

.privacy-points {
  gap: 12px;
  margin-top: 22px;
}

.privacy-points li {
  font-size: 14px;
  line-height: 1.55;
}

.campus-saas,
.specs,
.partners,
.pricing,
.faq {
  padding-top: clamp(84px, 8vw, 112px);
  padding-bottom: clamp(84px, 8vw, 112px);
}

.campus-saas > header,
.specs > header,
.partners > header,
.pricing > header,
.faq > header {
  width: min(800px, calc(100% - (2 * var(--gutter))));
}

.campus-row {
  width: min(1180px, calc(100% - (2 * var(--gutter))));
  gap: clamp(42px, 6vw, 82px);
  margin-top: 70px;
}

.campus-row > video {
  border-radius: 2px;
}

.campus-row-copy h3 {
  margin-top: 12px;
  font-size: clamp(36px, 3.7vw, 54px);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.campus-row--agents {
  margin-top: 64px;
}

.ticker-row::before,
.ticker-row::after {
  width: 42px;
}

.ticker-tile {
  width: 194px;
  padding: 16px 14px 14px;
  background: #fff;
  border: 1px solid rgba(22, 24, 21, 0.08);
  border-radius: 14px;
  box-shadow: none;
}

.tile-avatar {
  width: 78px;
  height: 78px;
}

.free-note,
.price-grid article,
.partner-cards article,
.faq-item {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.free-note {
  background: #f1ede5;
  border: 1px solid rgba(22, 24, 21, 0.08);
  border-radius: 16px;
}

.glass-cta,
.specs-cta,
.dialog-submit {
  min-height: 56px;
  padding: 0 26px;
  color: #fff;
  background: var(--green-dark);
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.glass-cta::after,
.glass-cta > span {
  display: none;
}

.glass-cta:hover,
.specs-cta:hover {
  color: #fff;
  background: #1f5033;
  transform: translateY(-1px);
  box-shadow: none;
}

.specs-grid {
  width: min(1120px, calc(100% - (2 * var(--gutter))));
  gap: 62px 36px;
  margin-top: 72px;
}

.specs-grid dt {
  margin-top: 17px;
  font-size: 20px;
  font-weight: 560;
}

.specs-grid dd b {
  margin-top: 8px;
}

.partners {
  overflow: hidden;
}

.partner-cards,
.partner-reel {
  width: min(1120px, calc(100% - (2 * var(--gutter))));
}

.partner-cards {
  gap: 14px;
  margin-top: 48px;
}

.partner-cards article {
  background: #f0ece4;
  border: 1px solid rgba(22, 24, 21, 0.07);
  border-radius: 18px;
  padding: 28px 30px;
}

.partner-reel {
  gap: 14px;
  margin-top: 14px;
}

.reel-card {
  border-radius: 2px;
  box-shadow: none;
}

.pricing {
  overflow: hidden;
}

.price-grid {
  width: min(920px, calc(100% - (2 * var(--gutter))));
  gap: 14px;
  margin-top: 48px;
}

.price-grid article,
.price-grid .price-featured {
  background: #f0ece4;
  border: 1px solid rgba(22, 24, 21, 0.08);
  border-radius: 18px;
  padding: 26px;
}

.price-grid h3 {
  font-size: 36px;
  font-weight: 540;
}

.price-media img {
  border-radius: 8px;
  box-shadow: none;
}

.price b {
  font-size: 42px;
  font-weight: 550;
}

.price-grid article > .glass-cta {
  justify-content: center;
  margin-top: 22px;
}

.faq > div {
  width: min(860px, calc(100% - (2 * var(--gutter))));
  margin-top: 46px;
}

.faq-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item[data-open="true"],
.faq-item:not([data-open="true"]):hover {
  background: transparent;
  box-shadow: none;
}

.faq-q {
  min-height: 74px;
  padding: 20px 0;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 610;
  letter-spacing: -0.025em;
}

.faq-panel p {
  margin: 0;
  padding: 0 48px 24px 0;
  color: var(--muted);
  border: 0;
  font-size: 15px;
  line-height: 1.58;
}

.faq-more {
  min-height: 48px;
  margin-top: 28px;
  padding: 0 20px;
  color: var(--green-dark);
  background: transparent;
  border: 1px solid rgba(39, 95, 61, 0.3);
}

.site-end {
  background: #0a0f0c;
}

.site-end-lead {
  color: rgba(255, 255, 255, 0.66);
}

@media (min-width: 901px) {
  .menu-button,
  .mobile-menu {
    display: none !important;
  }

  .nav-links,
  .nav-cta {
    display: flex;
  }
}

@media (max-width: 900px) {
  .site-nav {
    grid-template-columns: 1fr auto;
  }

  .menu-button {
    display: flex;
  }

  .mobile-menu {
    display: grid;
    position: fixed;
    inset: 0;
    width: 100%;
    padding: calc(var(--announce-h) + 108px) 24px 40px;
    transform: translateY(-10px);
  }

  .mobile-menu[data-open="true"] {
    transform: none;
  }

  .mobile-menu a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 18px 0;
    font-family: var(--display);
    font-size: clamp(28px, 7vw, 38px);
    font-weight: 470;
    letter-spacing: -0.04em;
  }

  html[data-menu-open="true"] {
    overflow: hidden;
  }

  .menu-button {
    z-index: 2;
  }
}

@media (max-width: 620px) {
  :root {
    --gutter: 20px;
    --announce-h: 40px;
  }

  .launch-strip {
    min-height: 40px;
    padding: 10px 42px 10px 14px;
    font-size: 11.5px;
  }

  .launch-strip p {
    white-space: nowrap;
  }

  .site-header {
    height: 70px;
  }

  .site-nav {
    width: calc(100% - 28px);
  }

  .wordmark {
    font-size: 25px;
  }

  .menu-button {
    width: 46px;
    height: 46px;
  }

  .menu-button span,
  .menu-button span + span {
    width: 24px;
    height: 2px;
  }

  .hero {
    height: 100svh;
    min-height: 660px;
  }

  .hero-video {
    object-position: 50% 50%;
  }

  .hero-shade {
    background: linear-gradient(
      180deg,
      rgba(4, 9, 7, 0.18),
      rgba(4, 9, 7, 0.02) 40%,
      rgba(4, 9, 7, 0.18)
    );
  }

  .hero-copy {
    width: calc(100% - 36px);
    top: 38%;
  }

  .hero-copy > p {
    margin-bottom: 11px;
    font-size: 14px;
  }

  .hero-copy h1 {
    font-size: clamp(50px, 14.2vw, 60px);
    line-height: 0.92;
  }

  .hero-cta {
    min-height: 56px;
    margin: 24px auto 0;
    padding: 0 30px;
    position: static;
    transform: none;
    font-size: 15px;
  }

  .hero-cta:active {
    transform: scale(0.97);
  }

  .floating-waitlist {
    top: 12px !important;
    right: 12px !important;
  }

  .floating-adopt {
    min-height: 46px;
    padding: 0 18px;
    font-size: 12px;
  }

  .lifestyle-chapter {
    height: 100svh;
    min-height: 680px;
  }

  .lifestyle-portrait {
    object-position: 50% 50%;
  }

  .lifestyle-intro {
    top: 10%;
  }

  .lifestyle-intro p {
    font-size: 13px;
  }

  .lifestyle-intro h2 {
    font-size: clamp(40px, 11.5vw, 50px);
    line-height: 0.98;
  }

  .lifestyle-features {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 13px;
    bottom: 24px;
    text-align: left;
  }

  .lifestyle-features > div {
    grid-template-columns: 24px 1fr;
    column-gap: 11px;
  }

  .feature-icon {
    width: 23px;
    height: 23px;
  }

  .lifestyle-features h3 {
    margin-top: 0;
    font-size: 16px;
  }

  .lifestyle-features p {
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.35;
  }

  .film-section .scroll-film {
    height: 145svh !important;
  }

  .scroll-film-sticky {
    height: 100svh;
    min-height: 660px;
  }

  .film-heading,
  .film-section--night .film-heading {
    top: 12%;
    width: auto !important;
    left: 20px;
    right: 20px;
    text-align: left;
  }

  .film-heading h2,
  .film-section--work .film-heading h2,
  .film-section--learn .film-heading h2,
  .film-section--night .film-heading h2 {
    font-size: clamp(39px, 11vw, 48px);
    line-height: 0.98;
  }

  .film-heading h2 span,
  .film-heading h2 span:last-child {
    display: block;
    margin: 0;
    text-align: left;
    justify-self: start;
  }

  .film-label {
    top: 24px;
    left: 20px;
    right: 20px;
  }

  .night-log {
    left: 20px;
    right: 20px;
    bottom: 24px;
    width: auto;
  }

  .night-log > div:nth-child(n + 3) {
    display: none;
  }

  .night-log > div {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
  }

  .night-log dd {
    font-size: 12px;
    line-height: 1.4;
  }

  .privacy-band {
    padding: 64px 0 70px;
  }

  .privacy-row {
    width: calc(100% - 40px);
    gap: 32px;
  }

  .privacy-row video {
    max-width: none;
    border-radius: 2px;
  }

  .privacy-copy > p,
  .campus-saas > header > p,
  .campus-row-copy > p,
  .specs > header p,
  .partners > header p,
  .pricing > header p,
  .faq > header p {
    font-size: 12px;
  }

  .privacy-copy h2,
  .campus-saas > header h2,
  .specs > header h2,
  .partners > header h2,
  .pricing > header h2,
  .faq > header h2,
  .site-end h2 {
    margin-top: 11px;
    font-size: clamp(38px, 10.8vw, 46px);
    line-height: 0.98;
  }

  .privacy-copy > span,
  .campus-saas > header > span,
  .campus-row-copy > span,
  .specs > header span,
  .partners > header > span,
  .pricing > header span {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.48;
  }

  .privacy-points {
    gap: 10px;
    margin-top: 18px;
  }

  .privacy-points li {
    font-size: 13px;
    line-height: 1.48;
  }

  .privacy-points li:nth-child(n + 3) {
    display: none;
  }

  .campus-saas,
  .specs,
  .partners,
  .pricing,
  .faq {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .campus-saas > header,
  .specs > header,
  .partners > header,
  .pricing > header,
  .faq > header {
    width: calc(100% - 40px);
  }

  .campus-row {
    width: calc(100% - 40px);
    gap: 28px;
    margin-top: 42px;
  }

  .campus-row-copy h3 {
    margin-top: 10px;
    font-size: 34px;
  }

  .campus-row-copy > .glass-cta,
  .campus-row-copy > a.glass-cta {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    margin-top: 24px;
    padding: 0 20px;
    font-size: 14px;
  }

  .campus-row--agents {
    margin-top: 48px;
  }

  .ticker-row:nth-child(3) {
    display: none;
  }

  .ticker-tile {
    width: 170px;
    padding: 12px;
  }

  .tile-avatar {
    width: 62px;
    height: 62px;
  }

  .tile-desc {
    display: none;
  }

  .free-note {
    margin-top: 18px;
    padding: 17px 18px;
  }

  .agent-notes-mini {
    display: none;
  }

  .specs-grid {
    width: calc(100% - 40px);
    gap: 34px 18px;
    margin-top: 48px;
  }

  .spec-icon {
    width: 28px;
    height: 28px;
  }

  .specs-grid dt {
    margin-top: 12px;
    font-size: 17px;
  }

  .specs-grid dd b {
    margin-top: 6px;
    font-size: 12px;
  }

  .specs-grid dd span {
    font-size: 10px;
  }

  .partners {
    padding-bottom: 68px;
  }

  .partner-cards {
    width: calc(100% - 40px);
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 36px;
  }

  .partner-cards article {
    min-width: 0;
    border-radius: 14px;
    padding: 18px 16px;
  }

  .partner-cards h3 {
    margin-top: 12px;
    font-size: 23px;
  }

  .partner-cards article p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.42;
  }

  .partner-cards b {
    margin-top: 14px;
    font-size: 9px;
  }

  .partner-reel {
    width: calc(100% - 40px);
    gap: 8px;
    margin-top: 10px;
  }

  .reel-card video {
    aspect-ratio: 4 / 5;
  }

  .reel-card figcaption {
    gap: 6px;
    top: 8px;
    left: 8px;
    right: 8px;
  }

  .reel-card figcaption span {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }

  .reel-card figcaption b {
    font-size: 9px;
    line-height: 1.2;
  }

  .price-grid {
    width: calc(100% + 20px);
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 330px);
    gap: 12px;
    margin: 36px -20px 0 0;
    padding-right: 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .price-grid::-webkit-scrollbar {
    display: none;
  }

  .price-grid article {
    scroll-snap-align: start;
    border-radius: 16px;
    padding: 22px;
  }

  .price-grid article:first-child {
    margin-left: 20px;
  }

  .price-grid h3 {
    margin-top: 18px;
    font-size: 32px;
  }

  .price-media {
    display: none;
  }

  .price-grid ul {
    margin-top: 14px;
  }

  .price-grid li {
    font-size: 13px;
  }

  .price b {
    font-size: 38px;
  }

  .pricing-note {
    margin-top: 20px;
    padding: 0 20px;
  }

  .faq {
    padding-bottom: 70px;
  }

  .faq > div {
    width: calc(100% - 40px);
    margin-top: 34px;
  }

  .faq-q {
    min-height: 68px;
    padding: 17px 0;
    font-size: 15px;
    line-height: 1.32;
  }

  .faq-panel p {
    padding: 0 34px 20px 0;
    font-size: 14px;
  }

  .faq-more {
    min-height: 48px;
    font-size: 14px;
  }
}

@media (min-width: 901px) {
  :root {
    --cream: #f5f3f2;
    --cream-light: #f5f3f2;
    --page-surface: #f5f3f2;
  }

  html,
  body,
  #root,
  .privacy-band,
  .campus-saas,
  .specs,
  .partners,
  .pricing,
  .faq {
    background: var(--page-surface);
  }

  .nav-cta {
    visibility: hidden;
  }

  .floating-waitlist,
  .floating-waitlist[data-visible="true"] {
    right: var(--gutter);
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition:
      top 360ms var(--ease-out),
      background-color 260ms ease,
      border-color 260ms ease,
      box-shadow 260ms ease;
  }

  .floating-waitlist:not([data-visible="true"]) {
    top: calc(var(--announce-h) + 18px) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .floating-waitlist[data-visible="true"] {
    top: 18px !important;
  }

  .floating-plus {
    overflow: hidden;
    transition:
      width 300ms var(--ease-out),
      opacity 180ms ease,
      transform 280ms var(--ease-out),
      background-color 180ms ease;
  }

  .floating-waitlist:not([data-visible="true"]) .floating-plus {
    width: 0;
    opacity: 0;
    pointer-events: none;
  }

  .floating-adopt,
  .floating-adopt:hover {
    color: var(--ink);
    background: #fff;
    border: 0;
    box-shadow: none;
  }

  .hero + .partner-rail {
    position: relative;
    z-index: 6;
  }

  .film-section .scroll-film {
    height: 220svh !important;
  }

  .privacy-band,
  .campus-saas,
  .specs {
    position: relative !important;
    z-index: 3 !important;
    margin-top: -100svh;
    padding-top: calc(100svh + 104px);
    border-radius: 38px 38px 0 0;
  }

  .privacy-band,
  .campus-saas {
    padding-bottom: calc(100svh + 104px);
  }

  .privacy-band + .film-section,
  .campus-saas + .film-section {
    z-index: 3;
    margin-top: -100svh;
  }

  .faq-panel p {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .faq-item,
  .partner-cards article,
  .price-grid article,
  .price-grid .price-featured,
  .free-note {
    background: #ede9e7;
  }
}

@media (min-width: 901px) {
  .nav-cta,
  .hero-cta,
  .floating-adopt,
  .nav-cta:hover,
  .hero-cta:hover,
  .floating-adopt:hover,
  .floating-waitlist[data-visible="true"] .floating-adopt {
    color: #161815 !important;
    background: #fff !important;
    border-color: transparent !important;
  }
}

[data-dthb] {
  left: 12px !important;
  bottom: 12px !important;
  max-width: 286px !important;
  padding: 12px 13px !important;
  border-color: rgba(22, 24, 21, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(8, 14, 10, 0.16) !important;
  font: 11px/1.45 var(--body) !important;
}

[data-dthb] p {
  margin-bottom: 8px !important;
}

[data-dthb] button {
  height: 32px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font: 650 11px/1 var(--body) !important;
}

.partner-rail {
  display: none;
}

@media (min-width: 901px) {
  :root {
    --cream: #f7f6f2;
    --cream-light: #fff;
    --cream-deep: #e4e2db;
    --display: "Nunito Sans", "Hanken Grotesk", system-ui, sans-serif;
    --body: "Nunito Sans", "Manrope", system-ui, sans-serif;
    --muted: #656a63;
  }

  html,
  body,
  #root {
    background: #fff;
  }

  body {
    font-family: var(--body);
    font-weight: 410;
  }

  h1,
  h2,
  h3 {
    font-family: var(--display);
    font-weight: 420 !important;
    letter-spacing: -0.038em;
    text-wrap: balance;
  }

  .hero-copy h1 {
    font-size: clamp(58px, 6vw, 90px);
    font-weight: 410 !important;
    letter-spacing: -0.045em;
  }

  .hero-cta,
  .nav-cta,
  .floating-adopt,
  .glass-cta,
  .specs-cta,
  .faq-more,
  .dialog-submit {
    font-weight: 680;
  }

  .floating-waitlist {
    top: 18px !important;
    right: 20px;
    min-height: 56px;
    gap: 5px !important;
    padding: 5px !important;
    color: #fff !important;
    background: rgba(8, 15, 12, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 38px rgba(6, 12, 9, 0.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
  }

  .floating-plus {
    display: grid !important;
    width: 45px;
    height: 45px;
    color: rgba(255, 255, 255, 0.88);
    font: 300 27px/1 var(--body);
  }

  .floating-plus:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .floating-adopt {
    min-height: 46px;
    padding: 0 25px;
    color: #fff;
    background: #2d7148;
    border: 0;
    box-shadow: none;
  }

  .floating-adopt:hover {
    color: #fff;
    background: #245f3b;
    box-shadow: none;
  }

  .quick-nav {
    display: grid !important;
    background: rgba(9, 20, 15, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
  }

  .lifestyle-chapter {
    height: max(100svh, 125vw);
    min-height: 900px;
  }

  .lifestyle-chapter::before {
    content: none !important;
  }

  .lifestyle-chapter::after {
    content: "";
    height: auto;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(8, 10, 8, 0.32) 0%,
      rgba(8, 10, 8, 0.08) 26%,
      transparent 52%,
      rgba(8, 10, 8, 0.12) 76%,
      rgba(8, 10, 8, 0.48) 100%
    );
  }

  .lifestyle-intro {
    top: 7.5%;
  }

  .lifestyle-intro h2 {
    max-width: 900px;
    margin-inline: auto;
    font-size: clamp(52px, 5.5vw, 82px);
    line-height: 0.98;
  }

  .lifestyle-features h3 {
    font-weight: 520 !important;
  }

  .partner-rail {
    position: relative;
    z-index: 4;
    min-height: 78px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 58px);
    padding: 0 var(--gutter);
    overflow: hidden;
    color: #fff;
    background: #0b120e;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .partner-rail-label {
    z-index: 2;
    color: rgba(255, 255, 255, 0.48);
    font: 600 10px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .partner-rail-window {
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 5%,
      #000 95%,
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 5%,
      #000 95%,
      transparent
    );
  }

  .partner-rail-track,
  .partner-rail-group {
    display: flex;
    align-items: center;
  }

  .partner-rail-track {
    width: max-content;
    animation: partner-rail 34s linear infinite;
  }

  .partner-rail-group {
    gap: clamp(40px, 5vw, 78px);
    padding-right: clamp(40px, 5vw, 78px);
  }

  .partner-rail-name {
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 560;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .partner-rail-name::after {
    content: "\00b7";
    margin-left: clamp(40px, 5vw, 78px);
    color: rgba(255, 255, 255, 0.26);
  }

  @keyframes partner-rail {
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }

  .film-section {
    position: relative;
    z-index: 3;
    margin-top: -48px;
    overflow: clip;
    background: #fff;
    border-radius: 34px 34px 0 0;
    isolation: isolate;
  }

  .partner-rail + .film-section {
    margin-top: -22px;
  }

  .film-section .scroll-film {
    height: 220svh !important;
  }

  .scroll-film-sticky {
    overflow: hidden;
    clip-path: inset(
      var(--scene-clip-y, 18px) var(--scene-clip-x, 24px) round
        var(--scene-radius, 32px)
    );
    transform: scale(var(--scene-scale, 0.986));
    transform-origin: 50% 50%;
    will-change: clip-path, transform;
  }

  .film-heading,
  .film-heading[data-active="false"],
  .film-heading[data-active="true"] {
    max-width: min(820px, calc(100vw - (2 * var(--gutter))));
    opacity: var(--scene-text-opacity, 0);
    transform: translate3d(0, var(--scene-text-y, 44px), 0);
    transition: none;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .film-heading h2,
  .film-section--work .film-heading h2,
  .film-section--learn .film-heading h2,
  .film-section--night .film-heading h2 {
    font-size: clamp(50px, 5.2vw, 78px);
    font-weight: 410 !important;
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  .film-section--learn .film-heading {
    top: auto;
    right: auto;
    bottom: clamp(72px, 9vh, 108px);
    left: var(--gutter);
    width: min(620px, 50vw);
    text-align: left;
  }

  .film-label,
  .film-disclaimer {
    opacity: var(--scene-support-opacity, 0);
    transition: none;
  }

  .night-log {
    opacity: var(--scene-support-opacity, 0);
    transform: translate3d(0, var(--scene-text-y, 44px), 0);
    transition: none;
  }

  .privacy-band,
  .campus-saas,
  .specs {
    z-index: 4 !important;
    margin-top: -58px;
    overflow: clip;
    background: #fff;
    border-radius: 34px 34px 0 0;
  }

  .privacy-band {
    padding: clamp(72px, 7vw, 98px) 0 clamp(82px, 8vw, 112px);
  }

  .privacy-row video,
  .campus-row > video {
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 22px 60px rgba(22, 31, 25, 0.09);
  }

  .privacy-copy h2,
  .campus-saas > header h2,
  .specs > header h2,
  .partners > header h2,
  .pricing > header h2,
  .faq > header h2,
  .site-end h2 {
    font-size: clamp(44px, 4.7vw, 68px);
    font-weight: 420 !important;
    line-height: 1;
  }

  .privacy-copy > span,
  .campus-saas > header > span,
  .campus-row-copy > span,
  .specs > header span,
  .partners > header > span,
  .pricing > header span {
    font-size: 15px;
    line-height: 1.55;
  }

  .campus-saas {
    padding-top: clamp(68px, 6vw, 88px);
    padding-bottom: clamp(80px, 7vw, 104px);
  }

  .campus-saas > header {
    width: min(700px, calc(100% - (2 * var(--gutter))));
  }

  .campus-saas > header > span {
    margin-top: 16px;
  }

  .campus-row {
    gap: clamp(38px, 5vw, 76px);
    margin-top: 46px;
  }

  .campus-row-copy h3 {
    max-width: 12ch;
    font-size: clamp(34px, 3.3vw, 48px);
    font-weight: 430 !important;
    line-height: 1.02;
  }

  .campus-row--agents {
    margin-top: 58px;
  }

  .partners,
  .pricing,
  .faq,
  .specs {
    background: #fff;
  }

  .partner-cards article,
  .price-grid article,
  .price-grid .price-featured,
  .free-note {
    background: #f5f6f2;
    border-color: rgba(22, 36, 27, 0.08);
  }

  .reel-card,
  .reel-card video {
    overflow: hidden;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .film-section .scroll-film {
    height: 100svh !important;
  }

  .partner-rail-track {
    animation: none !important;
    transform: none !important;
  }

  .scroll-film-sticky {
    clip-path: none !important;
    transform: none !important;
  }

  .film-heading,
  .film-label,
  .film-disclaimer,
  .night-log {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (min-width: 901px) {
  .wordmark {
    text-transform: none;
  }

  .floating-waitlist {
    top: calc(var(--announce-h) + 18px) !important;
    right: var(--gutter);
    transform: none;
    transition: opacity 200ms ease;
  }

  .swap-b {
    display: block;
  }

  .hero-copy h1,
  .lifestyle-intro h2 {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600 !important;
    letter-spacing: 0;
    line-height: 1.05;
  }

  .film-heading h2,
  .film-section--work .film-heading h2,
  .film-section--learn .film-heading h2,
  .film-section--night .film-heading h2 {
    font-family: "Nunito Sans", sans-serif;
    font-size: clamp(42px, 4vw, 72px);
    font-weight: 700 !important;
    letter-spacing: 0;
    line-height: 1.02;
  }

  .privacy-copy h2,
  .campus-saas > header h2,
  .specs > header h2,
  .partners > header h2,
  .pricing > header h2,
  .faq > header h2,
  .site-end h2,
  .campus-row-copy h3 {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
  }

  .film-section,
  .partner-rail + .film-section {
    margin-top: 0;
    overflow: visible;
    background: var(--blue);
    border-radius: 0;
  }

  .scroll-film-sticky {
    overflow: hidden;
    clip-path: none;
    transform: none;
    border: 0;
    border-radius: 0;
    outline: 0;
  }

  .film-heading,
  .film-heading[data-active="true"] {
    opacity: var(--scene-text-opacity, 1);
    transform: translate3d(0, var(--scene-text-y, 0), 0);
  }

  .film-heading[data-active="false"] {
    opacity: var(--scene-text-opacity, 0);
  }

  .film-label,
  .film-disclaimer,
  .night-log {
    opacity: var(--scene-support-opacity, 0.78);
  }

  .privacy-band,
  .campus-saas,
  .specs {
    margin-top: -112px;
    border-radius: 36px 36px 0 0;
  }

  .privacy-band {
    padding-top: 122px;
  }

  .campus-saas,
  .specs {
    padding-top: 120px;
  }

  .privacy-copy > span,
  .campus-saas > header > span,
  .campus-row-copy > span,
  .specs > header span,
  .partners > header > span,
  .pricing > header span,
  .privacy-points li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
  }

  .faq {
    padding-top: 160px;
    padding-bottom: 160px;
    background: #f5f3f2;
  }

  .faq > header h2 {
    font-size: 72px;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .faq > div {
    width: min(1000px, calc(100% - (2 * var(--gutter))));
    margin-top: 60px;
  }

  .faq-item {
    margin-bottom: 22px;
    overflow: hidden;
    background: #ede9e7;
    border: 0;
    border-radius: 30px;
    transition: background-color 300ms ease;
  }

  .faq-item:hover,
  .faq-item[data-open="true"] {
    background: #dcd7d4;
  }

  .faq-q {
    min-height: 60px;
    padding: 17.5px 40px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  .faq-panel p {
    padding: 12px 64px 24px 40px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
  }

  .faq-toggle {
    color: var(--green-dark);
  }

  .faq-more {
    min-height: 48px;
    padding-inline: 29px;
    font-size: 14px;
    font-weight: 600;
  }
}

@media (min-width: 901px) {
  .film-stack-story {
    position: relative;
    z-index: 10;
    width: 100%;
    background: var(--blue);
    isolation: isolate;
  }

  .film-stack-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    background: var(--blue);
  }

  .film-stack-panel {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--blue);
    border: 0 !important;
    border-radius: 0 !important;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
  }

  .film-stack-panel:first-child {
    transform: translate3d(0, 0, 0);
  }

  .film-stack-panel .scroll-film {
    width: 100%;
    height: 100% !important;
  }

  .film-stack-panel .scroll-film-sticky {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .film-stack-panel .film-heading,
  .film-stack-panel .film-heading[data-active="false"],
  .film-stack-panel .film-heading[data-active="true"] {
    opacity: var(--scene-text-opacity, 0);
    transform: translate3d(0, var(--scene-text-y, 42px), 0);
    transition: none;
    will-change: opacity, transform;
  }

  .film-stack-panel .film-label,
  .film-stack-panel .film-disclaimer,
  .film-stack-panel .night-log {
    opacity: var(--scene-support-opacity, 0);
    transition: none;
    will-change: opacity, transform;
  }

  .film-stack-story + .privacy-band {
    position: relative !important;
    z-index: 11 !important;
    margin-top: -100svh;
    padding-top: calc(100svh + 104px);
    padding-bottom: 104px;
    border-radius: 38px 38px 0 0;
  }

  .campus-saas,
  .specs {
    margin-top: 0;
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .nav-cta,
  .hero-cta,
  .floating-adopt,
  .nav-cta:hover,
  .hero-cta:hover,
  .floating-adopt:hover,
  .floating-waitlist[data-visible="true"] .floating-adopt {
    color: #161815 !important;
    background: #fff !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .film-stack-story {
    height: auto !important;
  }

  .film-stack-sticky {
    position: static;
    height: auto;
  }

  .film-stack-panel {
    position: relative !important;
    height: 100svh;
    transform: none !important;
  }
}

/* Story order v10: work video -> privacy card -> learning video. */
@media (min-width: 901px) {
  .film-stack-panel.privacy-band {
    display: flex;
    align-items: center;
    padding: clamp(72px, 7vw, 98px) 0 !important;
    background: var(--page-surface, #f5f3f2);
    border-radius: 0 !important;
  }

  .film-stack-panel.privacy-band .privacy-row {
    width: min(1180px, calc(100% - (2 * var(--gutter))));
    max-height: calc(100svh - 140px);
    margin: auto;
  }

  .film-stack-panel.privacy-band .privacy-row video {
    max-height: min(68svh, 680px);
    aspect-ratio: 1;
    object-fit: cover;
  }

  .film-stack-panel.privacy-band .privacy-copy,
  .film-stack-panel.privacy-band .privacy-copy[data-reveal],
  .film-stack-panel.privacy-band .privacy-copy[data-revealed="true"] {
    opacity: var(--scene-text-opacity, 0);
    transform: translate3d(0, var(--scene-text-y, 42px), 0);
    transition: none;
    will-change: opacity, transform;
  }

  .film-stack-story + .campus-saas {
    margin-top: 0;
    padding-top: 104px;
  }

  .campus-saas {
    padding-bottom: 104px;
  }

  .campus-saas + .film-section--night {
    margin-top: 0;
  }

  .specs {
    margin-top: 0;
  }

  .campus-row-copy > .glass-cta {
    margin-top: 36px;
  }
}

/* Viewport story v11: one black stage, no light gaps between panels. */
html,
body,
#root,
main {
  background: #000;
}

@media (min-width: 901px) {
  .film-stack-story,
  .film-stack-sticky,
  .film-stack-panel,
  .film-stack-panel .scroll-film-sticky {
    background: #000 !important;
  }

  .film-stack-panel {
    height: 100svh !important;
    min-height: 0 !important;
  }

  .film-stack-panel .scroll-film,
  .film-stack-panel .scroll-film-sticky,
  .film-stack-panel .scroll-film-sticky video {
    width: 100%;
    height: 100% !important;
  }

  .film-stack-panel .scroll-film-sticky video {
    display: block;
    object-fit: cover;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .film-stack-panel.privacy-band {
    height: 100svh !important;
    padding: clamp(42px, 5vw, 72px) 0 !important;
    color: #fff;
    background: #000 !important;
  }

  .film-stack-panel.privacy-band .privacy-row {
    height: 100%;
    max-height: none;
    gap: clamp(42px, 5vw, 78px);
    align-items: center;
  }

  .film-stack-panel.privacy-band .privacy-row video {
    width: min(46vw, 680px);
    height: min(72svh, 680px);
    max-height: none;
    border-radius: 32px;
  }

  .film-stack-panel.privacy-band .privacy-copy > p {
    color: #8fcaa8;
  }

  .film-stack-panel.privacy-band .privacy-copy h2 {
    margin-top: 12px;
    color: #fff;
    font-size: clamp(44px, 4.2vw, 72px);
    line-height: 0.98;
  }

  .film-stack-panel.privacy-band .privacy-copy > span {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.42;
  }

  .film-stack-panel.privacy-band .privacy-points {
    gap: 9px;
    margin-top: 18px;
  }

  .film-stack-panel.privacy-band .privacy-points li {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.42;
  }
}

/* Desktop story and hero v12. */
:root {
  --warm-story-surface: #f3f0ec;
}

@media (min-width: 901px) {
  .film-stack-panel:not(:first-child) {
    border-radius: 32px 32px 0 0 !important;
  }

  .film-stack-panel.privacy-band {
    color: #171816;
    background: var(--warm-story-surface) !important;
  }

  .film-stack-panel.privacy-band .privacy-copy,
  .film-stack-panel.privacy-band .privacy-copy[data-reveal],
  .film-stack-panel.privacy-band .privacy-copy[data-revealed="true"] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .film-stack-panel.privacy-band .privacy-copy > p {
    color: var(--green-dark);
  }

  .film-stack-panel.privacy-band .privacy-copy h2 {
    color: #171816;
  }

  .film-stack-panel.privacy-band .privacy-copy > span {
    color: #6d706a;
  }

  .film-stack-panel.privacy-band .privacy-points li {
    color: #2f312e;
  }

  .campus-saas {
    background: var(--warm-story-surface) !important;
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .wordmark,
  .nav-links,
  .nav-cta {
    display: none !important;
  }

  .menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: auto;
  }

  .hero-cta,
  .hero-cta:hover {
    min-width: 166px;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .hero-cta:hover {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  /* [David 2026-08-30] In de hero blijft de knop glas; zodra hij meescrollt naast
     de + wordt hij wit met zwarte tekst. */
  .floating-adopt,
  .floating-adopt:hover,
  .floating-waitlist[data-visible="true"] .floating-adopt {
    color: #161815 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none;
  }
}

/* [David 2026-08-30] Geen enkele sectie is zelf afgerond -- de stapel-secties liepen
   met 32-38px ronde bovenhoeken over de video heen. Kaarten, knoppen en video's
   binnen een sectie houden hun eigen ronding. De losse selectors staan er om de
   !important-regels hierboven met dezelfde specificiteit te verslaan. */
section,
section[class],
.film-stack-panel:not(:first-child),
.film-stack-story + .privacy-band,
.film-stack-story + .film-stack-panel,
.privacy-band,
.campus-saas,
.specs,
.film-section {
  border-radius: 0 !important;
}

/* [David 2026-08-30] BUG: na de privacy-sectie was de learn-video (premium CGI) nooit te zien.
   De overlay-JS geeft de drie stapelpanelen inline hun volgorde -- werk 1, privacy 2, learn 3.
   De regel `.privacy-band,.campus-saas,.specs{z-index:4!important}` hierboven overrulet die
   inline waarde (inline verliest van !important) en tilde privacy naar 4, dus BOVEN learn (3).
   Het learn-paneel schoof daardoor onder het ondoorzichtige privacy-paneel naar binnen.
   Hier zetten we de bedoelde volgorde terug, alleen voor de panelen in de stack. */
@media (min-width: 901px) {
  .film-stack-panel.film-section--work { z-index: 1 !important; }
  .film-stack-panel.privacy-band { z-index: 2 !important; }
  .film-stack-panel.film-section--learn { z-index: 3 !important; }
}

/* [David 2026-08-30] Eén warme achtergrond voor alle niet-video secties (footer uitgezonderd),
   de kleur van de bron-site: --cream-light #fbf7f0. Wit maakte campus/specs/pricing vlak. */
:root { --warm-story-surface: #fbf7f0; }
html, body, #root { background: #fbf7f0; }
.privacy-band,
.campus-saas,
.specs,
.partners,
.pricing,
.faq,
.film-stack-panel.privacy-band { background: #fbf7f0 !important; }

/* [David 2026-08-30] De "After dark"-tekst viel onder de sectie erna: .specs werd 112px
   omhoog getrokken over de nachtfilm heen. Alleen daar zetten we die trek eraf. */
.film-section--night + .specs { margin-top: 0 !important; }

/* [David 2026-08-30] Kleurverhouding: één licht grijsgroen vlak voor alles wat geen video is
   (footer uitgezonderd), kaarten een tint dieper en hover weer een tint dieper -- de FAQ-vragen
   kregen bij hover exact de achtergrondkleur en verdwenen daardoor. Zeer subtiel groen. */
:root {
  --hermy-surface: #f5f6f2;
  --hermy-card: #ebeee7;
  --hermy-card-hover: #e3e7dd;
  --warm-story-surface: #f5f6f2;
}
html, body, #root { background: var(--hermy-surface); }
.privacy-band,
.campus-saas,
.specs,
.partners,
.pricing,
.faq,
.film-stack-panel.privacy-band { background: var(--hermy-surface) !important; }

.faq-item,
.faq-q,
.partner-cards article,
.price-grid article,
.price-grid .price-featured,
.free-note { background: var(--hermy-card) !important; }

.faq-item:hover,
.faq-q:hover,
.faq-item:hover .faq-q { background: var(--hermy-card-hover) !important; }

/* [David 2026-08-30] "After dark" plakte 10px boven de onderrand van de sticky film en viel
   daardoor buiten beeld. Tekstblok omhoog, ruim vrij van de rand. */
.film-section--night .night-log,
.scroll-film .night-log {
  top: auto !important;
  bottom: clamp(76px, 12vh, 140px) !important;
}

/* [David 2026-08-31] Eén font op de hele site. Negen kleine labels stonden nog in Space Mono
   ("Made with", "Hermy at work", "Personal context", "Night log", spec- en story-labels).
   --mono wijst nu naar dezelfde stack als de body; de tracking blijft, het gewicht gaat iets
   omhoog omdat Nunito Sans op 10-11px lichter oogt dan een monospace. */
:root { --mono: "Nunito Sans", "Manrope", system-ui, sans-serif; }
.film-label,
.work-label,
.hero-controls,
.film-caption > span,
.work-caption > span,
.hardware-callouts span,
.spec-grid span,
.story li > span,
.partner-rail-label,
.night-log dt { font-weight: 600; }