/* ============================================================
   MESSY MIND STUDIO
   Website styles
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Core colours */
  --mms-black: #0D0D10;
  --mms-card: #15151A;

  --mms-pink: #FF3D9A;
  --mms-pink-hot: #FF2E93;
  --mms-pink-soft: #F05A9D;
  --mms-pink-muted: #DD3D9A;

  --mms-blush: #FBE6E6;
  --mms-cream: #F6F1EA;
  --mms-soft-white: #FFF2F2;
  --mms-plum: #2A2027;

  /* Opacity variants */
  --pink-80: rgba(255, 61, 154, 0.80);
  --pink-70: rgba(255, 61, 154, 0.70);
  --pink-60: rgba(255, 61, 154, 0.60);
  --pink-45: rgba(255, 61, 154, 0.45);
  --pink-35: rgba(255, 61, 154, 0.35);
  --pink-25: rgba(255, 61, 154, 0.25);
  --pink-10: rgba(255, 61, 154, 0.10);

  --cream-85: rgba(246, 241, 234, 0.85);
  --cream-70: rgba(246, 241, 234, 0.70);
  --cream-55: rgba(246, 241, 234, 0.55);

  --dark-80: rgba(13, 13, 16, 0.80);
  --dark-75: rgba(13, 13, 16, 0.75);

  /* Fonts */
  --font-display: "Anton", sans-serif;
  --font-body: "Poppins", sans-serif;
  --font-hand: "Caveat", cursive;

  /* Layout */
  --container: 1200px;
  --page-padding: 34px;

  --section-space: 86px;
}


/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--mms-black);
}

body {
  margin: 0;

  background: var(--mms-black);
  color: var(--mms-cream);

  font-family: var(--font-body);
  font-weight: 500;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.intro-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin-top: 0;
}

::selection {
  background: var(--mms-pink);
  color: var(--mms-black);
}


/* ============================================================
   SHARED LAYOUT
   ============================================================ */

.container {
  width: min(
    var(--container),
    calc(100% - (var(--page-padding) * 2))
  );

  margin-inline: auto;
}

.section-dark {
  background: var(--mms-black);
  color: var(--mms-cream);
}

.section-light {
  background: var(--mms-blush);
  color: var(--mms-black);
}

.eyebrow {
  margin-bottom: 14px;

  color: var(--mms-pink);

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.display-heading {
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;

  line-height: 0.96;
  letter-spacing: -0.015em;

  text-transform: uppercase;
}

.display-heading span {
  color: var(--mms-pink);
}

.dark-heading {
  color: var(--mms-black);
}

.section-lead {
  max-width: 720px;
  margin: 24px 0 0;

  color: var(--cream-85);

  font-size: 16px;
  line-height: 1.65;
}

.section-subtle {
  color: var(--cream-55);
  font-size: 14px;
  line-height: 1.65;
}

.handwritten-heading {
  margin: 0 0 20px;

  font-family: var(--font-hand);
  font-size: 37px;
  font-weight: 700;

  line-height: 1;
}

.handwritten-copy {
  margin: 0;

  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 700;

  line-height: 1.25;
}

.light-handwriting {
  color: rgba(251, 230, 230, 0.75);
}


/* ============================================================
   INTRO
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100dvh;

  overflow: hidden;

  background: var(--mms-black);

  opacity: 1;
  visibility: visible;

  transition:
    opacity 500ms ease-out,
    visibility 500ms ease-out;
}

.intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro.is-hidden {
  display: none;
}

.intro-stage {
  position: relative;

  display: grid;
  place-items: center;

  width: min(100%, 1440px);
  min-height: min(100dvh, 1024px);

  padding: 60px 32px;
}

.intro-card {
  position: relative;

  width: 420px;
  height: 320px;

  padding: 38px 48px;

  border-radius: 18px;

  background: var(--mms-card);

  box-shadow:
    5px 5px 4px rgba(255, 61, 154, 0.25);
}

.intro-copy {
  position: relative;

  z-index: 5;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.intro-brand {
  margin-top: 7px;

  color: var(--mms-pink);

  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.02em;
}

.intro-tagline {
  margin-top: 58px;

  color: var(--mms-cream);

  font-size: 15px;
  font-weight: 500;

  line-height: 1.55;
}

.intro-note {
  position: absolute;

  right: -22px;
  bottom: 30px;

  color: var(--mms-pink);

  font-family: var(--font-hand);
  font-size: 13px;
  font-weight: 700;

  transform: rotate(-42deg);
  transform-origin: center;
}

.intro-enter {
  position: absolute;

  left: 50%;
  bottom: 20px;

  padding: 8px 12px;

  color: var(--mms-pink);
  background: transparent;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.08em;

  cursor: pointer;

  transform: translateX(-50%);

  transition:
    color 160ms ease,
    transform 160ms ease;
}

.intro-enter:hover {
  color: var(--mms-cream);

  transform:
    translateX(-50%)
    translateX(3px);
}

.intro-raccoon {
  position: absolute;

  z-index: 3;

  width: 110.48%;
  max-width: none;

  left: 46.67%;
  top: -38.75%;

  pointer-events: none;
  user-select: none;
}


/* Intro steps start invisible.
   app.js will reveal them at Figma timings. */

.intro-step {
  opacity: 0;

  transform: translateY(7px);

  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

.intro-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   MAIN SITE
   ============================================================ */

.site {
  position: relative;

  min-height: 100vh;

  background: var(--mms-black);
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;

  z-index: 1000;

  width: 100%;

  min-height: 84px;

  padding-inline:
    max(
      var(--page-padding),
      calc((100vw - var(--container)) / 2)
    );

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  background: rgba(13, 13, 16, 0.94);

  border-bottom: 1px solid rgba(255, 61, 154, 0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-logo {
  flex: 0 0 auto;

  color: var(--mms-pink);

  font-family: var(--font-display);
  font-size: 17px;

  letter-spacing: 0.015em;

  transition: opacity 160ms ease;
}

.site-logo:hover {
  opacity: 0.8;
}

.desktop-nav {
  display: flex;
  align-items: center;

  gap: 30px;

  font-size: 13px;
}

.desktop-nav > a:not(.nav-cta),
.nav-more-button {
  color: var(--mms-cream);

  transition: color 160ms ease;
}

.desktop-nav > a:not(.nav-cta):hover,
.nav-more-button:hover {
  color: var(--mms-pink);
}

.nav-more {
  position: relative;
}

.nav-more-button {
  display: flex;
  align-items: center;

  gap: 7px;

  padding: 8px 0;

  background: transparent;

  cursor: pointer;
}

.nav-more-menu {
  position: absolute;

  top: calc(100% + 13px);
  right: 0;

  width: 205px;

  padding: 10px;

  display: grid;

  background: #15151A;

  border: 1px solid var(--pink-35);
  border-radius: 10px;

  box-shadow:
    7px 7px 0 rgba(255, 61, 154, 0.09);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-8px);

  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease;
}

.nav-more.is-open .nav-more-menu {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

.nav-more-menu a {
  padding: 10px 12px;

  color: var(--cream-85);

  border-radius: 6px;

  font-size: 12px;

  transition:
    background 160ms ease,
    color 160ms ease;
}

.nav-more-menu a:hover {
  color: var(--mms-pink);
  background: var(--pink-10);
}

.nav-cta {
  padding: 13px 17px;

  color: var(--mms-pink);

  border: 1px solid var(--mms-pink);
  border-radius: 8px;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.02em;

  transition:
    background 160ms ease,
    color 160ms ease;
}

.nav-cta:hover {
  color: var(--mms-black);
  background: var(--mms-pink);
}

.mobile-menu-button {
  display: none;

  padding: 8px;

  color: var(--mms-pink);
  background: transparent;

  font-size: 26px;

  cursor: pointer;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding:
    84px 0
    76px;
}

.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(500px, 1.05fr);

  align-items: center;

  gap: 74px;
}

.hero-copy h1 {
  margin: 0;

  color: var(--mms-blush);

  font-family: var(--font-display);
  font-size: clamp(56px, 5.8vw, 86px);

  font-weight: 400;

  line-height: 0.93;
  letter-spacing: -0.02em;

  text-transform: uppercase;
}

.hero-copy h1 span {
  position: relative;

  display: inline-block;

  color: var(--mms-pink);
}

.hero-copy h1 span::after {
  content: "";

  position: absolute;

  left: -2%;
  bottom: -11px;

  width: 108%;
  height: 15px;

  background:
    url("./assets/mms-line-handdrawn.svg")
    center / 100% 100%
    no-repeat;

  pointer-events: none;
}

.hero-lead {
  max-width: 510px;

  margin:
    30px 0
    18px;

  color: var(--mms-blush);

  font-size: 18px;
  line-height: 1.6;
}

.hero-body {
  max-width: 555px;

  margin-bottom: 30px;

  color: var(--cream-70);

  font-size: 14px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding: 0 22px;

  border-radius: 8px;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.02em;

  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--mms-black);
  background: var(--mms-pink);
}

.button-secondary {
  color: var(--mms-cream);

  border: 1px solid rgba(246, 241, 234, 0.8);
  background: transparent;
}


/* ============================================================
   OPERATOR DEMO
   ============================================================ */

.operator-demo {
  position: relative;

  min-height: 555px;

  padding:
    32px
    28px
    26px;

  background: #101014;

  border: 1px solid var(--pink-45);
  border-radius: 16px;

  box-shadow:
    9px 9px 0 rgba(255, 61, 154, 0.18);
}

.operator-demo-objective {
  position: relative;

  min-height: 95px;

  padding:
    11px
    120px
    12px
    0;
}

.handwritten-label {
  color: var(--mms-pink);

  font-family: var(--font-hand);
  font-size: 23px;
  font-weight: 700;

  transform: rotate(-8deg);

  transform-origin: left center;
}

.operator-demo-objective p {
  margin: 12px 0 0;

  color: var(--mms-blush);

  font-size: 13px;
  line-height: 1.5;
}

.operator-role-grid {
  position: relative;

  z-index: 2;

  display: grid;
  grid-template-columns: repeat(6, 1fr);

  gap: 10px;

  margin-top: 9px;
}

.operator-role {
  position: relative;

  min-height: 142px;

  padding: 15px 13px;

  background: rgba(21, 21, 26, 0.9);

  border: 1px solid var(--pink-35);
  border-radius: 9px;
}

.operator-role:nth-child(1),
.operator-role:nth-child(2),
.operator-role:nth-child(3) {
  grid-column: span 2;
}

.operator-role:nth-child(4) {
  grid-column: 2 / span 2;
}

.operator-role:nth-child(5) {
  grid-column: 4 / span 2;
}

.operator-role strong {
  display: block;

  margin-top: 7px;

  color: var(--mms-blush);

  font-size: 12px;
}

.operator-role small {
  display: block;

  margin-top: 2px;

  color: var(--mms-pink);

  font-size: 8px;
  font-weight: 600;
}

.operator-role p {
  margin: 8px 0 0;

  color: var(--cream-55);

  font-size: 9px;
  line-height: 1.45;
}

.role-icon {
  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

  color: var(--mms-pink);

  border: 1px solid var(--pink-60);
  border-radius: 4px;

  background: var(--pink-10);

  font-size: 13px;
}

.hero-raccoon {
  position: absolute;

  z-index: 4;

  width: 166px;

  right: -18px;
  top: 235px;

  pointer-events: none;
}

.operator-status {
  position: absolute;

  left: 28px;
  right: 28px;
  bottom: 22px;

  z-index: 5;
}

.operator-status > span {
  color: var(--cream-55);

  font-size: 8px;
  letter-spacing: 0.07em;
}

.operator-status-meta {
  display: flex;
  justify-content: space-between;

  margin: 5px 0 6px;

  font-size: 8px;
}

.operator-status-meta strong {
  color: var(--mms-pink);
}

.progress {
  width: 100%;
  height: 3px;

  overflow: hidden;

  background: rgba(246, 241, 234, 0.13);

  border-radius: 999px;
}

.progress-value {
  width: 73%;
  height: 100%;

  background: var(--mms-pink);
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

.how-it-works {
  padding:
    48px 0
    46px;
}

.how-grid {
  display: grid;

  grid-template-columns:
    1.35fr
    repeat(4, 1fr);

  gap: 26px;

  align-items: start;
}

.how-intro {
  padding-right: 20px;
}

.how-step {
  color: var(--mms-black);
}

.how-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  margin-bottom: 17px;
}

.how-icon img {
  width: 52px;
  height: 52px;

  object-fit: contain;
}

.icon-shell {
  border: 1px solid var(--mms-pink);
  border-radius: 50%;

  background: var(--pink-25);
}

.icon-shell img {
  width: 31px;
  height: 31px;
}

.how-step h3 {
  margin:
    0 0
    10px;

  font-size: 11px;
  font-weight: 600;
}

.how-step p {
  margin: 0;

  color: rgba(13, 13, 16, 0.68);

  font-size: 11px;
  line-height: 1.65;
}


/* ============================================================
   COMPARISON
   ============================================================ */

.comparison {
  padding:
    72px 0
    78px;
}

.comparison-grid {
  display: grid;

  grid-template-columns:
    1.1fr
    0.85fr
    1fr;

  gap: 65px;

  align-items: start;
}

.comparison-column {
  padding-top: 12px;

  text-align: center;
}

.comparison-column h3 {
  margin:
    0 0
    28px;

  color: var(--mms-blush);

  font-size: 21px;
  font-weight: 600;

  line-height: 1.3;
}

.comparison-column p {
  max-width: 310px;

  margin-inline: auto;

  color: var(--cream-55);

  font-size: 12px;
  line-height: 1.7;
}


/* ============================================================
   BUILDING IN PUBLIC
   ============================================================ */

.build-public {
  padding:
    54px 0
    56px;
}

.build-grid {
  display: grid;

  grid-template-columns:
    0.78fr
    1.22fr;

  gap: 64px;
}

.build-lead {
  margin:
    22px 0
    12px;

  color: var(--mms-black);

  font-size: 16px;
  font-weight: 600;
}

.build-public p {
  color: rgba(13, 13, 16, 0.68);

  font-size: 12px;
  line-height: 1.7;
}

.text-link {
  display: inline-block;

  margin-top: 10px;

  color: var(--mms-pink);

  font-size: 11px;
  font-weight: 600;

  transition: transform 160ms ease;
}

.text-link:hover {
  transform: translateX(4px);
}

.timeline {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

  padding-top: 10px;
}

.timeline::before {
  content: "";

  position: absolute;

  top: 28px;
  left: 0;
  right: 0;

  height: 1px;

  background: var(--pink-35);
}

.timeline-item {
  position: relative;
  z-index: 2;

  padding-top: 0;
}

.timeline-item::before {
  content: "";

  display: block;

  width: 9px;
  height: 9px;

  margin:
    12px 0
    15px;

  background: var(--mms-pink);

  border-radius: 50%;
}

.timeline-item span {
  color: var(--mms-pink);

  font-size: 10px;
}

.timeline-item strong {
  display: block;

  margin-bottom: 8px;

  color: var(--mms-black);

  font-size: 11px;
}

.timeline-item p {
  max-width: 190px;

  margin: 0;

  font-size: 9px;
  line-height: 1.55;
}

.pilot-block {
  position: relative;

  max-width: 490px;

  margin:
    31px 0
    0
    90px;
}

.pilot-block h3 {
  margin: 0 0 9px;

  color: var(--mms-pink);

  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;

  line-height: 1.1;
}

.pilot-block p {
  max-width: 400px;
}


/* ============================================================
   DIFFERENT OPERATORS
   ============================================================ */

.operators {
  padding:
    64px 0
    74px;
}

.operators .section-subtle {
  margin-top: 9px;
}

.operator-types {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 54px;

  margin-top: 48px;
}

.operator-types article {
  min-width: 0;
}

.number {
  display: block;

  margin-bottom: 18px;

  color: var(--mms-pink);

  font-size: 10px;
  font-weight: 600;
}

.operator-types h3 {
  margin: 0;

  color: var(--mms-blush);

  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;

  line-height: 1.05;
}

.flow-label {
  margin:
    13px 0
    15px;

  color: var(--mms-pink);

  font-size: 9px;
  font-weight: 600;

  line-height: 1.6;
}

.operator-types p {
  margin: 0;

  color: var(--cream-55);

  font-size: 12px;
  line-height: 1.7;
}


/* ============================================================
   ORIGIN STORY
   ============================================================ */

.origin {
  padding:
    0 0
    60px;

  background: var(--mms-black);
}

.origin-card {
  position: relative;

  min-height: 290px;

  padding:
    44px
    44px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    260px;

  gap: 50px;

  overflow: hidden;

  color: var(--mms-black);
  background: var(--mms-blush);
}

.origin-copy {
  position: relative;
  z-index: 2;
}

.origin-copy .display-heading {
  font-size: clamp(39px, 4.4vw, 59px);
}

.origin-copy p {
  max-width: 780px;

  margin:
    17px 0
    0;

  color: rgba(13, 13, 16, 0.72);

  font-size: 13px;
  line-height: 1.55;
}

.origin-action {
  position: relative;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.origin-button {
  position: relative;

  z-index: 4;

  display: grid;
  place-items: center;

  width: 210px;
  height: 115px;

  color: var(--mms-pink);

  border: 1px solid var(--mms-pink);
  border-radius: 9px;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.2;
  text-align: center;

  transition:
    background 160ms ease,
    color 160ms ease;
}

.origin-button:hover {
  color: var(--mms-black);
  background: var(--mms-pink);
}

.origin-arrow {
  position: absolute;

  width: 135px;

  left: -77px;
  bottom: -15px;

  pointer-events: none;
}


/* ============================================================
   PLATFORM INTEGRATIONS
   ============================================================ */

.integrations {
  padding:
    70px 0
    76px;

  border-top: 1px solid var(--pink-10);
}

.integrations-grid {
  display: grid;

  grid-template-columns:
    1.05fr
    0.95fr;

  gap: 90px;

  align-items: start;
}

.integrations .display-heading {
  font-size: clamp(39px, 4.3vw, 61px);
}

.integrations-grid > div:last-child {
  padding-top: 18px;
}

.integrations-grid p {
  color: var(--cream-70);

  font-size: 13px;
  line-height: 1.75;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  padding:
    48px 0
    25px;

  background: #09090B;

  border-top: 1px solid var(--pink-25);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.4fr
    0.8fr
    0.8fr;

  gap: 70px;

  padding-bottom: 38px;
}

.footer-logo {
  color: var(--mms-pink);

  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
}

.footer-grid p {
  max-width: 340px;

  margin-top: 12px;

  color: var(--cream-55);

  font-size: 12px;
  line-height: 1.7;
}

.footer-grid > div:nth-child(2),
.footer-grid > div:nth-child(3) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 8px;
}

.footer-grid > div:nth-child(2) > strong,
.footer-grid > div:nth-child(3) > strong {
  margin-bottom: 6px;

  color: var(--mms-pink);

  font-size: 10px;
  letter-spacing: 0.08em;
}

.footer-grid a {
  color: var(--cream-70);

  font-size: 11px;

  transition: color 160ms ease;
}

.footer-grid a:hover {
  color: var(--mms-pink);
}

.footer-bottom {
  padding-top: 20px;

  display: flex;
  justify-content: space-between;

  gap: 20px;

  border-top: 1px solid rgba(246, 241, 234, 0.08);

  color: var(--cream-55);

  font-size: 10px;
}

.footer-tagline {
  color: var(--pink-80);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 1050px) {

  :root {
    --page-padding: 26px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .hero-copy {
    max-width: 760px;
  }

  .operator-demo {
    width: min(100%, 660px);
    margin-inline: auto;
  }

  .how-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-intro {
    grid-column: 1 / -1;
    padding-bottom: 10px;
  }

  .comparison-grid {
    grid-template-columns: 1fr 1fr;
  }

  .comparison-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .build-grid {
    grid-template-columns: 1fr;
  }

  .operator-types {
    gap: 30px;
  }

  .origin-card {
    grid-template-columns: 1fr 220px;
  }

  .integrations-grid {
    gap: 55px;
  }
}


@media (max-width: 820px) {

  :root {
    --page-padding: 22px;
  }

  .site-header {
    min-height: 72px;
  }

  .mobile-menu-button {
    display: block;
  }

  .desktop-nav {
    position: absolute;

    top: 72px;
    left: 0;
    right: 0;

    display: none;
    flex-direction: column;
    align-items: stretch;

    gap: 4px;

    padding:
      18px
      var(--page-padding)
      25px;

    background: rgba(13, 13, 16, 0.98);

    border-bottom: 1px solid var(--pink-25);
  }

  .desktop-nav.is-open {
    display: flex;
  }

  .desktop-nav > a,
  .nav-more-button {
    width: 100%;

    padding: 12px 0;
  }

  .nav-more-button {
    justify-content: space-between;
  }

  .nav-more-menu {
    position: static;

    width: 100%;

    margin-top: 5px;

    box-shadow: none;

    display: none;

    opacity: 1;
    visibility: visible;

    transform: none;
  }

  .nav-more.is-open .nav-more-menu {
    display: grid;
  }

  .nav-cta {
    margin-top: 8px;

    text-align: center;
  }

  .hero {
    padding-top: 65px;
  }

  .hero-copy h1 {
    font-size: clamp(52px, 12vw, 76px);
  }

  .operator-role-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .operator-role:nth-child(n) {
    grid-column: auto;
  }

  .operator-role:last-child {
    grid-column: 1 / -1;
  }

  .operator-demo {
    min-height: 715px;
  }

  .hero-raccoon {
    width: 155px;

    right: -9px;
    top: 420px;
  }

  .how-grid {
    grid-template-columns: 1fr 1fr;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .comparison-grid > div:first-child {
    grid-column: auto;
  }

  .comparison-column {
    text-align: left;
  }

  .comparison-column p {
    margin-inline: 0;
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    display: none;
  }

  .timeline-item::before {
    margin-bottom: 9px;
  }

  .timeline-item {
    padding-bottom: 18px;
  }

  .pilot-block {
    margin-left: 0;
  }

  .operator-types {
    grid-template-columns: 1fr;
  }

  .origin-card {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .origin-action {
    justify-content: flex-start;
  }

  .origin-arrow {
    left: 195px;
    bottom: 15px;

    transform: scaleX(-1);
  }

  .integrations-grid {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}


@media (max-width: 560px) {

  :root {
    --page-padding: 18px;
  }

  .site-logo {
    font-size: 15px;
  }

  .intro-stage {
    padding-inline: 18px;
  }

  .intro-card {
    width: min(70vw, 330px);
    height: auto;

    aspect-ratio: 420 / 320;

    padding:
      clamp(27px, 6vw, 38px)
      clamp(30px, 8vw, 48px);
  }

  .intro-brand {
    font-size: clamp(11px, 3.1vw, 15px);
  }

  .intro-tagline {
    margin-top: 14%;

    font-size: clamp(10px, 3vw, 14px);
  }

  .intro-note {
    right: -14px;
    bottom: 13%;

    font-size: clamp(9px, 2.5vw, 12px);
  }

  .intro-enter {
    bottom: 7%;

    font-size: 9px;
  }

  .hero {
    padding:
      55px 0
      55px;
  }

  .hero-copy h1 {
    font-size: clamp(48px, 14vw, 68px);
  }

  .hero-lead {
    font-size: 16px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .operator-demo {
    min-height: 760px;

    padding:
      24px
      18px;
  }

  .operator-demo-objective {
    padding-right: 80px;
  }

  .operator-role-grid {
    grid-template-columns: 1fr;
  }

  .operator-role:nth-child(n) {
    grid-column: auto;
  }

  .hero-raccoon {
    width: 132px;

    right: -10px;
    top: 495px;
  }

  .operator-status {
    left: 18px;
    right: 18px;
  }

  .how-grid {
    grid-template-columns: 1fr;
  }

  .how-intro {
    grid-column: auto;
  }

  .comparison,
  .operators,
  .integrations {
    padding:
      58px 0;
  }

  .build-public {
    padding:
      48px 0;
  }

  .display-heading {
    font-size: clamp(40px, 12vw, 58px);
  }

  .origin {
    padding-bottom: 40px;
  }

  .origin-card {
    width: 100%;

    padding:
      38px
      24px;
  }

  .origin-copy .display-heading {
    font-size: clamp(38px, 11vw, 51px);
  }

  .origin-button {
    width: 175px;
    height: 100px;

    font-size: 15px;
  }

  .origin-arrow {
    width: 105px;

    left: 160px;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .footer-grid > div:first-child {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
  }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   FINAL APPROVED SITE OVERRIDES + SUBPAGE STYLES
   Merged onto the original styles.css supplied by the user.
   ============================================================ */

.hero-copy h1 span::after {
      left: -7% !important;
      bottom: -16px !important;
      width: 124% !important;
      height: 23px !important;
      opacity: 1 !important;
      filter:
        saturate(1.18)
        brightness(1.08)
        drop-shadow(0 0 1px rgba(255, 61, 154, 0.55));
    }

    .operator-demo-objective {
      position: relative;
    }

    .objective-arrow {
      position: absolute;
      z-index: 3;
      width: 72px;
      height: auto;
      left: 126px;
      top: -10px;
      pointer-events: none;
      user-select: none;
      transform: rotate(-28deg);
      transform-origin: center;
    }

    .operator-role-publisher {
      position: relative;
      overflow: visible;
      padding-right: 80px;
    }

    .operator-role-publisher .hero-raccoon {
      position: absolute;
      z-index: 6;
      width: 146px;
      max-width: none;
      right: -91px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      user-select: none;
    }

    .comparison .display-heading {
      margin-bottom: 38px !important;
    }

    .timeline-item::before {
      width: 10px !important;
      height: 10px !important;
      background: var(--mms-blush) !important;
      border: 2px solid var(--mms-pink) !important;
    }

    .timeline-item:last-child::before {
      background: var(--mms-pink) !important;
    }

    .integrations,
    .integrations .container,
    .integrations-grid {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    .nav-more-button {
      gap: 9px !important;
    }

    .nav-chevron {
      display: block;
      flex: 0 0 auto;
      transition: transform 160ms ease;
    }

    .nav-more.is-open .nav-chevron {
      transform: rotate(180deg);
    }

    .nav-more-button > span {
      display: none !important;
    }

    .site-footer {
      background: var(--mms-black) !important;
      border-top: 0 !important;
    }

    .integrations {
      background: var(--mms-black) !important;
    }

    @media (max-width: 820px) {
      .operator-role-publisher {
        padding-right: 72px;
      }

      .operator-role-publisher .hero-raccoon {
        width: 126px;
        right: -73px;
        top: 54%;
      }
    }

    @media (max-width: 560px) {
      .operator-role-publisher {
        padding-right: 70px;
      }

      .operator-role-publisher .hero-raccoon {
        width: 112px;
        right: -56px;
        top: 55%;
      }

      .objective-arrow {
        width: 58px;
        left: 112px;
        top: -5px;
      }
    }

.site-header {
      align-items: flex-start !important;
      gap: 32px !important;
      padding-top: 28px !important;
      padding-bottom: 28px !important;
    }

    .header-brand {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 0 0 auto;
      max-width: 360px;
    }

    .header-tagline {
      margin: 0;
      color: rgba(246, 241, 234, 0.72);
      font-family: "Poppins", sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.55;
      max-width: 320px;
    }

    .desktop-nav {
      margin-left: auto !important;
      display: flex !important;
      align-items: center !important;
      gap: 24px !important;
      flex-wrap: nowrap !important;
    }

    .nav-dropdown {
      position: relative;
      flex: 0 0 auto;
    }

    .nav-dropdown-button {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--mms-pink);
      font-family: "Poppins", sans-serif;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .nav-dropdown .nav-chevron {
      display: block;
      transition: transform 180ms ease;
    }

    .nav-dropdown.is-open .nav-chevron {
      transform: rotate(180deg);
    }

    .nav-dropdown-menu {
      position: absolute;
      z-index: 40;
      top: calc(100% + 14px);
      right: 0;
      min-width: 216px;
      padding: 16px 18px;
      display: none;
      flex-direction: column;
      gap: 12px;
      border: 1px solid rgba(255, 61, 154, 0.35);
      border-radius: 16px;
      background: rgba(17, 18, 24, 0.98);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
      backdrop-filter: blur(6px);
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
      display: flex;
    }

    .nav-dropdown-menu a {
      color: var(--mms-blush);
      text-decoration: none;
      font-size: 15px;
      line-height: 1.4;
    }

    .nav-dropdown-menu a:hover {
      color: var(--mms-pink);
    }

    .intro-copy {
      position: relative;
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding-bottom: 94px !important;
    }

    .intro-brand,
    .intro-tagline,
    .intro-enter {
      text-align: center !important;
      align-self: center !important;
    }

    .intro-enter {
      margin-top: 34px !important;
    }

    .intro-note {
      position: absolute !important;
      left: auto !important;
      right: 34px !important;
      bottom: 76px !important;
      margin: 0 !important;
      white-space: nowrap;
      transform: rotate(-13deg) !important;
      transform-origin: center;
    }

    .operator-demo-objective {
      position: relative;
      overflow: visible;
    }

    .objective-arrow {
      width: 96px !important;
      left: 214px !important;
      top: 2px !important;
      transform: rotate(92deg) !important;
      opacity: 1 !important;
    }

    .operator-role-publisher {
      padding-right: 86px !important;
      overflow: visible !important;
    }

    .operator-role-publisher .hero-raccoon {
      width: 138px !important;
      right: -96px !important;
      top: 56% !important;
      transform: translateY(-50%) !important;
    }

    .comparison .display-heading {
      margin-bottom: 48px !important;
    }

    .timeline-item::before {
      background: transparent !important;
      border: 2px solid var(--mms-pink) !important;
    }

    .timeline-item:last-child::before {
      background: var(--mms-pink) !important;
    }

    .build-public .timeline {
      position: relative;
    }

    .pilot-block {
      position: relative;
      max-width: 760px;
      margin-top: 70px !important;
      margin-left: 120px !important;
      text-align: left !important;
    }

    .pilot-block::before {
      content: "";
      position: absolute;
      width: 150px;
      height: 112px;
      top: -102px;
      right: 74px;
      background: url("./assets/mms-arrow-curved.svg") center / contain no-repeat;
      transform: rotate(180deg);
      transform-origin: center;
      pointer-events: none;
    }

    .origin,
    .origin-card,
    .origin-action {
      overflow: visible !important;
    }

    .origin-action {
      position: relative;
    }

    .origin-arrow {
      width: 170px !important;
      left: -132px !important;
      top: 112px !important;
      transform: rotate(0deg) !important;
      opacity: 1 !important;
    }

    .integrations,
    .integrations .container,
    .integrations-grid {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: var(--mms-black) !important;
    }

    .site-footer {
      background: var(--mms-black) !important;
      border-top: 0 !important;
      padding-top: 18px !important;
    }

    .footer-bottom {
      padding-top: 18px !important;
      border-top: 1px solid rgba(255, 61, 154, 0.12);
    }

    .footer-grid {
      display: none !important;
    }

    @media (max-width: 1320px) {
      .site-header {
        gap: 24px !important;
      }

      .desktop-nav {
        gap: 18px !important;
      }

      .header-tagline {
        max-width: 250px;
        font-size: 13px;
      }
    }

    @media (max-width: 1180px) {
      .header-tagline,
      .nav-dropdown,
      .desktop-nav .nav-cta {
        display: none !important;
      }
    }

    @media (max-width: 820px) {
      .intro-note {
        right: 24px !important;
        bottom: 64px !important;
      }

      .operator-role-publisher {
        padding-right: 76px !important;
      }

      .operator-role-publisher .hero-raccoon {
        width: 124px !important;
        right: -82px !important;
      }

      .pilot-block {
        margin-left: 0 !important;
      }

      .pilot-block::before,
      .objective-arrow,
      .origin-arrow {
        display: none !important;
      }
    }

.intro-copy {
      padding-bottom: 0 !important;
    }

    .intro-enter {
      position: absolute !important;
      left: 50% !important;
      bottom: 42px !important;
      margin: 0 !important;
      padding: 8px 12px !important;
      transform: translateX(-50%) !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    .intro-enter:focus,
    .intro-enter:focus-visible {
      outline: 0 !important;
      box-shadow: none !important;
    }

    .intro-note {
      position: absolute !important;
      left: auto !important;
      right: 34px !important;
      bottom: 58px !important;
      margin: 0 !important;
      white-space: nowrap !important;
      transform: rotate(-13deg) !important;
    }

    .objective-arrow {
      width: 74px !important;
      left: 178px !important;
      top: -2px !important;
      transform: rotate(-90deg) !important;
      transform-origin: center !important;
    }

    .operator-demo {
      position: relative !important;
      overflow: visible !important;
    }

    .operator-role-publisher {
      position: static !important;
      padding-right: 0 !important;
    }

    .operator-role-publisher .hero-raccoon {
      display: none !important;
    }

    .operator-demo::after {
      content: "";
      position: absolute;
      z-index: 7;
      right: 34px;
      top: 298px;
      width: 162px;
      height: 246px;
      background: url("./assets/mms-raccoon-intro.webp") center / contain no-repeat;
      pointer-events: none;
      user-select: none;
    }

    .build-public .timeline {
      position: relative !important;
      padding-top: 28px !important;
    }

    .build-public .timeline::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: 63px !important;
      height: 2px !important;
      background: rgba(255, 61, 154, 0.5) !important;
      z-index: 0 !important;
    }

    .build-public .timeline-item {
      position: relative !important;
      padding-top: 26px !important;
      z-index: 1 !important;
    }

    .build-public .timeline-item::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 28px !important;
      width: 10px !important;
      height: 10px !important;
      margin: 0 !important;
      border: 2px solid var(--mms-pink) !important;
      border-radius: 50% !important;
      background: var(--mms-blush) !important;
      box-sizing: border-box !important;
      z-index: 2 !important;
    }

    .build-public .timeline-item:last-child::before {
      background: var(--mms-pink) !important;
    }

    .pilot-block {
      position: relative !important;
      max-width: 760px !important;
      margin-top: 86px !important;
      margin-left: 92px !important;
      text-align: left !important;
    }

    .pilot-block::before {
      content: "";
      position: absolute;
      width: 140px !important;
      height: 176px !important;
      top: -180px !important;
      right: 14px !important;
      background: url("./assets/mms-arrow-curved.svg") center / contain no-repeat !important;
      transform: none !important;
      transform-origin: center !important;
      pointer-events: none;
    }

    .origin,
    .origin-card,
    .origin-action {
      overflow: visible !important;
    }

    .origin-arrow {
      width: 154px !important;
      left: -105px !important;
      top: 102px !important;
      transform: rotate(180deg) !important;
      transform-origin: center !important;
    }

    @media (max-width: 820px) {
      .intro-enter {
        bottom: 34px !important;
      }

      .intro-note {
        right: 22px !important;
        bottom: 50px !important;
      }

      .operator-demo::after {
        right: 22px !important;
        top: 286px !important;
        width: 138px !important;
        height: 210px !important;
      }

      .pilot-block {
        margin-left: 0 !important;
      }

      .pilot-block::before,
      .origin-arrow,
      .objective-arrow {
        display: none !important;
      }
    }

.build-public .timeline::before {
      top: 60px !important;
    }

    .origin-arrow {
      transform: rotate(0deg) !important;
    }

.intro-enter {
      bottom: 28px !important;
    }

    .intro-note {
      right: 18px !important;
      bottom: 64px !important;
      transform: rotate(-17deg) !important;
    }

    .objective-arrow {
      width: 92px !important;
      left: 150px !important;
      top: 12px !important;
      transform: scaleX(-1) rotate(-4deg) !important;
      transform-origin: center !important;
    }

    .pilot-block::before {
      width: 118px !important;
      height: 136px !important;
      top: -144px !important;
      right: 20px !important;
      transform: none !important;
      transform-origin: center !important;
    }

    .origin-arrow {
      width: 150px !important;
      left: -132px !important;
      top: 74px !important;
      transform: rotate(38deg) !important;
      transform-origin: center !important;
    }

    .build-public .timeline-item {
      padding-top: 42px !important;
    }

    @media (max-width: 820px) {
      .intro-enter {
        bottom: 24px !important;
      }

      .intro-note {
        right: 14px !important;
        bottom: 56px !important;
      }

      .objective-arrow,
      .pilot-block::before,
      .origin-arrow {
        display: none !important;
      }
    }

.intro-tagline {
      position: relative !important;
      top: -40px !important;
    }

    .intro-note {
      bottom: 104px !important;
      right: 18px !important;
      transform: rotate(-17deg) !important;
    }

    .objective-arrow {
      width: 68px !important;
      left: 126px !important;
      top: -10px !important;
      transform: scaleX(-1) rotate(-7deg) !important;
      transform-origin: center !important;
    }

    .operator-demo::after {
      top: 244px !important;
    }

    .origin-arrow {
      width: 138px !important;
      left: -70px !important;
      top: 88px !important;
      transform: none !important;
      transform-origin: center !important;
    }

    @media (max-width: 820px) {
      .intro-tagline {
        top: -32px !important;
      }

      .intro-note {
        bottom: 88px !important;
      }

      .operator-demo::after {
        top: 238px !important;
      }

      .objective-arrow,
      .origin-arrow {
        display: none !important;
      }
    }

.intro-note {
      right: 84px !important;
      bottom: 86px !important;
      transform: rotate(-12deg) !important;
    }

    .objective-arrow {
      width: 82px !important;
      left: 102px !important;
      top: -4px !important;
      transform: scaleX(-1) rotate(-16deg) !important;
      transform-origin: center !important;
    }

    .operator-demo::after {
      top: 220px !important;
    }

    .origin-arrow {
      width: 154px !important;
      left: -124px !important;
      top: 82px !important;
      transform: rotate(188deg) !important;
      transform-origin: center !important;
    }

    @media (max-width: 820px) {
      .intro-note {
        right: 52px !important;
        bottom: 76px !important;
      }

      .operator-demo::after {
        top: 214px !important;
      }

      .objective-arrow,
      .origin-arrow {
        display: none !important;
      }
    }

.intro-note {
      left: auto !important;
      right: 34px !important;
      bottom: 34px !important;
      margin: 0 !important;
      transform: rotate(-12deg) !important;
      white-space: nowrap !important;
    }

    .objective-arrow-inline {
      position: absolute !important;
      z-index: 4 !important;
      display: block !important;
      width: 96px !important;
      height: 66px !important;
      left: 146px !important;
      top: -2px !important;
      transform: none !important;
      overflow: visible !important;
      pointer-events: none !important;
      user-select: none !important;
    }

    @media (max-width: 820px) {
      .intro-note {
        right: 22px !important;
        bottom: 28px !important;
      }

      .objective-arrow-inline {
        display: none !important;
      }
    }

.objective-arrow-uploaded {
      position: absolute !important;
      z-index: 4 !important;
      display: block !important;
      width: 86px !important;
      height: auto !important;
      left: 172px !important;
      top: -4px !important;
      transform: rotate(-4deg) !important;
      transform-origin: center !important;
      pointer-events: none !important;
      user-select: none !important;
    }

    @media (max-width: 820px) {
      .objective-arrow-uploaded {
        display: none !important;
      }
    }

.operator-demo-objective .handwritten-label {
      position: relative !important;
      display: inline-block !important;
      overflow: visible !important;
    }

    .operator-demo-objective .handwritten-label::after {
      content: "" !important;
      position: absolute !important;
      z-index: 5 !important;
      display: block !important;
      width: 72px !important;
      height: 83px !important;
      left: calc(100% + 2px) !important;
      top: 0 !important;
      background: url("./assets/mms-arrow-curved.svg") center / contain no-repeat !important;
      transform: rotate(-10deg) scaleX(-1) !important;
      transform-origin: center !important;
      pointer-events: none !important;
      user-select: none !important;
    }

    .objective-arrow,
    .objective-arrow-inline,
    .objective-arrow-uploaded {
      display: none !important;
    }

    @media (max-width: 820px) {
      .operator-demo-objective .handwritten-label::after {
        display: none !important;
      }
    }

.operator-demo-objective .handwritten-label::after {
      content: none !important;
      display: none !important;
    }

    .objective-arrow-uploaded {
      display: block !important;
      position: absolute !important;
      z-index: 5 !important;
      width: 70px !important;
      height: auto !important;
      left: 162px !important;
      top: -18px !important;
      transform: rotate(-90deg) !important;
      transform-origin: center center !important;
      pointer-events: none !important;
      user-select: none !important;
    }

    .objective-arrow-inline {
      display: none !important;
    }

    @media (max-width: 820px) {
      .objective-arrow-uploaded {
        display: none !important;
      }
    }

.operator-demo-objective .handwritten-label {
      position: relative !important;
      display: inline-block !important;
      overflow: visible !important;
    }

    .operator-demo-objective .handwritten-label::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      z-index: 6 !important;
      width: 76px !important;
      height: 88px !important;
      left: calc(100% + 4px) !important;
      top: -32px !important;
      background: url("./assets/mms-arrow-curved.svg") center / contain no-repeat !important;
      transform: scaleX(-1) rotate(-4deg) !important;
      transform-origin: center !important;
      pointer-events: none !important;
      user-select: none !important;
    }

    .objective-arrow,
    .objective-arrow-inline,
    .objective-arrow-uploaded {
      display: none !important;
    }

    @media (max-width: 820px) {
      .operator-demo-objective .handwritten-label::after {
        display: none !important;
      }
    }

.operator-demo-objective .handwritten-label::after {
      
      transform: scaleY(-1) rotate(-4deg) !important;
      transform-origin: center !important;
    }

    .intro-raccoon {
      scale: 0.90 !important;
      translate: -12px 16px !important;
      transform-origin: center center !important;
    }

    @media (max-width: 820px) {
      .intro-raccoon {
        scale: 0.92 !important;
        translate: -8px 10px !important;
      }
    }

.operator-demo-objective .handwritten-label::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      z-index: 6 !important;
      width: 68px !important;
      height: 78px !important;
      left: calc(100% + 10px) !important;
      top: -12px !important;
      background: url("./assets/mms-arrow-curved.svg") center / contain no-repeat !important;
      transform: rotate(-100deg) !important;
      transform-origin: center center !important;
      pointer-events: none !important;
      user-select: none !important;
    }

    @media (max-width: 820px) {
      .operator-demo-objective .handwritten-label::after {
        display: none !important;
      }
    }

.intro-card {
      position: relative !important;
    }

    .intro-copy {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      padding: 0 !important;
      text-align: center !important;
    }

    .intro-brand {
      position: absolute !important;
      top: 58px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      text-align: center !important;
    }

    .intro-tagline {
      position: absolute !important;
      top: 137px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      transform: none !important;
      text-align: center !important;
    }

    .intro-enter {
      position: absolute !important;
      top: 216px !important;
      bottom: auto !important;
      left: 50% !important;
      margin: 0 !important;
      padding: 8px 14px !important;
      transform: translateX(-50%) !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      line-height: 1 !important;
      letter-spacing: 0.08em !important;
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      white-space: nowrap !important;
    }

    .intro-note {
      position: absolute !important;
      left: auto !important;
      right: 42px !important;
      top: auto !important;
      bottom: 38px !important;
      margin: 0 !important;
      transform: rotate(-45deg) !important;
      transform-origin: center !important;
      white-space: nowrap !important;
    }

    @media (max-width: 820px) {
      .intro-brand {
        top: 54px !important;
      }

      .intro-tagline {
        top: 130px !important;
      }

      .intro-enter {
        top: 208px !important;
        font-size: 14px !important;
      }

      .intro-note {
        right: 30px !important;
        bottom: 32px !important;
      }
    }

.site-logo {
      display: block !important;
      color: var(--mms-pink) !important;
      text-decoration: none !important;
      cursor: default !important;
      outline: 0 !important;
      box-shadow: none !important;
      user-select: none;
    }

    .intro-step {
      opacity: 0 !important;
      will-change: opacity, transform, filter;
      backface-visibility: hidden;
    }

    .intro-step.is-visible {
      opacity: 1 !important;
    }

    .intro-brand.is-visible {
      animation: mms-brand-in 720ms cubic-bezier(.22, 1, .36, 1) both;
    }

    .intro-tagline.is-visible {
      animation: mms-tagline-in 760ms cubic-bezier(.22, 1, .36, 1) both;
    }

    .intro-note.is-visible {
      animation: mms-note-in 820ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .intro-enter.is-visible {
      animation: mms-enter-in 700ms cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes mms-brand-in {
      0% {
        opacity: 0;
        transform: translateY(-12px) scale(.985);
        filter: blur(3px);
      }
      55% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes mms-tagline-in {
      0% {
        opacity: 0;
        transform: translateY(13px);
        filter: blur(2.5px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @keyframes mms-note-in {
      0% {
        opacity: 0;
        transform: rotate(-45deg) translate3d(11px, 10px, 0) scale(.96);
        filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: rotate(-45deg) translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes mms-enter-in {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px) scale(.97);
        letter-spacing: .18em;
        filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        letter-spacing: .08em;
        filter: blur(0);
      }
    }

    .intro-enter {
      transition:
        color 180ms ease,
        letter-spacing 220ms ease,
        text-shadow 220ms ease !important;
    }

    .intro-enter:not(:disabled) {
      cursor: pointer !important;
    }

    .intro-enter:not(:disabled):hover {
      letter-spacing: .12em !important;
      text-shadow: 0 0 14px rgba(255, 61, 154, .32);
    }

    @media (prefers-reduced-motion: reduce) {
      .intro-step,
      .intro-step.is-visible,
      .intro-brand.is-visible,
      .intro-tagline.is-visible,
      .intro-note.is-visible,
      .intro-enter.is-visible {
        animation: none !important;
        transition: none !important;
        filter: none !important;
      }
    }

.intro-tagline.is-visible {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

    .intro-tagline-line {
      display: block;
      opacity: 0;
      will-change: opacity, transform, filter;
      backface-visibility: hidden;
    }

    .intro-tagline.is-visible .intro-tagline-line-1 {
      animation: mms-tagline-left-in 520ms cubic-bezier(.22, 1, .36, 1) both;
    }

    .intro-tagline.is-visible .intro-tagline-line-2 {
      animation: mms-tagline-right-in 520ms cubic-bezier(.22, 1, .36, 1) 100ms both;
    }

    @keyframes mms-tagline-left-in {
      0% {
        opacity: 0;
        transform: translate3d(-28px, 0, 0);
        filter: blur(5px);
      }
      70% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }

    @keyframes mms-tagline-right-in {
      0% {
        opacity: 0;
        transform: translate3d(28px, 0, 0);
        filter: blur(5px);
      }
      70% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }

    .intro-enter.is-visible {
      animation: mms-enter-ready 430ms cubic-bezier(.22, 1, .36, 1) both !important;
    }

    .intro-enter-label,
    .intro-enter-arrow {
      display: inline-block;
    }

    .intro-enter-arrow {
      margin-left: .42em;
      transform: translateX(0);
    }

    .intro-enter.is-visible .intro-enter-arrow {
      animation: mms-enter-arrow-nudge 520ms cubic-bezier(.22, 1, .36, 1) 430ms 1 both;
    }

    @keyframes mms-enter-ready {
      0% {
        opacity: 0;
        transform: translateX(-50%) scale(.96);
        filter: blur(2.5px);
        text-shadow: 0 0 0 rgba(255, 61, 154, 0);
      }
      68% {
        opacity: 1;
        text-shadow: 0 0 15px rgba(255, 61, 154, .24);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0);
        text-shadow: 0 0 0 rgba(255, 61, 154, 0);
      }
    }

    @keyframes mms-enter-arrow-nudge {
      0%, 100% { transform: translateX(0); }
      48% { transform: translateX(7px); }
    }

    .intro-note.mms-note-controlled {
      opacity: 0 !important;
      clip-path: inset(0 100% 0 0);
      will-change: opacity, transform, clip-path;
    }

    .intro-note.mms-note-controlled.is-visible {
      animation: mms-note-write-in 680ms cubic-bezier(.16, 1, .3, 1) both !important;
    }

    @keyframes mms-note-write-in {
      0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: rotate(-38deg) translate3d(8px, 7px, 0) scale(.98);
      }
      14% {
        opacity: 1;
      }
      84% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: rotate(-45deg) translate3d(0, 0, 0) scale(1.01);
      }
      100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: rotate(-45deg) translate3d(0, 0, 0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .intro-tagline-line,
      .intro-tagline.is-visible .intro-tagline-line-1,
      .intro-tagline.is-visible .intro-tagline-line-2,
      .intro-enter.is-visible,
      .intro-enter.is-visible .intro-enter-arrow,
      .intro-note.mms-note-controlled,
      .intro-note.mms-note-controlled.is-visible {
        animation: none !important;
        transition: none !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
        opacity: 1 !important;
      }

      .intro-enter.is-visible {
        transform: translateX(-50%) !important;
      }

      .intro-note.mms-note-controlled,
      .intro-note.mms-note-controlled.is-visible {
        transform: rotate(-45deg) !important;
      }
    }

.intro-tagline.is-visible .intro-tagline-line-1 {
      animation: mms-tagline-left-in-v25 920ms cubic-bezier(.22, 1, .36, 1) both !important;
    }

    .intro-tagline.is-visible .intro-tagline-line-2 {
      animation: mms-tagline-right-in-v25 920ms cubic-bezier(.22, 1, .36, 1) 180ms both !important;
    }

    @keyframes mms-tagline-left-in-v25 {
      0% {
        opacity: 0;
        transform: translate3d(-34px, 0, 0);
        filter: blur(6px);
      }
      55% {
        opacity: .82;
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }

    @keyframes mms-tagline-right-in-v25 {
      0% {
        opacity: 0;
        transform: translate3d(34px, 0, 0);
        filter: blur(6px);
      }
      55% {
        opacity: .82;
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }

    .intro-enter.is-visible .intro-enter-arrow {
      animation: mms-enter-arrow-pulse-v25 1900ms ease-in-out 480ms 1 both !important;
    }

    @keyframes mms-enter-arrow-pulse-v25 {
      0%   { opacity: 1;    transform: translateX(0); }
      12%  { opacity: .22;  transform: translateX(2px); }
      24%  { opacity: 1;    transform: translateX(6px); }
      38%  { opacity: .28;  transform: translateX(2px); }
      52%  { opacity: 1;    transform: translateX(7px); }
      68%  { opacity: .35;  transform: translateX(3px); }
      84%  { opacity: 1;    transform: translateX(6px); }
      100% { opacity: 1;    transform: translateX(0); }
    }

    .intro-note,
    .intro-note.mms-note-controlled,
    .intro-note.mms-note-controlled.is-visible {
      right: 42px !important;
      bottom: 38px !important;
      top: auto !important;
      left: auto !important;
      transform-origin: center !important;
    }

    .intro-note.mms-note-controlled.is-visible {
      animation: mms-note-write-in-v25 680ms cubic-bezier(.16, 1, .3, 1) both !important;
    }

    @keyframes mms-note-write-in-v25 {
      0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: rotate(-45deg) !important;
      }
      14% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: rotate(-45deg) !important;
      }
    }

    @media (max-width: 820px) {
      .intro-note,
      .intro-note.mms-note-controlled,
      .intro-note.mms-note-controlled.is-visible {
        right: 30px !important;
        bottom: 32px !important;
      }
    }

.intro-note.mms-note-controlled {
      opacity: 0 !important;
      clip-path: inset(0 100% 0 0) !important;
    }

    .intro-note.mms-note-controlled.is-visible {
      opacity: 1 !important;
      right: 42px !important;
      bottom: 38px !important;
      top: auto !important;
      left: auto !important;
      animation: mms-note-write-in-v26 680ms cubic-bezier(.16, 1, .3, 1) both !important;
    }

    @keyframes mms-note-write-in-v26 {
      0% {
        clip-path: inset(0 100% 0 0);
        transform: rotate(-45deg) translate3d(6px, 5px, 0);
      }
      100% {
        clip-path: inset(0 0 0 0);
        transform: rotate(-45deg) translate3d(0, 0, 0);
      }
    }

    @media (max-width: 820px) {
      .intro-note.mms-note-controlled.is-visible {
        right: 30px !important;
        bottom: 32px !important;
      }
    }

.intro-note.mms-note-controlled {
      display: block !important;
      visibility: visible !important;
      opacity: 0 !important;
      clip-path: none !important;
      -webkit-clip-path: none !important;
      right: 42px !important;
      bottom: 38px !important;
      top: auto !important;
      left: auto !important;
      transform: rotate(-45deg) !important;
      animation: none !important;
      overflow: visible !important;
    }

    .intro-note.mms-note-controlled.is-visible {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      clip-path: none !important;
      -webkit-clip-path: none !important;
      transform: rotate(-45deg) !important;
      animation: none !important;
    }

    .intro-note-text {
      display: inline-block;
      width: auto;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
    }

    .intro-note.mms-note-controlled.is-visible .intro-note-text {
      opacity: 1;
    }

    @media (max-width: 820px) {
      .intro-note.mms-note-controlled,
      .intro-note.mms-note-controlled.is-visible {
        right: 30px !important;
        bottom: 32px !important;
      }
    }

.intro-note,
    .intro-note.mms-note-controlled,
    .intro-note.mms-note-controlled.is-visible {
      font-size: 22px !important;
    }

    @media (max-width: 820px) {
      .intro-note,
      .intro-note.mms-note-controlled,
      .intro-note.mms-note-controlled.is-visible {
        font-size: 18px !important;
      }
    }

.intro-note,
    .intro-note.mms-note-controlled,
    .intro-note.mms-note-controlled.is-visible {
      font-size: 22px !important;
      bottom: 56px !important;
    }

    .intro-note-text {
      padding-right: 6px;
    }

    @media (max-width: 820px) {
      .intro-note,
      .intro-note.mms-note-controlled,
      .intro-note.mms-note-controlled.is-visible {
        font-size: 18px !important;
        bottom: 48px !important;
      }
    }

.hero-copy h1 span {
      position: relative !important;
      display: inline-block !important;
    }

    .hero-copy h1 span::after {
      content: "" !important;
      position: absolute !important;
      z-index: 0 !important;
      left: -37.5% !important;
      bottom: -30px !important;
      width: 175% !important;
      height: 56px !important;
      background-image: url("./assets/mms-line-handdrawn.svg") !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      background-size: 100% 100% !important;
      opacity: 1 !important;
      pointer-events: none !important;
      filter:
        saturate(1.18)
        brightness(1.08)
        drop-shadow(0 0 1px rgba(255, 61, 154, 0.55)) !important;
    }

    @media (max-width: 820px) {
      .hero-copy h1 span::after {
        left: -32% !important;
        bottom: -24px !important;
        width: 164% !important;
        height: 46px !important;
      }
    }

.hero-copy h1 span::after {
      left: -45% !important;
      bottom: -44px !important;
      width: 190% !important;
      height: 68px !important;
    }

    @media (max-width: 820px) {
      .hero-copy h1 span::after {
        left: -38% !important;
        bottom: -34px !important;
        width: 176% !important;
        height: 56px !important;
      }
    }

.hero-copy h1 span::after {
      left: -54% !important;
      bottom: -52px !important;
      width: 228% !important;
      height: 82px !important;
    }

    @media (max-width: 820px) {
      .hero-copy h1 span::after {
        left: -46% !important;
        bottom: -41px !important;
        width: 211% !important;
        height: 67px !important;
      }
    }

.hero-copy h1 span::after {
      left: -77% !important;
      bottom: -60px !important;
      width: 274% !important;
      height: 98px !important;
    }

    @media (max-width: 820px) {
      .hero-copy h1 span::after {
        left: -67% !important;
        bottom: -48px !important;
        width: 253% !important;
        height: 80px !important;
      }
    }

.intro-note.mms-note-controlled,
    .intro-note.mms-note-controlled.is-visible {
      overflow: visible !important;
      clip-path: none !important;
      -webkit-clip-path: none !important;
    }

    .intro-note-word {
      display: inline-block;
      opacity: 0;
      will-change: opacity, transform;
    }

    .intro-note.mms-note-controlled.is-visible .intro-note-word {
      
      animation: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
      .intro-note-word {
        opacity: 1 !important;
        transform: none !important;
      }
    }

#site.site {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .desktop-nav a[aria-current="page"],
    .nav-dropdown-menu a[aria-current="page"] {
      color: #FF3D9A !important;
    }

    .platform-page {
      color: #0D0D10;
      font-family: "Poppins", sans-serif;
    }

    .platform-eyebrow,
    .platform-kicker,
    .platform-demo-label {
      color: #FF3D9A;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .16em;
    }

    .platform-hero h1,
    .platform-page h2 {
      margin: 0;
      font-family: "Anton", sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: .01em;
    }

    .platform-hero {
      position: relative;
      overflow: hidden;
      padding: 118px 0 122px;
      background:
        radial-gradient(circle at 83% 36%, rgba(255,61,154,.11), transparent 30%),
        #0D0D10;
    }

    .platform-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(470px, .98fr);
      gap: 74px;
      align-items: center;
    }

    .platform-hero h1 {
      margin-top: 18px;
      max-width: 900px;
      color: #F6F1EA;
      font-size: clamp(70px, 7.5vw, 126px);
      line-height: .89;
    }

    .platform-hero h1 span {
      color: #FF3D9A;
    }

    .platform-lead {
      max-width: 760px;
      margin: 34px 0 0;
      color: rgba(246,241,234,.74);
      font-size: 18px;
      line-height: 1.75;
    }

    .platform-hero-actions,
    .platform-cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      margin-top: 36px;
    }

    .platform-primary-link,
    .platform-secondary-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 19px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      text-decoration: none;
      transition: transform 160ms ease, background 160ms ease;
    }

    .platform-primary-link {
      background: #FF3D9A;
      color: #0D0D10;
    }

    .platform-secondary-link {
      border: 1px solid rgba(246,241,234,.22);
      color: #F6F1EA;
    }

    .platform-primary-link:hover,
    .platform-secondary-link:hover {
      transform: translateY(-2px);
    }

    .platform-handnote,
    .platform-control-note,
    .platform-cta-note {
      color: #FF3D9A;
      font-family: "Caveat", cursive;
      font-weight: 700;
    }

    .platform-handnote {
      width: fit-content;
      margin: 42px 0 0 44%;
      font-size: 26px;
      transform: rotate(-5deg);
    }

    .platform-system-demo {
      position: relative;
      padding: 28px;
      border: 1px solid rgba(255,61,154,.24);
      border-radius: 25px;
      background: #15151A;
      box-shadow: 0 28px 80px rgba(0,0,0,.32);
    }

    .platform-demo-objective,
    .platform-output-card {
      border-radius: 17px;
      background: #F6F1EA;
      color: #0D0D10;
    }

    .platform-demo-objective {
      margin-top: 20px;
      padding: 22px 24px;
    }

    .platform-demo-objective span,
    .platform-output-card span,
    .platform-role-card span,
    .platform-workflow-step span,
    .platform-state-row small {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    .platform-demo-objective strong {
      display: block;
      margin-top: 7px;
      font-size: 14px;
      line-height: 1.55;
    }

    .platform-demo-line {
      width: 1px;
      height: 26px;
      margin: 0 auto;
      background: rgba(255,61,154,.42);
    }

    .platform-role-stack {
      display: grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap: 7px;
    }

    .platform-role-card {
      min-height: 120px;
      padding: 15px 12px;
      border: 1px solid rgba(246,241,234,.12);
      border-radius: 14px;
      background: #0D0D10;
      color: #F6F1EA;
    }

    .platform-role-card strong {
      display: block;
      margin-top: 24px;
      font-family: "Anton", sans-serif;
      font-size: 18px;
      font-weight: 400;
    }

    .platform-role-card small {
      display: block;
      margin-top: 5px;
      color: rgba(246,241,234,.48);
      font-size: 9px;
      line-height: 1.35;
    }

    .platform-output-card {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      margin-top: 16px;
      padding: 20px 22px;
    }

    .platform-output-card strong {
      display: block;
      margin-top: 5px;
      font-size: 14px;
    }

    .platform-output-status {
      padding: 8px 11px;
      border-radius: 999px;
      background: #FF3D9A;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .platform-difference,
    .platform-state {
      padding: 78px 0;
      background: #FBE6E6;
    }

    .platform-difference-grid,
    .platform-control-grid,
    .platform-state-grid {
      display: grid;
      grid-template-columns: 62px minmax(0,.9fr) minmax(0,1.1fr);
      gap: 44px;
      align-items: start;
    }

    .platform-section-mark {
      color: #FF3D9A;
      font-family: "Anton", sans-serif;
      font-size: 30px;
      line-height: 1;
    }

    .platform-page h2 {
      margin-top: 12px;
      font-size: clamp(48px, 5.8vw, 86px);
      line-height: .95;
    }

    .platform-difference-copy p,
    .platform-control-copy > p,
    .platform-workflow-intro p {
      margin: 0 0 20px;
      color: rgba(13,13,16,.7);
      font-size: 15px;
      line-height: 1.85;
    }

    .platform-architecture,
    .platform-workflow {
      padding: 110px 0 122px;
      background: #F6F1EA;
    }

    .platform-section-heading {
      display: grid;
      grid-template-columns: 62px minmax(0,1fr);
      gap: 44px;
      align-items: start;
    }

    .platform-architecture-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 16px;
      margin-top: 58px;
    }

    .platform-architecture-card {
      min-height: 285px;
      padding: 30px;
      border: 1px solid rgba(13,13,16,.1);
      border-radius: 21px;
      background: #FBF7F1;
    }

    .platform-architecture-card > span {
      color: #FF3D9A;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .platform-architecture-card h3 {
      margin: 92px 0 0;
      font-family: "Anton", sans-serif;
      font-size: 34px;
      font-weight: 400;
    }

    .platform-architecture-card p {
      margin: 13px 0 0;
      color: rgba(13,13,16,.62);
      font-size: 13px;
      line-height: 1.7;
    }

    .platform-architecture-card-dark {
      background: #0D0D10;
    }

    .platform-architecture-card-dark h3 {
      color: #F6F1EA;
    }

    .platform-architecture-card-dark p {
      color: rgba(246,241,234,.62);
    }

    .platform-architecture-card-pink {
      background: #FF3D9A;
      border-color: #FF3D9A;
    }

    .platform-architecture-card-pink > span {
      color: #0D0D10;
    }

    .platform-control {
      padding: 110px 0;
      background: #0D0D10;
      color: #F6F1EA;
    }

    .platform-control-grid {
      grid-template-columns: 62px minmax(0,.9fr) minmax(0,1.1fr);
    }

    .platform-section-mark-dark {
      color: #FF3D9A;
    }

    .platform-control h2 {
      color: #F6F1EA;
    }

    .platform-control-copy > p {
      color: rgba(246,241,234,.68);
    }

    .platform-control-list {
      margin-top: 34px;
      border-top: 1px solid rgba(246,241,234,.13);
    }

    .platform-control-list > div {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 16px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(246,241,234,.13);
    }

    .platform-control-list span {
      color: #FF3D9A;
      font-size: 11px;
      font-weight: 700;
    }

    .platform-control-list strong {
      font-size: 14px;
      font-weight: 600;
    }

    .platform-control-note {
      width: fit-content;
      margin: 30px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .platform-workflow-grid {
      display: grid;
      grid-template-columns: minmax(270px,.65fr) minmax(0,1.35fr);
      gap: 66px;
      margin-top: 58px;
      align-items: center;
    }

    .platform-workflow-intro a {
      display: inline-block;
      margin-top: 8px;
      color: #FF3D9A;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
    }

    .platform-workflow-steps {
      display: grid;
      grid-template-columns: 1fr 30px 1.3fr 30px 1fr;
      gap: 10px;
      align-items: center;
    }

    .platform-workflow-steps > b {
      color: #FF3D9A;
      text-align: center;
      font-size: 24px;
    }

    .platform-workflow-step {
      min-height: 160px;
      padding: 23px;
      border: 1px solid rgba(13,13,16,.12);
      border-radius: 18px;
      background: #FBF7F1;
    }

    .platform-workflow-step strong {
      display: block;
      margin-top: 55px;
      font-size: 14px;
      line-height: 1.55;
    }

    .platform-state-grid {
      grid-template-columns: 62px minmax(0,.88fr) minmax(0,1.12fr);
    }

    .platform-state-board {
      border-top: 2px solid #0D0D10;
    }

    .platform-state-row {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 18px;
      padding: 22px 0;
      border-bottom: 1px solid rgba(13,13,16,.14);
    }

    .platform-state-dot {
      width: 14px;
      height: 14px;
      margin-top: 3px;
      border: 2px solid #0D0D10;
      border-radius: 50%;
      background: transparent;
    }

    .platform-state-dot.is-now {
      border-color: #FF3D9A;
      background: #FF3D9A;
    }

    .platform-state-row strong {
      display: block;
      margin-top: 3px;
      font-size: 15px;
    }

    .platform-state-row p {
      margin: 6px 0 0;
      color: rgba(13,13,16,.58);
      font-size: 13px;
      line-height: 1.6;
    }

    .platform-cta {
      padding: 105px 0 110px;
      background: #0D0D10;
      color: #F6F1EA;
    }

    .platform-cta-inner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 40px;
      align-items: end;
    }

    .platform-cta h2 {
      color: #F6F1EA;
    }

    .platform-secondary-link-light {
      color: #F6F1EA;
    }

    .platform-cta-note {
      position: absolute;
      right: 0;
      bottom: -58px;
      font-size: 24px;
      transform: rotate(-4deg);
    }

    @media (max-width: 1120px) {
      .platform-hero-grid {
        grid-template-columns: 1fr;
      }

      .platform-system-demo {
        max-width: 760px;
      }

      .platform-difference-grid,
      .platform-control-grid,
      .platform-state-grid {
        grid-template-columns: 52px 1fr;
      }

      .platform-difference-copy,
      .platform-control-copy,
      .platform-state-board {
        grid-column: 2;
      }

      .platform-architecture-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .platform-workflow-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .platform-hero {
        padding: 82px 0 88px;
      }

      .platform-hero h1 {
        font-size: clamp(54px, 15.5vw, 88px);
      }

      .platform-lead {
        font-size: 16px;
      }

      .platform-handnote {
        margin-left: 28%;
        font-size: 23px;
      }

      .platform-role-stack {
        grid-template-columns: 1fr;
      }

      .platform-role-card {
        min-height: 92px;
      }

      .platform-role-card strong {
        margin-top: 12px;
      }

      .platform-output-card {
        align-items: flex-start;
        flex-direction: column;
      }

      .platform-difference-grid,
      .platform-control-grid,
      .platform-state-grid,
      .platform-section-heading {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .platform-difference-copy,
      .platform-control-copy,
      .platform-state-board {
        grid-column: auto;
      }

      .platform-architecture-grid {
        grid-template-columns: 1fr;
      }

      .platform-architecture-card {
        min-height: 230px;
      }

      .platform-architecture-card h3 {
        margin-top: 58px;
      }

      .platform-workflow-steps {
        grid-template-columns: 1fr;
      }

      .platform-workflow-steps > b {
        transform: rotate(90deg);
      }

      .platform-workflow-step {
        min-height: 130px;
      }

      .platform-workflow-step strong {
        margin-top: 35px;
      }

      .platform-cta-inner {
        grid-template-columns: 1fr;
      }

      .platform-cta-note {
        position: static;
        width: fit-content;
        margin-left: auto;
        margin-top: 12px;
      }
    }

.platform-control-grid,
    .platform-state-grid {
      grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr) !important;
      gap: 72px !important;
      align-items: start !important;
    }

    .platform-control-grid > div:first-child,
    .platform-state-grid > div:first-child {
      min-width: 0;
    }

    .platform-control-copy,
    .platform-state-board {
      grid-column: auto !important;
      min-width: 0;
    }

    .platform-control h2,
    .platform-state h2 {
      max-width: 430px;
      font-size: clamp(58px, 5.25vw, 78px) !important;
      line-height: .94 !important;
    }

    .platform-control-copy > p {
      max-width: 650px;
    }

    @media (max-width: 1120px) {
      .platform-control-grid,
      .platform-state-grid {
        grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr) !important;
        gap: 48px !important;
      }

      .platform-control-copy,
      .platform-state-board {
        grid-column: auto !important;
      }

      .platform-control h2,
      .platform-state h2 {
        max-width: 340px;
        font-size: clamp(50px, 6vw, 68px) !important;
      }
    }

    @media (max-width: 900px) {
      .platform-control-grid,
      .platform-state-grid {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
      }

      .platform-control-copy,
      .platform-state-board {
        grid-column: auto !important;
      }

      .platform-control h2,
      .platform-state h2 {
        max-width: 720px;
        font-size: clamp(54px, 10vw, 76px) !important;
      }
    }

    @media (max-width: 760px) {
      .platform-control-grid,
      .platform-state-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
      }

      .platform-control h2,
      .platform-state h2 {
        max-width: none;
        font-size: clamp(48px, 13vw, 68px) !important;
      }
    }

.how-page {
      font-family: "Poppins", sans-serif;
      color: #0D0D10;
    }

    .how-eyebrow,
    .how-kicker {
      color: #FF3D9A;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .16em;
    }

    .how-page h1,
    .how-page h2,
    .how-page h3 {
      font-family: "Anton", sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: .01em;
    }

    .how-hero {
      padding: 118px 0 120px;
      background:
        radial-gradient(circle at 80% 34%, rgba(255,61,154,.12), transparent 30%),
        #0D0D10;
      color: #F6F1EA;
    }

    .how-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
      gap: 82px;
      align-items: center;
    }

    .how-hero h1 {
      margin: 18px 0 0;
      max-width: 900px;
      font-size: clamp(72px, 7.5vw, 126px);
      line-height: .89;
    }

    .how-hero h1 span {
      color: #FF3D9A;
    }

    .how-lead {
      max-width: 740px;
      margin: 34px 0 0;
      color: rgba(246,241,234,.74);
      font-size: 18px;
      line-height: 1.75;
    }

    .how-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      margin-top: 36px;
    }

    .how-primary-link,
    .how-secondary-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 19px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      text-decoration: none;
      transition: transform 160ms ease;
    }

    .how-primary-link {
      background: #FF3D9A;
      color: #0D0D10;
    }

    .how-secondary-link {
      border: 1px solid rgba(246,241,234,.22);
      color: #F6F1EA;
    }

    .how-primary-link:hover,
    .how-secondary-link:hover {
      transform: translateY(-2px);
    }

    .how-handnote,
    .how-example-note,
    .how-control-note,
    .how-cta-note {
      color: #FF3D9A;
      font-family: "Caveat", cursive;
      font-weight: 700;
    }

    .how-handnote {
      width: fit-content;
      margin: 42px 0 0 48%;
      font-size: 26px;
      transform: rotate(-5deg);
    }

    .how-hero-diagram {
      padding: 26px;
      border: 1px solid rgba(255,61,154,.24);
      border-radius: 24px;
      background: #15151A;
      box-shadow: 0 28px 80px rgba(0,0,0,.32);
    }

    .how-diagram-step {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 16px;
      align-items: center;
      padding: 18px 20px;
      border: 1px solid rgba(246,241,234,.12);
      border-radius: 15px;
      background: #0D0D10;
    }

    .how-diagram-step span {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    .how-diagram-step strong {
      font-size: 14px;
      letter-spacing: .02em;
    }

    .how-diagram-step small {
      grid-column: 2;
      margin-top: -8px;
      color: rgba(246,241,234,.46);
      font-size: 10px;
    }

    .how-diagram-step.is-objective,
    .how-diagram-step.is-output {
      background: #F6F1EA;
      color: #0D0D10;
    }

    .how-hero-diagram > b {
      display: block;
      color: #FF3D9A;
      text-align: center;
      line-height: 26px;
      font-size: 18px;
    }

    .how-flow,
    .how-control {
      padding: 110px 0 122px;
      background: #F6F1EA;
    }

    .how-section-heading {
      display: grid;
      grid-template-columns: 62px minmax(0,1fr);
      gap: 44px;
      align-items: start;
    }

    .how-section-mark {
      color: #FF3D9A;
      font-family: "Anton", sans-serif;
      font-size: 30px;
      line-height: 1;
    }

    .how-page h2 {
      margin: 12px 0 0;
      font-size: clamp(50px, 5.8vw, 86px);
      line-height: .95;
    }

    .how-flow-list {
      margin-top: 62px;
      border-top: 2px solid #0D0D10;
    }

    .how-flow-row {
      display: grid;
      grid-template-columns: 72px minmax(280px,.9fr) minmax(0,1.1fr);
      gap: 30px;
      align-items: start;
      padding: 34px 0;
      border-bottom: 1px solid rgba(13,13,16,.14);
    }

    .how-flow-number {
      color: #FF3D9A;
      font-family: "Anton", sans-serif;
      font-size: 28px;
    }

    .how-flow-title h3 {
      margin: 10px 0 0;
      font-size: clamp(32px, 3.4vw, 48px);
      line-height: .98;
    }

    .how-flow-copy p,
    .how-control-copy > p,
    .how-failure-copy > p {
      margin: 0;
      color: rgba(13,13,16,.68);
      font-size: 15px;
      line-height: 1.85;
    }

    .how-context,
    .how-failure {
      padding: 92px 0;
      background: #FBE6E6;
    }

    .how-context-grid,
    .how-control-grid,
    .how-failure-grid {
      display: grid;
      grid-template-columns: minmax(330px,.9fr) minmax(0,1.1fr);
      gap: 72px;
      align-items: start;
    }

    .how-context-stack {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 15px;
    }

    .how-context-card {
      min-height: 190px;
      padding: 24px;
      border: 1px solid rgba(13,13,16,.1);
      border-radius: 18px;
      background: rgba(246,241,234,.72);
    }

    .how-context-card span {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
    }

    .how-context-card strong {
      display: block;
      margin-top: 54px;
      font-family: "Anton", sans-serif;
      font-size: 28px;
      font-weight: 400;
    }

    .how-context-card p {
      margin: 9px 0 0;
      color: rgba(13,13,16,.62);
      font-size: 12px;
      line-height: 1.6;
    }

    .how-example {
      padding: 110px 0 118px;
      background: #0D0D10;
      color: #F6F1EA;
    }

    .how-section-heading-dark h2 {
      color: #F6F1EA;
    }

    .how-example-objective,
    .how-example-result {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      margin-top: 52px;
      padding: 22px 24px;
      border-radius: 18px;
      background: #F6F1EA;
      color: #0D0D10;
    }

    .how-example-objective span,
    .how-example-result span,
    .how-example-flow article span,
    .how-control-board span {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    .how-example-objective strong,
    .how-example-result strong {
      font-size: 14px;
    }

    .how-example-flow {
      display: grid;
      grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr 28px 1fr;
      gap: 8px;
      align-items: stretch;
      margin-top: 18px;
    }

    .how-example-flow > b {
      align-self: center;
      color: #FF3D9A;
      text-align: center;
      font-size: 21px;
    }

    .how-example-flow article {
      min-height: 205px;
      padding: 20px 16px;
      border: 1px solid rgba(246,241,234,.12);
      border-radius: 16px;
      background: #15151A;
    }

    .how-example-flow h3 {
      margin: 58px 0 0;
      font-size: 26px;
    }

    .how-example-flow p {
      margin: 10px 0 0;
      color: rgba(246,241,234,.52);
      font-size: 11px;
      line-height: 1.6;
    }

    .how-result-pill {
      padding: 8px 11px;
      border-radius: 999px;
      background: #FF3D9A;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .how-example-note {
      width: fit-content;
      margin: 26px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .how-control-board {
      margin-top: 34px;
      border-top: 2px solid #0D0D10;
    }

    .how-control-board > div {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 24px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(13,13,16,.14);
      align-items: center;
    }

    .how-control-board strong {
      font-size: 14px;
    }

    .how-control-note {
      width: fit-content;
      margin: 30px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .how-failure-copy {
      min-width: 0;
    }

    .how-failure-path {
      display: grid;
      grid-template-columns: 1fr 28px 1.25fr 28px 1fr 28px 1fr;
      gap: 8px;
      align-items: center;
      margin: 34px 0;
    }

    .how-failure-path > div {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(13,13,16,.12);
      background: rgba(246,241,234,.72);
      text-align: center;
      font-size: 11px;
      font-weight: 700;
    }

    .how-failure-path > b {
      color: #FF3D9A;
      text-align: center;
      font-size: 18px;
    }

    .how-failure-path .is-fail {
      background: #0D0D10;
      color: #F6F1EA;
    }

    .how-failure-path .is-repair {
      background: #FF3D9A;
    }

    .how-cta {
      padding: 105px 0 112px;
      background: #0D0D10;
      color: #F6F1EA;
    }

    .how-cta-inner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 40px;
      align-items: end;
    }

    .how-cta h2 {
      color: #F6F1EA;
    }

    .how-cta-actions {
      margin-top: 0;
    }

    .how-cta-note {
      position: absolute;
      right: 0;
      bottom: -58px;
      font-size: 24px;
      transform: rotate(-4deg);
    }

    @media (max-width: 1120px) {
      .how-hero-grid {
        grid-template-columns: 1fr;
      }

      .how-hero-diagram {
        max-width: 720px;
      }

      .how-context-grid,
      .how-control-grid,
      .how-failure-grid {
        grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr);
        gap: 48px;
      }

      .how-example-flow {
        grid-template-columns: repeat(5, minmax(150px,1fr));
        overflow-x: auto;
        padding-bottom: 8px;
      }

      .how-example-flow > b {
        display: none;
      }
    }

    @media (max-width: 880px) {
      .how-flow-row {
        grid-template-columns: 58px 1fr;
      }

      .how-flow-copy {
        grid-column: 2;
      }

      .how-context-grid,
      .how-control-grid,
      .how-failure-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .how-hero {
        padding: 82px 0 88px;
      }

      .how-hero h1 {
        font-size: clamp(54px, 15.5vw, 88px);
      }

      .how-lead {
        font-size: 16px;
      }

      .how-handnote {
        margin-left: 28%;
        font-size: 23px;
      }

      .how-section-heading,
      .how-flow-row {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .how-flow-copy {
        grid-column: auto;
      }

      .how-context-stack {
        grid-template-columns: 1fr;
      }

      .how-example-objective,
      .how-example-result {
        align-items: flex-start;
        flex-direction: column;
      }

      .how-example-flow {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
      }

      .how-control-board > div {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .how-failure-path {
        grid-template-columns: 1fr;
      }

      .how-failure-path > b {
        transform: rotate(90deg);
      }

      .how-cta-inner {
        grid-template-columns: 1fr;
      }

      .how-cta-note {
        position: static;
        width: fit-content;
        margin: 18px 0 0 auto;
      }
    }

.build-page {
      font-family: "Poppins", sans-serif;
      color: #0D0D10;
    }

    .build-eyebrow,
    .build-kicker {
      color: #FF3D9A;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .16em;
    }

    .build-page h1,
    .build-page h2,
    .build-page h3 {
      margin: 0;
      font-family: "Anton", sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: .01em;
    }

    .build-hero {
      padding: 118px 0 122px;
      background:
        radial-gradient(circle at 82% 35%, rgba(255,61,154,.11), transparent 30%),
        #0D0D10;
      color: #F6F1EA;
    }

    .build-hero-grid {
      display: grid;
      grid-template-columns: minmax(0,1.1fr) 440px;
      gap: 78px;
      align-items: center;
    }

    .build-hero h1 {
      margin-top: 18px;
      max-width: 960px;
      font-size: clamp(70px, 7.2vw, 122px);
      line-height: .89;
    }

    .build-hero h1 span {
      color: #FF3D9A;
    }

    .build-lead {
      max-width: 720px;
      margin: 34px 0 0;
      color: rgba(246,241,234,.73);
      font-size: 18px;
      line-height: 1.75;
    }

    .build-hero-actions,
    .build-next-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 36px;
    }

    .build-primary-link,
    .build-secondary-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 19px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      text-decoration: none;
      transition: transform 160ms ease;
    }

    .build-primary-link {
      background: #FF3D9A;
      color: #0D0D10;
    }

    .build-secondary-link {
      border: 1px solid rgba(246,241,234,.22);
      color: #F6F1EA;
    }

    .build-primary-link:hover,
    .build-secondary-link:hover {
      transform: translateY(-2px);
    }

    .build-handnote,
    .build-current-note,
    .build-operator-note,
    .build-next-note {
      color: #FF3D9A;
      font-family: "Caveat", cursive;
      font-weight: 700;
    }

    .build-handnote {
      width: fit-content;
      margin: 42px 0 0 48%;
      font-size: 26px;
      transform: rotate(-5deg);
    }

    .build-status-card {
      padding: 28px;
      border: 1px solid rgba(255,61,154,.24);
      border-radius: 23px;
      background: #15151A;
      box-shadow: 0 28px 80px rgba(0,0,0,.32);
    }

    .build-status-top {
      display: flex;
      gap: 10px;
      align-items: center;
      color: #FF3D9A;
      font-size: 11px;
      letter-spacing: .12em;
    }

    .build-live-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #FF3D9A;
      box-shadow: 0 0 0 5px rgba(255,61,154,.12);
    }

    .build-status-main {
      padding: 36px 0 28px;
      border-bottom: 1px solid rgba(246,241,234,.11);
    }

    .build-status-main span {
      color: rgba(246,241,234,.5);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    .build-status-main h2 {
      margin-top: 10px;
      color: #F6F1EA;
      font-size: 56px;
      line-height: .92;
    }

    .build-status-meta > div {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 16px;
      padding: 17px 0;
      border-bottom: 1px solid rgba(246,241,234,.09);
      font-size: 12px;
    }

    .build-status-meta > div:last-child {
      border-bottom: 0;
    }

    .build-status-meta span {
      color: rgba(246,241,234,.45);
    }

    .build-status-meta strong {
      color: #F6F1EA;
      font-weight: 600;
    }

    .build-timeline,
    .build-lessons {
      padding: 88px 0 94px;
      background: #FBE6E6;
    }

    .build-section-heading {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 44px;
      align-items: start;
    }

    .build-section-mark {
      color: #FF3D9A;
      font-family: "Anton", sans-serif;
      font-size: 30px;
      line-height: 1;
    }

    .build-page h2 {
      margin-top: 12px;
      font-size: clamp(50px, 5.7vw, 84px);
      line-height: .95;
    }

    .build-timeline-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 36px;
      margin-top: 64px;
      padding-top: 4px;
    }

    .build-timeline-track::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 7px;
      right: 7px;
      height: 2px;
      background: #0D0D10;
    }

    .build-milestone {
      position: relative;
      padding-top: 34px;
    }

    .build-milestone-dot {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 18px;
      height: 18px;
      border: 2px solid #0D0D10;
      border-radius: 50%;
      background: #FBE6E6;
    }

    .build-milestone.is-done .build-milestone-dot {
      background: #0D0D10;
    }

    .build-milestone.is-now .build-milestone-dot {
      border-color: #FF3D9A;
      background: #FF3D9A;
    }

    .build-milestone > span {
      color: #FF3D9A;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    .build-milestone h3 {
      margin-top: 13px;
      font-size: 34px;
    }

    .build-milestone p {
      max-width: 380px;
      margin: 13px 0 0;
      color: rgba(13,13,16,.62);
      font-size: 13px;
      line-height: 1.7;
    }

    .build-current,
    .build-entries {
      padding: 110px 0 120px;
      background: #F6F1EA;
    }

    .build-current-grid,
    .build-lessons-grid,
    .build-next-grid {
      display: grid;
      grid-template-columns: minmax(340px,.9fr) minmax(0,1.1fr);
      gap: 78px;
      align-items: start;
    }

    .build-current-note {
      width: fit-content;
      margin: 28px 0 0 auto;
      font-size: 24px;
      transform: rotate(-5deg);
    }

    .build-current-board {
      border-top: 2px solid #0D0D10;
    }

    .build-current-row {
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 20px;
      align-items: start;
      padding: 22px 0;
      border-bottom: 1px solid rgba(13,13,16,.14);
    }

    .build-current-row > span,
    .build-entry-meta span,
    .build-entry-tag,
    .build-lessons-list span {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .build-current-row strong {
      font-size: 14px;
    }

    .build-current-row p {
      margin: 6px 0 0;
      color: rgba(13,13,16,.58);
      font-size: 12px;
      line-height: 1.65;
    }

    .build-current-row > b {
      padding: 7px 9px;
      border-radius: 999px;
      background: #0D0D10;
      color: #F6F1EA;
      font-size: 9px;
      letter-spacing: .08em;
    }

    .build-operator,
    .build-next {
      padding: 110px 0 116px;
      background: #0D0D10;
      color: #F6F1EA;
    }

    .build-section-heading-dark h2 {
      color: #F6F1EA;
    }

    .build-operator-grid {
      display: grid;
      grid-template-columns: minmax(280px,.65fr) minmax(0,1.35fr);
      gap: 68px;
      margin-top: 58px;
      align-items: start;
    }

    .build-operator-copy p {
      margin: 0 0 20px;
      color: rgba(246,241,234,.66);
      font-size: 15px;
      line-height: 1.85;
    }

    .build-operator-flow {
      display: grid;
      grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr 26px 1fr;
      gap: 7px;
      align-items: center;
    }

    .build-operator-flow > div {
      min-height: 130px;
      padding: 17px 14px;
      border: 1px solid rgba(246,241,234,.12);
      border-radius: 15px;
      background: #15151A;
    }

    .build-operator-flow > div span,
    .build-operator-result span {
      color: #FF3D9A;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .build-operator-flow > div strong {
      display: block;
      margin-top: 52px;
      font-family: "Anton", sans-serif;
      font-size: 22px;
      font-weight: 400;
    }

    .build-operator-flow > b {
      color: #FF3D9A;
      text-align: center;
    }

    .build-operator-result {
      display: grid;
      grid-template-columns: auto 1fr 40px auto 1fr;
      gap: 16px;
      align-items: center;
      margin-top: 20px;
      padding: 22px 24px;
      border-radius: 18px;
      background: #F6F1EA;
      color: #0D0D10;
    }

    .build-operator-result strong {
      font-size: 13px;
    }

    .build-operator-result em {
      color: #FF3D9A;
      font-size: 20px;
      font-style: normal;
      text-align: center;
    }

    .build-operator-note {
      width: fit-content;
      margin: 26px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .build-entry-list {
      margin-top: 62px;
      border-top: 2px solid #0D0D10;
    }

    .build-entry {
      display: grid;
      grid-template-columns: 150px minmax(0,1fr) auto;
      gap: 34px;
      align-items: start;
      padding: 32px 0;
      border-bottom: 1px solid rgba(13,13,16,.14);
    }

    .build-entry-meta small {
      display: block;
      margin-top: 7px;
      color: rgba(13,13,16,.46);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .09em;
    }

    .build-entry-content h3 {
      font-size: clamp(30px, 3.5vw, 48px);
      line-height: .98;
    }

    .build-entry-content p {
      max-width: 720px;
      margin: 13px 0 0;
      color: rgba(13,13,16,.62);
      font-size: 13px;
      line-height: 1.7;
    }

    .build-entry-tag {
      padding: 7px 9px;
      border: 1px solid rgba(13,13,16,.13);
      border-radius: 999px;
    }

    .build-entry-tag.is-current {
      border-color: #FF3D9A;
      background: #FF3D9A;
      color: #0D0D10;
    }

    .build-lessons-grid {
      grid-template-columns: minmax(340px,.9fr) minmax(0,1.1fr);
    }

    .build-lessons-list {
      border-top: 2px solid #0D0D10;
    }

    .build-lessons-list > div {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 18px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(13,13,16,.14);
    }

    .build-lessons-list strong {
      font-size: 14px;
      line-height: 1.55;
    }

    .build-next-grid h2 {
      color: #F6F1EA;
    }

    .build-next-copy p {
      max-width: 650px;
      margin: 0;
      color: rgba(246,241,234,.66);
      font-size: 15px;
      line-height: 1.85;
    }

    .build-next-note {
      width: fit-content;
      margin: 30px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    @media (max-width: 1120px) {
      .build-hero-grid {
        grid-template-columns: 1fr;
      }

      .build-status-card {
        max-width: 540px;
      }

      .build-current-grid,
      .build-lessons-grid,
      .build-next-grid {
        grid-template-columns: minmax(290px,.8fr) minmax(0,1.2fr);
        gap: 50px;
      }

      .build-operator-grid {
        grid-template-columns: 1fr;
      }

      .build-operator-flow {
        overflow-x: auto;
        padding-bottom: 8px;
      }
    }

    @media (max-width: 860px) {
      .build-timeline-track {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .build-timeline-track::before {
        top: 0;
        bottom: 0;
        left: 8px;
        right: auto;
        width: 2px;
        height: auto;
      }

      .build-milestone {
        padding: 0 0 0 42px;
      }

      .build-milestone-dot {
        top: 2px;
      }

      .build-current-grid,
      .build-lessons-grid,
      .build-next-grid {
        grid-template-columns: 1fr;
      }

      .build-entry {
        grid-template-columns: 110px 1fr;
      }

      .build-entry-tag {
        grid-column: 2;
        width: fit-content;
      }
    }

    @media (max-width: 720px) {
      .build-hero {
        padding: 82px 0 88px;
      }

      .build-hero h1 {
        font-size: clamp(52px, 14.7vw, 84px);
      }

      .build-lead {
        font-size: 16px;
      }

      .build-handnote {
        margin-left: 24%;
        font-size: 23px;
      }

      .build-section-heading {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .build-status-meta > div {
        grid-template-columns: 1fr;
        gap: 5px;
      }

      .build-current-row {
        grid-template-columns: 34px 1fr;
      }

      .build-current-row > b {
        grid-column: 2;
        width: fit-content;
      }

      .build-operator-flow {
        grid-template-columns: 1fr;
        overflow: visible;
      }

      .build-operator-flow > b {
        transform: rotate(90deg);
      }

      .build-operator-result {
        grid-template-columns: 1fr;
      }

      .build-operator-result em {
        transform: rotate(90deg);
      }

      .build-entry {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .build-entry-tag {
        grid-column: auto;
      }
    }

.origin-page {
      font-family: "Poppins", sans-serif;
      color: #0D0D10;
    }

    .origin-eyebrow,
    .origin-kicker {
      color: #FF3D9A;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .16em;
    }

    .origin-page h1,
    .origin-page h2,
    .origin-page h3 {
      margin: 0;
      font-family: "Anton", sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: .01em;
    }

    .origin-hero {
      padding: 118px 0 122px;
      background:
        radial-gradient(circle at 82% 36%, rgba(255,61,154,.12), transparent 30%),
        #0D0D10;
      color: #F6F1EA;
    }

    .origin-hero-grid {
      display: grid;
      grid-template-columns: minmax(0,1.08fr) 470px;
      gap: 82px;
      align-items: center;
    }

    .origin-hero h1 {
      margin-top: 18px;
      font-size: clamp(76px, 8vw, 132px);
      line-height: .88;
    }

    .origin-hero h1 span {
      color: #FF3D9A;
    }

    .origin-lead {
      max-width: 730px;
      margin: 34px 0 0;
      color: rgba(246,241,234,.73);
      font-size: 18px;
      line-height: 1.75;
    }

    .origin-hero-actions,
    .origin-became-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 36px;
    }

    .origin-primary-link,
    .origin-secondary-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 19px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      text-decoration: none;
      transition: transform 160ms ease;
    }

    .origin-primary-link {
      background: #FF3D9A;
      color: #0D0D10;
    }

    .origin-secondary-link {
      border: 1px solid rgba(246,241,234,.22);
      color: #F6F1EA;
    }

    .origin-primary-link:hover,
    .origin-secondary-link:hover {
      transform: translateY(-2px);
    }

    .origin-handnote,
    .origin-turn-note,
    .origin-workflow-note,
    .origin-name-note,
    .origin-end-note {
      color: #FF3D9A;
      font-family: "Caveat", cursive;
      font-weight: 700;
    }

    .origin-handnote {
      width: fit-content;
      margin: 42px 0 0 44%;
      font-size: 26px;
      transform: rotate(-5deg);
    }

    .origin-hero-board {
      position: relative;
      min-height: 520px;
      border: 1px solid rgba(255,61,154,.22);
      border-radius: 26px;
      background: #15151A;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(0,0,0,.32);
    }

    .origin-chaos-note {
      position: absolute;
      padding: 11px 14px;
      border: 1px solid rgba(246,241,234,.12);
      border-radius: 12px;
      background: rgba(13,13,16,.8);
      color: rgba(246,241,234,.68);
      font-family: "Caveat", cursive;
      font-size: 20px;
    }

    .note-a { top: 34px; left: 28px; transform: rotate(-6deg); }
    .note-b { top: 94px; right: 24px; transform: rotate(4deg); }
    .note-c { bottom: 92px; left: 24px; transform: rotate(5deg); }
    .note-d { bottom: 30px; right: 28px; transform: rotate(-5deg); }

    .origin-board-center {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 72%;
      transform: translate(-50%,-50%);
      padding: 28px;
      border-radius: 18px;
      background: #F6F1EA;
      color: #0D0D10;
      text-align: center;
    }

    .origin-board-center span {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    .origin-board-center strong {
      display: block;
      margin-top: 14px;
      font-family: "Anton", sans-serif;
      font-size: 36px;
      font-weight: 400;
      line-height: .95;
    }

    .origin-before,
    .origin-name {
      padding: 84px 0;
      background: #FBE6E6;
    }

    .origin-before-grid,
    .origin-turn-grid,
    .origin-operator-grid,
    .origin-name-grid,
    .origin-became-grid {
      display: grid;
      grid-template-columns: 62px minmax(0,.9fr) minmax(0,1.1fr);
      gap: 44px;
      align-items: start;
    }

    .origin-section-mark {
      color: #FF3D9A;
      font-family: "Anton", sans-serif;
      font-size: 30px;
      line-height: 1;
    }

    .origin-page h2 {
      margin-top: 12px;
      font-size: clamp(50px, 5.8vw, 86px);
      line-height: .95;
    }

    .origin-before-copy p,
    .origin-turn-copy > p,
    .origin-operator-copy > p,
    .origin-name-copy > p,
    .origin-became-copy > p,
    .origin-end-inner > p {
      margin: 0 0 20px;
      color: rgba(13,13,16,.68);
      font-size: 15px;
      line-height: 1.85;
    }

    .origin-turn,
    .origin-operator,
    .origin-end {
      padding: 110px 0 120px;
      background: #F6F1EA;
    }

    .origin-turn-grid,
    .origin-operator-grid,
    .origin-name-grid,
    .origin-became-grid {
      grid-template-columns: minmax(340px,.9fr) minmax(0,1.1fr);
      gap: 76px;
    }

    .origin-question-card {
      margin-top: 28px;
      padding: 24px 26px;
      border: 1px solid rgba(13,13,16,.11);
      border-radius: 18px;
      background: #FBF7F1;
    }

    .origin-question-card span {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .origin-question-card strong {
      display: block;
      margin-top: 8px;
      font-size: 18px;
      line-height: 1.5;
    }

    .origin-question-card.is-new {
      background: #0D0D10;
      color: #F6F1EA;
    }

    .origin-turn-arrow {
      color: #FF3D9A;
      text-align: center;
      font-size: 28px;
      line-height: 38px;
    }

    .origin-turn-note {
      width: fit-content;
      margin: 24px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .origin-workflow,
    .origin-became {
      padding: 110px 0 118px;
      background: #0D0D10;
      color: #F6F1EA;
    }

    .origin-section-heading {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 44px;
      align-items: start;
    }

    .origin-section-heading-dark h2,
    .origin-became h2 {
      color: #F6F1EA;
    }

    .origin-workflow-grid {
      display: grid;
      grid-template-columns: repeat(5,minmax(0,1fr));
      gap: 12px;
      margin-top: 58px;
    }

    .origin-workflow-grid article {
      min-height: 250px;
      padding: 24px 20px;
      border: 1px solid rgba(246,241,234,.12);
      border-radius: 18px;
      background: #15151A;
    }

    .origin-workflow-grid article span {
      color: #FF3D9A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .origin-workflow-grid h3 {
      margin-top: 86px;
      font-size: 30px;
    }

    .origin-workflow-grid p {
      margin: 10px 0 0;
      color: rgba(246,241,234,.55);
      font-size: 12px;
      line-height: 1.65;
    }

    .origin-workflow-note {
      width: fit-content;
      margin: 28px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .origin-operator-flow {
      display: grid;
      grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr 28px 1fr;
      gap: 8px;
      align-items: center;
      margin-top: 34px;
    }

    .origin-operator-flow > div {
      min-height: 86px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border: 1px solid rgba(13,13,16,.12);
      border-radius: 14px;
      background: #FBF7F1;
      font-size: 10px;
      font-weight: 700;
    }

    .origin-operator-flow > b {
      color: #FF3D9A;
      text-align: center;
    }

    .origin-inline-link {
      display: inline-block;
      margin-top: 26px;
      color: #FF3D9A;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
    }

    .origin-name-note {
      width: fit-content;
      margin: 28px 0 0 auto;
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .origin-became-copy > p {
      color: rgba(246,241,234,.66);
    }

    .origin-end {
      text-align: center;
    }

    .origin-end-inner {
      max-width: 1050px;
      margin: 0 auto;
    }

    .origin-end h2 {
      font-size: clamp(58px, 7vw, 104px);
      line-height: .92;
    }

    .origin-end h2 span {
      color: #FF3D9A;
    }

    .origin-end-inner > p {
      max-width: 680px;
      margin: 30px auto 0;
    }

    .origin-end-note {
      width: fit-content;
      margin: 32px auto 0;
      font-size: 27px;
      transform: rotate(-4deg);
    }

    @media (max-width: 1120px) {
      .origin-hero-grid {
        grid-template-columns: 1fr;
      }

      .origin-hero-board {
        max-width: 660px;
      }

      .origin-before-grid {
        grid-template-columns: 52px 1fr;
      }

      .origin-before-copy {
        grid-column: 2;
      }

      .origin-workflow-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
      }
    }

    @media (max-width: 880px) {
      .origin-turn-grid,
      .origin-operator-grid,
      .origin-name-grid,
      .origin-became-grid {
        grid-template-columns: 1fr;
        gap: 44px;
      }

      .origin-workflow-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
      }
    }

    @media (max-width: 720px) {
      .origin-hero {
        padding: 82px 0 88px;
      }

      .origin-hero h1 {
        font-size: clamp(58px, 17vw, 92px);
      }

      .origin-lead {
        font-size: 16px;
      }

      .origin-handnote {
        margin-left: 24%;
        font-size: 23px;
      }

      .origin-hero-board {
        min-height: 470px;
      }

      .origin-chaos-note {
        font-size: 17px;
      }

      .origin-before-grid,
      .origin-section-heading {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .origin-before-copy {
        grid-column: auto;
      }

      .origin-workflow-grid {
        grid-template-columns: 1fr;
      }

      .origin-workflow-grid article {
        min-height: 205px;
      }

      .origin-workflow-grid h3 {
        margin-top: 58px;
      }

      .origin-operator-flow {
        grid-template-columns: 1fr;
      }

      .origin-operator-flow > b {
        transform: rotate(90deg);
      }
    }

body {
      background: #0D0D10;
    }

    #site.site {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .nav-dropdown-menu a[aria-current="page"] {
      color: #FF3D9A !important;
    }

    .privacy-page {
      font-family: "Poppins", sans-serif;
      color: #0D0D10;
    }

    .privacy-hero {
      position: relative;
      overflow: hidden;
      padding: 116px 0 112px;
      background:
        radial-gradient(circle at 83% 40%, rgba(255, 61, 154, .11), transparent 28%),
        #0D0D10;
    }

    .privacy-hero::after {
      content: "";
      position: absolute;
      right: -150px;
      bottom: -210px;
      width: 480px;
      height: 480px;
      border: 1px solid rgba(255, 61, 154, .16);
      border-radius: 50%;
      pointer-events: none;
    }

    .privacy-hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
      gap: 82px;
      align-items: end;
    }

    .privacy-eyebrow,
    .privacy-kicker,
    .privacy-status-label,
    .privacy-toc-title {
      color: #FF3D9A;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .16em;
    }

    .privacy-hero h1,
    .privacy-section h2,
    .privacy-short-card h2 {
      margin: 0;
      font-family: "Anton", sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: .01em;
    }

    .privacy-hero h1 {
      margin-top: 20px;
      color: #F6F1EA;
      font-size: clamp(72px, 8.4vw, 136px);
      line-height: .88;
    }

    .privacy-hero h1 span {
      color: #FF3D9A;
    }

    .privacy-lead {
      max-width: 760px;
      margin: 34px 0 0;
      color: rgba(246, 241, 234, .76);
      font-size: 18px;
      line-height: 1.75;
    }

    .privacy-handnote {
      display: inline-block;
      margin: 28px 0 0 68%;
      color: #FF3D9A;
      font-family: "Caveat", cursive;
      font-size: 28px;
      font-weight: 700;
      transform: rotate(-7deg);
    }

    .privacy-status-card {
      padding: 28px;
      border: 1px solid rgba(255, 61, 154, .2);
      border-radius: 22px;
      background: rgba(21, 21, 26, .76);
      backdrop-filter: blur(10px);
      box-shadow: 0 22px 60px rgba(0,0,0,.24);
    }

    .privacy-status-label {
      margin-bottom: 18px;
    }

    .privacy-status-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 18px;
      padding: 15px 0;
      border-top: 1px solid rgba(246, 241, 234, .09);
      color: rgba(246, 241, 234, .62);
      font-size: 13px;
      line-height: 1.45;
    }

    .privacy-status-row strong,
    .privacy-status-row a {
      color: #F6F1EA;
      font-weight: 600;
      text-decoration: none;
      overflow-wrap: anywhere;
    }

    .privacy-short {
      padding: 64px 0;
      background: #FBE6E6;
    }

    .privacy-short-card {
      display: grid;
      grid-template-columns: 64px minmax(280px, .75fr) minmax(0, 1.25fr);
      gap: 42px;
      align-items: start;
      padding: 44px 46px;
      border: 1px solid rgba(13,13,16,.08);
      border-radius: 24px;
      background: rgba(246, 241, 234, .62);
    }

    .privacy-section-number {
      color: #FF3D9A;
      font-family: "Anton", sans-serif;
      font-size: 30px;
      line-height: 1;
    }

    .privacy-short-card h2 {
      margin-top: 10px;
      font-size: clamp(36px, 4vw, 62px);
      line-height: .98;
    }

    .privacy-short-points {
      display: grid;
      gap: 0;
    }

    .privacy-short-points p {
      position: relative;
      margin: 0;
      padding: 17px 0 17px 28px;
      border-bottom: 1px solid rgba(13,13,16,.09);
      font-size: 15px;
      line-height: 1.65;
    }

    .privacy-short-points p::before {
      content: "→";
      position: absolute;
      left: 0;
      color: #FF3D9A;
      font-weight: 700;
    }

    .privacy-body {
      padding: 96px 0 128px;
      background: #F6F1EA;
    }

    .privacy-layout {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 90px;
      align-items: start;
    }

    .privacy-toc {
      position: sticky;
      top: 34px;
      display: grid;
      gap: 0;
      padding: 24px 0;
      border-top: 2px solid #0D0D10;
      border-bottom: 1px solid rgba(13,13,16,.18);
    }

    .privacy-toc-title {
      padding-bottom: 16px;
    }

    .privacy-toc a {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 8px;
      padding: 9px 0;
      color: rgba(13,13,16,.55);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      text-decoration: none;
      transition: color 160ms ease, transform 160ms ease;
    }

    .privacy-toc a:hover {
      color: #FF3D9A;
      transform: translateX(3px);
    }

    .privacy-content {
      min-width: 0;
    }

    .privacy-section {
      scroll-margin-top: 32px;
      padding: 0 0 86px;
      margin: 0 0 86px;
      border-bottom: 1px solid rgba(13,13,16,.13);
    }

    .privacy-section:last-child {
      margin-bottom: 0;
      border-bottom: 0;
    }

    .privacy-section .privacy-kicker {
      margin-top: 14px;
    }

    .privacy-section h2 {
      max-width: 930px;
      margin-top: 14px;
      font-size: clamp(44px, 5.7vw, 82px);
      line-height: .96;
    }

    .privacy-section > p {
      max-width: 850px;
      margin: 27px 0 0;
      color: rgba(13,13,16,.72);
      font-size: 15px;
      line-height: 1.8;
    }

    .privacy-data-grid,
    .pinterest-policy-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 34px;
    }

    .privacy-data-grid article,
    .pinterest-policy-grid article {
      padding: 28px;
      border: 1px solid rgba(13,13,16,.11);
      border-radius: 18px;
      background: #FBF7F1;
    }

    .privacy-data-grid h3,
    .pinterest-policy-grid h3 {
      margin: 0 0 12px;
      color: #FF3D9A;
      font-size: 13px;
      letter-spacing: .08em;
    }

    .privacy-data-grid p,
    .pinterest-policy-grid p {
      margin: 0;
      color: rgba(13,13,16,.68);
      font-size: 14px;
      line-height: 1.72;
    }

    .privacy-flow {
      margin-top: 34px;
      border-top: 1px solid rgba(13,13,16,.14);
    }

    .privacy-flow > div {
      display: grid;
      grid-template-columns: minmax(160px, .8fr) 40px minmax(0, 1.2fr);
      gap: 18px;
      align-items: center;
      padding: 18px 0;
      border-bottom: 1px solid rgba(13,13,16,.14);
      font-size: 14px;
    }

    .privacy-flow span {
      color: rgba(13,13,16,.58);
    }

    .privacy-flow b {
      color: #FF3D9A;
      font-size: 20px;
    }

    .privacy-flow strong {
      font-weight: 600;
    }

    .privacy-section-dark {
      margin-left: -36px;
      margin-right: -36px;
      padding: 52px 36px 60px;
      border: 0;
      border-radius: 24px;
      background: #0D0D10;
    }

    .privacy-section-dark h2 {
      color: #F6F1EA;
    }

    .privacy-section-dark > p {
      color: rgba(246,241,234,.7);
    }

    .pinterest-policy-block {
      position: relative;
    }

    .pinterest-policy-block::before {
      content: "CONNECTED SERVICE";
      position: absolute;
      top: 0;
      right: 0;
      padding: 8px 12px;
      border-radius: 999px;
      background: #0D0D10;
      color: #F6F1EA;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .12em;
    }

    .privacy-contact {
      position: relative;
      overflow: hidden;
      padding: 52px;
      border: 0;
      border-radius: 24px;
      background: #FBE6E6;
    }

    .privacy-contact::after {
      content: "";
      position: absolute;
      width: 230px;
      height: 230px;
      right: -90px;
      bottom: -125px;
      border: 1px solid rgba(255,61,154,.32);
      border-radius: 50%;
    }

    .privacy-contact-button {
      position: relative;
      z-index: 1;
      display: inline-flex;
      margin-top: 30px;
      padding: 15px 20px;
      border-radius: 999px;
      background: #FF3D9A;
      color: #0D0D10;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: transform 160ms ease;
    }

    .privacy-contact-button:hover {
      transform: translateY(-2px);
    }

    .privacy-final-note {
      position: relative;
      z-index: 1;
      width: fit-content;
      margin: 30px 0 0 auto;
      color: #FF3D9A;
      font-family: "Caveat", cursive;
      font-size: 27px;
      font-weight: 700;
      transform: rotate(-5deg);
    }

    @media (max-width: 1020px) {
      .privacy-hero-grid,
      .privacy-layout {
        grid-template-columns: 1fr;
      }

      .privacy-hero-grid {
        gap: 48px;
      }

      .privacy-status-card {
        max-width: 580px;
      }

      .privacy-short-card {
        grid-template-columns: 50px 1fr;
      }

      .privacy-short-points {
        grid-column: 2;
      }

      .privacy-toc {
        position: static;
        grid-template-columns: repeat(2, minmax(0,1fr));
        column-gap: 24px;
      }

      .privacy-toc-title {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 720px) {
      .privacy-hero {
        padding: 82px 0 72px;
      }

      .privacy-hero h1 {
        font-size: clamp(58px, 18vw, 94px);
      }

      .privacy-lead {
        font-size: 16px;
      }

      .privacy-handnote {
        margin-left: 48%;
        font-size: 24px;
      }

      .privacy-short-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 24px;
      }

      .privacy-short-points {
        grid-column: auto;
      }

      .privacy-layout {
        gap: 54px;
      }

      .privacy-toc {
        grid-template-columns: 1fr;
      }

      .privacy-data-grid,
      .pinterest-policy-grid {
        grid-template-columns: 1fr;
      }

      .privacy-flow > div {
        grid-template-columns: 1fr 28px;
      }

      .privacy-flow strong {
        grid-column: 1 / -1;
      }

      .privacy-section-dark {
        margin-left: 0;
        margin-right: 0;
        padding: 36px 24px 42px;
      }

      .privacy-contact {
        padding: 36px 24px;
      }

      .privacy-contact-button {
        max-width: 100%;
        overflow-wrap: anywhere;
      }
    }

.privacy-status-row strong,
    .privacy-status-row a {
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    .privacy-status-row {
      grid-template-columns: 100px minmax(0, 1fr) !important;
      gap: 14px !important;
    }

    .privacy-status-row a {
      font-size: 12px !important;
      letter-spacing: -0.01em;
    }

    .privacy-hero::after,
    .privacy-contact::after,
    .contact-route-card::after {
      content: none !important;
      display: none !important;
    }

    .privacy-toc {
      top: 138px !important;
    }

    .privacy-section {
      scroll-margin-top: 150px !important;
    }

    @media (max-width: 1020px) {
      .privacy-toc {
        top: auto !important;
      }
    }

@media (min-width: 1280px) {
      .privacy-hero-grid {
        grid-template-columns: minmax(0, 1fr) 610px !important;
        gap: 56px !important;
      }
    }

    @media (min-width: 1021px) and (max-width: 1279px) {
      .privacy-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
      }

      .privacy-status-card {
        width: min(610px, 100%) !important;
        max-width: none !important;
      }
    }

    .privacy-status-card {
      box-sizing: border-box !important;
    }

    .privacy-status-row {
      grid-template-columns: 150px minmax(0, 1fr) !important;
      gap: 22px !important;
    }

    .privacy-status-row a,
    .privacy-status-row strong {
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: keep-all !important;
    }

    .privacy-status-row a {
      font-size: 13px !important;
      letter-spacing: -0.015em !important;
    }

    .privacy-toc {
      top: 196px !important;
    }

    .privacy-section {
      scroll-margin-top: 208px !important;
    }

    .privacy-hero::before,
    .privacy-hero::after,
    .privacy-contact::before,
    .privacy-contact::after,
    .contact-route-card::before,
    .contact-route-card::after {
      content: none !important;
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      border: 0 !important;
      background: none !important;
      box-shadow: none !important;
      opacity: 0 !important;
    }

    .privacy-contact,
    .contact-route-card {
      background-image: none !important;
    }

    @media (max-width: 1020px) {
      .privacy-toc {
        top: auto !important;
      }

      .privacy-section {
        scroll-margin-top: 120px !important;
      }

      .privacy-status-row {
        grid-template-columns: 130px minmax(0, 1fr) !important;
      }
    }

    @media (max-width: 620px) {
      .privacy-status-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
      }

      .privacy-status-row a,
      .privacy-status-row strong {
        white-space: normal !important;
      }
    }

@media (min-width: 1180px) {
      .privacy-hero-grid {
        grid-template-columns: minmax(0, 1.45fr) 430px !important;
        gap: 72px !important;
        align-items: end !important;
      }

      .privacy-status-card {
        width: 430px !important;
        max-width: 430px !important;
        justify-self: end !important;
      }

      .privacy-status-row {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        gap: 16px !important;
      }

      .privacy-status-row a {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        letter-spacing: -0.025em !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
      }
    }

    @media (min-width: 1021px) and (max-width: 1179px) {
      .privacy-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
      }

      .privacy-status-card {
        width: min(430px, 100%) !important;
        max-width: 430px !important;
        justify-self: start !important;
      }
    }

    .privacy-hero::before,
    .privacy-hero::after,
    .privacy-contact::before,
    .privacy-contact::after,
    .contact-route-card::before,
    .contact-route-card::after {
      content: none !important;
      display: none !important;
    }

    .privacy-toc {
      top: 196px !important;
    }

    .privacy-section {
      scroll-margin-top: 208px !important;
    }

    @media (max-width: 1020px) {
      .privacy-toc {
        top: auto !important;
      }
    }

.terms-hero {
      background:
        radial-gradient(circle at 82% 34%, rgba(255, 61, 154, .10), transparent 30%),
        #0D0D10;
    }

    .terms-rule-grid article {
      min-height: 160px;
    }

.contact-hero {
      background:
        radial-gradient(circle at 79% 37%, rgba(255, 61, 154, .13), transparent 29%),
        #0D0D10;
    }

    .contact-inbox-card p {
      margin: 22px 0 0;
      padding-top: 18px;
      border-top: 1px solid rgba(246,241,234,.1);
      color: rgba(246,241,234,.56);
      font-size: 12px;
      line-height: 1.7;
    }

    .contact-big-email {
      display: block;
      color: #F6F1EA;
      font-family: "Anton", sans-serif;
      font-size: clamp(30px, 3vw, 46px);
      line-height: 1.02;
      text-decoration: none;
      overflow-wrap: anywhere;
      transition: color 160ms ease;
    }

    .contact-big-email:hover {
      color: #FF3D9A;
    }

    .contact-body {
      padding-top: 94px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .contact-route-card {
      position: relative;
      min-height: 390px;
      display: flex;
      flex-direction: column;
      padding: 38px;
      border: 1px solid rgba(13,13,16,.10);
      border-radius: 22px;
      background: #FBF7F1;
      overflow: hidden;
    }

    .contact-route-card::after {
      content: "";
      position: absolute;
      right: -60px;
      bottom: -100px;
      width: 190px;
      height: 190px;
      border: 1px solid rgba(255,61,154,.22);
      border-radius: 50%;
      pointer-events: none;
    }

    .contact-route-card h2,
    .contact-safety-note h2 {
      margin: 16px 0 0;
      font-family: "Anton", sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      line-height: .97;
    }

    .contact-route-card h2 {
      max-width: 520px;
      font-size: clamp(42px, 4.6vw, 68px);
    }

    .contact-route-card p {
      max-width: 560px;
      margin: 22px 0 0;
      color: rgba(13,13,16,.66);
      font-size: 14px;
      line-height: 1.75;
    }

    .contact-route-card > a {
      position: relative;
      z-index: 1;
      width: fit-content;
      margin-top: auto;
      padding-top: 34px;
      color: #FF3D9A;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .03em;
      text-decoration: none;
    }

    .contact-route-card-dark {
      background: #0D0D10;
      border-color: #0D0D10;
    }

    .contact-route-card-dark h2 {
      color: #F6F1EA;
    }

    .contact-route-card-dark p {
      color: rgba(246,241,234,.66);
    }

    .contact-handnote {
      position: absolute;
      right: 38px;
      bottom: 38px;
      max-width: 200px;
      color: #FF3D9A;
      font-family: "Caveat", cursive;
      font-size: 23px;
      font-weight: 700;
      line-height: 1;
      transform: rotate(-6deg);
    }

    .contact-route-card-dark > a {
      padding-bottom: 72px;
    }

    .contact-safety-note {
      margin-top: 70px;
      padding: 52px;
      border-top: 2px solid #0D0D10;
      border-bottom: 1px solid rgba(13,13,16,.15);
    }

    .contact-safety-note h2 {
      margin-top: 14px;
      font-size: clamp(44px, 5vw, 72px);
    }

    .contact-safety-note p {
      max-width: 780px;
      margin: 22px 0 0;
      color: rgba(13,13,16,.66);
      font-size: 14px;
      line-height: 1.8;
    }

    @media (max-width: 840px) {
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .contact-route-card {
        min-height: 330px;
      }

      .contact-handnote {
        right: 28px;
        bottom: 28px;
      }

      .contact-safety-note {
        padding: 38px 0;
      }
    }

.contact-big-email {
      font-size: clamp(28px, 2.45vw, 38px) !important;
      line-height: 1.05 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }

    @media (max-width: 720px) {
      .contact-big-email {
        white-space: normal;
        font-size: clamp(26px, 7vw, 34px) !important;
      }
    }

@media (min-width: 1280px) {
      .contact-inbox-card {
        width: 610px !important;
        max-width: 610px !important;
      }

      .contact-big-email {
        display: block !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
        font-size: 34px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.02em !important;
      }
    }

    @media (min-width: 1021px) and (max-width: 1279px) {
      .contact-inbox-card {
        width: min(610px, 100%) !important;
        max-width: none !important;
      }

      .contact-big-email {
        white-space: nowrap !important;
        font-size: 34px !important;
      }
    }

    @media (max-width: 720px) {
      .contact-big-email {
        white-space: normal !important;
      }
    }

@media (min-width: 1180px) {
      .contact-hero .privacy-hero-grid {
        grid-template-columns: minmax(0, 1.35fr) 480px !important;
        gap: 68px !important;
      }

      .contact-inbox-card {
        width: 480px !important;
        max-width: 480px !important;
        justify-self: end !important;
      }

      .contact-big-email {
        width: 100% !important;
        font-size: 27px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.035em !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
      }
    }

    @media (min-width: 1021px) and (max-width: 1179px) {
      .contact-inbox-card {
        width: min(480px, 100%) !important;
        max-width: 480px !important;
      }

      .contact-big-email {
        font-size: 27px !important;
        white-space: nowrap !important;
      }
    }

    @media (max-width: 720px) {
      .contact-big-email {
        font-size: clamp(25px, 7vw, 33px) !important;
        white-space: normal !important;
      }
    }

.site-header {
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      width: 100% !important;
      box-sizing: border-box !important;
      background: rgba(13, 13, 16, .97) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .site-logo {
      cursor: default !important;
      outline: none !important;
      box-shadow: none !important;
    }

    .desktop-nav a[aria-current="page"] {
      color: #FF3D9A !important;
    }

    .nav-dropdown.is-current-group > .nav-dropdown-button {
      color: #F6F1EA !important;
    }

    .footer-home {
      color: inherit !important;
      text-decoration: none !important;
    }

    .footer-home:hover {
      color: #FF3D9A !important;
    }

    .footer-home:focus-visible,
    .desktop-nav a:focus-visible,
    .nav-dropdown-button:focus-visible,
    .mobile-menu-button:focus-visible {
      outline: 2px solid #FF3D9A !important;
      outline-offset: 4px !important;
      border-radius: 4px;
    }

    .mobile-menu-button {
      display: none !important;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid rgba(255, 61, 154, .30);
      border-radius: 14px;
      background: #15151A;
      color: #FF3D9A;
      font: inherit;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .mobile-menu-icon {
      display: block;
      font-size: 21px;
      line-height: 1;
    }

    @media (max-width: 1180px) {
      .site-header {
        position: sticky !important;
        top: 0 !important;
        align-items: center !important;
        padding: 18px 22px !important;
        gap: 18px !important;
      }

      .header-brand {
        min-width: 0;
        max-width: calc(100% - 64px) !important;
      }

      .header-tagline {
        display: none !important;
      }

      .mobile-menu-button {
        display: inline-flex !important;
        margin-left: auto !important;
      }

      .desktop-nav {
        display: none !important;
        position: absolute !important;
        z-index: 1100 !important;
        top: calc(100% + 1px) !important;
        left: 16px !important;
        right: 16px !important;
        max-height: calc(100vh - 94px);
        overflow-y: auto;
        margin: 0 !important;
        padding: 18px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        border: 1px solid rgba(255, 61, 154, .28);
        border-radius: 18px;
        background: #15151A;
        box-shadow: 0 24px 70px rgba(0,0,0,.42);
      }

      body.mms-nav-open .desktop-nav {
        display: flex !important;
      }

      body.mms-nav-open {
        overflow: hidden;
      }

      .desktop-nav > a:not(.nav-cta) {
        display: none !important;
      }

      .desktop-nav .nav-dropdown {
        display: block !important;
        width: 100%;
      }

      .nav-dropdown-button {
        width: 100% !important;
        min-height: 50px;
        justify-content: space-between !important;
        padding: 0 4px !important;
        border-bottom: 1px solid rgba(246, 241, 234, .09) !important;
      }

      .nav-dropdown-menu {
        position: static !important;
        inset: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 0 10px 14px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
      }

      .nav-dropdown-menu a {
        padding: 8px 0 !important;
      }

      .desktop-nav .nav-cta {
        display: inline-flex !important;
        width: 100%;
        min-height: 48px;
        margin-top: 12px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
    }

    @media (max-width: 720px) {
      .site-header {
        padding: 15px 16px !important;
      }

      .site-logo {
        font-size: 18px !important;
        line-height: 1.1 !important;
      }

      .desktop-nav {
        left: 10px !important;
        right: 10px !important;
        max-height: calc(100vh - 82px);
        padding: 15px !important;
      }

      .footer-bottom {
        gap: 12px !important;
        flex-wrap: wrap !important;
      }

      .footer-home,
      .footer-tagline {
        max-width: 100%;
      }
    }

/* ---------- final integration normalization ---------- */
body.page-home #site.site { opacity:0 !important; visibility:hidden !important; pointer-events:none; }
body.page-home #site.site.is-visible { opacity:1 !important; visibility:visible !important; pointer-events:auto; }
body:not(.page-home) #site.site { display:block !important; opacity:1 !important; visibility:visible !important; transform:none !important; }

/* On the real Origin Story page the downward text arrow has its own name so the
   homepage hand-drawn SVG remains independent. */
.origin-turn-arrow { color:var(--mms-pink); text-align:center; font-size:28px; line-height:38px; }

/* Shared dropdown visibility is explicit in one place. */
.nav-dropdown-menu { display:none; }
.nav-dropdown.is-open > .nav-dropdown-menu { display:grid; }

/* No Products link is part of the current public navigation. */


/* ============================================================
   FINAL INTEGRATION GUARDS
   ============================================================ */

/* Navbar brand links back to the homepage while keeping the approved visual style. */
.site-logo {
  opacity: 1 !important;
  cursor: pointer !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.site-logo:hover {
  opacity: .82 !important;
}

.site-logo:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

.site-logo:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  text-decoration-color: var(--mms-pink) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* ============================================================
   V6 — DESKTOP READABILITY PASS
   ------------------------------------------------------------
   Goal: preserve the approved composition and display typography,
   while improving small UI/body copy on modern desktop monitors.
   Intro typography is intentionally excluded.
   ============================================================ */

@media (min-width: 1180px) {
  /* Shared navigation + readable supporting copy */
  .desktop-nav,
  .nav-dropdown-button,
  .header-tagline {
    font-size: 14px !important;
  }

  .nav-dropdown-menu a,
  .nav-cta {
    font-size: 13px !important;
  }

  .eyebrow,
  .platform-eyebrow,
  .platform-kicker,
  .platform-demo-label,
  .how-eyebrow,
  .how-kicker,
  .build-eyebrow,
  .build-kicker,
  .origin-eyebrow,
  .origin-kicker,
  .privacy-eyebrow,
  .privacy-kicker,
  .privacy-status-label,
  .privacy-toc-title {
    font-size: 13px !important;
  }

  .section-lead { font-size: 17px !important; }
  .section-subtle { font-size: 15px !important; }
  .hero-lead { font-size: 19px !important; }
  .hero-body { font-size: 15.5px !important; }
  .button { font-size: 13px !important; }

  /* Homepage system demo */
  .operator-demo-objective p { font-size: 14px !important; }
  .operator-role strong { font-size: 13px !important; }
  .operator-role small { font-size: 10px !important; }
  .operator-role p { font-size: 11px !important; }
  .operator-status > span,
  .operator-status-meta { font-size: 10px !important; }

  .how-step h3 { font-size: 13px !important; }
  .how-step p { font-size: 13px !important; }
  .comparison-column p { font-size: 14px !important; }
  .build-public p { font-size: 14px !important; }
  .text-link { font-size: 13px !important; }
  .timeline-item span { font-size: 12px !important; }
  .timeline-item strong { font-size: 13px !important; }
  .timeline-item p { font-size: 12px !important; max-width: 220px; }
  .number { font-size: 12px !important; }
  .flow-label { font-size: 11px !important; }
  .operator-types p { font-size: 14px !important; }
  .origin-copy p { font-size: 15px !important; }
  .integrations-grid p { font-size: 15px !important; }

  /* Platform */
  .platform-primary-link,
  .platform-secondary-link { font-size: 13px !important; }
  .platform-demo-objective span,
  .platform-output-card span,
  .platform-role-card span,
  .platform-workflow-step span,
  .platform-state-row small { font-size: 11px !important; }
  .platform-demo-objective strong,
  .platform-output-card strong,
  .platform-control-list strong,
  .platform-workflow-step strong { font-size: 15px !important; }
  .platform-role-card small,
  .platform-output-status { font-size: 10px !important; }
  .platform-difference-copy p,
  .platform-control-copy > p,
  .platform-workflow-intro p { font-size: 16px !important; }
  .platform-architecture-card > span,
  .platform-control-list span { font-size: 12px !important; }
  .platform-architecture-card p,
  .platform-state-row p { font-size: 14px !important; }
  .platform-workflow-intro a { font-size: 13px !important; }
  .platform-state-row strong { font-size: 16px !important; }

  /* How it works */
  .how-primary-link,
  .how-secondary-link { font-size: 13px !important; }
  .how-diagram-step span,
  .how-diagram-step small,
  .how-context-card span,
  .how-example-objective span,
  .how-example-result span,
  .how-example-flow article span,
  .how-control-board span { font-size: 11px !important; }
  .how-diagram-step strong,
  .how-example-objective strong,
  .how-example-result strong,
  .how-control-board strong { font-size: 15px !important; }
  .how-flow-copy p,
  .how-control-copy > p,
  .how-failure-copy > p { font-size: 16px !important; }
  .how-context-card p { font-size: 13.5px !important; }
  .how-example-flow p,
  .how-failure-path > div { font-size: 12.5px !important; }
  .how-result-pill { font-size: 10.5px !important; }

  /* Build Log */
  .build-primary-link,
  .build-secondary-link { font-size: 13px !important; }
  .build-status-top,
  .build-milestone > span { font-size: 12px !important; }
  .build-status-main span,
  .build-current-row > span,
  .build-entry-meta span,
  .build-entry-tag,
  .build-lessons-list span,
  .build-entry-meta small { font-size: 11px !important; }
  .build-status-meta > div { font-size: 13px !important; }
  .build-milestone p,
  .build-entry-content p { font-size: 14px !important; }
  .build-current-row strong,
  .build-lessons-list strong { font-size: 15px !important; }
  .build-current-row p { font-size: 13px !important; }
  .build-current-row > b,
  .build-operator-flow > div span,
  .build-operator-result span { font-size: 10.5px !important; }
  .build-operator-copy p,
  .build-next-copy p { font-size: 16px !important; }
  .build-operator-result strong { font-size: 14px !important; }

  /* Origin Story */
  .origin-primary-link,
  .origin-secondary-link,
  .origin-inline-link { font-size: 13px !important; }
  .origin-board-center span,
  .origin-question-card span,
  .origin-workflow-grid article span,
  .origin-operator-flow > div { font-size: 11px !important; }
  .origin-before-copy p,
  .origin-turn-copy > p,
  .origin-operator-copy > p,
  .origin-name-copy > p,
  .origin-became-copy > p,
  .origin-end-inner > p { font-size: 16px !important; }
  .origin-workflow-grid p { font-size: 13.5px !important; }

  /* Privacy + Contact */
  .privacy-status-row { font-size: 14px !important; }
  .privacy-short-points p,
  .privacy-section > p { font-size: 16px !important; }
  .privacy-toc a { font-size: 13px !important; }
  .privacy-data-grid h3,
  .pinterest-policy-grid h3 { font-size: 14px !important; }
  .privacy-data-grid p,
  .pinterest-policy-grid p,
  .privacy-flow > div { font-size: 15px !important; }
  .privacy-contact-button { font-size: 14px !important; }
  .privacy-status-row a { font-size: 13px !important; }
  .contact-inbox-card p { font-size: 13.5px !important; }
  .contact-route-card p,
  .contact-safety-note p { font-size: 15px !important; }
  .contact-route-card > a { font-size: 14px !important; }

  /* Footer */
  .footer-grid p { font-size: 13px !important; }
  .footer-grid > div:nth-child(2) > strong,
  .footer-grid > div:nth-child(3) > strong { font-size: 11px !important; }
  .footer-grid a { font-size: 12.5px !important; }
  .footer-bottom { font-size: 11.5px !important; }
}

@media (min-width: 1600px) {
  :root {
    --container: 1320px;
    --page-padding: 40px;
  }

  .site-logo { font-size: 19px !important; }
  .desktop-nav,
  .nav-dropdown-button,
  .header-tagline { font-size: 15px !important; }
  .nav-dropdown-menu a,
  .nav-cta { font-size: 14px !important; }

  .section-lead { font-size: 18px !important; }
  .section-subtle { font-size: 16px !important; }
  .hero-lead { font-size: 20px !important; }
  .hero-body { font-size: 16.5px !important; }
  .button { font-size: 13.5px !important; min-height: 48px; }

  .operator-demo-objective p { font-size: 15px !important; }
  .operator-role strong { font-size: 14px !important; }
  .operator-role small { font-size: 11px !important; }
  .operator-role p { font-size: 12px !important; }
  .operator-status > span,
  .operator-status-meta { font-size: 11px !important; }

  .how-step h3 { font-size: 14px !important; }
  .how-step p { font-size: 14px !important; }
  .comparison-column p,
  .build-public p,
  .operator-types p { font-size: 15px !important; }
  .text-link { font-size: 14px !important; }
  .timeline-item span { font-size: 13px !important; }
  .timeline-item strong { font-size: 14px !important; }
  .timeline-item p { font-size: 13px !important; max-width: 240px; }
  .number { font-size: 13px !important; }
  .flow-label { font-size: 12px !important; }
  .origin-copy p,
  .integrations-grid p { font-size: 16px !important; }

  .platform-difference-copy p,
  .platform-control-copy > p,
  .platform-workflow-intro p,
  .how-flow-copy p,
  .how-control-copy > p,
  .how-failure-copy > p,
  .build-operator-copy p,
  .build-next-copy p,
  .origin-before-copy p,
  .origin-turn-copy > p,
  .origin-operator-copy > p,
  .origin-name-copy > p,
  .origin-became-copy > p,
  .origin-end-inner > p,
  .privacy-short-points p,
  .privacy-section > p { font-size: 17px !important; }

  .platform-architecture-card p,
  .platform-state-row p,
  .build-milestone p,
  .build-entry-content p { font-size: 15px !important; }
  .how-context-card p,
  .origin-workflow-grid p { font-size: 14.5px !important; }
  .how-example-flow p,
  .how-failure-path > div { font-size: 13.5px !important; }
  .privacy-data-grid p,
  .pinterest-policy-grid p,
  .privacy-flow > div,
  .contact-route-card p,
  .contact-safety-note p { font-size: 16px !important; }

  .footer-grid p { font-size: 14px !important; }
  .footer-grid > div:nth-child(2) > strong,
  .footer-grid > div:nth-child(3) > strong { font-size: 12px !important; }
  .footer-grid a { font-size: 13px !important; }
  .footer-bottom { font-size: 12px !important; }
}
/* ============================================================
   V7 — RESPONSIVE TYPE REFINEMENT
   Real website rules loaded by every HTML page.
   Large display headings and intro remain intentionally unchanged.
   ============================================================ */

@media (min-width: 1600px) {
  html[data-ui-scale="readability-v7"] {
    font-size: 16px;
  }

  html[data-ui-scale="readability-v7"] body {
    font-size: 16px;
  }

  html[data-ui-scale="readability-v7"] .container {
    width: min(1320px, calc(100% - 80px));
  }

  html[data-ui-scale="readability-v7"] .hero-body,
  html[data-ui-scale="readability-v7"] .section-subtle {
    font-size: 17px !important;
  }

  html[data-ui-scale="readability-v7"] .hero-lead,
  html[data-ui-scale="readability-v7"] .section-lead {
    font-size: 20px !important;
  }

  html[data-ui-scale="readability-v7"] .button,
  html[data-ui-scale="readability-v7"] .nav-cta {
    font-size: 14px !important;
  }

  html[data-ui-scale="readability-v7"] .desktop-nav,
  html[data-ui-scale="readability-v7"] .nav-dropdown-button,
  html[data-ui-scale="readability-v7"] .header-tagline {
    font-size: 15px !important;
  }

  html[data-ui-scale="readability-v7"] .how-step p,
  html[data-ui-scale="readability-v7"] .comparison-column p,
  html[data-ui-scale="readability-v7"] .build-public p,
  html[data-ui-scale="readability-v7"] .operator-types p,
  html[data-ui-scale="readability-v7"] .platform-architecture-card p,
  html[data-ui-scale="readability-v7"] .platform-state-row p,
  html[data-ui-scale="readability-v7"] .build-milestone p,
  html[data-ui-scale="readability-v7"] .build-entry-content p,
  html[data-ui-scale="readability-v7"] .origin-workflow-grid p {
    font-size: 15px !important;
  }

  html[data-ui-scale="readability-v7"] .timeline-item p {
    font-size: 13px !important;
    line-height: 1.65;
  }

  html[data-ui-scale="readability-v7"] .timeline-item strong {
    font-size: 14px !important;
  }

  html[data-ui-scale="readability-v7"] .timeline-item span {
    font-size: 13px !important;
  }

  html[data-ui-scale="readability-v7"] .footer-grid p {
    font-size: 14px !important;
  }

  html[data-ui-scale="readability-v7"] .footer-grid a {
    font-size: 13px !important;
  }

  html[data-ui-scale="readability-v7"] .footer-bottom {
    font-size: 12px !important;
  }
}

@media (min-width: 1920px) {
  html[data-ui-scale="readability-v7"] .container {
    width: min(1360px, calc(100% - 96px));
  }

  html[data-ui-scale="readability-v7"] .hero-body,
  html[data-ui-scale="readability-v7"] .section-subtle {
    font-size: 18px !important;
  }

  html[data-ui-scale="readability-v7"] .hero-lead,
  html[data-ui-scale="readability-v7"] .section-lead {
    font-size: 21px !important;
  }

  html[data-ui-scale="readability-v7"] .privacy-section > p,
  html[data-ui-scale="readability-v7"] .privacy-short-points p,
  html[data-ui-scale="readability-v7"] .platform-difference-copy p,
  html[data-ui-scale="readability-v7"] .platform-control-copy > p,
  html[data-ui-scale="readability-v7"] .platform-workflow-intro p,
  html[data-ui-scale="readability-v7"] .how-flow-copy p,
  html[data-ui-scale="readability-v7"] .how-control-copy > p,
  html[data-ui-scale="readability-v7"] .how-failure-copy > p,
  html[data-ui-scale="readability-v7"] .build-operator-copy p,
  html[data-ui-scale="readability-v7"] .build-next-copy p,
  html[data-ui-scale="readability-v7"] .origin-before-copy p,
  html[data-ui-scale="readability-v7"] .origin-turn-copy > p,
  html[data-ui-scale="readability-v7"] .origin-operator-copy > p,
  html[data-ui-scale="readability-v7"] .origin-name-copy > p,
  html[data-ui-scale="readability-v7"] .origin-became-copy > p,
  html[data-ui-scale="readability-v7"] .origin-end-inner > p {
    font-size: 18px !important;
  }
}

/* ============================================================
   V8 — MOBILE / TABLET EXPERIENCE PASS
   ------------------------------------------------------------
   Desktop >= 1181px remains unchanged.
   Focus: readability, touch targets, vertical rhythm and phone fit.
   Approved intro artwork/timing and desktop typography are preserved.
   ============================================================ */

@media (max-width: 1180px) {
  html[data-mobile="mobile-v8"] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html[data-mobile="mobile-v8"] .site-header {
    min-height: 72px !important;
  }

  html[data-mobile="mobile-v8"] .desktop-nav {
    font-size: 15px !important;
    overscroll-behavior: contain;
  }

  html[data-mobile="mobile-v8"] .nav-dropdown-button,
  html[data-mobile="mobile-v8"] .desktop-nav .nav-cta {
    font-size: 15px !important;
  }

  html[data-mobile="mobile-v8"] .nav-dropdown-menu a {
    min-height: 42px;
    display: flex;
    align-items: center;
    font-size: 14px !important;
  }
}

@media (max-width: 820px) {
  html[data-mobile="mobile-v8"] {
    --page-padding: 20px;
  }

  html[data-mobile="mobile-v8"] body {
    font-size: 15px;
    overflow-x: hidden;
  }

  html[data-mobile="mobile-v8"] .container {
    width: calc(100% - (var(--page-padding) * 2));
  }

  /* Header + touch navigation */
  html[data-mobile="mobile-v8"] .site-header {
    min-height: 70px !important;
    padding: 13px 18px !important;
    gap: 12px !important;
  }

  html[data-mobile="mobile-v8"] .site-logo {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  html[data-mobile="mobile-v8"] .mobile-menu-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  html[data-mobile="mobile-v8"] .desktop-nav {
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - 82px) !important;
    padding: 14px 16px 16px !important;
    border-radius: 16px !important;
  }

  html[data-mobile="mobile-v8"] .nav-dropdown-button {
    min-height: 52px !important;
  }

  html[data-mobile="mobile-v8"] .desktop-nav .nav-cta {
    min-height: 50px !important;
    margin-top: 10px !important;
  }

  /* Shared page typography */
  html[data-mobile="mobile-v8"] .hero,
  html[data-mobile="mobile-v8"] .platform-hero,
  html[data-mobile="mobile-v8"] .how-hero,
  html[data-mobile="mobile-v8"] .build-hero,
  html[data-mobile="mobile-v8"] .origin-hero,
  html[data-mobile="mobile-v8"] .privacy-hero {
    padding-top: 48px !important;
    padding-bottom: 54px !important;
  }

  html[data-mobile="mobile-v8"] .hero-copy h1 {
    font-size: clamp(46px, 11.5vw, 66px) !important;
    line-height: .95 !important;
  }

  html[data-mobile="mobile-v8"] .display-heading,
  html[data-mobile="mobile-v8"] .platform-section-heading,
  html[data-mobile="mobile-v8"] .how-section-heading,
  html[data-mobile="mobile-v8"] .build-section-heading,
  html[data-mobile="mobile-v8"] .origin-section-heading {
    font-size: clamp(38px, 9.8vw, 52px) !important;
    line-height: .98 !important;
  }

  html[data-mobile="mobile-v8"] .hero-lead,
  html[data-mobile="mobile-v8"] .platform-lead,
  html[data-mobile="mobile-v8"] .how-lead,
  html[data-mobile="mobile-v8"] .build-lead,
  html[data-mobile="mobile-v8"] .origin-lead,
  html[data-mobile="mobile-v8"] .privacy-lead {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  html[data-mobile="mobile-v8"] .hero-body,
  html[data-mobile="mobile-v8"] .section-subtle {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  html[data-mobile="mobile-v8"] .section-lead {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  html[data-mobile="mobile-v8"] .eyebrow,
  html[data-mobile="mobile-v8"] .platform-eyebrow,
  html[data-mobile="mobile-v8"] .platform-kicker,
  html[data-mobile="mobile-v8"] .how-eyebrow,
  html[data-mobile="mobile-v8"] .how-kicker,
  html[data-mobile="mobile-v8"] .build-eyebrow,
  html[data-mobile="mobile-v8"] .build-kicker,
  html[data-mobile="mobile-v8"] .origin-eyebrow,
  html[data-mobile="mobile-v8"] .origin-kicker,
  html[data-mobile="mobile-v8"] .privacy-eyebrow,
  html[data-mobile="mobile-v8"] .privacy-kicker {
    font-size: 12px !important;
  }

  html[data-mobile="mobile-v8"] .button,
  html[data-mobile="mobile-v8"] .platform-primary-link,
  html[data-mobile="mobile-v8"] .platform-secondary-link,
  html[data-mobile="mobile-v8"] .how-primary-link,
  html[data-mobile="mobile-v8"] .how-secondary-link,
  html[data-mobile="mobile-v8"] .build-primary-link,
  html[data-mobile="mobile-v8"] .build-secondary-link,
  html[data-mobile="mobile-v8"] .origin-primary-link,
  html[data-mobile="mobile-v8"] .origin-secondary-link {
    min-height: 50px !important;
    font-size: 14px !important;
  }

  /* Homepage system demo — content-led height instead of a tall fixed box */
  html[data-mobile="mobile-v8"] .operator-demo {
    min-height: 0 !important;
    padding: 24px 18px 86px !important;
  }

  html[data-mobile="mobile-v8"] .operator-demo-objective {
    min-height: 86px !important;
    padding-right: 76px !important;
  }

  html[data-mobile="mobile-v8"] .operator-demo-objective p {
    font-size: 14px !important;
  }

  html[data-mobile="mobile-v8"] .objective-arrow {
    width: 58px !important;
    left: 106px !important;
    top: -7px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role-grid {
    gap: 10px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role {
    min-height: 0 !important;
    padding: 16px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role strong {
    font-size: 14px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role small {
    font-size: 10px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  html[data-mobile="mobile-v8"] .operator-role-publisher {
    padding-right: 82px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role-publisher .hero-raccoon {
    width: 110px !important;
    right: -18px !important;
    top: 50% !important;
  }

  html[data-mobile="mobile-v8"] .operator-status {
    left: 18px !important;
    right: 18px !important;
    bottom: 20px !important;
  }

  html[data-mobile="mobile-v8"] .operator-status > span,
  html[data-mobile="mobile-v8"] .operator-status-meta {
    font-size: 10px !important;
  }

  /* Homepage content */
  html[data-mobile="mobile-v8"] .how-step h3 {
    font-size: 15px !important;
  }

  html[data-mobile="mobile-v8"] .how-step p,
  html[data-mobile="mobile-v8"] .comparison-column p,
  html[data-mobile="mobile-v8"] .build-public p,
  html[data-mobile="mobile-v8"] .operator-types p,
  html[data-mobile="mobile-v8"] .origin-copy p,
  html[data-mobile="mobile-v8"] .integrations-grid p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  html[data-mobile="mobile-v8"] .comparison-column h3 {
    margin-bottom: 14px !important;
    font-size: 20px !important;
  }

  html[data-mobile="mobile-v8"] .timeline-item {
    padding-bottom: 22px !important;
  }

  html[data-mobile="mobile-v8"] .timeline-item span {
    font-size: 12px !important;
  }

  html[data-mobile="mobile-v8"] .timeline-item strong {
    font-size: 15px !important;
  }

  html[data-mobile="mobile-v8"] .timeline-item p {
    max-width: 34rem !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  html[data-mobile="mobile-v8"] .number,
  html[data-mobile="mobile-v8"] .flow-label,
  html[data-mobile="mobile-v8"] .text-link {
    font-size: 12px !important;
  }

  /* Subpage readable copy */
  html[data-mobile="mobile-v8"] .platform-difference-copy p,
  html[data-mobile="mobile-v8"] .platform-control-copy > p,
  html[data-mobile="mobile-v8"] .platform-workflow-intro p,
  html[data-mobile="mobile-v8"] .how-flow-copy p,
  html[data-mobile="mobile-v8"] .how-control-copy > p,
  html[data-mobile="mobile-v8"] .how-failure-copy > p,
  html[data-mobile="mobile-v8"] .build-operator-copy p,
  html[data-mobile="mobile-v8"] .build-next-copy p,
  html[data-mobile="mobile-v8"] .origin-before-copy p,
  html[data-mobile="mobile-v8"] .origin-turn-copy > p,
  html[data-mobile="mobile-v8"] .origin-operator-copy > p,
  html[data-mobile="mobile-v8"] .origin-name-copy > p,
  html[data-mobile="mobile-v8"] .origin-became-copy > p,
  html[data-mobile="mobile-v8"] .origin-end-inner > p,
  html[data-mobile="mobile-v8"] .privacy-short-points p,
  html[data-mobile="mobile-v8"] .privacy-section > p {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }

  html[data-mobile="mobile-v8"] .platform-architecture-card p,
  html[data-mobile="mobile-v8"] .platform-state-row p,
  html[data-mobile="mobile-v8"] .build-milestone p,
  html[data-mobile="mobile-v8"] .build-entry-content p,
  html[data-mobile="mobile-v8"] .how-context-card p,
  html[data-mobile="mobile-v8"] .origin-workflow-grid p,
  html[data-mobile="mobile-v8"] .privacy-data-grid p,
  html[data-mobile="mobile-v8"] .pinterest-policy-grid p,
  html[data-mobile="mobile-v8"] .privacy-flow > div,
  html[data-mobile="mobile-v8"] .contact-route-card p,
  html[data-mobile="mobile-v8"] .contact-safety-note p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  /* Cards / grids breathe without becoming oversized */
  html[data-mobile="mobile-v8"] .platform-architecture-grid,
  html[data-mobile="mobile-v8"] .platform-state-grid,
  html[data-mobile="mobile-v8"] .privacy-data-grid,
  html[data-mobile="mobile-v8"] .pinterest-policy-grid,
  html[data-mobile="mobile-v8"] .contact-grid {
    gap: 14px !important;
  }

  html[data-mobile="mobile-v8"] .platform-architecture-card,
  html[data-mobile="mobile-v8"] .how-context-card,
  html[data-mobile="mobile-v8"] .build-status-card,
  html[data-mobile="mobile-v8"] .privacy-short-card,
  html[data-mobile="mobile-v8"] .privacy-status-card,
  html[data-mobile="mobile-v8"] .contact-inbox-card,
  html[data-mobile="mobile-v8"] .contact-route-card,
  html[data-mobile="mobile-v8"] .contact-safety-note {
    border-radius: 14px !important;
  }

  /* Footer */
  html[data-mobile="mobile-v8"] .site-footer {
    padding-top: 40px !important;
  }

  html[data-mobile="mobile-v8"] .footer-grid {
    gap: 26px !important;
  }

  html[data-mobile="mobile-v8"] .footer-logo {
    font-size: 19px !important;
  }

  html[data-mobile="mobile-v8"] .footer-grid p {
    font-size: 14px !important;
  }

  html[data-mobile="mobile-v8"] .footer-grid > div:nth-child(2) > strong,
  html[data-mobile="mobile-v8"] .footer-grid > div:nth-child(3) > strong {
    font-size: 11px !important;
  }

  html[data-mobile="mobile-v8"] .footer-grid a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    font-size: 13px !important;
  }

  html[data-mobile="mobile-v8"] .footer-bottom {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 560px) {
  html[data-mobile="mobile-v8"] {
    --page-padding: 16px;
  }

  html[data-mobile="mobile-v8"] .site-header {
    padding: 12px 14px !important;
  }

  html[data-mobile="mobile-v8"] .site-logo {
    max-width: calc(100vw - 86px);
    font-size: 16px !important;
  }

  html[data-mobile="mobile-v8"] .hero,
  html[data-mobile="mobile-v8"] .platform-hero,
  html[data-mobile="mobile-v8"] .how-hero,
  html[data-mobile="mobile-v8"] .build-hero,
  html[data-mobile="mobile-v8"] .origin-hero,
  html[data-mobile="mobile-v8"] .privacy-hero {
    padding-top: 40px !important;
    padding-bottom: 46px !important;
  }

  html[data-mobile="mobile-v8"] .hero-copy h1 {
    font-size: clamp(42px, 12.2vw, 58px) !important;
  }

  html[data-mobile="mobile-v8"] .display-heading,
  html[data-mobile="mobile-v8"] .platform-section-heading,
  html[data-mobile="mobile-v8"] .how-section-heading,
  html[data-mobile="mobile-v8"] .build-section-heading,
  html[data-mobile="mobile-v8"] .origin-section-heading {
    font-size: clamp(36px, 10.8vw, 48px) !important;
  }

  html[data-mobile="mobile-v8"] .hero-lead,
  html[data-mobile="mobile-v8"] .platform-lead,
  html[data-mobile="mobile-v8"] .how-lead,
  html[data-mobile="mobile-v8"] .build-lead,
  html[data-mobile="mobile-v8"] .origin-lead,
  html[data-mobile="mobile-v8"] .privacy-lead {
    font-size: 17px !important;
  }

  html[data-mobile="mobile-v8"] .hero-body,
  html[data-mobile="mobile-v8"] .section-subtle,
  html[data-mobile="mobile-v8"] .section-lead {
    font-size: 15px !important;
  }

  html[data-mobile="mobile-v8"] .hero-actions,
  html[data-mobile="mobile-v8"] .platform-hero-actions,
  html[data-mobile="mobile-v8"] .how-hero-actions,
  html[data-mobile="mobile-v8"] .build-hero-actions,
  html[data-mobile="mobile-v8"] .origin-hero-actions {
    gap: 10px !important;
  }

  html[data-mobile="mobile-v8"] .button,
  html[data-mobile="mobile-v8"] .platform-primary-link,
  html[data-mobile="mobile-v8"] .platform-secondary-link,
  html[data-mobile="mobile-v8"] .how-primary-link,
  html[data-mobile="mobile-v8"] .how-secondary-link,
  html[data-mobile="mobile-v8"] .build-primary-link,
  html[data-mobile="mobile-v8"] .build-secondary-link,
  html[data-mobile="mobile-v8"] .origin-primary-link,
  html[data-mobile="mobile-v8"] .origin-secondary-link {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-mobile="mobile-v8"] .operator-demo {
    padding: 21px 15px 84px !important;
    border-radius: 14px !important;
  }

  html[data-mobile="mobile-v8"] .operator-demo-objective {
    padding-right: 68px !important;
  }

  html[data-mobile="mobile-v8"] .handwritten-label {
    font-size: 21px !important;
  }

  html[data-mobile="mobile-v8"] .objective-arrow {
    width: 52px !important;
    left: 94px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role-publisher {
    padding-right: 70px !important;
  }

  html[data-mobile="mobile-v8"] .operator-role-publisher .hero-raccoon {
    width: 96px !important;
    right: -17px !important;
  }

  html[data-mobile="mobile-v8"] .origin-card {
    padding: 30px 20px !important;
  }

  html[data-mobile="mobile-v8"] .origin-button {
    width: min(100%, 190px) !important;
    min-height: 92px !important;
  }

  html[data-mobile="mobile-v8"] .origin-arrow {
    left: 145px !important;
  }

  html[data-mobile="mobile-v8"] .contact-big-email {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html[data-mobile="mobile-v8"] .privacy-toc a {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 13px !important;
  }

  html[data-mobile="mobile-v8"] .footer-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-mobile="mobile-v8"] .footer-bottom {
    align-items: flex-start !important;
  }
}

@media (max-width: 390px) {
  html[data-mobile="mobile-v8"] {
    --page-padding: 14px;
  }

  html[data-mobile="mobile-v8"] .hero-copy h1 {
    font-size: clamp(39px, 12vw, 50px) !important;
  }

  html[data-mobile="mobile-v8"] .site-logo {
    font-size: 15px !important;
  }

  html[data-mobile="mobile-v8"] .mobile-menu-button {
    width: 42px !important;
    height: 42px !important;
  }
}