/*


 */

:root {
  --black: #080808;
  --pink: #ff1493;
  --yellow: #eaff00;
  --purple: #8a00ff;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
}

.home {
  min-height: 100vh;
}

/* HERO */

.hero {
  min-height: 100svh;
  padding: 24px 18px 40px;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
    url(/assets/mobile_background-bb1fc633fb950b43452cd7110b1ffa3dfb4aa9a20929e079d197bbebbad8d9a1.png);

  background-size: cover;
  background-position: center;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--yellow);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

/* TITLE + EXPLORE MENU */

.hero-title-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero h1 {
  margin: 0;

  font-size: clamp(4rem, 21vw, 8rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.72;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
}

.hero h1 span:first-child {
  color: var(--yellow);
}

.hero h1 span:last-child {
  color: var(--pink);
}

/* EXPLORE */

.explore-menu {
  position: relative;
  flex-shrink: 0;
}

.explore-menu summary {
  padding: 14px 18px;

  background: var(--yellow);
  border: 3px solid var(--black);

  color: var(--black);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

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

.explore-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  width: 260px;
  z-index: 20;

  background: var(--black);
  border: 3px solid var(--yellow);
}

.explore-dropdown a {
  display: block;
  padding: 15px 18px;

  color: var(--yellow);
  border-bottom: 2px solid var(--yellow);

  font-weight: 900;
  text-decoration: none;
}

.explore-dropdown a:last-child {
  border-bottom: 0;
}

.explore-dropdown a:hover {
  background: var(--pink);
  color: var(--black);
}

/* TAGLINE */

.tagline {
  max-width: 500px;
  margin: 36px 0 24px;

  color: var(--yellow);
  font-size: clamp(1.6rem, 7vw, 3rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.9;
  text-transform: uppercase;
}

/* MOBILE */

@media (max-width: 767px) {
  .hero-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .explore-dropdown {
    left: 0;
    right: auto;
  }
}

/* DESKTOP */

@media (min-width: 768px) {
  .hero {
    padding: 50px;

    background-image:
      linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
      url(/assets/desktop_background-62b054ce8cb40fec469e20aae6e10db1a125bddc2812aab2ab51d40fb6c9cc16.png);
  }

  .hero h1 {
    font-size: clamp(7rem, 14vw, 13rem);
  }

  .tagline {
    font-size: 3rem;
  }
}       

/* =========================================
   SO YOU WANT TO DRINK
   ========================================= */

.drink-page {
  width: 100%;
  overflow-x: hidden;
  background: var(--black);
}


/* HERO */

.drink-hero {
  min-height: 100svh;
  padding: 30px 18px 50px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.72) 55%,
      rgba(255, 20, 147, 0.18) 100%
    ),
    url(/assets/so_you_want_to_drink_mobile_background-ff4094f3432c8ba936a7db159fb3106cc2ca430b6a4b1f7213a9e4878dbb0c9d.png);

  background-size: cover;
  background-position: center;
}

.drink-hero-content {
  width: 100%;
  max-width: 1100px;
}

.drink-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.drink-title {
  margin: 0;

  font-size: clamp(4rem, 20vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.72;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.drink-title span {
  display: block;
}

.drink-title span:nth-child(1) {
  color: var(--yellow);
}

.drink-title span:nth-child(2) {
  color: var(--white);
}

.drink-title span:nth-child(3) {
  color: var(--pink);
}

.drink-subtitle {
  margin: 35px 0 22px;

  color: var(--yellow);

  font-size: clamp(1.4rem, 6vw, 2.6rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
}

.drink-button,
.ending-button {
  display: inline-block;

  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.drink-button:hover,
.ending-button:hover {
  background: var(--yellow);
  transform: translate(-3px, -3px);
}


/* MEMORY SECTIONS */

.memory-section {
  padding: 55px 18px 65px;

  display: grid;
  gap: 35px;
}

.memory-number {
  margin: 0 0 20px;

  font-size: 0.75rem;
  font-weight: 900;

  letter-spacing: 0.1em;
}

.memory-section h2 {
  margin: 0;

  font-size: clamp(3.2rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;

  text-transform: uppercase;
}

.memory-list {
  max-width: 700px;

  font-size: 1.05rem;
  font-weight: 700;

  line-height: 1.25;
}

.memory-list p {
  margin: 0;
  padding: 11px 0;

  border-bottom: 1px solid currentColor;
}

.memory-list p:last-child {
  border-bottom: 0;
}


/* PINK SECTION */

.memory-pink {
  background: var(--pink);
  color: var(--black);
}


/* YELLOW SECTION */

.memory-yellow {
  background: var(--yellow);
  color: var(--black);
}


/* BLACK SECTION */

.memory-black {
  position: relative;

  background:
    linear-gradient(
      135deg,
      rgba(255, 20, 147, 0.06),
      transparent 45%
    ),
    var(--black);

  color: var(--white);
}

.memory-black .memory-number {
  color: var(--pink);
}

.memory-black h2 {
  color: var(--yellow);
}

.memory-black .memory-list p {
  border-color: rgba(255, 255, 255, 0.2);
}


/* ENDING */

.drink-ending {
  min-height: 80svh;

  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.ending-small {
  margin: 0 0 5px;

  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
}

.drink-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.74;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.drink-ending h2 span {
  color: var(--pink);
}

.ending-message {
  margin-top: 50px;

  font-size: 1.1rem;
  font-weight: 900;
}

.ending-message p {
  margin: 3px 0;
}

.ending-button {
  margin-top: 25px;
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .drink-hero {
    min-height: 100vh;

    padding: 60px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.78) 43%,
        rgba(0, 0, 0, 0.22) 100%
      ),
      url(/assets/so_you_want_to_drink_desktop_background-416d9a8a265d597339428f0012b10c7564a7972fe889fa2bd8f69a9f45135181.png);

    background-position: center;
  }

  .drink-title {
    font-size: clamp(7rem, 12vw, 12rem);
  }

  .drink-subtitle {
    font-size: 2.5rem;
  }


  /* TWO-COLUMN MEMORY SECTIONS */

  .memory-section {
    min-height: 65vh;

    padding: 75px 6vw;

    grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
    align-items: center;

    gap: 70px;
  }

  .memory-section h2 {
    font-size: clamp(4.5rem, 7vw, 8rem);
  }

  .memory-list {
    font-size: 1.1rem;
  }

  .memory-list p {
    padding: 9px 0;
  }


  /* ENDING */

  .drink-ending {
    min-height: 75vh;

    padding: 80px 6vw;

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;

    gap: 80px;
  }

  .ending-small {
    grid-column: 1;
  }

  .drink-ending h2 {
    grid-column: 1;

    font-size: clamp(6rem, 9vw, 10rem);
  }

  .ending-message {
    grid-column: 2;
    grid-row: 1 / span 2;

    margin: 0;

    font-size: 1.3rem;
  }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 400px) {

  .drink-title {
    font-size: 18vw;
  }

  .memory-section h2 {
    font-size: 14vw;
  }

  .memory-list {
    font-size: 0.95rem;
  }

  .drink-ending h2 {
    font-size: 17vw;
  }
}

/* =========================================
   RESOURCES LANDING PAGE
   ========================================= */

.resources-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.resources-hero {
  min-height: 100svh;

  padding: 30px 18px 50px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.8)
    ),
    url(/assets/resources_mobile_background-e92b0a0351b830259f53ea4801c96fec8af28ddff12e6aaef6f1d1100f266db4.png);

  background-size: cover;
  background-position: center;
}


.resources-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}


.resources-hero h1 {
  margin: 0;

  font-size: clamp(3.8rem, 18vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.resources-hero h1 span {
  display: block;
}


.resources-hero h1 span:nth-child(1) {
  color: var(--yellow);
}


.resources-hero h1 span:nth-child(2) {
  color: var(--white);
}


.resources-hero h1 span:nth-child(3) {
  color: var(--pink);
}


.resources-intro {
  max-width: 600px;

  margin: 40px 0 25px;

  color: var(--yellow);

  font-size: clamp(1.4rem, 6vw, 2.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;

  text-transform: uppercase;
}


.resources-button {
  width: fit-content;

  padding: 14px 18px;

  background: var(--yellow);

  color: var(--black);

  border: 3px solid var(--black);

  font-weight: 900;
  text-decoration: none;
}


.resources-button:hover {
  background: var(--pink);
}


/* RESOURCE LIST */

.resources-list {
  padding: 60px 18px 80px;

  background: var(--pink);

  color: var(--black);
}


.resources-heading > p {
  margin: 0 0 35px;

  font-size: 0.8rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}


.resources-heading h2 {
  margin: 0 0 50px;

  font-size: clamp(4rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}


/* CARDS */

.resource-grid {
  display: grid;
  gap: 12px;
}


.resource-card {
  min-height: 360px;

  padding: 25px;

  display: flex;
  flex-direction: column;

  background: var(--black);

  border: 3px solid var(--yellow);

  color: var(--white);

  text-decoration: none;
}


.resource-number {
  margin: 0 0 50px;

  color: var(--pink);

  font-size: 0.8rem;
  font-weight: 900;

  letter-spacing: 0.1em;
}


.resource-card h3 {
  margin: 0;

  color: var(--yellow);

  font-size: clamp(2.8rem, 12vw, 5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.78;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}


.resource-description {
  max-width: 500px;

  margin: 30px 0;

  font-size: 1rem;
  font-weight: 700;

  line-height: 1.4;
}


.resource-link {
  margin-top: auto;

  color: var(--pink);

  font-size: 0.9rem;
  font-weight: 900;
}


.featured-resource {
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}


.featured-resource:hover {
  background: var(--yellow);
  color: var(--black);

  transform: translate(-5px, -5px);
}


.featured-resource:hover h3 {
  color: var(--black);
}


.featured-resource:hover .resource-link {
  color: var(--pink);
}


.coming-soon {
  opacity: 0.65;
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .resources-hero {
    padding: 60px 6vw;

    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.2) 100%
      ),
      url(/assets/resources_desktop_background-96b4609021d3cd02ac0f419375773bb4f0d8099be4a55e97f2aa54ef7ddc7c65.png);

    background-size: cover;
    background-position: center;
  }


  .resources-hero h1 {
    max-width: 1100px;

    font-size: clamp(6rem, 10vw, 11rem);
  }


  .resources-intro {
    font-size: 2.3rem;
  }


  .resources-list {
    padding: 100px 6vw;
  }


  .resources-heading h2 {
    font-size: clamp(5rem, 8vw, 9rem);
  }


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

    gap: 18px;
  }


  .resource-card {
    min-height: 500px;

    padding: 35px;
  }


  .resource-card h3 {
    font-size: clamp(3.5rem, 5vw, 6rem);
  }


  .resource-description {
    font-size: 1.15rem;
  }
}

/* =========================================
   BIPOLAR LANDING PAGE
   ========================================= */

.bipolar-page {
  width: 100%;
  overflow-x: hidden;
  background: var(--black);
}


/* HERO */

.bipolar-hero {
  min-height: 100svh;
  padding: 30px 18px 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.55) 55%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    url(/assets/bipolar_mobile_background-154f12aa032ce992d8bb25d65478c48bdfc1aff4f250edbbc25c22312b1b5c99.png);

  background-size: cover;
  background-position: center;
}

.bipolar-hero-content {
  width: 100%;
  max-width: 1100px;
}

.bipolar-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.bipolar-hero h1 {
  margin: 0;

  font-size: clamp(5rem, 23vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.72;
  letter-spacing: -0.075em;

  text-transform: uppercase;
}

.bipolar-hero h1 span {
  display: block;
}

.bipolar-hero h1 span:first-child {
  color: var(--yellow);
}

.bipolar-hero h1 span:last-child {
  color: var(--pink);
}

.bipolar-intro {
  max-width: 650px;

  margin: 40px 0 25px;

  color: var(--white);

  font-size: clamp(1.35rem, 6vw, 2.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.bipolar-button {
  display: inline-block;

  padding: 14px 20px;

  background: var(--yellow);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.bipolar-button:hover {
  background: var(--pink);
  transform: translate(-3px, -3px);
}


/* TOPICS */

.bipolar-topics {
  padding: 65px 18px 80px;

  background: var(--pink);
  color: var(--black);
}

.bipolar-topics-heading > p:first-child {
  margin: 0 0 30px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.bipolar-topics-heading h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.74;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.bipolar-topics-subtitle {
  max-width: 650px;

  margin: 35px 0 50px;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}


/* GRID */

.bipolar-grid {
  display: grid;
  gap: 12px;
}


/* CARDS */

.bipolar-card {
  min-height: 380px;

  padding: 25px;

  display: flex;
  flex-direction: column;

  border: 3px solid var(--black);

  color: var(--black);
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.bipolar-card:hover {
  transform: translate(-5px, -5px);

  box-shadow:
    7px 7px 0 var(--black);
}

.bipolar-card-number {
  margin: 0 0 50px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.bipolar-card h3 {
  margin: 0;

  font-size: clamp(2.8rem, 12vw, 5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.78;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}

.bipolar-card-description {
  max-width: 500px;

  margin: 30px 0;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.bipolar-card span {
  margin-top: auto;

  font-size: 0.9rem;
  font-weight: 900;
}


/* CARD COLORS */

.card-pink {
  background: var(--pink);
  color: var(--black);
}

.card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.card-purple {
  background: var(--purple);
  color: var(--white);
}

.card-black {
  background: var(--black);
  border-color: var(--yellow);
  color: var(--white);
}

.card-black h3 {
  color: var(--yellow);
}

.card-black span {
  color: var(--pink);
}


/* MIXED EPISODE CARD */

.card-split {
  position: relative;

  background:
    linear-gradient(
      135deg,
      var(--pink) 0%,
      var(--pink) 48%,
      var(--yellow) 48%,
      var(--yellow) 100%
    );

  color: var(--black);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .bipolar-hero {
    min-height: 100vh;

    padding: 60px 6vw;

    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.68) 38%,
        rgba(0, 0, 0, 0.15) 72%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/bipolar_desktop_background-544d8868016338b7f306b7605df56690d0813378d361054966e316cb8d476d79.png);

    background-size: cover;
    background-position: center;
  }

  .bipolar-hero h1 {
    font-size: clamp(7rem, 12vw, 12rem);
  }

  .bipolar-intro {
    font-size: 2.2rem;
  }


  /* TOPICS */

  .bipolar-topics {
    padding: 100px 6vw;
  }

  .bipolar-topics-heading h2 {
    font-size: clamp(5rem, 8vw, 9rem);
  }

  .bipolar-topics-subtitle {
    font-size: 1.25rem;
  }


  /* 3 x 2 GRID */

  .bipolar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .bipolar-card {
    min-height: 500px;
    padding: 30px;
  }

  .bipolar-card h3 {
    font-size: clamp(3rem, 4vw, 5rem);
  }

  .bipolar-card-description {
    font-size: 1.05rem;
  }
}

/* =========================================
   ADDICTION LANDING PAGE
   ========================================= */

.addiction-page {
  width: 100%;
  overflow-x: hidden;
  background: var(--black);
}


/* HERO */

.addiction-hero {
  min-height: 100svh;
  padding: 30px 18px 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.62) 55%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    url(/assets/addiction_mobile_background-c2a1a80e2ff91c15ef8f10f9c205362b343a96efd55e8962f74604e1ca9f090f.png);

  background-size: cover;
  background-position: center;
}

.addiction-hero-content {
  width: 100%;
  max-width: 1100px;
}

.addiction-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.addiction-hero h1 {
  margin: 0;

  font-size: clamp(4.7rem, 21vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.72;
  letter-spacing: -0.075em;

  text-transform: uppercase;
}

.addiction-hero h1 span {
  display: block;
}

.addiction-hero h1 span:first-child {
  color: var(--yellow);
}

.addiction-hero h1 span:last-child {
  color: var(--pink);
}

.addiction-intro {
  max-width: 650px;

  margin: 40px 0 25px;

  color: var(--white);

  font-size: clamp(1.4rem, 6vw, 2.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.addiction-button {
  display: inline-block;

  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.addiction-button:hover {
  background: var(--yellow);
  transform: translate(-3px, -3px);
}


/* TOPICS */

.addiction-topics {
  padding: 65px 18px 80px;

  background: var(--yellow);
  color: var(--black);
}

.addiction-topics-heading > p:first-child {
  margin: 0 0 30px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.addiction-topics-heading h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.74;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.addiction-topics-subtitle {
  max-width: 650px;

  margin: 35px 0 50px;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}


/* GRID */

.addiction-grid {
  display: grid;
  gap: 12px;
}


/* CARDS */

.addiction-card {
  min-height: 380px;

  padding: 25px;

  display: flex;
  flex-direction: column;

  border: 3px solid var(--black);

  color: var(--black);
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.addiction-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 7px 7px 0 var(--black);
}

.addiction-card-number {
  margin: 0 0 50px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.addiction-card h3 {
  margin: 0;

  font-size: clamp(2.8rem, 12vw, 5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.78;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}

.addiction-card-description {
  max-width: 500px;

  margin: 30px 0;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.addiction-card span {
  margin-top: auto;

  font-size: 0.9rem;
  font-weight: 900;
}


/* CARD COLORS */

.addiction-card-black {
  background: var(--black);
  border-color: var(--pink);
  color: var(--white);
}

.addiction-card-black h3 {
  color: var(--yellow);
}

.addiction-card-black span {
  color: var(--pink);
}


.addiction-card-yellow {
  background: var(--yellow);
  color: var(--black);
}


.addiction-card-pink {
  background: var(--pink);
  color: var(--black);
}


.addiction-card-purple {
  background: var(--purple);
  color: var(--white);
}

.addiction-card-purple h3 {
  color: var(--yellow);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .addiction-hero {
    min-height: 100vh;

    padding: 60px 6vw;

    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.93) 0%,
        rgba(0, 0, 0, 0.70) 38%,
        rgba(0, 0, 0, 0.18) 72%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/addiction_desktop_background-d285b996cdc3b6f1205e3626da891a3187b55b5f2c054c4168f1c2f5c05e4834.png);

    background-size: cover;
    background-position: center;
  }

  .addiction-hero h1 {
    font-size: clamp(7rem, 11vw, 12rem);
  }

  .addiction-intro {
    font-size: 2.3rem;
  }


  /* TOPICS */

  .addiction-topics {
    padding: 100px 6vw;
  }

  .addiction-topics-heading h2 {
    font-size: clamp(5rem, 8vw, 9rem);
  }

  .addiction-topics-subtitle {
    font-size: 1.25rem;
  }


  /* 2 x 2 GRID */

  .addiction-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .addiction-card {
    min-height: 470px;
    padding: 35px;
  }

  .addiction-card h3 {
    font-size: clamp(3.5rem, 5vw, 6rem);
  }

  .addiction-card-description {
    font-size: 1.1rem;
  }
}

/* =========================================
   SPIRITUALITY LANDING PAGE
   ========================================= */

.spirituality-page {
  width: 100%;
  overflow-x: hidden;
  background: var(--black);
}


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

.spirituality-hero {
  min-height: 100svh;
  padding: 30px 18px 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.62) 55%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    url(/assets/spirituality_mobile_background-9072d7790141e926de5c67c5def9a56c76d744f8b34e182ebe3be5602f1c942f.png);

  background-size: cover;
  background-position: center;
}

.spirituality-hero-content {
  width: 100%;
  max-width: 1100px;
}

.spirituality-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.spirituality-hero h1 {
  margin: 0;

  font-size: clamp(4.2rem, 19vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.72;
  letter-spacing: -0.075em;

  text-transform: uppercase;
}

.spirituality-hero h1 span {
  display: block;
}

.spirituality-hero h1 span:first-child {
  color: var(--yellow);
}

.spirituality-hero h1 span:last-child {
  color: var(--pink);
}

.spirituality-intro {
  max-width: 650px;

  margin: 40px 0 25px;

  color: var(--white);

  font-size: clamp(1.35rem, 6vw, 2.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.spirituality-button {
  display: inline-block;

  padding: 14px 20px;

  background: var(--yellow);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.spirituality-button:hover {
  background: var(--pink);
  transform: translate(-3px, -3px);
}


/* =========================================
   TOPICS
   ========================================= */

.spirituality-topics {
  padding: 65px 18px 80px;

  background: var(--purple);
  color: var(--white);
}

.spirituality-topics-heading > p:first-child {
  margin: 0 0 30px;

  color: var(--yellow);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.spirituality-topics-heading h2 {
  margin: 0;

  color: var(--yellow);

  font-size: clamp(4rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.74;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.spirituality-topics-subtitle {
  max-width: 650px;

  margin: 35px 0 50px;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}


/* =========================================
   GRID
   ========================================= */

.spirituality-grid {
  display: grid;
  gap: 12px;
}


/* =========================================
   CARDS
   ========================================= */

.spirituality-card {
  min-height: 380px;
  padding: 25px;

  display: flex;
  flex-direction: column;

  border: 3px solid var(--black);

  color: var(--black);
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.spirituality-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 7px 7px 0 var(--black);
}

.spirituality-card-number {
  margin: 0 0 50px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.spirituality-card h3 {
  margin: 0;

  font-size: clamp(2.8rem, 12vw, 5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.78;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}

.spirituality-card-description {
  max-width: 500px;

  margin: 30px 0;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.spirituality-card span {
  margin-top: auto;

  font-size: 0.9rem;
  font-weight: 900;
}


/* =========================================
   CARD COLORS
   ========================================= */

.spirituality-card-pink {
  background: var(--pink);
  color: var(--black);
}

.spirituality-card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.spirituality-card-purple {
  background: var(--purple);
  border-color: var(--yellow);
  color: var(--white);
}

.spirituality-card-purple h3 {
  color: var(--yellow);
}

.spirituality-card-purple span {
  color: var(--yellow);
}

.spirituality-card-black {
  background: var(--black);
  border-color: var(--pink);
  color: var(--white);
}

.spirituality-card-black h3 {
  color: var(--pink);
}

.spirituality-card-black span {
  color: var(--yellow);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .spirituality-hero {
    min-height: 100vh;

    padding: 60px 6vw;

    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.93) 0%,
        rgba(0, 0, 0, 0.70) 38%,
        rgba(0, 0, 0, 0.18) 72%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/spirituality_desktop_background-0dcbdac63cb53c354e18d9ea3af4982b90627ca334266f6c448f1660968d06bd.png);

    background-size: cover;
    background-position: center;
  }

  .spirituality-hero h1 {
    font-size: clamp(6.5rem, 10vw, 11rem);
  }

  .spirituality-intro {
    font-size: 2.3rem;
  }


  /* TOPICS */

  .spirituality-topics {
    padding: 100px 6vw;
  }

  .spirituality-topics-heading h2 {
    font-size: clamp(5rem, 8vw, 9rem);
  }

  .spirituality-topics-subtitle {
    font-size: 1.25rem;
  }


  /* 2 x 2 GRID */

  .spirituality-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .spirituality-card {
    min-height: 470px;
    padding: 35px;
  }

  .spirituality-card h3 {
    font-size: clamp(3.5rem, 5vw, 6rem);
  }

  .spirituality-card-description {
    font-size: 1.1rem;
  }
}

/* =========================================
   TOOLBOX LANDING PAGE
   ========================================= */

.toolbox-page {
  width: 100%;
  overflow-x: hidden;
  background: var(--black);
}


/* HERO */

.toolbox-hero {
  min-height: 100svh;
  padding: 30px 18px 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.62) 55%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    url(/assets/toolbox_mobile_background-2383cc7c6d02961882b41ad216789cd14d4b62c984e4d7eb4ba4d988d28ebcbd.png);

  background-size: cover;
  background-position: center;
}

.toolbox-hero-content {
  width: 100%;
  max-width: 1100px;
}

.toolbox-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-hero h1 {
  margin: 0;

  font-size: clamp(4.5rem, 21vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.72;
  letter-spacing: -0.075em;

  text-transform: uppercase;
}

.toolbox-hero h1 span {
  display: block;
}

.toolbox-hero h1 span:first-child {
  color: var(--yellow);
}

.toolbox-hero h1 span:last-child {
  color: var(--pink);
}

.toolbox-intro {
  max-width: 650px;

  margin: 40px 0 25px;

  color: var(--white);

  font-size: clamp(1.35rem, 6vw, 2.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.toolbox-button {
  display: inline-block;

  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.toolbox-button:hover {
  background: var(--yellow);
  transform: translate(-3px, -3px);
}


/* =========================================
   TOOLS SECTION
   ========================================= */

.toolbox-tools {
  padding: 65px 18px 80px;

  background: var(--pink);
  color: var(--black);
}

.toolbox-heading > p:first-child {
  margin: 0 0 30px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-heading h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.74;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.toolbox-subtitle {
  max-width: 650px;

  margin: 35px 0 50px;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}


/* =========================================
   GRID
   ========================================= */

.toolbox-grid {
  display: grid;
  gap: 12px;
}


/* =========================================
   CARDS
   ========================================= */

.toolbox-card {
  min-height: 380px;
  padding: 25px;

  display: flex;
  flex-direction: column;

  border: 3px solid var(--black);

  color: var(--black);
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.toolbox-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 7px 7px 0 var(--black);
}

.toolbox-card-number {
  margin: 0 0 50px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.toolbox-card h3 {
  margin: 0;

  font-size: clamp(2.8rem, 12vw, 5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.78;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}

.toolbox-card-description {
  max-width: 500px;

  margin: 30px 0;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.toolbox-card span {
  margin-top: auto;

  font-size: 0.9rem;
  font-weight: 900;
}


/* CARD COLORS */

.toolbox-card-pink {
  background: var(--pink);
  color: var(--black);
}

.toolbox-card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.toolbox-card-purple {
  background: var(--purple);
  color: var(--white);
}

.toolbox-card-purple h3 {
  color: var(--yellow);
}

.toolbox-card-black {
  background: var(--black);
  border-color: var(--yellow);
  color: var(--white);
}

.toolbox-card-black h3 {
  color: var(--yellow);
}

.toolbox-card-black span {
  color: var(--pink);
}


/* EMERGENCY PLAN SPLIT CARD */

.toolbox-card-split {
  background:
    linear-gradient(
      135deg,
      var(--yellow) 0%,
      var(--yellow) 48%,
      var(--pink) 48%,
      var(--pink) 100%
    );

  color: var(--black);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .toolbox-hero {
    min-height: 100vh;

    padding: 60px 6vw;

    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.93) 0%,
        rgba(0, 0, 0, 0.68) 38%,
        rgba(0, 0, 0, 0.15) 72%,
        rgba(0, 0, 0, 0.04) 100%
      ),
      url(/assets/toolbox_desktop_background-2abd376dd7cb41c56ef91a3a01089d5c3df17052120bdf9e5acd17ebd5918fd3.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-hero h1 {
    font-size: clamp(7rem, 12vw, 12rem);
  }

  .toolbox-intro {
    font-size: 2.3rem;
  }


  /* TOOLS */

  .toolbox-tools {
    padding: 100px 6vw;
  }

  .toolbox-heading h2 {
    font-size: clamp(5rem, 8vw, 9rem);
  }

  .toolbox-subtitle {
    font-size: 1.25rem;
  }


  /* 3 x 2 GRID */

  .toolbox-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .toolbox-card {
    min-height: 500px;
    padding: 30px;
  }

  .toolbox-card h3 {
    font-size: clamp(3rem, 4vw, 5rem);
  }

  .toolbox-card-description {
    font-size: 1.05rem;
  }
}

/* =========================================
   PERSPECTIVES LANDING PAGE
   ========================================= */

.perspectives-page {
  width: 100%;
  overflow-x: hidden;
  background: var(--black);
}


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

.perspectives-hero {
  min-height: 100svh;
  padding: 30px 18px 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.65) 52%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    url(/assets/perspectives_mobile_background-636a3885f739e139c90b59771b21ff06b880cc73e316c4574b60cafd593bb173.png);

  background-size: cover;
  background-position: center;
}

.perspectives-hero-content {
  width: 100%;
  max-width: 1100px;
}

.perspectives-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.perspectives-hero h1 {
  margin: 0;

  font-size: clamp(4.4rem, 20vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.72;
  letter-spacing: -0.075em;

  text-transform: uppercase;
}

.perspectives-hero h1 span {
  display: block;
}

.perspectives-hero h1 span:first-child {
  color: var(--yellow);
}

.perspectives-hero h1 span:last-child {
  color: var(--pink);
}

.perspectives-intro {
  max-width: 650px;
  margin: 40px 0 25px;

  color: var(--white);

  font-size: clamp(1.4rem, 6vw, 2.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.perspectives-button {
  display: inline-block;

  padding: 14px 20px;

  background: var(--yellow);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.perspectives-button:hover {
  background: var(--pink);
  transform: translate(-3px, -3px);
}


/* =========================================
   TOPICS
   ========================================= */

.perspectives-topics {
  padding: 65px 18px 80px;

  background: var(--yellow);
  color: var(--black);
}

.perspectives-heading > p:first-child {
  margin: 0 0 30px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.perspectives-heading h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.74;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.perspectives-subtitle {
  max-width: 700px;
  margin: 35px 0 50px;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}


/* =========================================
   GRID
   ========================================= */

.perspectives-grid {
  display: grid;
  gap: 12px;
}


/* =========================================
   CARDS
   ========================================= */

.perspectives-card {
  min-height: 380px;
  padding: 25px;

  display: flex;
  flex-direction: column;

  border: 3px solid var(--black);

  color: var(--black);
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.perspectives-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 7px 7px 0 var(--black);
}

.perspectives-card-number {
  margin: 0 0 50px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.perspectives-card h3 {
  margin: 0;

  font-size: clamp(3rem, 13vw, 5.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.78;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}

.perspectives-card-description {
  max-width: 500px;
  margin: 30px 0;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.perspectives-card span {
  margin-top: auto;

  font-size: 0.9rem;
  font-weight: 900;
}


/* =========================================
   CARD COLORS
   ========================================= */

.perspectives-card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.perspectives-card-pink {
  background: var(--pink);
  color: var(--black);
}

.perspectives-card-purple {
  background: var(--purple);
  color: var(--white);
}

.perspectives-card-purple h3 {
  color: var(--yellow);
}

.perspectives-card-purple span {
  color: var(--yellow);
}

.perspectives-card-black {
  background: var(--black);
  border-color: var(--pink);
  color: var(--white);
}

.perspectives-card-black h3 {
  color: var(--pink);
}

.perspectives-card-black span {
  color: var(--yellow);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .perspectives-hero {
    min-height: 100vh;
    padding: 60px 6vw;

    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.93) 0%,
        rgba(0, 0, 0, 0.68) 38%,
        rgba(0, 0, 0, 0.16) 72%,
        rgba(0, 0, 0, 0.04) 100%
      ),
      url(/assets/perspectives_desktop_background-1ed533e86cb607ea94c79241984025c348bdd15871c190e77eca387e33d8bc28.png);

    background-size: cover;
    background-position: center;
  }

  .perspectives-hero h1 {
    font-size: clamp(6.5rem, 10vw, 11rem);
  }

  .perspectives-intro {
    font-size: 2.3rem;
  }


  /* TOPICS */

  .perspectives-topics {
    padding: 100px 6vw;
  }

  .perspectives-heading h2 {
    font-size: clamp(5rem, 8vw, 9rem);
  }

  .perspectives-subtitle {
    font-size: 1.25rem;
  }


  /* 2 x 2 GRID */

  .perspectives-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .perspectives-card {
    min-height: 470px;
    padding: 35px;
  }

  .perspectives-card h3 {
    font-size: clamp(3.5rem, 5vw, 6rem);
  }

  .perspectives-card-description {
    font-size: 1.1rem;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES
   ========================================= */

.bipolar-perspectives-page {
  width: 100%;
  overflow-x: hidden;
  background: var(--black);
}


/* HERO */

.bipolar-perspectives-hero {
  min-height: 100svh;
  padding: 30px 18px 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.72) 50%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/assets/bipolar_perspectives_mobile_background-1a2af6fa5a397a2fe01d530b4a123aa0f571d2e2aeba681c5cbdaabf3f3dfc56.png);

  background-size: cover;
  background-position: center;
}

.bipolar-perspectives-hero-content {
  width: 100%;
  max-width: 1100px;
}

.bipolar-perspectives-eyebrow {
  margin: 0 0 20px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.bipolar-perspectives-hero h1 {
  margin: 0;

  font-size: clamp(3.7rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.075em;

  text-transform: uppercase;
}

.bipolar-perspectives-hero h1 span {
  display: block;
}

.bipolar-perspectives-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.bipolar-perspectives-hero h1 span:nth-child(2) {
  color: var(--yellow);
}

.bipolar-perspectives-hero h1 span:nth-child(3) {
  color: var(--white);
}

.bipolar-perspectives-intro {
  margin: 40px 0 25px;

  color: var(--white);

  font-size: clamp(1.5rem, 6vw, 2.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.bipolar-perspectives-button {
  display: inline-block;

  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.bipolar-perspectives-button:hover {
  background: var(--yellow);
  transform: translate(-3px, -3px);
}


/* =========================================
   TOPICS
   ========================================= */

.bipolar-perspectives-topics {
  padding: 65px 18px 80px;

  background: var(--purple);
  color: var(--white);
}

.bipolar-perspectives-heading > p:first-child {
  margin: 0 0 30px;

  color: var(--yellow);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.bipolar-perspectives-heading h2 {
  margin: 0;

  color: var(--white);

  font-size: clamp(4rem, 17vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.74;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.bipolar-perspectives-subtitle {
  max-width: 720px;
  margin: 35px 0 50px;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}


/* =========================================
   GRID
   ========================================= */

.bipolar-perspectives-grid {
  display: grid;
  gap: 12px;
}


/* =========================================
   CARDS
   ========================================= */

.bipolar-perspective-card {
  min-height: 390px;
  padding: 25px;

  display: flex;
  flex-direction: column;

  border: 3px solid var(--black);

  color: var(--black);
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.bipolar-perspective-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 7px 7px 0 var(--black);
}

.bipolar-perspective-number {
  margin: 0 0 50px;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.bipolar-perspective-card h3 {
  margin: 0;

  font-size: clamp(3rem, 13vw, 5.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.78;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}

.bipolar-perspective-description {
  max-width: 500px;
  margin: 30px 0;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.bipolar-perspective-card span {
  margin-top: auto;

  font-size: 0.9rem;
  font-weight: 900;
}


/* CARD COLORS */

.bp-card-pink {
  background: var(--pink);
}

.bp-card-yellow {
  background: var(--yellow);
}

.bp-card-purple {
  background: var(--purple);
  border-color: var(--yellow);
  color: var(--white);
}

.bp-card-purple h3,
.bp-card-purple span {
  color: var(--yellow);
}

.bp-card-black {
  background: var(--black);
  border-color: var(--pink);
  color: var(--white);
}

.bp-card-black h3 {
  color: var(--pink);
}

.bp-card-black span {
  color: var(--yellow);
}

.bp-card-split {
  background:
    linear-gradient(
      135deg,
      var(--yellow) 0%,
      var(--yellow) 50%,
      var(--pink) 50%,
      var(--pink) 100%
    );

  color: var(--black);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .bipolar-perspectives-hero {
    min-height: 100vh;
    padding: 60px 6vw;

    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.67) 38%,
        rgba(0, 0, 0, 0.15) 72%,
        rgba(0, 0, 0, 0.03) 100%
      ),
      url(/assets/bipolar_perspectives_desktop_background-e2a81ad5b87ed14c488e956cc37946951adaec0e065165fad65c360526ca5bc1.png);

    background-size: cover;
    background-position: center;
  }

  .bipolar-perspectives-hero h1 {
    font-size: clamp(5.5rem, 8.5vw, 10rem);
  }

  .bipolar-perspectives-intro {
    font-size: 2.3rem;
  }

  .bipolar-perspectives-topics {
    padding: 100px 6vw;
  }

  .bipolar-perspectives-heading h2 {
    font-size: clamp(5rem, 8vw, 9rem);
  }

  .bipolar-perspectives-subtitle {
    font-size: 1.25rem;
  }

  .bipolar-perspectives-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .bipolar-perspective-card {
    min-height: 480px;
    padding: 32px;
  }

  .bipolar-perspective-card h3 {
    font-size: clamp(3rem, 4vw, 5rem);
  }

  .bipolar-perspective-description {
    font-size: 1.05rem;
  }

  @media (min-width: 768px) {
  .bp-card-big-picture {
    grid-column: 1 / -1;
    min-height: 400px;
  }

  .bp-card-big-picture h3 {
    font-size: clamp(4rem, 7vw, 8rem);
  }

  .bp-card-big-picture .bipolar-perspective-description {
    max-width: 750px;
  }
}
}

.bp-card-big-picture {
  background:
    linear-gradient(
      135deg,
      var(--pink) 0%,
      var(--pink) 25%,
      var(--yellow) 25%,
      var(--yellow) 50%,
      var(--purple) 50%,
      var(--purple) 75%,
      var(--black) 75%,
      var(--black) 100%
    );

  color: var(--white);

  border: 3px solid var(--white);
}

.bp-card-big-picture h3 {
  color: var(--white);

  text-shadow:
    4px 4px 0 var(--black);
}

.bp-card-big-picture .bipolar-perspective-description {
  background: var(--black);
  padding: 16px;
}

.bp-card-big-picture span {
  color: var(--yellow);
}

/* =========================================
   BIPOLAR > PERSPECTIVES > BUDDHISM
   ========================================= */

.buddhism-bipolar-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


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

.buddhism-bipolar-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(138, 0, 255, 0.35),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.75)
    ),
    var(--black);
}

.buddhism-bipolar-hero-content {
  width: 100%;
  max-width: 1200px;
}

.buddhism-bipolar-eyebrow {
  margin: 0 0 25px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.buddhism-bipolar-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.buddhism-bipolar-hero h1 span {
  display: block;
}

.buddhism-bipolar-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.buddhism-bipolar-hero h1 span:nth-child(2) {
  color: var(--white);
}

.buddhism-bipolar-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.buddhism-bipolar-intro {
  margin: 40px 0 0;

  color: var(--white);

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
}


/* =========================================
   CONTENT SECTIONS
   ========================================= */

.buddhism-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.buddhism-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.buddhism-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;

  text-transform: uppercase;
}

.buddhism-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.buddhism-copy > p {
  margin: 0 0 22px;
}

.buddhism-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.buddhism-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;

  text-transform: uppercase;
}


/* =========================================
   SECTION COLORS
   ========================================= */

.buddhism-pink {
  background: var(--pink);
  color: var(--black);
}

.buddhism-yellow {
  background: var(--yellow);
  color: var(--black);
}

.buddhism-purple {
  background: var(--purple);
  color: var(--white);
}

.buddhism-purple .buddhism-number {
  color: var(--yellow);
}

.buddhism-purple blockquote {
  color: var(--yellow);
}

.buddhism-black {
  background: var(--black);
  color: var(--white);
}

.buddhism-black .buddhism-number {
  color: var(--pink);
}

.buddhism-black h2 {
  color: var(--yellow);
}

.buddhism-black blockquote {
  color: var(--pink);
}


/* =========================================
   MINDFULNESS EXAMPLE
   ========================================= */

.buddhism-example {
  margin: 35px 0;
  padding: 25px;

  background: var(--yellow);
  border: 4px solid var(--pink);

  color: var(--black);
}

.buddhism-example p {
  margin: 12px 0;
  font-weight: 900;
}

.buddhism-example h3 {
  margin: 10px 0 25px;

  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.9;
}


/* =========================================
   MIDDLE WAY
   ========================================= */

.buddhism-contrast {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
  text-align: center;
}

.buddhism-contrast p {
  margin: 15px 0;

  font-size: clamp(1.5rem, 6vw, 2.8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.buddhism-contrast span {
  display: block;

  color: var(--yellow);

  font-size: 2rem;
  font-weight: 900;
}


/* =========================================
   PRACTICE LIST
   ========================================= */

.buddhism-practice-list {
  margin-top: 35px;

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

.buddhism-practice-list > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.buddhism-practice-list span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.buddhism-practice-list p {
  margin: 0;
}


/* =========================================
   ENDING
   ========================================= */

.buddhism-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.buddhism-ending-small {
  margin: 0 0 8px;

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.buddhism-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.buddhism-ending h2 span {
  color: var(--pink);
}

.buddhism-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.buddhism-ending-copy p {
  margin: 0 0 15px;
}


/* BACK TO PERSPECTIVES */

.buddhism-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.buddhism-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .buddhism-bipolar-hero {
    min-height: 100vh;
    padding: 70px 6vw;
  }

  .buddhism-bipolar-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .buddhism-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .buddhism-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .buddhism-copy {
    font-size: 1.1rem;
  }

  .buddhism-lead {
    font-size: 1.5rem;
  }

  .buddhism-copy blockquote {
    font-size: 2.3rem;
  }

  .buddhism-ending {
    min-height: 75vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .buddhism-ending h2 {
    font-size: clamp(6rem, 8vw, 10rem);
  }

  .buddhism-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 400px) {

  .buddhism-bipolar-hero h1 {
    font-size: 15vw;
  }

  .buddhism-section h2 {
    font-size: 14vw;
  }

  .buddhism-copy {
    font-size: 0.98rem;
  }

  .buddhism-ending h2 {
    font-size: 16vw;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES > BUDDHISM
   ========================================= */

.buddhism-bipolar-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


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

.buddhism-bipolar-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/assets/bipolar_buddhism_mobile_background-06d41eaed7d1462eebcf232fa094d4f1e73ca5c4d03d78a5c6e346b14cc39fa9.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.buddhism-bipolar-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.buddhism-bipolar-eyebrow {
  margin: 0 0 25px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.buddhism-bipolar-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.buddhism-bipolar-hero h1 span {
  display: block;
}

.buddhism-bipolar-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.buddhism-bipolar-hero h1 span:nth-child(2) {
  color: var(--white);
}

.buddhism-bipolar-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.buddhism-bipolar-intro {
  margin: 40px 0 0;

  color: var(--white);

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
}


/* =========================================
   CONTENT SECTIONS
   ========================================= */

.buddhism-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.buddhism-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.buddhism-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;

  text-transform: uppercase;
}

.buddhism-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.buddhism-copy > p {
  margin: 0 0 22px;
}

.buddhism-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.buddhism-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;

  text-transform: uppercase;
}


/* =========================================
   SECTION COLORS
   ========================================= */

.buddhism-pink {
  background: var(--pink);
  color: var(--black);
}

.buddhism-yellow {
  background: var(--yellow);
  color: var(--black);
}

.buddhism-purple {
  background: var(--purple);
  color: var(--white);
}

.buddhism-purple .buddhism-number {
  color: var(--yellow);
}

.buddhism-purple blockquote {
  color: var(--yellow);
}

.buddhism-black {
  background: var(--black);
  color: var(--white);
}

.buddhism-black .buddhism-number {
  color: var(--pink);
}

.buddhism-black h2 {
  color: var(--yellow);
}

.buddhism-black blockquote {
  color: var(--pink);
}


/* =========================================
   MINDFULNESS EXAMPLE
   ========================================= */

.buddhism-example {
  margin: 35px 0;
  padding: 25px;

  background: var(--yellow);
  border: 4px solid var(--pink);

  color: var(--black);
}

.buddhism-example p {
  margin: 12px 0;
  font-weight: 900;
}

.buddhism-example h3 {
  margin: 10px 0 25px;

  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.9;
}


/* =========================================
   MIDDLE WAY
   ========================================= */

.buddhism-contrast {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
  text-align: center;
}

.buddhism-contrast p {
  margin: 15px 0;

  font-size: clamp(1.5rem, 6vw, 2.8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.buddhism-contrast span {
  display: block;

  color: var(--yellow);

  font-size: 2rem;
  font-weight: 900;
}


/* =========================================
   PRACTICE LIST
   ========================================= */

.buddhism-practice-list {
  margin-top: 35px;
  border-top: 3px solid var(--pink);
}

.buddhism-practice-list > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.buddhism-practice-list span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.buddhism-practice-list p {
  margin: 0;
}


/* =========================================
   ENDING
   ========================================= */

.buddhism-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.buddhism-ending-small {
  margin: 0 0 8px;

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.buddhism-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.buddhism-ending h2 span {
  color: var(--pink);
}

.buddhism-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.buddhism-ending-copy p {
  margin: 0 0 15px;
}


/* =========================================
   BACK TO PERSPECTIVES
   ========================================= */

.buddhism-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.buddhism-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .buddhism-bipolar-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.22) 62%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/bipolar_buddhism_desktop_background-ccc63edd3ed6a0a376a5cdd2ed8bfeeff1335adcb5da281f7144e6b419ea1104.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .buddhism-bipolar-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .buddhism-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .buddhism-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .buddhism-copy {
    font-size: 1.1rem;
  }

  .buddhism-lead {
    font-size: 1.5rem;
  }

  .buddhism-copy blockquote {
    font-size: 2.3rem;
  }

  .buddhism-ending {
    min-height: 75vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .buddhism-ending h2 {
    font-size: clamp(6rem, 8vw, 10rem);
  }

  .buddhism-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 400px) {

  .buddhism-bipolar-hero h1 {
    font-size: 15vw;
  }

  .buddhism-section h2 {
    font-size: 14vw;
  }

  .buddhism-copy {
    font-size: 0.98rem;
  }

  .buddhism-ending h2 {
    font-size: 16vw;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES > HINDUISM
   ========================================= */

.hinduism-bipolar-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


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

.hinduism-bipolar-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/bipolar_hinduism_mobile_background.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hinduism-bipolar-hero-content {
  width: 100%;
  max-width: 1200px;

  position: relative;
  z-index: 2;
}

.hinduism-bipolar-eyebrow {
  margin: 0 0 25px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hinduism-bipolar-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.hinduism-bipolar-hero h1 span {
  display: block;
}

.hinduism-bipolar-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.hinduism-bipolar-hero h1 span:nth-child(2) {
  color: var(--white);
}

.hinduism-bipolar-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.hinduism-bipolar-intro {
  margin: 40px 0 0;

  color: var(--white);

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
}


/* =========================================
   CONTENT
   ========================================= */

.hinduism-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.hinduism-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hinduism-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;

  text-transform: uppercase;
}

.hinduism-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.hinduism-copy > p {
  margin: 0 0 22px;
}

.hinduism-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.hinduism-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;

  text-transform: uppercase;
}


/* =========================================
   COLORS
   ========================================= */

.hinduism-pink {
  background: var(--pink);
  color: var(--black);
}

.hinduism-yellow {
  background: var(--yellow);
  color: var(--black);
}

.hinduism-purple {
  background: var(--purple);
  color: var(--white);
}

.hinduism-purple .hinduism-number {
  color: var(--yellow);
}

.hinduism-purple blockquote {
  color: var(--yellow);
}

.hinduism-black {
  background: var(--black);
  color: var(--white);
}

.hinduism-black .hinduism-number {
  color: var(--pink);
}

.hinduism-black h2 {
  color: var(--yellow);
}

.hinduism-black blockquote {
  color: var(--pink);
}


/* =========================================
   GUNAS
   ========================================= */

.hinduism-gunas {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.hinduism-gunas > div {
  padding: 20px;

  background: var(--black);
  color: var(--white);

  border: 3px solid var(--pink);
}

.hinduism-gunas span {
  display: block;

  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.hinduism-gunas p {
  margin: 0;
  font-weight: 800;
}


/* =========================================
   WITNESS EXAMPLE
   ========================================= */

.hinduism-example {
  margin: 35px 0;
  padding: 25px;

  background: var(--yellow);
  border: 4px solid var(--pink);

  color: var(--black);
}

.hinduism-example p {
  margin: 12px 0;
  font-weight: 900;
}

.hinduism-example h3 {
  margin: 10px 0 25px;

  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.9;
}


/* =========================================
   BALANCE
   ========================================= */

.hinduism-contrast {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
  text-align: center;
}

.hinduism-contrast p {
  margin: 15px 0;

  font-size: clamp(1.5rem, 6vw, 2.8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.hinduism-contrast span {
  display: block;

  color: var(--yellow);

  font-size: 2rem;
  font-weight: 900;
}


/* =========================================
   PRACTICE
   ========================================= */

.hinduism-practice-list {
  margin-top: 35px;
  border-top: 3px solid var(--pink);
}

.hinduism-practice-list > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.hinduism-practice-list span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.hinduism-practice-list p {
  margin: 0;
}


/* =========================================
   ENDING
   ========================================= */

.hinduism-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.hinduism-ending-small {
  margin: 0 0 8px;

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.hinduism-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;

  text-transform: uppercase;
}

.hinduism-ending h2 span {
  color: var(--pink);
}

.hinduism-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.hinduism-ending-copy p {
  margin: 0 0 15px;
}


/* =========================================
   BACK BUTTON
   ========================================= */

.hinduism-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.hinduism-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .hinduism-bipolar-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.22) 62%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/bipolar_hinduism_desktop_background.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hinduism-bipolar-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .hinduism-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .hinduism-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .hinduism-copy {
    font-size: 1.1rem;
  }

  .hinduism-lead {
    font-size: 1.5rem;
  }

  .hinduism-copy blockquote {
    font-size: 2.3rem;
  }

  .hinduism-gunas {
    grid-template-columns: repeat(3, 1fr);
  }

  .hinduism-ending {
    min-height: 75vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .hinduism-ending h2 {
    font-size: clamp(6rem, 8vw, 10rem);
  }

  .hinduism-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 400px) {

  .hinduism-bipolar-hero h1 {
    font-size: 15vw;
  }

  .hinduism-section h2 {
    font-size: 14vw;
  }

  .hinduism-copy {
    font-size: 0.98rem;
  }

  .hinduism-ending h2 {
    font-size: 16vw;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES > STOICISM
   ========================================= */

.stoicism-bipolar-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.stoicism-bipolar-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/bipolar_stoicism_mobile_background.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stoicism-bipolar-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.stoicism-bipolar-eyebrow {
  margin: 0 0 25px;
  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.stoicism-bipolar-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.stoicism-bipolar-hero h1 span {
  display: block;
}

.stoicism-bipolar-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.stoicism-bipolar-hero h1 span:nth-child(2) {
  color: var(--white);
}

.stoicism-bipolar-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.stoicism-bipolar-intro {
  margin: 40px 0 0;

  color: var(--white);

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* CONTENT */

.stoicism-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.stoicism-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.stoicism-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.stoicism-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.stoicism-copy > p {
  margin: 0 0 22px;
}

.stoicism-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.stoicism-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.stoicism-pink {
  background: var(--pink);
  color: var(--black);
}

.stoicism-yellow {
  background: var(--yellow);
  color: var(--black);
}

.stoicism-purple {
  background: var(--purple);
  color: var(--white);
}

.stoicism-purple .stoicism-number,
.stoicism-purple blockquote {
  color: var(--yellow);
}

.stoicism-black {
  background: var(--black);
  color: var(--white);
}

.stoicism-black .stoicism-number {
  color: var(--pink);
}

.stoicism-black h2 {
  color: var(--yellow);
}

.stoicism-black blockquote {
  color: var(--pink);
}


/* FIRST IMPRESSION */

.stoicism-example {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
}

.stoicism-example p {
  margin: 12px 0;
  color: var(--pink);
  font-weight: 900;
}

.stoicism-example h3 {
  margin: 10px 0 28px;

  color: var(--yellow);

  font-size: clamp(1.8rem, 7vw, 3.6rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
}


/* PAUSE */

.stoicism-pause {
  margin: 35px 0;
  padding: 25px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background: var(--yellow);
  border: 4px solid var(--pink);

  color: var(--black);
}

.stoicism-pause span {
  font-size: 1.2rem;
  font-weight: 900;
  font-style: italic;
}

.stoicism-pause b {
  color: var(--pink);
  font-size: 1.8rem;
}


/* VALUES */

.stoicism-values {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.stoicism-values > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.stoicism-values span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.4rem;
  font-weight: 900;
  font-style: italic;
}

.stoicism-values p {
  margin: 0;
  font-weight: 800;
}


/* LESSONS */

.stoicism-lessons {
  margin: 35px 0;

  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
}

.stoicism-lessons p {
  margin: 0;
  padding: 18px 0;

  border-bottom: 2px solid rgba(0, 0, 0, 0.35);

  font-weight: 900;
  font-style: italic;
}

.stoicism-lessons p:last-child {
  border-bottom: 0;
}


/* PRACTICE */

.stoicism-practice-list {
  margin-top: 35px;
  border-top: 3px solid var(--pink);
}

.stoicism-practice-list > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.stoicism-practice-list span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.stoicism-practice-list p {
  margin: 0;
}


/* ENDING */

.stoicism-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.stoicism-ending-small {
  margin: 0 0 8px;

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.stoicism-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.stoicism-ending h2 span {
  color: var(--pink);
}

.stoicism-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.stoicism-ending-copy p {
  margin: 0 0 15px;
}


/* BACK BUTTON */

.stoicism-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.stoicism-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .stoicism-bipolar-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.22) 62%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/bipolar_stoicism_desktop_background.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .stoicism-bipolar-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .stoicism-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .stoicism-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .stoicism-copy {
    font-size: 1.1rem;
  }

  .stoicism-lead {
    font-size: 1.5rem;
  }

  .stoicism-copy blockquote {
    font-size: 2.3rem;
  }

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

  .stoicism-ending {
    min-height: 75vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .stoicism-ending h2 {
    font-size: clamp(6rem, 8vw, 10rem);
  }

  .stoicism-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .stoicism-bipolar-hero h1 {
    font-size: 15vw;
  }

  .stoicism-section h2 {
    font-size: 14vw;
  }

  .stoicism-copy {
    font-size: 0.98rem;
  }

  .stoicism-ending h2 {
    font-size: 16vw;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES > CBT
   ========================================= */

.cbt-bipolar-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.cbt-bipolar-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/assets/bipolar_cbt_mobile_background-70737de2f28c16aca513c748818a15fcf5fdbe8d0ece05f74687fe3324cd0378.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cbt-bipolar-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.cbt-bipolar-eyebrow {
  margin: 0 0 25px;
  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.cbt-bipolar-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.cbt-bipolar-hero h1 span {
  display: block;
}

.cbt-bipolar-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.cbt-bipolar-hero h1 span:nth-child(2) {
  color: var(--white);
}

.cbt-bipolar-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.cbt-bipolar-intro {
  margin: 40px 0 0;

  color: var(--white);

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* CONTENT */

.cbt-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.cbt-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.cbt-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.cbt-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.cbt-copy > p {
  margin: 0 0 22px;
}

.cbt-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.cbt-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.cbt-pink {
  background: var(--pink);
  color: var(--black);
}

.cbt-yellow {
  background: var(--yellow);
  color: var(--black);
}

.cbt-purple {
  background: var(--purple);
  color: var(--white);
}

.cbt-purple .cbt-number,
.cbt-purple blockquote {
  color: var(--yellow);
}

.cbt-black {
  background: var(--black);
  color: var(--white);
}

.cbt-black .cbt-number {
  color: var(--pink);
}

.cbt-black h2 {
  color: var(--yellow);
}

.cbt-black blockquote {
  color: var(--pink);
}


/* CBT CHAIN */

.cbt-chain {
  margin: 35px 0;
  padding: 25px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--white);
}

.cbt-chain span {
  font-size: 1.15rem;
  font-weight: 900;
  font-style: italic;
}

.cbt-chain b {
  color: var(--pink);
  font-size: 1.8rem;
}


/* AUTOMATIC THOUGHT EXAMPLE */

.cbt-example {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
}

.cbt-example p {
  margin: 12px 0;
  color: var(--pink);
  font-weight: 900;
}

.cbt-example h3 {
  margin: 8px 0 28px;

  color: var(--yellow);

  font-size: clamp(1.8rem, 7vw, 3.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}


/* DISTORTIONS */

.cbt-distortions {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.cbt-distortions > div {
  padding: 20px;

  border: 3px solid var(--pink);
  background: #111;

  color: var(--white);
}

.cbt-distortions span {
  display: block;
  margin-bottom: 7px;

  color: var(--yellow);

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.cbt-distortions p {
  margin: 0;
}


/* EVIDENCE */

.cbt-evidence {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.cbt-evidence-thought {
  margin: 0 !important;
  padding: 25px;

  background: var(--black);
  color: var(--yellow);

  border: 4px solid var(--black);

  font-size: clamp(1.7rem, 6vw, 3rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.cbt-evidence > div {
  padding: 20px;

  background: var(--yellow);
  border: 3px solid var(--black);

  color: var(--black);
}

.cbt-evidence span {
  display: block;
  margin-bottom: 7px;

  font-weight: 900;
  font-style: italic;
}

.cbt-evidence p {
  margin: 0;
}


/* REFRAME */

.cbt-reframe {
  margin: 35px 0;

  display: grid;
  gap: 12px;

  text-align: center;
}

.cbt-reframe > div {
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
}

.cbt-reframe span {
  display: block;
  margin-bottom: 10px;

  color: var(--yellow);

  font-weight: 900;
  font-style: italic;
}

.cbt-reframe p {
  margin: 0;

  font-size: 1.2rem;
  font-weight: 800;
}

.cbt-reframe > b {
  color: var(--pink);
  font-size: 2.5rem;
}


/* PRACTICE */

.cbt-practice-list {
  margin-top: 35px;
  border-top: 3px solid var(--pink);
}

.cbt-practice-list > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.cbt-practice-list span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.cbt-practice-list p {
  margin: 0;
}


/* ENDING */

.cbt-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.cbt-ending-small {
  margin: 0 0 8px;

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.cbt-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.cbt-ending h2 span {
  color: var(--pink);
}

.cbt-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.cbt-ending-copy p {
  margin: 0 0 15px;
}


/* BACK BUTTON */

.cbt-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.cbt-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .cbt-bipolar-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.22) 62%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/bipolar_cbt_desktop_background-d84b76965f774e59ff2e5d88c61244dd0789abf9231afc465d9b2945742597bb.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .cbt-bipolar-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .cbt-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .cbt-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .cbt-copy {
    font-size: 1.1rem;
  }

  .cbt-lead {
    font-size: 1.5rem;
  }

  .cbt-copy blockquote {
    font-size: 2.3rem;
  }

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

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

  .cbt-evidence-thought {
    grid-column: 1 / -1;
  }

  .cbt-ending {
    min-height: 75vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .cbt-ending h2 {
    font-size: clamp(6rem, 8vw, 10rem);
  }

  .cbt-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .cbt-bipolar-hero h1 {
    font-size: 15vw;
  }

  .cbt-section h2 {
    font-size: 14vw;
  }

  .cbt-copy {
    font-size: 0.98rem;
  }

  .cbt-ending h2 {
    font-size: 16vw;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES > DBT
   ========================================= */

.dbt-bipolar-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.dbt-bipolar-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/assets/bipolar_dbt_mobile_background-ac2d594c770a784f0c1c2a98ee7cbeeb12ff4556d37571a84443cba28590d896.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dbt-bipolar-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.dbt-bipolar-eyebrow {
  margin: 0 0 25px;
  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.dbt-bipolar-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.dbt-bipolar-hero h1 span {
  display: block;
}

.dbt-bipolar-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.dbt-bipolar-hero h1 span:nth-child(2) {
  color: var(--white);
}

.dbt-bipolar-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.dbt-bipolar-intro {
  margin: 40px 0 0;

  color: var(--white);

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* CONTENT */

.dbt-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.dbt-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.dbt-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.dbt-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.dbt-copy > p {
  margin: 0 0 22px;
}

.dbt-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.dbt-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.dbt-pink {
  background: var(--pink);
  color: var(--black);
}

.dbt-yellow {
  background: var(--yellow);
  color: var(--black);
}

.dbt-purple {
  background: var(--purple);
  color: var(--white);
}

.dbt-purple .dbt-number,
.dbt-purple blockquote {
  color: var(--yellow);
}

.dbt-black {
  background: var(--black);
  color: var(--white);
}

.dbt-black .dbt-number {
  color: var(--pink);
}

.dbt-black h2 {
  color: var(--yellow);
}

.dbt-black blockquote {
  color: var(--pink);
}


/* DIALECTIC */

.dbt-dialectic {
  margin: 35px 0;

  display: grid;
  gap: 10px;

  text-align: center;
}

.dbt-dialectic > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.dbt-dialectic span {
  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.dbt-dialectic b {
  font-size: 2rem;
}


/* WISE MIND */

.dbt-minds {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.dbt-minds > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--pink);

  color: var(--white);
}

.dbt-minds span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.3rem;
  font-weight: 900;
  font-style: italic;
}

.dbt-minds p {
  margin: 0;
}


/* MINDFULNESS EXAMPLE */

.dbt-example {
  margin: 35px 0;
  padding: 25px;

  background: var(--yellow);
  border: 4px solid var(--pink);

  color: var(--black);
}

.dbt-example p {
  margin: 12px 0;
  font-weight: 900;
}

.dbt-example h3 {
  margin: 8px 0 28px;

  font-size: clamp(1.8rem, 7vw, 3.5rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}


/* EMOTION REGULATION */

.dbt-regulation {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.dbt-regulation > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.dbt-regulation span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.dbt-regulation p {
  margin: 0;
}


/* OPPOSITE ACTION */

.dbt-opposite {
  margin: 35px 0;

  display: grid;
  gap: 10px;

  text-align: center;
}

.dbt-opposite > div {
  padding: 22px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
}

.dbt-opposite span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-weight: 900;
  font-style: italic;
}

.dbt-opposite p {
  margin: 0;
  font-weight: 800;
}

.dbt-opposite b {
  color: var(--pink);
  font-size: 2.5rem;
}


/* RELATIONSHIPS */

.dbt-relationship {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.dbt-relationship span {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);

  font-weight: 900;
  font-style: italic;
}


/* PRACTICE */

.dbt-practice-list {
  margin-top: 35px;
  border-top: 3px solid var(--pink);
}

.dbt-practice-list > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.dbt-practice-list span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.dbt-practice-list p {
  margin: 0;
}


/* ENDING */

.dbt-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.dbt-ending-small {
  margin: 0 0 8px;

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.dbt-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 17vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.dbt-ending h2 span {
  color: var(--pink);
}

.dbt-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.dbt-ending-copy p {
  margin: 0 0 15px;
}


/* BACK BUTTON */

.dbt-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.dbt-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .dbt-bipolar-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.22) 62%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/bipolar_dbt_desktop_background-63a61b4e741a3cc19d1ea5c6466235367c6b6f57a0cc1d5ebbb9f7db96db3c96.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .dbt-bipolar-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .dbt-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .dbt-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .dbt-copy {
    font-size: 1.1rem;
  }

  .dbt-lead {
    font-size: 1.5rem;
  }

  .dbt-copy blockquote {
    font-size: 2.3rem;
  }

  .dbt-minds {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .dbt-ending {
    min-height: 75vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .dbt-ending h2 {
    font-size: clamp(6rem, 8vw, 10rem);
  }

  .dbt-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .dbt-bipolar-hero h1 {
    font-size: 15vw;
  }

  .dbt-section h2 {
    font-size: 14vw;
  }

  .dbt-copy {
    font-size: 0.98rem;
  }

  .dbt-ending h2 {
    font-size: 16vw;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES > IFS
   ========================================= */

.ifs-bipolar-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.ifs-bipolar-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/bipolar_ifs_mobile_background.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ifs-bipolar-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.ifs-bipolar-eyebrow {
  margin: 0 0 25px;
  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ifs-bipolar-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.ifs-bipolar-hero h1 span {
  display: block;
}

.ifs-bipolar-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.ifs-bipolar-hero h1 span:nth-child(2) {
  color: var(--white);
}

.ifs-bipolar-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.ifs-bipolar-intro {
  margin: 40px 0 0;

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* SECTIONS */

.ifs-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.ifs-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ifs-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.ifs-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.ifs-copy > p {
  margin: 0 0 22px;
}

.ifs-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.ifs-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.ifs-pink {
  background: var(--pink);
  color: var(--black);
}

.ifs-yellow {
  background: var(--yellow);
  color: var(--black);
}

.ifs-purple {
  background: var(--purple);
  color: var(--white);
}

.ifs-purple .ifs-number,
.ifs-purple blockquote {
  color: var(--yellow);
}

.ifs-black {
  background: var(--black);
  color: var(--white);
}

.ifs-black .ifs-number {
  color: var(--pink);
}

.ifs-black h2 {
  color: var(--yellow);
}

.ifs-black blockquote {
  color: var(--pink);
}


/* SELF QUALITIES */

.ifs-self-grid {
  margin: 35px 0;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ifs-self-grid span {
  padding: 18px 10px;

  background: var(--black);
  border: 3px solid var(--pink);

  color: var(--white);

  text-align: center;
  font-weight: 900;
  font-style: italic;
}


/* PARTS */

.ifs-parts {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ifs-parts > div {
  padding: 20px;

  background: #111;
  border: 3px solid var(--pink);
}

.ifs-parts span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.ifs-parts p {
  margin: 0;
}


/* QUESTIONS */

.ifs-questions {
  margin: 35px 0;

  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
}

.ifs-questions p {
  margin: 0;
  padding: 18px 0;

  border-bottom: 2px solid rgba(0, 0, 0, 0.3);

  font-weight: 900;
  font-style: italic;
}

.ifs-questions p:last-child {
  border-bottom: 0;
}


/* UNBLENDING */

.ifs-unblend {
  margin: 35px 0;

  display: grid;
  gap: 12px;

  text-align: center;
}

.ifs-unblend > div {
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
}

.ifs-unblend span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-weight: 900;
  font-style: italic;
}

.ifs-unblend p {
  margin: 0;

  font-size: 1.2rem;
  font-weight: 800;
}

.ifs-unblend > b {
  color: var(--pink);
  font-size: 2.5rem;
}


/* POLARIZED PARTS */

.ifs-polarized {
  margin: 35px 0;

  display: grid;
  gap: 12px;

  text-align: center;
}

.ifs-polarized > div {
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);
}

.ifs-polarized span {
  display: block;
  margin-bottom: 10px;

  color: var(--pink);

  font-weight: 900;
}

.ifs-polarized h3 {
  margin: 0;

  color: var(--white);

  font-size: clamp(1.5rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}

.ifs-polarized > b {
  color: var(--yellow);
  font-size: 2rem;
}


/* ACCOUNTABILITY */

.ifs-accountability {
  margin: 35px 0;

  display: grid;
  gap: 10px;

  text-align: center;
}

.ifs-accountability > div {
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--white);
}

.ifs-accountability span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.3rem;
  font-weight: 900;
  font-style: italic;
}

.ifs-accountability p {
  margin: 0;
}

.ifs-accountability > b {
  font-size: 2.5rem;
}


/* PRACTICE */

.ifs-practice-list {
  margin-top: 35px;
  border-top: 3px solid var(--pink);
}

.ifs-practice-list > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.ifs-practice-list span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.ifs-practice-list p {
  margin: 0;
}


/* ENDING */

.ifs-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.ifs-ending-small {
  margin: 0 0 8px;

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.ifs-ending h2 {
  margin: 0;

  font-size: clamp(3.7rem, 16vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.ifs-ending h2 span {
  color: var(--pink);
}

.ifs-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.ifs-ending-copy p {
  margin: 0 0 15px;
}


/* BACK BUTTON */

.ifs-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.ifs-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .ifs-bipolar-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.22) 62%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/bipolar_ifs_desktop_background-f94bd7c0ba7a33657248a765318f867447d0a3d0ad38b7e16d06858087f9588c.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .ifs-bipolar-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .ifs-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .ifs-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .ifs-copy {
    font-size: 1.1rem;
  }

  .ifs-lead {
    font-size: 1.5rem;
  }

  .ifs-copy blockquote {
    font-size: 2.3rem;
  }

  .ifs-self-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .ifs-unblend,
  .ifs-accountability {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .ifs-polarized {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .ifs-ending {
    min-height: 75vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .ifs-ending h2 {
    font-size: clamp(5rem, 7.5vw, 9rem);
  }

  .ifs-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .ifs-bipolar-hero h1 {
    font-size: 15vw;
  }

  .ifs-section h2 {
    font-size:
     14vw;
  }

  .ifs-copy {
    font-size: 0.98rem;
  }

  .ifs-ending h2 {
    font-size: 15vw;
  }
}

/* =========================================
   BIPOLAR > PERSPECTIVES > BIG PICTURE
   ========================================= */

.big-picture-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.big-picture-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    url(/assets/bipolar_big_picture_mobile_background-093475b2dd9124bfc1d9d8ace7cbc41d236f53ef931ae469be09a183b11c05a6.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.big-picture-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.big-picture-eyebrow {
  margin: 0 0 25px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.big-picture-hero h1 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.big-picture-hero h1 span {
  display: block;
}

.big-picture-hero h1 span:nth-child(1) {
  color: var(--white);
}

.big-picture-hero h1 span:nth-child(2) {
  color: var(--pink);
}

.big-picture-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.big-picture-intro {
  margin: 40px 0 0;

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* SECTIONS */

.big-picture-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.big-picture-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.big-picture-section h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.big-picture-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.big-picture-copy > p {
  margin: 0 0 22px;
}

.big-picture-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.big-picture-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.6rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.big-picture-pink {
  background: var(--pink);
  color: var(--black);
}

.big-picture-yellow {
  background: var(--yellow);
  color: var(--black);
}

.big-picture-purple {
  background: var(--purple);
  color: var(--white);
}

.big-picture-purple .big-picture-number,
.big-picture-purple blockquote {
  color: var(--yellow);
}

.big-picture-black {
  background: var(--black);
  color: var(--white);
}

.big-picture-black .big-picture-number {
  color: var(--pink);
}

.big-picture-black h2 {
  color: var(--yellow);
}

.big-picture-black blockquote {
  color: var(--pink);
}


/* LENS QUESTION */

.big-picture-lens {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--white);
}

.big-picture-lens span {
  display: block;
  margin-bottom: 10px;

  color: var(--pink);

  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.big-picture-lens h3 {
  margin: 0;

  color: var(--yellow);

  font-size: clamp(1.7rem, 6vw, 3rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}


/* ALL TOGETHER */

.big-picture-stack {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.big-picture-stack > div {
  padding: 20px;

  background: #111;
  border: 3px solid var(--pink);
}

.big-picture-stack span {
  display: block;
  margin-bottom: 7px;

  color: var(--yellow);

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.big-picture-stack p {
  margin: 0;
}


/* COMMON GROUND */

.big-picture-common {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.big-picture-common > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.big-picture-common span {
  display: block;
  margin-bottom: 7px;

  color: var(--yellow);

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.big-picture-common p {
  margin: 0;
}


/* ENDING */

.big-picture-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.big-picture-ending-small {
  margin: 0 0 10px;

  font-size: 1.35rem;
  font-weight: 900;
  font-style: italic;
}

.big-picture-ending h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.big-picture-ending h2 span {
  color: var(--pink);
}

.big-picture-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.big-picture-ending-copy p {
  margin: 0 0 15px;
}


/* BACK BUTTON */

.big-picture-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.big-picture-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .big-picture-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.22) 62%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url(/assets/bipolar_big_picture_desktop_background-eb182815e6c9d28ddb7210138cf7e5f15d6944a3972b7aa108e9bfaa80338a06.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .big-picture-hero h1 {
    font-size: clamp(7rem, 10vw, 12rem);
  }

  .big-picture-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .big-picture-section h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .big-picture-copy {
    font-size: 1.1rem;
  }

  .big-picture-lead {
    font-size: 1.5rem;
  }

  .big-picture-copy blockquote {
    font-size: 2.3rem;
  }

  .big-picture-stack,
  .big-picture-common {
    grid-template-columns: repeat(2, 1fr);
  }

  .big-picture-ending {
    min-height: 80vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .big-picture-ending h2 {
    font-size: clamp(5rem, 7.5vw, 9rem);
  }

  .big-picture-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .big-picture-hero h1 {
    font-size: 17vw;
  }

  .big-picture-section h2 {
    font-size: 14vw;
  }

  .big-picture-copy {
    font-size: 0.98rem;
  }

  .big-picture-ending h2 {
    font-size: 14vw;
  }
}

/* =========================================
   ADDICTION > IMPULSIVITY
   ========================================= */

.addiction-impulsivity-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.addiction-impulsivity-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      rgba(0, 0, 0, 0.16) 100%
    ),
    url(/assets/addiction_impulsivity_mobile_background-28bb356705411ec61792c61054356ce2dcc76b8041259c59ab9ea8ac48e16692.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.addiction-impulsivity-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.addiction-impulsivity-eyebrow {
  margin: 0 0 25px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.addiction-impulsivity-hero h1 {
  margin: 0;

  font-size: clamp(3.5rem, 16vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-impulsivity-hero h1 span {
  display: block;
}

.addiction-impulsivity-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.addiction-impulsivity-hero h1 span:nth-child(2) {
  color: var(--white);
}

.addiction-impulsivity-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.addiction-impulsivity-intro {
  margin: 40px 0 0;

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* SECTIONS */

.addiction-impulsivity-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.ai-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.addiction-impulsivity-heading h2 {
  margin: 0;

  font-size: clamp(3.4rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.ai-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.ai-copy > p {
  margin: 0 0 22px;
}

.ai-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.ai-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.55rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.ai-pink {
  background: var(--pink);
  color: var(--black);
}

.ai-yellow {
  background: var(--yellow);
  color: var(--black);
}

.ai-purple {
  background: var(--purple);
  color: var(--white);
}

.ai-purple .ai-number,
.ai-purple blockquote {
  color: var(--yellow);
}

.ai-black {
  background: var(--black);
  color: var(--white);
}

.ai-black .ai-number {
  color: var(--pink);
}

.ai-black .addiction-impulsivity-heading h2 {
  color: var(--yellow);
}

.ai-black blockquote {
  color: var(--pink);
}


/* URGE CYCLE */

.ai-cycle {
  margin: 35px 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ai-cycle span {
  padding: 12px 14px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);

  font-weight: 900;
  font-style: italic;
}

.ai-cycle b {
  font-size: 1.6rem;
}


/* BEHAVIORS */

.ai-behaviors {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ai-behaviors > div {
  padding: 20px;

  background: #111;
  border: 3px solid var(--pink);
}

.ai-behaviors span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.ai-behaviors p {
  margin: 0;
}


/* NOW VS LATER */

.ai-now-later {
  margin: 35px 0;

  display: grid;
  gap: 12px;

  text-align: center;
}

.ai-now-later > div {
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--white);
}

.ai-now-later span {
  display: block;
  margin-bottom: 8px;

  color: var(--pink);

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.ai-now-later p {
  margin: 0;
}

.ai-now-later > b {
  font-size: 2rem;
}


/* IMPULSIVE THOUGHTS */

.ai-thoughts {
  margin: 35px 0;

  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
}

.ai-thoughts p {
  margin: 0;
  padding: 17px 0;

  border-bottom: 2px solid rgba(0, 0, 0, 0.3);

  font-size: 1.1rem;
  font-weight: 900;
  font-style: italic;
}

.ai-thoughts p:last-child {
  border-bottom: 0;
}


/* FRICTION */

.ai-friction-grid {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ai-friction-grid > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--pink);

  color: var(--white);
}

.ai-friction-grid span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.2rem;
  font-weight: 900;
  font-style: italic;
}

.ai-friction-grid p {
  margin: 0;
}


/* PAUSE STEPS */

.ai-pause {
  margin-top: 35px;

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

.ai-pause > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}

.ai-pause span {
  color: var(--pink);

  font-size: 1.1rem;
  font-weight: 900;
}

.ai-pause p {
  margin: 0;
}


/* ENDING */

.addiction-impulsivity-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.ai-ending-small {
  margin: 0 0 10px;

  font-size: 1.35rem;
  font-weight: 900;
  font-style: italic;
}

.addiction-impulsivity-ending h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-impulsivity-ending h2 span {
  color: var(--pink);
}

.ai-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.ai-ending-copy p {
  margin: 0 0 15px;
}


/* BACK BUTTON */

.ai-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.ai-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .addiction-impulsivity-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.20) 62%,
        rgba(0, 0, 0, 0.04) 100%
      ),
      url(/assets/addiction_impulsivity_desktop_background-ff82ff939b91dfe67027fea395e5b4b0652fd4ad86e20ecc184f8e2d2e19370c.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .addiction-impulsivity-hero h1 {
    font-size: clamp(6rem, 8.5vw, 10.5rem);
  }

  .addiction-impulsivity-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .addiction-impulsivity-heading h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .ai-copy {
    font-size: 1.1rem;
  }

  .ai-lead {
    font-size: 1.5rem;
  }

  .ai-copy blockquote {
    font-size: 2.3rem;
  }

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

  .ai-now-later {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .addiction-impulsivity-ending {
    min-height: 80vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .addiction-impulsivity-ending h2 {
    font-size: clamp(5rem, 7.5vw, 9rem);
  }

  .ai-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .addiction-impulsivity-hero h1 {
    font-size: 15vw;
  }

  .addiction-impulsivity-heading h2 {
    font-size: 14vw;
  }

  .ai-copy {
    font-size: 0.98rem;
  }

  .addiction-impulsivity-ending h2 {
    font-size: 14vw;
  }
}

/* =========================================
   ADDICTION > PERSPECTIVES
   ========================================= */

.addiction-perspectives-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.addiction-perspectives-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      rgba(0, 0, 0, 0.16) 100%
    ),
    url(/assets/addiction_perspectives_mobile_background-c2ae03be8518f9eec138bb59cb35ac91c7868668217686de4e1393691afa1983.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.addiction-perspectives-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.addiction-perspectives-eyebrow {
  margin: 0 0 25px;
  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.addiction-perspectives-hero h1 {
  margin: 0;

  font-size: clamp(3.3rem, 15vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-perspectives-hero h1 span {
  display: block;
}

.addiction-perspectives-hero h1 span:nth-child(1) {
  color: var(--pink);
}

.addiction-perspectives-hero h1 span:nth-child(2) {
  color: var(--white);
}

.addiction-perspectives-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.addiction-perspectives-intro {
  margin: 40px 0 0;

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* SECTIONS */

.addiction-perspectives-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.ap-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ap-heading h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.ap-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.ap-copy > p {
  margin: 0 0 22px;
}

.ap-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.ap-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.55rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.ap-pink {
  background: var(--pink);
  color: var(--black);
}

.ap-yellow {
  background: var(--yellow);
  color: var(--black);
}

.ap-purple {
  background: var(--purple);
  color: var(--white);
}

.ap-purple .ap-number,
.ap-purple blockquote {
  color: var(--yellow);
}

.ap-black {
  background: var(--black);
  color: var(--white);
}

.ap-black .ap-number {
  color: var(--pink);
}

.ap-black .ap-heading h2 {
  color: var(--yellow);
}

.ap-black blockquote {
  color: var(--pink);
}


/* LENS BOX */

.ap-lens {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--white);
}

.ap-lens span {
  display: block;
  margin-bottom: 10px;

  color: var(--pink);

  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ap-lens h3 {
  margin: 0;

  color: var(--yellow);

  font-size: clamp(1.6rem, 6vw, 2.8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}


/* CBT THOUGHTS */

.ap-thoughts {
  margin: 35px 0;

  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
}

.ap-thoughts p {
  margin: 0;
  padding: 17px 0;

  border-bottom: 2px solid rgba(0, 0, 0, 0.3);

  font-size: 1.05rem;
  font-weight: 900;
  font-style: italic;
}

.ap-thoughts p:last-child {
  border-bottom: 0;
}


/* MOOD CHECK */

.ap-mood-check {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ap-mood-check > div {
  padding: 20px;

  background: #111;
  border: 3px solid var(--pink);
}

.ap-mood-check span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.15rem;
  font-weight: 900;
  font-style: italic;
}

.ap-mood-check p {
  margin: 0;
}


/* SIX LENSES */

.ap-stack {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ap-stack > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.ap-stack span {
  display: block;
  margin-bottom: 7px;

  color: var(--pink);

  font-size: 1.2rem;
  font-weight: 900;
  font-style: italic;
}

.ap-stack p {
  margin: 0;
}


/* ENDING */

.addiction-perspectives-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.ap-ending-small {
  margin: 0 0 10px;

  font-size: 1.35rem;
  font-weight: 900;
  font-style: italic;
}

.addiction-perspectives-ending h2 {
  margin: 0;

  font-size: clamp(3.7rem, 16vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-perspectives-ending h2 span {
  color: var(--pink);
}

.ap-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.ap-ending-copy p {
  margin: 0 0 15px;
}


/* BACK BUTTON */

.ap-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.ap-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .addiction-perspectives-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.20) 62%,
        rgba(0, 0, 0, 0.04) 100%
      ),
      url(/assets/addiction_perspectives_desktop_background-dc39c1e5963dc6a959927c165c8d40700d88271c1c46385bed9305650d58c2b2.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .addiction-perspectives-hero h1 {
    font-size: clamp(5.5rem, 8vw, 10rem);
  }

  .addiction-perspectives-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .ap-heading h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .ap-copy {
    font-size: 1.1rem;
  }

  .ap-lead {
    font-size: 1.5rem;
  }

  .ap-copy blockquote {
    font-size: 2.3rem;
  }

  .ap-mood-check,
  .ap-stack {
    grid-template-columns: repeat(2, 1fr);
  }

  .addiction-perspectives-ending {
    min-height: 80vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .addiction-perspectives-ending h2 {
    font-size: clamp(5rem, 7.5vw, 9rem);
  }

  .ap-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .addiction-perspectives-hero h1 {
    font-size: 14vw;
  }

  .ap-heading h2 {
    font-size: 14vw;
  }

  .ap-copy {
    font-size: 0.98rem;
  }

  .addiction-perspectives-ending h2 {
    font-size: 15vw;
  }
}

/* =========================================
   ADDICTION > TRIGGERS
   ========================================= */

.addiction-triggers-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.addiction-triggers-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      rgba(0, 0, 0, 0.16) 100%
    ),
    url(/assets/triggers_mobile_background-e3619e36910fdbea508825c2b0a5758e7ad3cc847081b4f7cf324c6aa7db9b1e.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.addiction-triggers-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.addiction-triggers-eyebrow {
  margin: 0 0 25px;
  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.addiction-triggers-hero h1 {
  margin: 0;

  font-size: clamp(3.4rem, 15vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-triggers-hero h1 span {
  display: block;
}

.addiction-triggers-hero h1 span:nth-child(1) {
  color: var(--white);
}

.addiction-triggers-hero h1 span:nth-child(2) {
  color: var(--pink);
}

.addiction-triggers-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.addiction-triggers-intro {
  margin: 40px 0 0;

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}


/* SECTIONS */

.addiction-triggers-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.at-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.at-heading h2 {
  margin: 0;

  font-size: clamp(3.4rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.at-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.at-copy > p {
  margin: 0 0 22px;
}

.at-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.at-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.55rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.at-pink {
  background: var(--pink);
  color: var(--black);
}

.at-yellow {
  background: var(--yellow);
  color: var(--black);
}

.at-purple {
  background: var(--purple);
  color: var(--white);
}

.at-purple .at-number,
.at-purple blockquote {
  color: var(--yellow);
}

.at-black {
  background: var(--black);
  color: var(--white);
}

.at-black .at-number {
  color: var(--pink);
}

.at-black .at-heading h2 {
  color: var(--yellow);
}

.at-black blockquote {
  color: var(--pink);
}


/* BIG THREE */

.at-big-three {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.at-big-three > div {
  padding: 22px;

  background: var(--black);
  border: 4px solid var(--pink);

  color: var(--white);
}

.at-big-three span {
  display: block;
  margin-bottom: 8px;

  color: var(--yellow);

  font-size: 1.35rem;
  font-weight: 900;
  font-style: italic;
}

.at-big-three p {
  margin: 0;
}


/* TRIGGER THOUGHT */

.at-trigger-thought {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--pink);

  font-size: clamp(1.7rem, 7vw, 3.2rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
}


/* MANIA WARNING GRID */

.at-warning-grid {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.at-warning-grid > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.at-warning-grid span {
  display: block;
  margin-bottom: 7px;

  color: var(--pink);

  font-size: 1.15rem;
  font-weight: 900;
  font-style: italic;
}

.at-warning-grid p {
  margin: 0;
}


/* TRIGGER CHAIN */

.at-chain {
  margin: 35px 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.at-chain span {
  padding: 12px 14px;

  background: var(--black);
  border: 3px solid var(--pink);

  color: var(--white);

  font-weight: 900;
  font-style: italic;
}

.at-chain b {
  font-size: 1.6rem;
}


/* INTERNAL / EXTERNAL */

.at-two-column {
  margin: 35px 0;

  display: grid;
  gap: 10px;
}

.at-two-column > div {
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--white);
}

.at-two-column span {
  display: block;
  margin-bottom: 20px;

  color: var(--pink);

  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
}

.at-two-column p {
  margin: 0;
  padding: 8px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.at-two-column p:last-child {
  border-bottom: 0;
}


/* TRIGGER MAP */

.at-map {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.at-map > div {
  padding: 20px;

  background: #111;
  border: 3px solid var(--pink);
}

.at-map span {
  display: block;
  margin-bottom: 7px;

  color: var(--yellow);

  font-size: 1.15rem;
  font-weight: 900;
  font-style: italic;
}

.at-map p {
  margin: 0;
}


/* STEPS */

.at-steps {
  margin: 35px 0;

  border-top: 3px solid var(--black);
}

.at-steps > div {
  padding: 20px 0;

  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  border-bottom: 3px solid rgba(0, 0, 0, 0.25);
}

.at-steps span {
  font-size: 1.1rem;
  font-weight: 900;
}

.at-steps p {
  margin: 0;
}


/* ENDING */

.addiction-triggers-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.at-ending-small {
  margin: 0 0 10px;

  font-size: 1.35rem;
  font-weight: 900;
  font-style: italic;
}

.addiction-triggers-ending h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-triggers-ending h2 span {
  color: var(--pink);
}

.at-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.at-ending-copy p {
  margin: 0 0 15px;
}


/* BACK */

.at-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.at-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .addiction-triggers-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.20) 62%,
        rgba(0, 0, 0, 0.04) 100%
      ),
      url(/assets/triggers_desktop_background-7654245ec0e23f1bb2817bcfc953314a71526b9e5feb69eeff75dca1304180dc.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .addiction-triggers-hero h1 {
    font-size: clamp(6rem, 8.5vw, 10.5rem);
  }

  .addiction-triggers-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .at-heading h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .at-copy {
    font-size: 1.1rem;
  }

  .at-lead {
    font-size: 1.5rem;
  }

  .at-copy blockquote {
    font-size: 2.3rem;
  }

  .at-big-three {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .addiction-triggers-ending {
    min-height: 80vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .addiction-triggers-ending h2 {
    font-size: clamp(5rem, 7.5vw, 9rem);
  }

  .at-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .addiction-triggers-hero h1 {
    font-size: 14vw;
  }

  .at-heading h2 {
    font-size: 14vw;
  }

  .at-copy {
    font-size: 0.98rem;
  }

  .addiction-triggers-ending h2 {
    font-size: 14vw;
  }
}

/* =========================================
   ADDICTION > WHAT AM I ESCAPING?
   ========================================= */

.addiction-escaping-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.addiction-escaping-hero {
  min-height: 90svh;
  padding: 35px 18px 55px;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      rgba(0, 0, 0, 0.16) 100%
    ),
    url(/assets/addiction_escaping_mobile_background-5d8fc3e6aac739be5b7c8845b5d9189245571c2209507176876960f244428d71.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.addiction-escaping-hero-content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.addiction-escaping-eyebrow {
  margin: 0 0 25px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.addiction-escaping-hero h1 {
  margin: 0;

  font-size: clamp(3.6rem, 17vw, 9rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.75;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-escaping-hero h1 span {
  display: block;
}

.addiction-escaping-hero h1 span:nth-child(1) {
  color: var(--white);
}

.addiction-escaping-hero h1 span:nth-child(2) {
  color: var(--pink);
}

.addiction-escaping-hero h1 span:nth-child(3) {
  color: var(--yellow);
}

.addiction-escaping-intro {
  margin: 40px 0 0;

  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
}


/* SECTIONS */

.addiction-escaping-section {
  padding: 65px 18px;

  display: grid;
  gap: 40px;
}

.ae-number {
  margin: 0 0 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ae-heading h2 {
  margin: 0;

  font-size: clamp(3.4rem, 15vw, 7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.ae-copy {
  max-width: 760px;

  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.ae-copy > p {
  margin: 0 0 22px;
}

.ae-lead {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}

.ae-copy blockquote {
  margin: 35px 0;
  padding: 20px 0 20px 22px;

  border-left: 8px solid currentColor;

  font-size: clamp(1.55rem, 6vw, 2.7rem);
  font-weight: 900;
  font-style: italic;

  line-height: 1;
  text-transform: uppercase;
}


/* COLORS */

.ae-pink {
  background: var(--pink);
  color: var(--black);
}

.ae-yellow {
  background: var(--yellow);
  color: var(--black);
}

.ae-purple {
  background: var(--purple);
  color: var(--white);
}

.ae-purple .ae-number,
.ae-purple blockquote {
  color: var(--yellow);
}

.ae-black {
  background: var(--black);
  color: var(--white);
}

.ae-black .ae-number {
  color: var(--pink);
}

.ae-black .ae-heading h2 {
  color: var(--yellow);
}

.ae-black blockquote {
  color: var(--pink);
}


/* ESCAPE GRID */

.ae-escape-grid {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ae-escape-grid > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.ae-escape-grid span {
  display: block;
  margin-bottom: 7px;

  color: var(--pink);

  font-size: 1.2rem;
  font-weight: 900;
  font-style: italic;
}

.ae-escape-grid p {
  margin: 0;
}


/* BIG CALLOUT */

.ae-callout,
.ae-thought {
  margin: 35px 0;
  padding: 25px;

  background: var(--black);
  border: 4px solid var(--yellow);

  color: var(--pink);

  font-size: clamp(1.65rem, 6vw, 3rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.95;
  text-transform: uppercase;
}


/* RUSH CYCLE */

.ae-cycle {
  margin: 35px 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ae-cycle span {
  padding: 12px 14px;

  background: var(--black);
  border: 3px solid var(--pink);

  color: var(--white);

  font-weight: 900;
  font-style: italic;
}

.ae-cycle b {
  font-size: 1.6rem;
}


/* ESCAPE LOOP */

.ae-loop {
  margin: 35px 0;

  display: grid;
  gap: 10px;
}

.ae-loop > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.ae-loop > div span {
  display: block;
  margin-bottom: 6px;

  color: var(--pink);

  font-size: 1.2rem;
  font-weight: 900;
  font-style: italic;
}

.ae-loop > div p {
  margin: 0;
}

.ae-loop > b {
  text-align: center;
  font-size: 1.7rem;
}


/* QUESTIONS */

.ae-questions {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ae-questions > div {
  padding: 20px;

  background: #111;
  border: 3px solid var(--pink);
}

.ae-questions span {
  display: block;
  margin-bottom: 7px;

  color: var(--yellow);

  font-size: 1.15rem;
  font-weight: 900;
  font-style: italic;
}

.ae-questions p {
  margin: 0;
}


/* NEEDS */

.ae-needs {
  margin: 35px 0;

  display: grid;
  gap: 8px;
}

.ae-needs > div {
  padding: 20px;

  background: var(--black);
  border: 3px solid var(--yellow);

  color: var(--white);
}

.ae-needs span {
  display: block;
  margin-bottom: 7px;

  color: var(--pink);

  font-size: 1.15rem;
  font-weight: 900;
  font-style: italic;
}

.ae-needs p {
  margin: 0;
}


/* ENDING */

.addiction-escaping-ending {
  min-height: 80svh;
  padding: 70px 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--yellow);
  color: var(--black);
}

.ae-ending-small {
  margin: 0 0 10px;

  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
}

.addiction-escaping-ending h2 {
  margin: 0;

  font-size: clamp(3.5rem, 15vw, 8rem);
  font-weight: 900;
  font-style: italic;

  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.addiction-escaping-ending h2 span {
  color: var(--pink);
}

.ae-ending-copy {
  max-width: 650px;
  margin-top: 45px;

  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
}

.ae-ending-copy p {
  margin: 0 0 15px;
}


/* BACK */

.ae-back-button {
  display: inline-block;

  margin-top: 25px;
  padding: 14px 20px;

  background: var(--pink);
  border: 3px solid var(--black);

  color: var(--black);

  font-weight: 900;
  text-decoration: none;

  transition: 0.15s ease;
}

.ae-back-button:hover {
  background: var(--white);
  transform: translate(-3px, -3px);
}


/* DESKTOP */

@media (min-width: 768px) {

  .addiction-escaping-hero {
    min-height: 100vh;
    padding: 70px 6vw;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.20) 62%,
        rgba(0, 0, 0, 0.04) 100%
      ),
      url(/assets/addiction_escaping_desktop_background-046f38c140c1ddd65ff8a14970f901abc9243bdc20c1f6f45994d867a35ddf0f.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .addiction-escaping-hero h1 {
    font-size: clamp(6rem, 9vw, 11rem);
  }

  .addiction-escaping-section {
    min-height: 70vh;
    padding: 90px 6vw;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(450px, 1.1fr);

    align-items: center;
    gap: 80px;
  }

  .ae-heading h2 {
    font-size: clamp(4.5rem, 6.5vw, 8rem);
  }

  .ae-copy {
    font-size: 1.1rem;
  }

  .ae-lead {
    font-size: 1.5rem;
  }

  .ae-copy blockquote {
    font-size: 2.3rem;
  }

  .ae-escape-grid,
  .ae-questions,
  .ae-needs {
    grid-template-columns: repeat(2, 1fr);
  }

  .ae-loop {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
  }

  .addiction-escaping-ending {
    min-height: 80vh;
    padding: 90px 6vw;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 80px;
  }

  .addiction-escaping-ending h2 {
    font-size: clamp(5rem, 7.5vw, 9rem);
  }

  .ae-ending-copy {
    margin: 0;
    font-size: 1.2rem;
  }
}


/* SMALL PHONES */

@media (max-width: 400px) {

  .addiction-escaping-hero h1 {
    font-size: 15vw;
  }

  .ae-heading h2 {
    font-size: 14vw;
  }

  .ae-copy {
    font-size: 0.98rem;
  }

  .addiction-escaping-ending h2 {
    font-size: 14vw;
  }
}

/* =========================================================
   TOOLBOX — ADHD
   ========================================================= */

.toolbox-adhd-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-adhd-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.12),
      rgba(8, 8, 8, 0.45) 45%,
      rgba(8, 8, 8, 0.96)
    ),
    url(/assets/toolbox_adhd_mobile_background-f2863d6f7ccd6e0f7d865af89294626118ff5fca8c52dc49bfdc0f3bf3d6279a.png);

  background-size: cover;
  background-position: center;
  padding: 32px 22px 60px;
}

.toolbox-adhd-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-adhd-eyebrow {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-adhd-hero h1 {
  margin: 0;
  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.toolbox-adhd-hero h1 span {
  display: block;
}

.toolbox-adhd-intro {
  margin: 30px 0 0;
  max-width: 650px;
  font-size: clamp(1.15rem, 5vw, 2rem);
  line-height: 0.95;
  font-weight: 900;
  font-style: italic;
}


/* SECTIONS */

.adhd-section {
  padding: 75px 22px;
  border-top: 5px solid var(--black);
}

.adhd-section-number {
  margin-bottom: 45px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.adhd-section-content {
  max-width: 850px;
}

.adhd-section h2 {
  margin: 0 0 35px;
  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

.adhd-section-content > p {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.adhd-section-pink {
  background: var(--pink);
  color: var(--black);
}

.adhd-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.adhd-section-purple {
  background: var(--purple);
  color: var(--white);
}

.adhd-section-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.adhd-callout {
  margin: 40px 0;
  padding: 25px;
  border: 4px solid currentColor;
}

.adhd-callout p {
  margin: 0;
  font-size: clamp(1.25rem, 6vw, 2.2rem);
  line-height: 0.95;
  font-weight: 900;
  font-style: italic;
}


/* TOOL LIST */

.adhd-tool-list {
  margin-top: 40px;
  border-top: 3px solid currentColor;
}

.adhd-tool-list > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;
  align-items: start;

  padding: 20px 0;
  border-bottom: 3px solid currentColor;
}

.adhd-tool-list span {
  font-size: 0.8rem;
  font-weight: 900;
}

.adhd-tool-list p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 800;
}


/* TOOL BOX */

.adhd-tool-box {
  margin-top: 40px;
  padding: 25px;
  background: var(--black);
  color: var(--white);
}

.adhd-tool-box h3 {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 0.9;
  font-weight: 900;
  font-style: italic;
}

.adhd-tool-box p {
  line-height: 1.5;
  font-weight: 700;
}


/* BIG QUESTIONS */

.adhd-big-question {
  margin: 30px 0;
  padding: 25px 0;
  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;

  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 900;
  font-style: italic;
}


/* PAUSE */

.adhd-pause {
  margin-top: 45px;
  padding: 30px;
  border: 4px solid var(--pink);
  text-align: center;
}

.adhd-pause-label {
  color: var(--pink);
  font-size: 0.8rem !important;
  letter-spacing: 0.15em;
}

.adhd-pause p {
  margin: 15px 0;
  font-size: clamp(1.4rem, 6vw, 2.5rem);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}

.adhd-pause span {
  display: block;
  color: var(--yellow);
  font-size: 2rem;
  font-weight: 900;
}


/* ENDING */

.adhd-ending {
  padding: 100px 22px;
  background: var(--yellow);
  color: var(--black);
}

.adhd-ending-small {
  margin-bottom: 25px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.adhd-ending h2 {
  margin: 0 0 35px;
  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;
  font-weight: 900;
  font-style: italic;
}

.adhd-ending > p:not(.adhd-ending-small) {
  max-width: 600px;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.adhd-back-link {
  display: inline-block;
  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.adhd-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-adhd-hero {
    min-height: 92vh;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.45) 45%,
        rgba(8, 8, 8, 0.12) 100%
      ),
      url(/assets/toolbox_adhd_desktop_background-1c50ff73f8730beec85fda7e352f5402d81bbbb62dfd42eef4da665180da7ce1.png);

    background-size: cover;
    background-position: center;
    padding: 70px;
    align-items: center;
  }

  .toolbox-adhd-hero h1 {
    max-width: 900px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .adhd-section {
    padding: 110px 70px;
    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;
    justify-content: center;
  }

  .adhd-section-number {
    margin: 8px 0 0;
  }

  .adhd-ending {
    padding: 130px 70px;
  }

  .adhd-ending h2 {
    max-width: 1000px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — COGNITIVE DISTORTIONS
   ========================================================= */

.toolbox-cd-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-cd-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  position: relative;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.1),
      rgba(8, 8, 8, 0.4) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_cognitive_distortions_mobile_background-bfeca256f45c65be8494806ce485b4e1eb03509251e5645f8e3d464724977734.png);

  background-size: cover;
  background-position: center;
  padding: 32px 22px 60px;
}

.toolbox-cd-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-cd-eyebrow {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-cd-hero h1 {
  margin: 0;
  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-style: italic;
  font-weight: 900;
}

.toolbox-cd-hero h1 span {
  display: block;
}

.toolbox-cd-intro {
  margin: 30px 0 0;
  max-width: 650px;
  font-size: clamp(1.15rem, 5vw, 2rem);
  line-height: 0.95;
  font-weight: 900;
  font-style: italic;
}


/* SECTIONS */

.cd-section {
  padding: 75px 22px;
  border-top: 5px solid var(--black);
}

.cd-section-number {
  margin-bottom: 45px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.cd-section-content {
  max-width: 850px;
}

.cd-section h2 {
  margin: 0 0 35px;
  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  font-weight: 900;
  font-style: italic;
}

.cd-section-content > p {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.cd-section-pink {
  background: var(--pink);
  color: var(--black);
}

.cd-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.cd-section-purple {
  background: var(--purple);
  color: var(--white);
}

.cd-section-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.cd-callout {
  margin: 40px 0;
  padding: 25px;
  border: 4px solid currentColor;
}

.cd-callout p {
  margin: 0;
  font-size: clamp(1.35rem, 6vw, 2.3rem);
  line-height: 0.95;
  font-weight: 900;
  font-style: italic;
}


/* PROCESS */

.cd-process {
  margin-top: 40px;
  border-top: 3px solid currentColor;
}

.cd-process > div {
  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.cd-process span {
  font-size: 0.75rem;
  font-weight: 900;
}

.cd-process h3 {
  margin: 8px 0;
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 0.9;
  font-style: italic;
  font-weight: 900;
}

.cd-process p {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}


/* EXAMPLES */

.cd-example {
  margin: 25px 0;
  padding: 22px;
  border: 3px solid currentColor;
}

.cd-example-label {
  margin: 0 0 10px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  font-weight: 900 !important;
}

.cd-example p:last-child {
  margin: 0;
  font-size: clamp(1.15rem, 5vw, 1.7rem);
  line-height: 1.2;
  font-weight: 900;
}


/* PERMISSION THOUGHTS */

.cd-permission-list {
  margin: 40px 0;
  border-top: 4px solid currentColor;
}

.cd-permission-list p {
  margin: 0;
  padding: 18px 0;
  border-bottom: 4px solid currentColor;

  font-size: clamp(1.3rem, 6vw, 2.2rem);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}


/* THOUGHT TRIAL */

.cd-trial {
  margin-top: 40px;
  border-top: 3px solid currentColor;
}

.cd-trial > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.cd-trial span {
  font-size: 0.8rem;
  font-weight: 900;
}

.cd-trial p {
  margin: 0;
  font-size: clamp(1.05rem, 5vw, 1.5rem);
  line-height: 1.25;
  font-weight: 900;
}


/* END */

.cd-ending {
  padding: 100px 22px;
  background: var(--yellow);
  color: var(--black);
}

.cd-ending-small {
  margin-bottom: 25px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.cd-ending h2 {
  margin: 0 0 35px;
  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;
  font-weight: 900;
  font-style: italic;
}

.cd-ending > p:not(.cd-ending-small) {
  max-width: 650px;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.cd-back-link {
  display: inline-block;
  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.cd-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-cd-hero {
    min-height: 92vh;
    align-items: center;
    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.4) 45%,
        rgba(8, 8, 8, 0.1) 100%
      ),
      url(/assets/toolbox_cognitive_distortions_desktop_background-4455f2bfaedf7789a1c1429f55fc5b1ad46a5b92151955fecc0bcdd9bf844d0b.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-cd-hero h1 {
    max-width: 950px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .cd-section {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;
    justify-content: center;
  }

  .cd-section-number {
    margin: 8px 0 0;
  }

  .cd-process > div {
    display: grid;
    grid-template-columns: 50px 220px 1fr;
    gap: 20px;
    align-items: center;
  }

  .cd-process h3 {
    margin: 0;
  }

  .cd-ending {
    padding: 130px 70px;
  }

  .cd-ending h2 {
    max-width: 1050px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — ESSAYS
   ========================================================= */

.toolbox-essays-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-essays-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.1),
      rgba(8, 8, 8, 0.42) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_essays_mobile_background-8df3800573f785d41710eb924a76fe0ecfe0d3a199614b2e533fb4ccf6c44e75.png);

  background-size: cover;
  background-position: center;

  padding: 32px 22px 60px;
}

.toolbox-essays-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-essays-eyebrow {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-essays-hero h1 {
  margin: 0;

  font-size: clamp(3.7rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.toolbox-essays-hero h1 span {
  display: block;
}

.toolbox-essays-intro {
  margin: 30px 0 0;

  font-size: clamp(1.1rem, 5vw, 2rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* INTRO */

.essays-intro-section,
.essays-write-section,
.essays-prompts {
  padding: 80px 22px;
  border-top: 5px solid var(--black);
}

.essays-intro-section {
  background: var(--pink);
  color: var(--black);
}

.essays-write-section {
  background: var(--purple);
  color: var(--white);
}

.essays-prompts {
  background: var(--yellow);
  color: var(--black);
}

.essays-section-number {
  margin-bottom: 45px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.essays-intro-content,
.essays-write-content,
.essays-prompts-content {
  max-width: 850px;
}

.essays-intro-section h2,
.essays-write-section h2,
.essays-prompts h2 {
  margin: 0 0 35px;

  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;

  font-weight: 900;
  font-style: italic;
}

.essays-intro-content > p,
.essays-write-content > p {
  max-width: 760px;

  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}


/* LIBRARY */

.essays-library {
  padding: 80px 22px;
  background: var(--black);
}

.essays-library-heading {
  max-width: 850px;
  margin-bottom: 55px;
}

.essays-library-heading > p:first-child {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.essays-library-heading h2 {
  margin: 25px 0;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.essays-library-heading > p:last-child {
  max-width: 600px;
  line-height: 1.5;
  font-weight: 700;
}


/* ESSAY CARDS */

.essays-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.essay-card {
  min-height: 420px;
  padding: 28px;

  display: flex;
  flex-direction: column;

  border: 3px solid var(--black);
}

.essay-card-number,
.essay-card-category {
  margin: 0;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.essay-card-category {
  margin-top: 12px;
}

.essay-card h3 {
  margin: 45px 0 25px;

  font-size: clamp(2.8rem, 12vw, 5rem);
  line-height: 0.82;
  letter-spacing: -0.05em;

  font-weight: 900;
  font-style: italic;
}

.essay-card > p:not(.essay-card-number):not(.essay-card-category) {
  max-width: 500px;

  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 700;
}

.essay-card > span {
  margin-top: auto;
  padding-top: 35px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.essay-card-pink {
  background: var(--pink);
  color: var(--black);
}

.essay-card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.essay-card-purple {
  background: var(--purple);
  color: var(--white);
}

.essay-card-black {
  background: var(--black);
  color: var(--white);
  border-color: var(--white);
}


/* WRITING CALLOUT */

.essays-callout {
  margin: 45px 0 0;
  padding: 25px;

  border: 4px solid currentColor;
}

.essays-callout p {
  margin: 0;

  font-size: clamp(1.4rem, 6vw, 2.4rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* PROMPTS */

.essay-prompt-list {
  margin-top: 45px;
  border-top: 3px solid currentColor;
}

.essay-prompt-list > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 24px 0;
  border-bottom: 3px solid currentColor;
}

.essay-prompt-list span {
  font-size: 0.8rem;
  font-weight: 900;
}

.essay-prompt-list p {
  margin: 0;

  font-size: clamp(1.1rem, 5vw, 1.6rem);
  line-height: 1.25;
  font-weight: 900;
}


/* ENDING */

.essays-ending {
  padding: 100px 22px;

  background: var(--pink);
  color: var(--black);
}

.essays-ending-small {
  margin-bottom: 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.essays-ending h2 {
  margin: 0 0 35px;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.essays-ending > p:not(.essays-ending-small) {
  max-width: 600px;

  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.essays-back-link {
  display: inline-block;

  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;

  text-decoration: none;
}

.essays-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-essays-hero {
    min-height: 92vh;
    align-items: center;

    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.4) 45%,
        rgba(8, 8, 8, 0.1) 100%
      ),
      url(/assets/toolbox_essays_desktop_background-80c78e978d9783156e2607b48eee732fc5c2690b5606dc56a883cb30ed04f7b4.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-essays-hero h1 {
    max-width: 950px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .essays-intro-section,
  .essays-write-section,
  .essays-prompts {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;

    justify-content: center;
  }

  .essays-section-number {
    margin-top: 8px;
  }

  .essays-library {
    padding: 110px 70px;
  }

  .essays-library-heading {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }

  .essays-grid {
    max-width: 1200px;
    margin: 0 auto;

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

  .essay-card {
    min-height: 500px;
    padding: 38px;
  }

  .essay-prompt-list > div {
    grid-template-columns: 60px 1fr;
  }

  .essays-ending {
    padding: 130px 70px;
  }

  .essays-ending h2 {
    max-width: 1000px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — IFS
   ========================================================= */

.toolbox-ifs-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-ifs-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.08),
      rgba(8, 8, 8, 0.4) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_ifs_mobile_background-ab3feda1f159f4f2eb3723155cb0cca06da36bc96473b09ae867a15fb49a36ae.png);

  background-size: cover;
  background-position: center;

  padding: 32px 22px 60px;
}

.toolbox-ifs-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-ifs-eyebrow {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-ifs-hero h1 {
  margin: 0;

  font-size: clamp(3.7rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.toolbox-ifs-hero h1 span {
  display: block;
}

.toolbox-ifs-intro {
  margin: 30px 0 0;

  font-size: clamp(1.15rem, 5vw, 2rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* MAIN SECTIONS */

.ifs-tool-section {
  padding: 80px 22px;
  border-top: 5px solid var(--black);
}

.ifs-tool-number {
  margin-bottom: 45px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ifs-tool-content {
  max-width: 850px;
}

.ifs-tool-section h2 {
  margin: 0 0 35px;

  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;

  font-weight: 900;
  font-style: italic;
}

.ifs-tool-content > p {
  max-width: 760px;

  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.ifs-tool-pink {
  background: var(--pink);
  color: var(--black);
}

.ifs-tool-yellow {
  background: var(--yellow);
  color: var(--black);
}

.ifs-tool-purple {
  background: var(--purple);
  color: var(--white);
}

.ifs-tool-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.ifs-tool-callout {
  margin: 40px 0;
  padding: 25px;

  border: 4px solid currentColor;
}

.ifs-tool-callout p {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.3rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* BIG QUESTION */

.ifs-tool-big-question {
  margin: 40px 0;
  padding: 25px 0;

  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;

  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: 0.88;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* QUESTIONS */

.ifs-tool-questions {
  margin-top: 40px;
  border-top: 3px solid currentColor;
}

.ifs-tool-questions > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.ifs-tool-questions span {
  font-size: 0.8rem;
  font-weight: 900;
}

.ifs-tool-questions p {
  margin: 0;

  font-size: clamp(1.05rem, 5vw, 1.5rem);
  line-height: 1.3;
  font-weight: 900;
}


/* PART CARDS */

.ifs-part-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;

  margin: 45px 0;

  background: var(--white);
  border: 3px solid var(--white);
}

.ifs-part-grid > div {
  padding: 25px;

  background: var(--black);
  color: var(--white);
}

.ifs-part-grid h3 {
  margin: 0 0 15px;

  color: var(--yellow);

  font-size: clamp(1.5rem, 7vw, 2.5rem);
  line-height: 0.9;

  font-weight: 900;
  font-style: italic;
}

.ifs-part-grid p {
  margin: 0;
  line-height: 1.45;
  font-weight: 700;
}


/* BLENDED / UNBLENDED */

.ifs-tool-before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.ifs-tool-before-after > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.ifs-tool-before-after p {
  margin: 0;

  font-size: clamp(1.4rem, 6vw, 2.4rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}

.ifs-tool-before-after .ifs-tool-label {
  margin-bottom: 18px;

  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-style: normal;
}


/* INTERNAL CONFLICT */

.ifs-tool-conflict {
  display: grid;
  gap: 15px;

  margin: 40px 0;
  text-align: center;
}

.ifs-tool-conflict > div {
  padding: 30px;
  border: 4px solid currentColor;
}

.ifs-tool-conflict p {
  margin: 0;

  font-size: clamp(1.5rem, 7vw, 2.8rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}

.ifs-tool-conflict > span {
  font-size: 1.4rem;
  font-weight: 900;
}


/* FLOW */

.ifs-tool-flow {
  margin: 45px 0;
  text-align: center;
}

.ifs-tool-flow p {
  margin: 0;
  padding: 22px;

  border: 3px solid currentColor;

  font-size: clamp(1.2rem, 5vw, 1.8rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}

.ifs-tool-flow span {
  display: block;

  padding: 10px;

  color: var(--yellow);

  font-size: 2rem;
  font-weight: 900;
}


/* WORKBOOK */

.ifs-tool-workbook {
  margin-top: 40px;
  border-top: 3px solid currentColor;
}

.ifs-tool-workbook > div {
  padding: 25px 0;
  border-bottom: 3px solid currentColor;
}

.ifs-tool-workbook span {
  font-size: 0.75rem;
  font-weight: 900;
}

.ifs-tool-workbook h3 {
  margin: 8px 0;

  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 0.9;

  font-weight: 900;
  font-style: italic;
}

.ifs-tool-workbook p {
  margin: 0;

  line-height: 1.4;
  font-weight: 700;
}


/* ENDING */

.ifs-tool-ending {
  padding: 100px 22px;

  background: var(--yellow);
  color: var(--black);
}

.ifs-tool-ending-small {
  margin-bottom: 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ifs-tool-ending h2 {
  margin: 0 0 35px;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.ifs-tool-ending > p:not(.ifs-tool-ending-small) {
  max-width: 650px;

  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.ifs-tool-back-link {
  display: inline-block;

  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;

  text-decoration: none;
}

.ifs-tool-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-ifs-hero {
    min-height: 92vh;
    align-items: center;

    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.4) 45%,
        rgba(8, 8, 8, 0.08) 100%
      ),
      url(/assets/toolbox_ifs_desktop_background-ed671b68a6defd2c315e9dac3c093a272b78eede9192394b845ff88a65f71da1.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-ifs-hero h1 {
    max-width: 950px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .ifs-tool-section {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;

    justify-content: center;
  }

  .ifs-tool-number {
    margin-top: 8px;
  }

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

  .ifs-tool-before-after {
    grid-template-columns: repeat(2, 1fr);
  }

  .ifs-tool-conflict {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .ifs-tool-workbook > div {
    display: grid;
    grid-template-columns: 50px 180px 1fr;
    gap: 20px;
    align-items: center;
  }

  .ifs-tool-workbook h3 {
    margin: 0;
  }

  .ifs-tool-ending {
    padding: 130px 70px;
  }

  .ifs-tool-ending h2 {
    max-width: 1050px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — JOBS
   ========================================================= */

.toolbox-jobs-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-jobs-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.08),
      rgba(8, 8, 8, 0.4) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_jobs_mobile_background-7d30c3b847fcb4f23737e9d08c76954105edd9eb5516c4fcb4d1e7874950d764.png);

  background-size: cover;
  background-position: center;

  padding: 32px 22px 60px;
}

.toolbox-jobs-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-jobs-eyebrow {
  margin: 0 0 18px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-jobs-hero h1 {
  margin: 0;

  font-size: clamp(3.7rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.toolbox-jobs-hero h1 span {
  display: block;
}

.toolbox-jobs-intro {
  margin: 30px 0 0;

  font-size: clamp(1.15rem, 5vw, 2rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* SECTIONS */

.jobs-section {
  padding: 80px 22px;
  border-top: 5px solid var(--black);
}

.jobs-section-number {
  margin-bottom: 45px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.jobs-section-content {
  max-width: 850px;
}

.jobs-section h2 {
  margin: 0 0 35px;

  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;

  font-weight: 900;
  font-style: italic;
}

.jobs-section-content > p {
  max-width: 760px;

  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.jobs-section-pink {
  background: var(--pink);
  color: var(--black);
}

.jobs-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.jobs-section-purple {
  background: var(--purple);
  color: var(--white);
}

.jobs-section-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.jobs-callout {
  margin: 40px 0;
  padding: 25px;

  border: 4px solid currentColor;
}

.jobs-callout p {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.3rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* STORY VS FACT */

.jobs-before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.jobs-before-after > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.jobs-before-after p {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.2rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}

.jobs-before-after .jobs-label {
  margin-bottom: 18px;

  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-style: normal;
}


/* BIG QUESTION */

.jobs-question {
  margin: 40px 0;
  padding: 28px 0;

  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;

  font-size: clamp(1.8rem, 8vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* LISTS */

.jobs-list {
  margin: 40px 0;
  border-top: 3px solid currentColor;
}

.jobs-list > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.jobs-list span {
  font-size: 0.8rem;
  font-weight: 900;
}

.jobs-list p {
  margin: 0;

  font-size: clamp(1.05rem, 5vw, 1.45rem);
  line-height: 1.3;
  font-weight: 900;
}


/* CONTROL GRID */

.jobs-control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.jobs-control-grid > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.jobs-control-grid .jobs-label {
  margin-bottom: 25px;

  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 900;
}

.jobs-control-grid > div > p:not(.jobs-label) {
  margin: 0;
  padding: 12px 0;

  border-bottom: 2px solid currentColor;

  font-size: 1rem;
  font-weight: 800;
}


/* ENDING */

.jobs-ending {
  padding: 100px 22px;

  background: var(--yellow);
  color: var(--black);
}

.jobs-ending-small {
  margin-bottom: 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.jobs-ending h2 {
  margin: 0 0 35px;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.jobs-ending > p:not(.jobs-ending-small) {
  max-width: 650px;

  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.jobs-back-link {
  display: inline-block;

  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;

  text-decoration: none;
}

.jobs-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-jobs-hero {
    min-height: 92vh;
    align-items: center;

    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.42) 45%,
        rgba(8, 8, 8, 0.08) 100%
      ),
      url(/assets/toolbox_jobs_desktop_background-b424249f3d186c6399440776a6de0388118238aceb32cd171c7a65dcef38cb0f.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-jobs-hero h1 {
    max-width: 1000px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .jobs-section {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;

    justify-content: center;
  }

  .jobs-section-number {
    margin-top: 8px;
  }

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

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

  .jobs-ending {
    padding: 130px 70px;
  }

  .jobs-ending h2 {
    max-width: 1050px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — OTHERS
   ========================================================= */

.toolbox-others-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-others-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.08),
      rgba(8, 8, 8, 0.4) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_others_mobile_background-d64109fb377daf6f0705ffc73be61ae0ec3d300af60f502cc3a5897bab6f450b.png);

  background-size: cover;
  background-position: center;

  padding: 32px 22px 60px;
}

.toolbox-others-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-others-eyebrow {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-others-hero h1 {
  margin: 0;

  font-size: clamp(3.7rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.toolbox-others-hero h1 span {
  display: block;
}

.toolbox-others-intro {
  margin: 30px 0 0;

  font-size: clamp(1.15rem, 5vw, 2rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* SECTIONS */

.others-section {
  padding: 80px 22px;
  border-top: 5px solid var(--black);
}

.others-section-number {
  margin-bottom: 45px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.others-section-content {
  max-width: 850px;
}

.others-section h2 {
  margin: 0 0 35px;

  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;

  font-weight: 900;
  font-style: italic;
}

.others-section-content > p {
  max-width: 760px;

  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.others-section-pink {
  background: var(--pink);
  color: var(--black);
}

.others-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.others-section-purple {
  background: var(--purple);
  color: var(--white);
}

.others-section-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.others-callout {
  margin: 40px 0;
  padding: 25px;

  border: 4px solid currentColor;
}

.others-callout p {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.3rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* CONTROL */

.others-control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.others-control-grid > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.others-label {
  margin: 0 0 22px !important;

  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em;
}

.others-control-grid > div > p:not(.others-label) {
  margin: 0;
  padding: 12px 0;

  border-bottom: 2px solid currentColor;

  font-weight: 800;
}


/* BEFORE / AFTER */

.others-before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.others-before-after > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.others-before-after > div > p:last-child {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.2rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}


/* THOUGHTS */

.others-thoughts {
  margin: 40px 0;
  border-top: 3px solid currentColor;
}

.others-thoughts p {
  margin: 0;
  padding: 18px 0;

  border-bottom: 3px solid currentColor;

  font-size: clamp(1.2rem, 6vw, 2rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}


/* QUESTION */

.others-question {
  margin: 40px 0;
  padding: 28px 0;

  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;

  font-size: clamp(1.8rem, 8vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* PAUSE */

.others-pause {
  margin: 40px 0;
  border-top: 3px solid currentColor;
}

.others-pause > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.others-pause span {
  font-size: 0.8rem;
  font-weight: 900;
}

.others-pause p {
  margin: 0;

  font-size: clamp(1.05rem, 5vw, 1.5rem);
  line-height: 1.3;

  font-weight: 900;
}


/* ENDING */

.others-ending {
  padding: 100px 22px;

  background: var(--yellow);
  color: var(--black);
}

.others-ending-small {
  margin-bottom: 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.others-ending h2 {
  margin: 0 0 35px;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.others-ending > p:not(.others-ending-small) {
  max-width: 650px;

  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.others-back-link {
  display: inline-block;

  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;

  text-decoration: none;
}

.others-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-others-hero {
    min-height: 92vh;
    align-items: center;

    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.4) 45%,
        rgba(8, 8, 8, 0.08) 100%
      ),
      url(/assets/toolbox_others_desktop_background-d46d4d7a8e4a1b3caee37b39430f67f0cee1bd5a698b77f0d2610c80d6465c5c.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-others-hero h1 {
    max-width: 1000px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .others-section {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;

    justify-content: center;
  }

  .others-section-number {
    margin-top: 8px;
  }

  .others-control-grid,
  .others-before-after {
    grid-template-columns: repeat(2, 1fr);
  }

  .others-ending {
    padding: 130px 70px;
  }

  .others-ending h2 {
    max-width: 1050px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — RELAPSE PLANS
   ========================================================= */

.toolbox-relapse-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-relapse-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.08),
      rgba(8, 8, 8, 0.42) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_relapse_plans_mobile_background-50114fd33ffd939d4d34b795f3c5c4f647f885b628718cdeb57563697c6c642e.png);

  background-size: cover;
  background-position: center;

  padding: 32px 22px 60px;
}

.toolbox-relapse-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-relapse-eyebrow {
  margin: 0 0 18px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-relapse-hero h1 {
  margin: 0;

  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.toolbox-relapse-hero h1 span {
  display: block;
}

.toolbox-relapse-intro {
  margin: 30px 0 0;

  font-size: clamp(1.15rem, 5vw, 2rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* SECTIONS */

.relapse-section {
  padding: 80px 22px;
  border-top: 5px solid var(--black);
}

.relapse-section-number {
  margin-bottom: 45px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.relapse-section-content {
  max-width: 850px;
}

.relapse-section h2 {
  margin: 0 0 35px;

  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;

  font-weight: 900;
  font-style: italic;
}

.relapse-section-content > p {
  max-width: 760px;

  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.relapse-section-pink {
  background: var(--pink);
  color: var(--black);
}

.relapse-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.relapse-section-purple {
  background: var(--purple);
  color: var(--white);
}

.relapse-section-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.relapse-callout {
  margin: 40px 0;
  padding: 25px;

  border: 4px solid currentColor;
}

.relapse-callout p {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.3rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* RELAPSE FLOW */

.relapse-flow {
  margin: 40px 0;
  text-align: center;
}

.relapse-flow p {
  margin: 0;
  padding: 20px;

  border: 3px solid currentColor;

  font-size: clamp(1.15rem, 5vw, 1.8rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}

.relapse-flow span {
  display: block;
  padding: 8px;

  font-size: 2rem;
  font-weight: 900;
}


/* CHECKLIST */

.relapse-checklist,
.relapse-action-list,
.relapse-tape {
  margin: 40px 0;
  border-top: 3px solid currentColor;
}

.relapse-checklist > div,
.relapse-action-list > div,
.relapse-tape > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.relapse-checklist span,
.relapse-action-list span,
.relapse-tape span {
  font-size: 0.8rem;
  font-weight: 900;
}

.relapse-checklist p,
.relapse-action-list p,
.relapse-tape p {
  margin: 0;

  font-size: clamp(1.05rem, 5vw, 1.45rem);
  line-height: 1.3;

  font-weight: 900;
}


/* TRIGGER PLAN */

.relapse-plan-grid,
.relapse-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.relapse-plan-grid > div,
.relapse-contact-grid > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.relapse-plan-grid p,
.relapse-contact-grid p {
  margin: 0;

  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 800;
}

.relapse-label {
  margin-bottom: 18px !important;

  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  font-weight: 900 !important;
}


/* WORKBOOK */

.relapse-workbook {
  margin-top: 40px;
  border-top: 3px solid currentColor;
}

.relapse-workbook > div {
  padding: 25px 0;
  border-bottom: 3px solid currentColor;
}

.relapse-workbook span {
  font-size: 0.75rem;
  font-weight: 900;
}

.relapse-workbook h3 {
  margin: 8px 0;

  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 0.9;

  font-weight: 900;
  font-style: italic;
}

.relapse-workbook p {
  margin: 0;
  line-height: 1.4;
  font-weight: 700;
}


/* LAPSE */

.relapse-before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.relapse-before-after > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.relapse-before-after > div > p:last-child {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.2rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}


/* ENDING */

.relapse-ending {
  padding: 100px 22px;

  background: var(--yellow);
  color: var(--black);
}

.relapse-ending-small {
  margin-bottom: 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.relapse-ending h2 {
  margin: 0 0 35px;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.relapse-ending > p:not(.relapse-ending-small) {
  max-width: 650px;

  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.relapse-back-link {
  display: inline-block;

  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;

  text-decoration: none;
}

.relapse-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-relapse-hero {
    min-height: 92vh;
    align-items: center;

    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.42) 45%,
        rgba(8, 8, 8, 0.08) 100%
      ),
      url(/assets/toolbox_relapse_plans_desktop_background-20e14d60b69dafc13a0090cd3f344dbc5126fc4ec983370e333bb9d16217a214.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-relapse-hero h1 {
    max-width: 1050px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .relapse-section {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;

    justify-content: center;
  }

  .relapse-section-number {
    margin-top: 8px;
  }

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

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

  .relapse-workbook > div {
    display: grid;
    grid-template-columns: 50px 220px 1fr;
    gap: 20px;
    align-items: center;
  }

  .relapse-workbook h3 {
    margin: 0;
  }

  .relapse-ending {
    padding: 130px 70px;
  }

  .relapse-ending h2 {
    max-width: 1100px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — SCIATICA
   ========================================================= */

.toolbox-sciatica-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-sciatica-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.08),
      rgba(8, 8, 8, 0.4) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_sciatica_mobile_background-67374193fad6a562d579d0041696306243dc73fbef4cc8459ab53abeaf4a0507.png);

  background-size: cover;
  background-position: center;

  padding: 32px 22px 60px;
}

.toolbox-sciatica-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-sciatica-eyebrow {
  margin: 0 0 18px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-sciatica-hero h1 {
  margin: 0;

  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.toolbox-sciatica-hero h1 span {
  display: block;
}

.toolbox-sciatica-intro {
  margin: 30px 0 0;

  max-width: 700px;

  font-size: clamp(1.15rem, 5vw, 2rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* SECTIONS */

.sciatica-section {
  padding: 80px 22px;
  border-top: 5px solid var(--black);
}

.sciatica-section-number {
  margin-bottom: 45px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.sciatica-section-content {
  max-width: 850px;
}

.sciatica-section h2 {
  margin: 0 0 35px;

  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;

  font-weight: 900;
  font-style: italic;
}

.sciatica-section-content > p {
  max-width: 760px;

  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.sciatica-section-pink {
  background: var(--pink);
  color: var(--black);
}

.sciatica-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.sciatica-section-purple {
  background: var(--purple);
  color: var(--white);
}

.sciatica-section-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.sciatica-callout {
  margin: 40px 0;
  padding: 25px;

  border: 4px solid currentColor;
}

.sciatica-callout p {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.3rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* BIG QUESTION */

.sciatica-big-question {
  margin: 40px 0;
  padding: 28px 0;

  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;

  font-size: clamp(1.8rem, 8vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* BEFORE / AFTER */

.sciatica-before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.sciatica-before-after > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.sciatica-label {
  margin: 0 0 18px !important;

  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em;
}

.sciatica-before-after > div > p:last-child {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.2rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}


/* TOOL LIST */

.sciatica-tool-list {
  margin: 40px 0;
  border-top: 3px solid currentColor;
}

.sciatica-tool-list > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.sciatica-tool-list span {
  font-size: 0.8rem;
  font-weight: 900;
}

.sciatica-tool-list p {
  margin: 0;

  font-size: clamp(1.05rem, 5vw, 1.45rem);
  line-height: 1.3;

  font-weight: 900;
}


/* CONTROL GRID */

.sciatica-control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.sciatica-control-grid > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.sciatica-control-grid > div > p:not(.sciatica-label) {
  margin: 0;
  padding: 12px 0;

  border-bottom: 2px solid currentColor;

  font-weight: 800;
}


/* WORKBOOK */

.sciatica-workbook {
  margin-top: 40px;
  border-top: 3px solid currentColor;
}

.sciatica-workbook > div {
  padding: 25px 0;
  border-bottom: 3px solid currentColor;
}

.sciatica-workbook span {
  font-size: 0.75rem;
  font-weight: 900;
}

.sciatica-workbook h3 {
  margin: 8px 0;

  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 0.9;

  font-weight: 900;
  font-style: italic;
}

.sciatica-workbook p {
  margin: 0;

  line-height: 1.4;
  font-weight: 700;
}


/* ENDING */

.sciatica-ending {
  padding: 100px 22px;

  background: var(--yellow);
  color: var(--black);
}

.sciatica-ending-small {
  margin-bottom: 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.sciatica-ending h2 {
  margin: 0 0 35px;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.sciatica-ending > p:not(.sciatica-ending-small) {
  max-width: 700px;

  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.sciatica-back-link {
  display: inline-block;

  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;

  text-decoration: none;
}

.sciatica-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-sciatica-hero {
    min-height: 92vh;
    align-items: center;

    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.4) 45%,
        rgba(8, 8, 8, 0.08) 100%
      ),
      url(/assets/toolbox_sciatica_desktop_background-44e1faa1c5f50a67fd9f2318f34aa0ffacc3434e8ebf208deb573a0d48abe3d7.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-sciatica-hero h1 {
    max-width: 1000px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .sciatica-section {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;

    justify-content: center;
  }

  .sciatica-section-number {
    margin-top: 8px;
  }

  .sciatica-before-after,
  .sciatica-control-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sciatica-workbook > div {
    display: grid;
    grid-template-columns: 50px 180px 1fr;
    gap: 20px;
    align-items: center;
  }

  .sciatica-workbook h3 {
    margin: 0;
  }

  .sciatica-ending {
    padding: 130px 70px;
  }

  .sciatica-ending h2 {
    max-width: 1050px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   TOOLBOX — STIGMA
   ========================================================= */

.toolbox-stigma-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.toolbox-stigma-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.08),
      rgba(8, 8, 8, 0.42) 45%,
      rgba(8, 8, 8, 0.97)
    ),
    url(/assets/toolbox_stigma_mobile_background-b9ac7e76532849c1b32b7b49b72d501146e215ddbfeb62b59e5964f669eb67c5.png);

  background-size: cover;
  background-position: center;

  padding: 32px 22px 60px;
}

.toolbox-stigma-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbox-stigma-eyebrow {
  margin: 0 0 18px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.toolbox-stigma-hero h1 {
  margin: 0;

  max-width: 1100px;

  font-size: clamp(3.3rem, 15vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.toolbox-stigma-hero h1 span {
  display: block;
}

.toolbox-stigma-intro {
  margin: 30px 0 0;

  font-size: clamp(1.1rem, 5vw, 2rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* SECTIONS */

.stigma-section {
  padding: 80px 22px;
  border-top: 5px solid var(--black);
}

.stigma-section-number {
  margin-bottom: 45px;

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.stigma-section-content {
  max-width: 850px;
}

.stigma-section h2 {
  margin: 0 0 35px;

  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;

  font-weight: 900;
  font-style: italic;
}

.stigma-section-content > p {
  max-width: 760px;

  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.stigma-section-pink {
  background: var(--pink);
  color: var(--black);
}

.stigma-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.stigma-section-purple {
  background: var(--purple);
  color: var(--white);
}

.stigma-section-black {
  background: var(--black);
  color: var(--white);
}


/* CALLOUT */

.stigma-callout {
  margin: 40px 0;
  padding: 25px;

  border: 4px solid currentColor;
}

.stigma-callout p {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.3rem);
  line-height: 0.95;

  font-weight: 900;
  font-style: italic;
}


/* THOUGHTS */

.stigma-thoughts {
  margin: 40px 0;
  border-top: 3px solid currentColor;
}

.stigma-thoughts p {
  margin: 0;
  padding: 18px 0;

  border-bottom: 3px solid currentColor;

  font-size: clamp(1.15rem, 5vw, 1.8rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}


/* BEFORE / AFTER */

.stigma-before-after,
.stigma-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.stigma-before-after > div,
.stigma-compare > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.stigma-label {
  margin: 0 0 18px !important;

  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em;
}

.stigma-before-after > div > p:last-child,
.stigma-compare > div > p:last-child {
  margin: 0;

  font-size: clamp(1.3rem, 6vw, 2.2rem);
  line-height: 1;

  font-weight: 900;
  font-style: italic;
}


/* QUESTIONS */

.stigma-question-list {
  margin: 40px 0;
  border-top: 3px solid currentColor;
}

.stigma-question-list > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;

  padding: 22px 0;
  border-bottom: 3px solid currentColor;
}

.stigma-question-list span {
  font-size: 0.8rem;
  font-weight: 900;
}

.stigma-question-list p {
  margin: 0;

  font-size: clamp(1.05rem, 5vw, 1.5rem);
  line-height: 1.3;

  font-weight: 900;
}


/* BIG QUESTION */

.stigma-big-question {
  margin: 40px 0;
  padding: 28px 0;

  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;

  font-size: clamp(1.8rem, 8vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* WHO GETS A VOTE */

.stigma-vote-grid,
.stigma-response-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;

  margin: 40px 0;
}

.stigma-vote-grid > div,
.stigma-response-grid > div {
  padding: 25px;
  border: 4px solid currentColor;
}

.stigma-vote-grid h3 {
  margin: 0 0 25px;

  font-size: clamp(1.6rem, 7vw, 2.6rem);
  line-height: 0.9;

  font-weight: 900;
  font-style: italic;
}

.stigma-vote-grid p {
  margin: 0;
  padding: 12px 0;

  border-bottom: 2px solid currentColor;

  font-weight: 800;
}

.stigma-response-grid > div > p:last-child {
  margin: 0;

  font-size: clamp(1.15rem, 5vw, 1.6rem);
  line-height: 1.25;

  font-weight: 900;
}


/* ENDING */

.stigma-ending {
  padding: 100px 22px;

  background: var(--yellow);
  color: var(--black);
}

.stigma-ending-small {
  margin-bottom: 25px;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.stigma-ending h2 {
  margin: 0 0 35px;

  font-size: clamp(3.5rem, 15vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.stigma-ending > p:not(.stigma-ending-small) {
  max-width: 700px;

  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 800;
}

.stigma-back-link {
  display: inline-block;

  margin-top: 45px;
  padding-bottom: 5px;

  color: var(--black);
  border-bottom: 3px solid var(--black);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;

  text-decoration: none;
}

.stigma-back-link:hover {
  opacity: 0.6;
}


/* DESKTOP */

@media (min-width: 768px) {

  .toolbox-stigma-hero {
    min-height: 92vh;
    align-items: center;

    padding: 70px;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.4) 45%,
        rgba(8, 8, 8, 0.08) 100%
      ),
      url(/assets/toolbox_stigma_desktop_background-6153223f8253f613b149a0a52ee2f9e299950a4efb023ef8f96e15e32d87d82f.png);

    background-size: cover;
    background-position: center;
  }

  .toolbox-stigma-hero h1 {
    max-width: 1150px;
    font-size: clamp(5rem, 8.5vw, 9rem);
  }

  .stigma-section {
    padding: 110px 70px;

    display: grid;
    grid-template-columns: 180px minmax(0, 850px);
    gap: 60px;

    justify-content: center;
  }

  .stigma-section-number {
    margin-top: 8px;
  }

  .stigma-before-after,
  .stigma-compare,
  .stigma-vote-grid,
  .stigma-response-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stigma-ending {
    padding: 130px 70px;
  }

  .stigma-ending h2 {
    max-width: 1100px;
    font-size: clamp(5rem, 9vw, 9rem);
  }
}

/* =========================================================
   SPIRITUALITY / BUDDHISM
   ========================================================= */

.spirituality-buddhism-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.spirituality-buddhism-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.10) 0%,
      rgba(8, 8, 8, 0.25) 45%,
      rgba(8, 8, 8, 0.95) 100%
    ),
    url(/assets/spirituality_buddhism_mobile_background-3fc5d34c45a3f0f9a1cb42ba32c2964bfb4bb24cba47b20f69b4cb8001127b7c.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.spirituality-buddhism-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.spirituality-buddhism-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.spirituality-buddhism-hero h1 {
  margin: 0;
  font-size: clamp(3.2rem, 15vw, 6rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

.spirituality-buddhism-hero h1 span {
  display: block;
}

.spirituality-buddhism-intro {
  margin: 2rem 0 0;
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}


/* CONTENT */

.spirituality-buddhism-content {
  width: 100%;
}

.sb-section {
  padding: 5rem 1.25rem;
}

.sb-section-black {
  background: var(--black);
  color: var(--white);
}

.sb-section-pink {
  background: var(--pink);
  color: var(--black);
}

.sb-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.sb-section-purple {
  background: var(--purple);
  color: var(--white);
}

.sb-number {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.sb-section > h2 {
  margin: 0 0 2.5rem;
  max-width: 1000px;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.82;
  letter-spacing: -0.065em;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

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

.sb-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.sb-copy strong {
  font-weight: 900;
}


/* CALLOUTS */

.sb-callout {
  margin: 3rem 0;
  padding: 1.5rem;
  border: 4px solid currentColor;

  font-size: clamp(1.5rem, 7vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 900;
  font-style: italic;
}


/* FOUR TRUTHS */

.sb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
}

.sb-mini-card {
  border: 4px solid var(--black);
  padding: 1.5rem;
}

.sb-mini-card > span {
  display: block;
  margin-bottom: 2rem;
  font-weight: 900;
}

.sb-mini-card h3 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 0.95;
  font-weight: 900;
}

.sb-mini-card p {
  margin-bottom: 0;
  line-height: 1.45;
  font-weight: 700;
}


/* THOUGHT BLOCKS */

.sb-thought {
  margin: 2rem 0;
  padding: 1.5rem;

  background: var(--white);
  color: var(--black);

  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 900;
  font-style: italic;
}


/* STACK */

.sb-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 2rem 0;
}

.sb-stack span {
  display: block;
  width: fit-content;

  padding: 0.6rem 0.8rem;

  background: var(--black);
  color: var(--white);

  font-weight: 900;
  line-height: 1;
}


/* PRACTICE */

.sb-practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

.sb-practice-grid > div {
  padding: 1.5rem;
  border: 3px solid var(--white);
}

.sb-practice-grid span {
  display: block;
  margin-bottom: 1rem;
  color: var(--yellow);
  font-size: 1.5rem;
  font-weight: 900;
}

.sb-practice-grid p {
  margin: 0;
  font-weight: 800;
  line-height: 1.4;
}


/* ENDING */

.sb-ending {
  padding: 6rem 1.25rem;
  background: var(--white);
  color: var(--black);
}

.sb-ending > p:first-child {
  margin: 0 0 2rem;
  font-weight: 900;
  line-height: 1.1;
}

.sb-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-weight: 900;
  font-style: italic;
}

.sb-ending-copy {
  margin: 2rem 0 3rem;
  max-width: 600px;
  font-size: 1.1rem;
  font-weight: 700;
}

.sb-back-link {
  display: inline-block;
  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.sb-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .spirituality-buddhism-hero {
    min-height: 100vh;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.86) 0%,
        rgba(8, 8, 8, 0.45) 42%,
        rgba(8, 8, 8, 0.05) 75%
      ),
      url(/assets/spirituality_buddhism_desktop_background-f0981d61e228e16b7f5934bf0fa9ed3c12e8c3b02f5496011e926e36e364332f.png);

    background-size: cover;
    background-position: center;
    padding: 4rem 5vw 5rem;
  }

  .spirituality-buddhism-hero h1 {
    max-width: 950px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .spirituality-buddhism-intro {
    font-size: 1.25rem;
  }

  .sb-section {
    padding: 8rem 7vw;
  }

  .sb-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .sb-copy {
    margin-left: 35%;
  }

  .sb-copy > p {
    font-size: 1.2rem;
  }

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

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

  .sb-ending {
    padding: 9rem 7vw;
  }

  .sb-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

/* =========================================================
   SPIRITUALITY / HINDUISM
   ========================================================= */

.spirituality-hinduism-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.spirituality-hinduism-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.08) 0%,
      rgba(8, 8, 8, 0.22) 45%,
      rgba(8, 8, 8, 0.96) 100%
    ),
    url(/assets/spirituality_hinduism_mobile_background-8e6b41101a47906d49cac7bb2ea470819f98ec6c6da9b80e5e4ba84430d68238.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.spirituality-hinduism-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.spirituality-hinduism-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.spirituality-hinduism-hero h1 {
  margin: 0;
  font-size: clamp(3.2rem, 15vw, 6rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

.spirituality-hinduism-hero h1 span {
  display: block;
}

.spirituality-hinduism-intro {
  margin: 2rem 0 0;
  max-width: 750px;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* CONTENT */

.spirituality-hinduism-content {
  width: 100%;
}

.sh-section {
  padding: 5rem 1.25rem;
}

.sh-section-black {
  background: var(--black);
  color: var(--white);
}

.sh-section-pink {
  background: var(--pink);
  color: var(--black);
}

.sh-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.sh-section-purple {
  background: var(--purple);
  color: var(--white);
}

.sh-number {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.sh-section > h2 {
  margin: 0 0 2.5rem;
  max-width: 1000px;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.82;
  letter-spacing: -0.065em;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

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

.sh-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.sh-copy strong {
  font-weight: 900;
}


/* CALLOUT */

.sh-callout {
  margin: 3rem 0;
  padding: 1.5rem;
  border: 4px solid currentColor;

  font-size: clamp(1.5rem, 7vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 900;
  font-style: italic;
}


/* THOUGHT */

.sh-thought {
  margin: 2rem 0;
  padding: 1.5rem;

  background: var(--white);
  color: var(--black);

  font-size: clamp(1.4rem, 6vw, 2.5rem);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}


/* STACK */

.sh-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 2rem 0;
}

.sh-stack span {
  padding: 0.6rem 0.8rem;

  background: var(--black);
  color: var(--white);

  font-weight: 900;
  line-height: 1;
}


/* CARDS */

.sh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 3rem 0;
}

.sh-mini-card {
  padding: 1.5rem;
  border: 4px solid currentColor;
}

.sh-mini-card > span {
  display: block;
  margin-bottom: 2rem;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.sh-mini-card h3 {
  margin: 0 0 1rem;

  font-size: 1.6rem;
  line-height: 0.95;
  font-weight: 900;
}

.sh-mini-card p {
  margin: 0;
  line-height: 1.45;
  font-weight: 700;
}


/* PRACTICE */

.sh-practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

.sh-practice-grid > div {
  padding: 1.5rem;
  border: 3px solid var(--white);
}

.sh-practice-grid span {
  display: block;
  margin-bottom: 1rem;

  color: var(--yellow);

  font-size: 1.5rem;
  font-weight: 900;
}

.sh-practice-grid p {
  margin: 0;
  line-height: 1.4;
  font-weight: 800;
}


/* ENDING */

.sh-ending {
  padding: 6rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.sh-ending > p:first-child {
  margin: 0 0 2rem;
  font-weight: 900;
  line-height: 1.1;
}

.sh-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-weight: 900;
  font-style: italic;
}

.sh-ending-copy {
  margin: 2rem 0 3rem;
  max-width: 600px;
  font-size: 1.1rem;
  font-weight: 700;
}

.sh-back-link {
  display: inline-block;
  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.sh-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .spirituality-hinduism-hero {
    min-height: 100vh;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.48) 40%,
        rgba(8, 8, 8, 0.05) 75%
      ),
      url(/assets/spirituality_hinduism_desktop_background-3f582872f383a16856f96352feba7b4dd91409757b39e2818a2244461f1ec7a7.png);

    background-size: cover;
    background-position: center;
    padding: 4rem 5vw 5rem;
  }

  .spirituality-hinduism-hero h1 {
    max-width: 1000px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .spirituality-hinduism-intro {
    font-size: 1.25rem;
  }

  .sh-section {
    padding: 8rem 7vw;
  }

  .sh-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .sh-copy {
    margin-left: 35%;
  }

  .sh-copy > p {
    font-size: 1.2rem;
  }

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

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

  .sh-ending {
    padding: 9rem 7vw;
  }

  .sh-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

/* =========================================================
   SPIRITUALITY / MIXING TRADITIONS
   ========================================================= */

.spirituality-mixing-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.spirituality-mixing-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.06) 0%,
      rgba(8, 8, 8, 0.22) 45%,
      rgba(8, 8, 8, 0.96) 100%
    ),
    url(/assets/spirituality_mixing_traditions_mobile_background-85612585ee8453957b59aa095c1408fafc6e78c297802e5c22f9ee77f0161e49.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.spirituality-mixing-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.spirituality-mixing-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.spirituality-mixing-hero h1 {
  margin: 0;

  font-size: clamp(3.2rem, 15vw, 6rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

.spirituality-mixing-hero h1 span {
  display: block;
}

.spirituality-mixing-intro {
  margin: 2rem 0 0;
  max-width: 760px;

  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* SECTIONS */

.spirituality-mixing-content {
  width: 100%;
}

.smt-section {
  padding: 5rem 1.25rem;
}

.smt-section-black {
  background: var(--black);
  color: var(--white);
}

.smt-section-pink {
  background: var(--pink);
  color: var(--black);
}

.smt-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.smt-section-purple {
  background: var(--purple);
  color: var(--white);
}

.smt-number {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.smt-section > h2 {
  margin: 0 0 2.5rem;
  max-width: 1000px;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.82;
  letter-spacing: -0.065em;

  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

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

.smt-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.smt-copy strong {
  font-weight: 900;
}


/* CALLOUT */

.smt-callout {
  margin: 3rem 0;
  padding: 1.5rem;

  border: 4px solid currentColor;

  font-size: clamp(1.5rem, 7vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* THOUGHT */

.smt-thought {
  margin: 2rem 0;
  padding: 1.5rem;

  background: var(--white);
  color: var(--black);

  font-size: clamp(1.25rem, 6vw, 2.25rem);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}


/* STACK */

.smt-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 0.5rem;
  margin: 2rem 0;
}

.smt-stack span {
  padding: 0.6rem 0.8rem;

  background: var(--black);
  color: var(--white);

  font-weight: 900;
  line-height: 1;
}


/* CARDS */

.smt-grid {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1rem;
  margin: 3rem 0;
}

.smt-mini-card {
  padding: 1.5rem;
  border: 4px solid currentColor;
}

.smt-mini-card > span {
  display: block;
  margin-bottom: 2rem;

  font-size: 0.8rem;
  font-weight: 900;
}

.smt-mini-card h3 {
  margin: 0 0 1rem;

  font-size: 1.6rem;
  line-height: 0.95;
  font-weight: 900;
}

.smt-mini-card p {
  margin: 0;
  line-height: 1.45;
  font-weight: 700;
}


/* PRACTICE */

.smt-practice-grid {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1rem;
  margin-top: 2.5rem;
}

.smt-practice-grid > div {
  padding: 1.5rem;
  border: 3px solid var(--white);
}

.smt-practice-grid span {
  display: block;
  margin-bottom: 1rem;

  color: var(--yellow);

  font-size: 1.5rem;
  font-weight: 900;
}

.smt-practice-grid p {
  margin: 0;
  line-height: 1.4;
  font-weight: 800;
}


/* QUESTIONS */

.smt-question-list {
  margin: 2.5rem 0;
}

.smt-question-list p {
  margin: 0;
  padding: 1rem 0;

  border-bottom: 3px solid var(--black);

  font-size: 1.1rem;
  line-height: 1.1;
  font-weight: 900;
}


/* ENDING */

.smt-ending {
  padding: 6rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.smt-ending > p:first-child {
  margin: 0 0 2rem;

  font-weight: 900;
  line-height: 1.1;
}

.smt-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.smt-ending-copy {
  margin: 2rem 0 3rem;
  max-width: 650px;

  font-size: 1.1rem;
  font-weight: 700;
}

.smt-back-link {
  display: inline-block;
  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.smt-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .spirituality-mixing-hero {
    min-height: 100vh;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.45) 42%,
        rgba(8, 8, 8, 0.05) 75%
      ),
      url(/assets/spirituality_mixing_traditions_desktop_background-00709a7f33067b9565f315408dd0a44c62902c83bf8f784804af3bff912187ca.png);

    background-size: cover;
    background-position: center;

    padding: 4rem 5vw 5rem;
  }

  .spirituality-mixing-hero h1 {
    max-width: 1050px;
    font-size: clamp(5rem, 9vw, 9rem);
  }

  .spirituality-mixing-intro {
    font-size: 1.25rem;
  }

  .smt-section {
    padding: 8rem 7vw;
  }

  .smt-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .smt-copy {
    margin-left: 35%;
  }

  .smt-copy > p {
    font-size: 1.2rem;
  }

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

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

  .smt-question-list p {
    font-size: 1.35rem;
  }

  .smt-ending {
    padding: 9rem 7vw;
  }

  .smt-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

/* =========================================================
   SPIRITUALITY / MY SPIRITUALITY
   ========================================================= */

.my-spirituality-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.my-spirituality-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.05) 0%,
      rgba(8, 8, 8, 0.20) 45%,
      rgba(8, 8, 8, 0.96) 100%
    ),
    url(/assets/spirituality_my_spirituality_mobile_background-1614b70f52c43fce10c5d77fab46dd88fc715853d5ce5309a9579a72c3220ff5.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.my-spirituality-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.my-spirituality-eyebrow {
  margin: 0 0 1rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.my-spirituality-hero h1 {
  margin: 0;

  font-size: clamp(3rem, 14vw, 5.75rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

.my-spirituality-hero h1 span {
  display: block;
}

.my-spirituality-intro {
  margin: 2rem 0 0;
  max-width: 760px;

  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* SECTIONS */

.my-spirituality-content {
  width: 100%;
}

.ms-section {
  padding: 5rem 1.25rem;
}

.ms-section-black {
  background: var(--black);
  color: var(--white);
}

.ms-section-pink {
  background: var(--pink);
  color: var(--black);
}

.ms-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.ms-section-purple {
  background: var(--purple);
  color: var(--white);
}

.ms-number {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.ms-section > h2 {
  margin: 0 0 2.5rem;
  max-width: 1000px;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.82;
  letter-spacing: -0.065em;

  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

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

.ms-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.ms-copy strong {
  font-weight: 900;
}


/* CALLOUTS */

.ms-callout {
  margin: 3rem 0;
  padding: 1.5rem;

  border: 4px solid currentColor;

  font-size: clamp(1.5rem, 7vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* THOUGHT */

.ms-thought {
  margin: 2rem 0;
  padding: 1.5rem;

  background: var(--white);
  color: var(--black);

  font-size: clamp(1.35rem, 6vw, 2.5rem);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}


/* STACK */

.ms-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 0.5rem;
  margin: 2rem 0;
}

.ms-stack span {
  padding: 0.6rem 0.8rem;

  background: var(--black);
  color: var(--white);

  font-weight: 900;
  line-height: 1;
}


/* CARDS */

.ms-grid {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1rem;
  margin: 3rem 0;
}

.ms-mini-card {
  padding: 1.5rem;
  border: 4px solid currentColor;
}

.ms-mini-card > span {
  display: block;
  margin-bottom: 2rem;

  font-size: 0.8rem;
  font-weight: 900;
}

.ms-mini-card h3 {
  margin: 0 0 1rem;

  font-size: 1.6rem;
  line-height: 0.95;
  font-weight: 900;
}

.ms-mini-card p {
  margin: 0;

  line-height: 1.45;
  font-weight: 700;
}


/* PRACTICE */

.ms-practice-grid {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1rem;
  margin-top: 2.5rem;
}

.ms-practice-grid > div {
  padding: 1.5rem;
  border: 3px solid var(--black);
}

.ms-practice-grid span {
  display: block;
  margin-bottom: 1rem;

  font-size: 1.5rem;
  font-weight: 900;
}

.ms-practice-grid p {
  margin: 0;

  line-height: 1.4;
  font-weight: 800;
}


/* ENDING */

.ms-ending {
  padding: 6rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.ms-ending > p:first-child {
  margin: 0 0 2rem;

  font-weight: 900;
  line-height: 1.1;
}

.ms-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.ms-ending-copy {
  margin: 2rem 0 3rem;
  max-width: 650px;

  font-size: 1.1rem;
  font-weight: 700;
}

.ms-back-link {
  display: inline-block;
  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.ms-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .my-spirituality-hero {
    min-height: 100vh;

    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.44) 42%,
        rgba(8, 8, 8, 0.04) 75%
      ),
      url(/assets/spirituality_my_spirituality_desktop_background-23bc956ec9b4f3e0e3f91b11ecc614cd719a22d705af8ec35d9095b1d4a3a7db.png);

    background-size: cover;
    background-position: center;

    padding: 4rem 5vw 5rem;
  }

  .my-spirituality-hero h1 {
    max-width: 1050px;
    font-size: clamp(5rem, 8.5vw, 8.5rem);
  }

  .my-spirituality-intro {
    font-size: 1.25rem;
  }

  .ms-section {
    padding: 8rem 7vw;
  }

  .ms-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .ms-copy {
    margin-left: 35%;
  }

  .ms-copy > p {
    font-size: 1.2rem;
  }

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

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

  .ms-ending {
    padding: 9rem 7vw;
  }

  .ms-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

/* =========================================================
   PERSPECTIVES
   ========================================================= */

.perspectives-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.perspectives-hero {
  min-height: 100vh;

  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.05) 0%,
      rgba(8, 8, 8, 0.25) 50%,
      rgba(8, 8, 8, 0.97) 100%
    ),
    url(/assets/perspectives_mobile_background-636a3885f739e139c90b59771b21ff06b880cc73e316c4574b60cafd593bb173.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.perspectives-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.perspectives-eyebrow {
  margin: 0 0 1rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.perspectives-hero h1 {
  margin: 0;

  font-size: clamp(3.3rem, 16vw, 6.5rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

.perspectives-hero h1 span {
  display: block;
}

.perspectives-intro {
  margin: 2rem 0 0;

  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* TOPICS */

.perspectives-topics {
  background: var(--white);
  color: var(--black);

  padding: 5rem 1.25rem;
}

.perspectives-topics-heading {
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.perspectives-topics-heading > p:first-child {
  margin: 0 0 1.25rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.perspectives-topics-heading h2 {
  margin: 0;

  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.perspectives-topics-subtitle {
  max-width: 650px;
  margin: 2rem 0 0;

  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
}


/* GRID */

.perspectives-grid {
  display: grid;
  grid-template-columns: 1fr;

  max-width: 1100px;
  margin: 0 auto;

  gap: 1rem;
}


/* CARDS */

.perspectives-card {
  min-height: 330px;

  display: flex;
  flex-direction: column;

  padding: 1.5rem;

  border: 4px solid var(--black);

  color: var(--black);
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.perspectives-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 8px 8px 0 var(--black);
}

.perspectives-card-pink {
  background: var(--pink);
}

.perspectives-card-yellow {
  background: var(--yellow);
}

.perspectives-card-purple {
  background: var(--purple);
  color: var(--white);
}

.perspectives-card-black {
  background: var(--black);
  color: var(--white);
}

.perspectives-card-number {
  margin: 0 0 3rem;

  font-size: 0.8rem;
  font-weight: 900;
}

.perspectives-card h3 {
  margin: 0 0 1rem;

  font-size: clamp(2.5rem, 11vw, 4rem);
  line-height: 0.82;
  letter-spacing: -0.055em;

  font-weight: 900;
  font-style: italic;
}

.perspectives-card-description {
  max-width: 470px;
  margin: 0 0 2rem;

  line-height: 1.4;
  font-weight: 700;
}

.perspectives-card > span {
  margin-top: auto;

  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .perspectives-hero {
    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.42) 42%,
        rgba(8, 8, 8, 0.04) 75%
      ),
      url(/assets/perspectives_desktop_background-1ed533e86cb607ea94c79241984025c348bdd15871c190e77eca387e33d8bc28.png);

    background-size: cover;
    background-position: center;

    padding: 4rem 5vw 5rem;
  }

  .perspectives-hero h1 {
    max-width: 1050px;

    font-size: clamp(6rem, 10vw, 10rem);
  }

  .perspectives-intro {
    font-size: 1.25rem;
  }

  .perspectives-topics {
    padding: 8rem 7vw;
  }

  .perspectives-topics-heading h2 {
    font-size: clamp(6rem, 9vw, 9rem);
  }

  .perspectives-topics-subtitle {
    margin-left: 35%;
    font-size: 1.15rem;
  }

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

  .perspectives-card {
    min-height: 390px;
    padding: 2rem;
  }

  .perspectives-card h3 {
    font-size: clamp(3rem, 5vw, 5rem);
  }
}

/* =========================================================
   PERSPECTIVES / BOOKS
   ========================================================= */

.perspectives-books-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.perspectives-books-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.04) 0%,
      rgba(8, 8, 8, 0.22) 48%,
      rgba(8, 8, 8, 0.97) 100%
    ),
    url(/assets/perspectives_books_mobile_background-1758df38f686c0dad2f714b3507f10b338d9c8c79901327772b12d0c4d43c5ab.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.perspectives-books-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.perspectives-books-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.perspectives-books-hero h1 {
  margin: 0;

  font-size: clamp(3.5rem, 17vw, 6.5rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.perspectives-books-hero h1 span {
  display: block;
}

.perspectives-books-intro {
  margin: 2rem 0 0;

  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* INTRO */

.pb-intro-section,
.pb-reading-section {
  padding: 5rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.pb-number {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pb-intro-section > h2,
.pb-reading-section > h2 {
  margin: 0 0 2.5rem;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.8;
  letter-spacing: -0.065em;

  font-weight: 900;
  font-style: italic;
}

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

.pb-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}

.pb-callout {
  margin: 3rem 0 0;
  padding: 1.5rem;

  border: 4px solid var(--black);

  font-size: clamp(1.4rem, 7vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* LIBRARY */

.pb-library {
  padding: 5rem 1.25rem;

  background: var(--black);
  color: var(--white);
}

.pb-library-heading {
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.pb-library-heading p {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pb-library-heading h2 {
  margin: 0;

  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}


/* BOOK GRID */

.pb-books-grid {
  display: grid;
  grid-template-columns: 1fr;

  max-width: 1100px;
  margin: 0 auto;

  gap: 1rem;
}

.pb-book {
  min-height: 520px;
  padding: 1.5rem;

  display: flex;
  flex-direction: column;

  border: 4px solid var(--white);
}

.pb-book-pink {
  background: var(--pink);
  color: var(--black);
}

.pb-book-yellow {
  background: var(--yellow);
  color: var(--black);
}

.pb-book-purple {
  background: var(--purple);
  color: var(--white);
}

.pb-book-black {
  background: var(--black);
  color: var(--white);
}

.pb-book-empty {
  min-height: 350px;

  background: var(--white);
  color: var(--black);

  border-color: var(--white);
}

.pb-book-number {
  margin: 0 0 1rem;

  font-size: 0.8rem;
  font-weight: 900;
}

.pb-book-type {
  margin: 0 0 2.5rem;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pb-book h3 {
  margin: 0;

  font-size: clamp(2.5rem, 10vw, 4.5rem);
  line-height: 0.82;
  letter-spacing: -0.055em;

  font-weight: 900;
  font-style: italic;
}

.pb-author {
  margin: 1rem 0 2rem;

  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.pb-book-copy p {
  line-height: 1.45;
  font-weight: 700;
}

.pb-takeaway {
  margin-top: auto;
  padding-top: 2rem;

  border-top: 3px solid currentColor;
}

.pb-takeaway span {
  display: block;
  margin-bottom: 0.75rem;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pb-takeaway p {
  margin: 0;

  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 900;
}


/* MINI LIST */

.pb-mini-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 0.45rem;
  margin: 1.5rem 0;
}

.pb-mini-list span {
  padding: 0.45rem 0.65rem;

  background: var(--white);
  color: var(--black);

  font-size: 0.8rem;
  line-height: 1;
  font-weight: 900;
}


/* HOW I READ */

.pb-reading-grid {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1rem;
  margin-top: 3rem;
}

.pb-reading-grid > div {
  padding: 1.5rem;

  border: 3px solid var(--black);
}

.pb-reading-grid span {
  display: block;
  margin-bottom: 1rem;

  color: var(--pink);

  font-size: 1.5rem;
  font-weight: 900;
}

.pb-reading-grid p {
  margin: 0;

  line-height: 1.35;
  font-weight: 900;
}


/* ENDING */

.pb-ending {
  padding: 6rem 1.25rem;

  background: var(--yellow);
  color: var(--black);
}

.pb-ending > p {
  margin: 0 0 2rem;

  font-weight: 900;
  line-height: 1.1;
}

.pb-ending h2 {
  margin: 0 0 3rem;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.pb-back-link {
  display: inline-block;

  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.pb-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .perspectives-books-hero {
    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.42) 42%,
        rgba(8, 8, 8, 0.03) 75%
      ),
      url(/assets/perspectives_books_desktop_background-208e64f30099e2a1b19c2f26a8412fca3735507d1cfe6f9a553ea735ac02b030.png);

    background-size: cover;
    background-position: center;

    padding: 4rem 5vw 5rem;
  }

  .perspectives-books-hero h1 {
    font-size: clamp(6rem, 10vw, 10rem);
  }

  .perspectives-books-intro {
    font-size: 1.25rem;
  }

  .pb-intro-section,
  .pb-reading-section {
    padding: 8rem 7vw;
  }

  .pb-intro-section > h2,
  .pb-reading-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .pb-copy {
    margin-left: 35%;
  }

  .pb-copy > p {
    font-size: 1.2rem;
  }

  .pb-library {
    padding: 8rem 7vw;
  }

  .pb-library-heading h2 {
    font-size: clamp(6rem, 9vw, 9rem);
  }

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

  .pb-book {
    min-height: 600px;
    padding: 2rem;
  }

  .pb-book h3 {
    font-size: clamp(3rem, 4.5vw, 5rem);
  }

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

  .pb-ending {
    padding: 9rem 7vw;
  }

  .pb-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

/* =========================================================
   PERSPECTIVES / ON THE INSIDE
   ========================================================= */

.perspectives-inside-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.perspectives-inside-hero {
  min-height: 100vh;

  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.05) 0%,
      rgba(8, 8, 8, 0.22) 45%,
      rgba(8, 8, 8, 0.97) 100%
    ),
    url(/assets/perspectives_inside_mobile_background-0e0d5cc04c309e355d66fc1c21d4586a57ed5d50989c80b6f5c92ae516126dd0.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.perspectives-inside-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.perspectives-inside-eyebrow {
  margin: 0 0 1rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.perspectives-inside-hero h1 {
  margin: 0;

  font-size: clamp(3.4rem, 16vw, 6.5rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.perspectives-inside-hero h1 span {
  display: block;
}

.perspectives-inside-intro {
  margin: 2rem 0 0;

  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* CONTENT SECTIONS */

.pi-section {
  padding: 5rem 1.25rem;
}

.pi-section-black {
  background: var(--black);
  color: var(--white);
}

.pi-section-pink {
  background: var(--pink);
  color: var(--black);
}

.pi-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.pi-section-purple {
  background: var(--purple);
  color: var(--white);
}

.pi-number {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pi-section > h2 {
  margin: 0 0 2.5rem;

  max-width: 1000px;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.8;
  letter-spacing: -0.065em;

  font-weight: 900;
  font-style: italic;
}

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

.pi-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}


/* CALLOUT */

.pi-callout {
  margin: 3rem 0;
  padding: 1.5rem;

  border: 4px solid currentColor;

  font-size: clamp(1.5rem, 7vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* THOUGHT */

.pi-thought {
  margin: 2.5rem 0;
  padding: 1.5rem;

  background: var(--white);
  color: var(--black);

  font-size: clamp(1.4rem, 7vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.035em;

  font-weight: 900;
  font-style: italic;
}


/* THEN + NOW */

.pi-two-column {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1rem;
  margin: 2.5rem 0;
}

.pi-perspective-card {
  padding: 1.5rem;

  border: 4px solid var(--black);
}

.pi-perspective-card > span {
  display: block;
  margin-bottom: 2rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pi-perspective-card h3 {
  margin: 0 0 1.25rem;

  font-size: 2.25rem;
  line-height: 0.85;
  letter-spacing: -0.05em;

  font-weight: 900;
  font-style: italic;
}

.pi-perspective-card p {
  margin: 0;

  line-height: 1.45;
  font-weight: 700;
}


/* FRAGMENTS */

.pi-fragments {
  display: flex;
  flex-wrap: wrap;

  gap: 0.5rem;
  margin: 2.5rem 0;
}

.pi-fragments span {
  padding: 0.65rem 0.8rem;

  background: var(--black);
  color: var(--white);

  font-weight: 900;
  line-height: 1;
}


/* JOURNALS */

.pi-journals {
  padding: 5rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.pi-journals-heading {
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.pi-journals-heading > p:first-child {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pi-journals-heading h2 {
  margin: 0 0 2rem;

  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.pi-journals-heading > p:last-child {
  max-width: 650px;

  line-height: 1.5;
  font-weight: 700;
}


/* JOURNAL CARDS */

.pi-journal-grid {
  display: grid;
  grid-template-columns: 1fr;

  max-width: 1100px;
  margin: 0 auto;

  gap: 1rem;
}

.pi-journal-card {
  min-height: 340px;

  display: flex;
  flex-direction: column;

  padding: 1.5rem;

  border: 4px solid var(--black);
}

.pi-card-pink {
  background: var(--pink);
  color: var(--black);
}

.pi-card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.pi-card-purple {
  background: var(--purple);
  color: var(--white);
}

.pi-card-black {
  background: var(--black);
  color: var(--white);
}

.pi-card-number {
  margin: 0 0 3rem;

  font-size: 0.8rem;
  font-weight: 900;
}

.pi-journal-card h3 {
  margin: 0 0 1rem;

  font-size: clamp(2.5rem, 11vw, 4rem);
  line-height: 0.82;
  letter-spacing: -0.055em;

  font-weight: 900;
  font-style: italic;
}

.pi-journal-card > p:not(.pi-card-number) {
  line-height: 1.4;
  font-weight: 700;
}

.pi-journal-card > span {
  margin-top: auto;

  padding-top: 2rem;

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}


/* ENDING */

.pi-ending {
  padding: 6rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.pi-ending > p:first-child {
  margin: 0 0 2rem;

  font-weight: 900;
  line-height: 1.1;
}

.pi-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.pi-ending-copy {
  max-width: 650px;
  margin: 2rem 0 3rem;

  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 700;
}

.pi-back-link {
  display: inline-block;

  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.pi-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .perspectives-inside-hero {
    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.42) 42%,
        rgba(8, 8, 8, 0.03) 75%
      ),
      url(/assets/perspectives_inside_desktop_background-a49295613e0c71416c5b35db34ac0c59fb88baa9024b84e310ad3836faaf651b.png);

    background-size: cover;
    background-position: center;

    padding: 4rem 5vw 5rem;
  }

  .perspectives-inside-hero h1 {
    font-size: clamp(6rem, 10vw, 10rem);
  }

  .perspectives-inside-intro {
    font-size: 1.25rem;
  }

  .pi-section {
    padding: 8rem 7vw;
  }

  .pi-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .pi-copy {
    margin-left: 35%;
  }

  .pi-copy > p {
    font-size: 1.2rem;
  }

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

  .pi-journals {
    padding: 8rem 7vw;
  }

  .pi-journals-heading h2 {
    font-size: clamp(6rem, 9vw, 9rem);
  }

  .pi-journals-heading > p:last-child {
    margin-left: 35%;
    font-size: 1.15rem;
  }

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

  .pi-journal-card {
    min-height: 390px;
    padding: 2rem;
  }

  .pi-journal-card h3 {
    font-size: clamp(3rem, 4.5vw, 5rem);
  }

  .pi-ending {
    padding: 9rem 7vw;
  }

  .pi-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

/* =========================================================
   PERSPECTIVES / QUOTES
   ========================================================= */

.perspectives-quotes-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.perspectives-quotes-hero {
  min-height: 100vh;

  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.05) 0%,
      rgba(8, 8, 8, 0.22) 45%,
      rgba(8, 8, 8, 0.97) 100%
    ),
    url(/perspectives_quotes_mobile_background.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.perspectives-quotes-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.perspectives-quotes-eyebrow {
  margin: 0 0 1rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.perspectives-quotes-hero h1 {
  margin: 0;

  font-size: clamp(3.5rem, 17vw, 6.5rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.perspectives-quotes-hero h1 span {
  display: block;
}

.perspectives-quotes-intro {
  margin: 2rem 0 0;

  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* GENERAL SECTIONS */

.pq-section {
  padding: 5rem 1.25rem;
}

.pq-section-black {
  background: var(--black);
  color: var(--white);
}

.pq-section-pink {
  background: var(--pink);
  color: var(--black);
}

.pq-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.pq-section-purple {
  background: var(--purple);
  color: var(--white);
}

.pq-number {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pq-section > h2 {
  margin: 0 0 2.5rem;

  max-width: 1000px;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.8;
  letter-spacing: -0.065em;

  font-weight: 900;
  font-style: italic;
}

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

.pq-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}


/* CALLOUT */

.pq-callout {
  margin: 3rem 0;
  padding: 1.5rem;

  border: 4px solid currentColor;

  font-size: clamp(1.4rem, 7vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* QUOTE LIBRARY */

.pq-library {
  padding: 5rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.pq-library-heading {
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.pq-library-heading > p:first-child {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pq-library-heading h2 {
  margin: 0 0 2rem;

  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.pq-library-heading > p:last-child {
  max-width: 650px;

  line-height: 1.5;
  font-weight: 700;
}


/* QUOTE CARDS */

.pq-grid {
  display: grid;
  grid-template-columns: 1fr;

  max-width: 1100px;
  margin: 0 auto;

  gap: 1rem;
}

.pq-card {
  min-height: 480px;

  display: flex;
  flex-direction: column;

  padding: 1.5rem;

  border: 4px solid var(--black);
}

.pq-card-pink {
  background: var(--pink);
  color: var(--black);
}

.pq-card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.pq-card-purple {
  background: var(--purple);
  color: var(--white);
}

.pq-card-black {
  background: var(--black);
  color: var(--white);
}

.pq-card-number {
  margin: 0 0 3rem;

  font-size: 0.8rem;
  font-weight: 900;
}

.pq-card blockquote {
  margin: 0;

  font-size: clamp(2.3rem, 10vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;

  font-weight: 900;
  font-style: italic;
}

.pq-source {
  margin: 1.5rem 0 3rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.pq-reflection {
  margin-top: auto;
  padding-top: 1.5rem;

  border-top: 3px solid currentColor;
}

.pq-reflection span {
  display: block;
  margin-bottom: 0.75rem;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pq-reflection p {
  margin: 0;

  line-height: 1.4;
  font-weight: 700;
}


/* TAGS */

.pq-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 0.5rem;
  margin: 2.5rem 0;
}

.pq-tags span {
  padding: 0.65rem 0.8rem;

  background: var(--black);
  color: var(--white);

  font-weight: 900;
  line-height: 1;
}


/* THOUGHT */

.pq-thought {
  margin: 2.5rem 0;
  padding: 1.5rem;

  background: var(--white);
  color: var(--black);

  font-size: clamp(1.4rem, 7vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.035em;

  font-weight: 900;
  font-style: italic;
}


/* ENDING */

.pq-ending {
  padding: 6rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.pq-ending > p:first-child {
  margin: 0 0 2rem;

  font-weight: 900;
}

.pq-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.pq-ending-copy {
  max-width: 650px;
  margin: 2rem 0 3rem;

  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 700;
}

.pq-back-link {
  display: inline-block;

  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.pq-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .perspectives-quotes-hero {
    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.42) 42%,
        rgba(8, 8, 8, 0.03) 75%
      ),
      url(/assets/perspectives_quotes_desktop_background-310bb55757cfc94191b5b40042aba69437185f16b5c0037753c36148f58547c6.png);

    background-size: cover;
    background-position: center;

    padding: 4rem 5vw 5rem;
  }

  .perspectives-quotes-hero h1 {
    font-size: clamp(6rem, 10vw, 10rem);
  }

  .perspectives-quotes-intro {
    font-size: 1.25rem;
  }

  .pq-section {
    padding: 8rem 7vw;
  }

  .pq-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .pq-copy {
    margin-left: 35%;
  }

  .pq-copy > p {
    font-size: 1.2rem;
  }

  .pq-library {
    padding: 8rem 7vw;
  }

  .pq-library-heading h2 {
    font-size: clamp(6rem, 9vw, 9rem);
  }

  .pq-library-heading > p:last-child {
    margin-left: 35%;
    font-size: 1.15rem;
  }

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

  .pq-card {
    min-height: 550px;
    padding: 2rem;
  }

  .pq-card blockquote {
    font-size: clamp(2.75rem, 4vw, 4.5rem);
  }

  .pq-ending {
    padding: 9rem 7vw;
  }

  .pq-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

/* =========================================================
   PERSPECTIVES / REFLECTIONS
   ========================================================= */

.perspectives-reflections-page {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}


/* HERO */

.perspectives-reflections-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.05) 0%,
      rgba(8, 8, 8, 0.22) 45%,
      rgba(8, 8, 8, 0.97) 100%
    ),
    url(/assets/perspectives_reflections_mobile_background-84dda501ae5b82bf4e06dbacbbd1e18c79d320a59299d3ebd0ddfd58649517fe.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 2rem 1.25rem 4rem;
}

.perspectives-reflections-hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.perspectives-reflections-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.perspectives-reflections-hero h1 {
  margin: 0;

  font-size: clamp(3.3rem, 16vw, 6.5rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.perspectives-reflections-hero h1 span {
  display: block;
}

.perspectives-reflections-intro {
  margin: 2rem 0 0;

  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}


/* SECTIONS */

.pr-section {
  padding: 5rem 1.25rem;
}

.pr-section-black {
  background: var(--black);
  color: var(--white);
}

.pr-section-pink {
  background: var(--pink);
  color: var(--black);
}

.pr-section-yellow {
  background: var(--yellow);
  color: var(--black);
}

.pr-section-purple {
  background: var(--purple);
  color: var(--white);
}

.pr-number {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pr-section > h2 {
  margin: 0 0 2.5rem;

  max-width: 1000px;

  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.8;
  letter-spacing: -0.065em;

  font-weight: 900;
  font-style: italic;
}

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

.pr-copy > p {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
}


/* CALLOUT */

.pr-callout {
  margin: 3rem 0;
  padding: 1.5rem;

  border: 4px solid currentColor;

  font-size: clamp(1.4rem, 7vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;

  font-weight: 900;
  font-style: italic;
}


/* REFLECTION LIBRARY */

.pr-reflections {
  padding: 5rem 1.25rem;

  background: var(--white);
  color: var(--black);
}

.pr-reflections-heading {
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.pr-reflections-heading > p:first-child {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pr-reflections-heading h2 {
  margin: 0 0 2rem;

  font-size: clamp(3.5rem, 16vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.pr-reflections-heading > p:last-child {
  max-width: 650px;

  line-height: 1.5;
  font-weight: 700;
}


/* REFLECTION CARDS */

.pr-grid {
  display: grid;
  grid-template-columns: 1fr;

  max-width: 1100px;
  margin: 0 auto;

  gap: 1rem;
}

.pr-card {
  min-height: 520px;

  display: flex;
  flex-direction: column;

  padding: 1.5rem;

  border: 4px solid var(--black);
}

.pr-card-pink {
  background: var(--pink);
  color: var(--black);
}

.pr-card-yellow {
  background: var(--yellow);
  color: var(--black);
}

.pr-card-purple {
  background: var(--purple);
  color: var(--white);
}

.pr-card-black {
  background: var(--black);
  color: var(--white);
}

.pr-card-number {
  margin: 0 0 0.5rem;

  font-size: 0.8rem;
  font-weight: 900;
}

.pr-card-topic {
  margin: 0 0 2.5rem;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pr-card h3 {
  margin: 0 0 1.5rem;

  font-size: clamp(2.5rem, 10vw, 4.25rem);
  line-height: 0.82;
  letter-spacing: -0.055em;

  font-weight: 900;
  font-style: italic;
}

.pr-card > p:not(.pr-card-number):not(.pr-card-topic) {
  line-height: 1.45;
  font-weight: 700;
}

.pr-card-question {
  margin-top: auto;
  padding-top: 1.5rem;

  border-top: 3px solid currentColor;
}

.pr-card-question span {
  display: block;
  margin-bottom: 0.75rem;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pr-card-question p {
  margin: 0;

  line-height: 1.35;
  font-weight: 900;
}


/* BOTH CAN BE TRUE */

.pr-both-grid {
  display: grid;
  grid-template-columns: 1fr;

  gap: 0.75rem;
  margin: 2.5rem 0;
}

.pr-both-grid > div {
  padding: 1.25rem;

  background: var(--black);
  color: var(--white);
}

.pr-both-grid span {
  display: block;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.pr-both-grid strong {
  display: block;
  margin: 0.3rem 0;

  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 0.9;

  font-weight: 900;
  font-style: italic;
}

.pr-both-grid p {
  margin: 0;

  font-weight: 700;
}


/* QUESTIONS */

.pr-questions {
  margin: 2.5rem 0;

  border-top: 3px solid currentColor;
}

.pr-questions p {
  margin: 0;
  padding: 1.25rem 0;

  border-bottom: 3px solid currentColor;

  font-size: clamp(1.3rem, 6vw, 2rem);
  line-height: 1.1;

  font-weight: 900;
}


/* THOUGHT */

.pr-thought {
  margin: 2.5rem 0;
  padding: 1.5rem;

  background: var(--white);
  color: var(--black);

  font-size: clamp(1.4rem, 7vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.035em;

  font-weight: 900;
  font-style: italic;
}


/* ENDING */

.pr-ending {
  padding: 6rem 1.25rem;

  background: var(--yellow);
  color: var(--black);
}

.pr-ending > p:first-child {
  margin: 0 0 2rem;

  font-weight: 900;
  line-height: 1.1;
}

.pr-ending h2 {
  margin: 0;

  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.77;
  letter-spacing: -0.07em;

  font-weight: 900;
  font-style: italic;
}

.pr-ending-copy {
  max-width: 650px;
  margin: 2rem 0 3rem;

  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 700;
}

.pr-back-link {
  display: inline-block;

  padding: 1rem 1.25rem;

  background: var(--black);
  color: var(--white);

  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.pr-back-link:hover {
  background: var(--pink);
  color: var(--black);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .perspectives-reflections-hero {
    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.42) 42%,
        rgba(8, 8, 8, 0.03) 75%
      ),
      url(/assets/perspectives_reflections_desktop_background-1a2b2b3d0e99c602045ec971763bc4600584769f92528e1da80ebe14a1e0caf4.png);

    background-size: cover;
    background-position: center;

    padding: 4rem 5vw 5rem;
  }

  .perspectives-reflections-hero h1 {
    font-size: clamp(6rem, 10vw, 10rem);
  }

  .perspectives-reflections-intro {
    font-size: 1.25rem;
  }

  .pr-section {
    padding: 8rem 7vw;
  }

  .pr-section > h2 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .pr-copy {
    margin-left: 35%;
  }

  .pr-copy > p {
    font-size: 1.2rem;
  }

  .pr-reflections {
    padding: 8rem 7vw;
  }

  .pr-reflections-heading h2 {
    font-size: clamp(6rem, 9vw, 9rem);
  }

  .pr-reflections-heading > p:last-child {
    margin-left: 35%;
    font-size: 1.15rem;
  }

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

  .pr-card {
    min-height: 590px;
    padding: 2rem;
  }

  .pr-card h3 {
    font-size: clamp(3rem, 4.5vw, 5rem);
  }

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

  .pr-ending {
    padding: 9rem 7vw;
  }

  .pr-ending h2 {
    font-size: clamp(6rem, 11vw, 11rem);
  }
}

.bipolar-topic-page {
  --topic-black: #080808;
  --topic-pink: #ff1493;
  --topic-yellow: #eaff00;
  --topic-purple: #8a00ff;
  --topic-accent: var(--topic-pink);

  background: var(--topic-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  text-align: left;
}

.bipolar-topic-page *,
.bipolar-topic-page *::before,
.bipolar-topic-page *::after {
  box-sizing: border-box;
}

.bipolar-topic-page.topic-mania {
  --topic-accent: var(--topic-purple);
}

.bipolar-topic-page.topic-depression,
.bipolar-topic-page.topic-impulsivity {
  --topic-accent: var(--topic-yellow);
}

.bipolar-topic-page a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.bipolar-topic-page a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 6px;
}

.bipolar-topic-page .topic-hero {
  min-height: 37rem;
  border-bottom: 10px solid var(--topic-accent);
  background: var(--topic-black);
  color: #fff;
}

.bipolar-topic-page .topic-hero-inner,
.bipolar-topic-page .topic-band-inner,
.bipolar-topic-page .topic-footer-inner {
  width: min(100%, 92rem);
  margin-inline: auto;
  padding: 3rem 1.5rem;
}

.bipolar-topic-page .topic-eyebrow,
.bipolar-topic-page .topic-kicker {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bipolar-topic-page .topic-hero h1 {
  margin: 3rem 0 2rem;
  color: var(--topic-accent);
  font-size: clamp(2.9rem, 10.5vw, 9.25rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.88;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.bipolar-topic-page .topic-hero h1 span {
  display: block;
}

.bipolar-topic-page .topic-intro {
  max-width: 44rem;
  margin: 2rem 0;
  font-size: clamp(1rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.4;
}

.bipolar-topic-page .topic-back-link,
.bipolar-topic-page .topic-text-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.5;
}

.bipolar-topic-page .topic-band {
  border-bottom: 2px solid var(--topic-black);
}

.bipolar-topic-page .topic-band--pink {
  background: var(--topic-pink);
  color: var(--topic-black);
}

.bipolar-topic-page .topic-band--yellow {
  background: var(--topic-yellow);
  color: var(--topic-black);
}

.bipolar-topic-page .topic-band--purple {
  background: var(--topic-purple);
  color: #fff;
}

.bipolar-topic-page .topic-band--black {
  background: var(--topic-black);
  color: #fff;
}

.bipolar-topic-page .topic-band--white {
  background: #fff;
  color: var(--topic-black);
}

.bipolar-topic-page .topic-band-inner {
  display: grid;
  gap: 2rem;
}

.bipolar-topic-page .topic-section-heading,
.bipolar-topic-page .topic-copy {
  min-width: 0;
}

.bipolar-topic-page .topic-section-heading h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 4.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bipolar-topic-page .topic-copy {
  max-width: 65ch;
  font-size: 1.04rem;
  line-height: 1.7;
}

.bipolar-topic-page .topic-copy > p {
  margin: 0 0 1.35rem;
}

.bipolar-topic-page .topic-copy > :last-child {
  margin-bottom: 0;
}

.bipolar-topic-page .topic-lead {
  font-size: 1.12rem;
  font-weight: 600;
}

.bipolar-topic-page .topic-notes {
  display: grid;
  gap: 0.85rem;
  margin-block: 1.5rem;
}

.bipolar-topic-page .topic-note {
  min-width: 0;
  padding: 1.2rem;
  border: 2px solid currentColor;
}

.bipolar-topic-page .topic-note h3,
.bipolar-topic-page .topic-steps h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.035em;
}

.bipolar-topic-page .topic-note p,
.bipolar-topic-page .topic-steps p {
  margin: 0;
}

.bipolar-topic-page .topic-steps {
  margin: 0;
  padding-left: 1.45rem;
}

.bipolar-topic-page .topic-steps li {
  padding-left: 0.4rem;
  margin-bottom: 1.5rem;
}

.bipolar-topic-page .topic-steps li::marker {
  font-weight: 900;
}

.bipolar-topic-page .topic-callout {
  margin: 2rem 0 0;
  padding: 1rem 0 1rem 1.25rem;
  border-left: 6px solid currentColor;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.35;
}

.bipolar-topic-page .topic-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.bipolar-topic-page .topic-chain li {
  border: 2px solid currentColor;
  padding: 0.45rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 900;
}

.bipolar-topic-page .topic-support {
  background: var(--topic-black);
  color: #fff;
  border-top: 6px solid var(--topic-yellow);
}

.bipolar-topic-page .topic-support h2,
.bipolar-topic-page .topic-sources h2,
.bipolar-topic-page .topic-navigation h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.bipolar-topic-page .topic-support p,
.bipolar-topic-page .topic-sources p {
  max-width: 70ch;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

.bipolar-topic-page .topic-support a {
  color: var(--topic-yellow);
  font-weight: 800;
}

.bipolar-topic-page .topic-sources {
  background: #fff;
  color: var(--topic-black);
  border-bottom: 2px solid var(--topic-black);
}

.bipolar-topic-page .topic-navigation {
  background: var(--topic-black);
  color: #fff;
}

.bipolar-topic-page .topic-navigation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.bipolar-topic-page .topic-navigation-link {
  padding: 0.75rem 1rem;
  border: 2px solid #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
}

.bipolar-topic-page .topic-navigation-link:hover,
.bipolar-topic-page .topic-navigation-link[aria-current="page"] {
  background: var(--topic-yellow);
  color: var(--topic-black);
  border-color: var(--topic-yellow);
}

@media (min-width: 760px) {
  .bipolar-topic-page .topic-hero-inner,
  .bipolar-topic-page .topic-band-inner,
  .bipolar-topic-page .topic-footer-inner {
    padding: 4rem;
  }

  .bipolar-topic-page .topic-hero {
    min-height: 44rem;
  }

  .bipolar-topic-page .topic-band-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
  }

  .bipolar-topic-page .topic-section-heading {
    align-self: start;
    position: sticky;
    top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bipolar-topic-page * {
    scroll-behavior: auto;
  }
}

/* ==========================================
   BIPOLAR & ADDICTION
   ========================================== */

.bipolar-addiction-page {
  --ba-black: #080808;
  --ba-white: #ffffff;
  --ba-pink: #ff1493;
  --ba-yellow: #eaff00;
  --ba-purple: #8a00ff;

  width: 100%;
  margin: 0;
  background: var(--ba-black);
  color: var(--ba-white);
  font-family: Arial, Helvetica, sans-serif;
}

.bipolar-addiction-page,
.bipolar-addiction-page *,
.bipolar-addiction-page *::before,
.bipolar-addiction-page *::after {
  box-sizing: border-box;
}


/* ==========================================
   HERO — MOBILE
   ========================================== */

.bipolar-addiction-page .addiction-escaping-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 5rem 1.25rem 3rem;

  background-color: var(--ba-black);
  background-image:
    url(/assets/addiction_bipolar_mobile_background.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Override any overlay inherited from the Escaping page. */

.bipolar-addiction-page .addiction-escaping-hero::before,
.bipolar-addiction-page .addiction-escaping-hero::after {
  content: none;
}

.bipolar-addiction-page .addiction-escaping-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}

.bipolar-addiction-page .addiction-escaping-eyebrow {
  max-width: 34rem;
  margin: 0 0 1.5rem;
  color: var(--ba-yellow);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bipolar-addiction-page .addiction-escaping-hero h1 {
  margin: 0;
  color: var(--ba-white);
  font-size: clamp(2.5rem, 11.5vw, 5.5rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.bipolar-addiction-page .addiction-escaping-hero h1 span {
  display: block;
}

.bipolar-addiction-page
  .addiction-escaping-hero h1 span:nth-child(2) {
  color: var(--ba-yellow);
}

.bipolar-addiction-page .addiction-escaping-intro {
  max-width: 30rem;
  margin: 1.5rem 0 0;
  color: var(--ba-white);
  font-size: clamp(0.8rem, 2.8vw, 1rem);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}


/* ==========================================
   CONTENT SECTIONS
   ========================================== */

.bipolar-addiction-page .addiction-escaping-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  width: 100%;
  margin: 0;
  padding: 3.5rem 1.25rem;
  border: 0;
  border-bottom: 3px solid var(--ba-black);
  background-image: none;
}

.bipolar-addiction-page .ae-heading,
.bipolar-addiction-page .ae-copy {
  min-width: 0;
}

.bipolar-addiction-page .ae-number {
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bipolar-addiction-page .ae-heading h2 {
  margin: 0;
  font-size: clamp(2.35rem, 10vw, 4.5rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bipolar-addiction-page .ae-copy {
  width: 100%;
  max-width: 46rem;
}

.bipolar-addiction-page .ae-copy p {
  margin: 0 0 1.4rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: normal;
  text-transform: none;
}

.bipolar-addiction-page .ae-copy .ae-lead {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 800;
  line-height: 1.5;
}

.bipolar-addiction-page .ae-copy > :last-child {
  margin-bottom: 0;
}


/* ==========================================
   SECTION COLORS
   ========================================== */

.bipolar-addiction-page .ae-pink {
  background-color: var(--ba-pink);
  color: var(--ba-black);
}

.bipolar-addiction-page .ae-yellow {
  background-color: var(--ba-yellow);
  color: var(--ba-black);
}

.bipolar-addiction-page .ae-purple {
  background-color: var(--ba-purple);
  color: var(--ba-white);
}

.bipolar-addiction-page .ae-black {
  background-color: var(--ba-black);
  color: var(--ba-white);
}

.bipolar-addiction-page .ae-purple .ae-number,
.bipolar-addiction-page .ae-black .ae-number {
  color: var(--ba-yellow);
}

.bipolar-addiction-page .ae-black .ae-heading h2 {
  color: var(--ba-pink);
}


/* ==========================================
   QUOTES
   ========================================== */

.bipolar-addiction-page .ae-copy blockquote {
  margin: 0 0 2rem;
  padding: 1.25rem 0 1.25rem 1.25rem;
  border: 0;
  border-left: 5px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: clamp(1.15rem, 3.2vw, 1.65rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bipolar-addiction-page .ae-copy p + blockquote {
  margin-top: 2rem;
}

.bipolar-addiction-page .ae-purple blockquote,
.bipolar-addiction-page .ae-black blockquote {
  border-left-color: var(--ba-yellow);
}


/* ==========================================
   CALLOUTS
   ========================================== */

.bipolar-addiction-page .ae-callout {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 0;
  background: var(--ba-black);
  color: var(--ba-white);
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bipolar-addiction-page .ae-black .ae-callout,
.bipolar-addiction-page .ae-purple .ae-callout {
  background: var(--ba-yellow);
  color: var(--ba-black);
}


/* ==========================================
   ENDING
   ========================================== */

.bipolar-addiction-page .addiction-escaping-ending {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  width: 100%;
  margin: 0;
  padding: 4rem 1.25rem;
  border-top: 8px solid var(--ba-pink);
  background: var(--ba-black);
  color: var(--ba-white);
}

.bipolar-addiction-page .addiction-escaping-ending > div {
  min-width: 0;
}

.bipolar-addiction-page .ae-ending-small {
  margin: 0 0 1.5rem;
  color: var(--ba-yellow);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bipolar-addiction-page .addiction-escaping-ending h2 {
  margin: 0;
  color: var(--ba-white);
  font-size: clamp(2rem, 8.5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bipolar-addiction-page .addiction-escaping-ending h2 span {
  color: var(--ba-pink);
}

.bipolar-addiction-page .ae-ending-copy {
  max-width: 44rem;
}

.bipolar-addiction-page .ae-ending-copy p {
  margin: 0 0 1.4rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  text-transform: none;
}


/* ==========================================
   BACK LINK
   ========================================== */

.bipolar-addiction-page .ae-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--ba-yellow);
  background: var(--ba-yellow);
  color: var(--ba-black);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

@media (hover: hover) {
  .bipolar-addiction-page .ae-back-button:hover {
    border-color: var(--ba-pink);
    background: var(--ba-pink);
    color: var(--ba-black);
  }
}

.bipolar-addiction-page .ae-back-button:focus-visible {
  outline: 3px solid var(--ba-white);
  outline-offset: 5px;
}


/* ==========================================
   TABLET
   ========================================== */

@media (min-width: 768px) {
  .bipolar-addiction-page .addiction-escaping-hero {
    align-items: center;
    padding: 6rem 3rem;
    background-image:
      url(/assets/addiction_bipolar_desktop_background.png);
    background-position: center center;
  }

  .bipolar-addiction-page .addiction-escaping-eyebrow {
    max-width: 25rem;
    font-size: 0.75rem;
  }

  .bipolar-addiction-page .addiction-escaping-hero h1 {
    font-size: clamp(3.5rem, 7vw, 7.5rem);
  }

  .bipolar-addiction-page .addiction-escaping-intro {
    max-width: 25rem;
    font-size: 0.95rem;
  }

  .bipolar-addiction-page .addiction-escaping-section {
    gap: 3rem;
    padding: 4.5rem 3rem;
  }

  .bipolar-addiction-page .ae-copy p,
  .bipolar-addiction-page .ae-ending-copy p {
    font-size: 1.1rem;
  }

  .bipolar-addiction-page .addiction-escaping-ending {
    padding: 5rem 3rem;
  }
}


/* ==========================================
   DESKTOP
   ========================================== */

@media (min-width: 1024px) {
  .bipolar-addiction-page .addiction-escaping-hero {
    padding: 7rem max(3rem, calc((100vw - 90rem) / 2));
  }

  .bipolar-addiction-page .addiction-escaping-hero h1 {
    font-size: clamp(4.5rem, 7vw, 8rem);
  }

  .bipolar-addiction-page .addiction-escaping-section {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 7rem);
    padding:
      6rem
      max(3rem, calc((100vw - 90rem) / 2));
  }

  .bipolar-addiction-page .ae-heading h2 {
    font-size: clamp(2.75rem, 4.5vw, 5rem);
  }

  .bipolar-addiction-page .ae-copy p {
    line-height: 1.9;
  }

  .bipolar-addiction-page .addiction-escaping-ending {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 7rem);
    padding:
      6rem
      max(3rem, calc((100vw - 90rem) / 2));
  }

  .bipolar-addiction-page .addiction-escaping-ending h2 {
    font-size: clamp(2.5rem, 4.2vw, 4.75rem);
  }
}


/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  .bipolar-addiction-page .ae-back-button {
    transition: none;
  }
}


/* CRAVINGS BACKGROUND */

.addiction-cravings-page .addiction-triggers-hero {
  background-color: #080808;
  background-image: var(--triggers-mobile);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .addiction-cravings-page .addiction-triggers-hero {
    background-image: var(--triggers-desktop);
  }
}

/* ==========================================
   SHAME & ACCOUNTABILITY — HERO
   ========================================== */

.addiction-shame-page .addiction-triggers-hero {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: flex-start;

  min-height: 100vh;
  min-height: 100svh;
  padding: 5rem 1.25rem 3rem;

  background-color: #080808;
  background-image: var(--triggers-mobile);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.addiction-shame-page .addiction-triggers-hero::before,
.addiction-shame-page .addiction-triggers-hero::after {
  content: none;
}

.addiction-shame-page .addiction-triggers-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 90rem;
  margin-inline: auto;
}

.addiction-shame-page .addiction-triggers-eyebrow {
  max-width: 35rem;
  margin: 0 0 1.5rem;
  color: #eaff00;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.addiction-shame-page .addiction-triggers-hero .shame-title {
  margin: 0;
  font-size: clamp(1.4rem, 7vw, 4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.addiction-shame-page .shame-title span {
  display: block;
}

.addiction-shame-page .shame-title span:first-child {
  color: #ffffff;
}

.addiction-shame-page .shame-title span:last-child {
  color: #ff1493;
}

.addiction-shame-page .addiction-triggers-intro {
  max-width: 30rem;
  margin: 1.75rem 0 0;
  color: #eaff00;
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.25;
}


/* DESKTOP */

@media (min-width: 768px) {
  .addiction-shame-page .addiction-triggers-hero {
    align-items: center;
    padding: 70px 6vw;
    background-image: var(--triggers-desktop);
  }

  .addiction-shame-page .addiction-triggers-eyebrow {
    font-size: 0.75rem;
  }

  .addiction-shame-page .addiction-triggers-hero .shame-title {
    font-size: clamp(2.5rem, 5vw, 6rem);
  }

  .addiction-shame-page .addiction-triggers-intro {
    font-size: clamp(1.25rem, 2vw, 2rem);
  }
}

/* ==========================================
   BUDDHISM & ADDICTION
   ========================================== */

.buddhism-addiction-page {
  --ba-black: #080808;
  --ba-pink: #ff1493;
  --ba-yellow: #eaff00;
  --ba-purple: #8a00ff;

  background: var(--ba-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.buddhism-addiction-page,
.buddhism-addiction-page * {
  box-sizing: border-box;
}

.buddhism-addiction-page h1,
.buddhism-addiction-page h2,
.buddhism-addiction-page h3,
.buddhism-addiction-page p,
.buddhism-addiction-page blockquote {
  margin: 0;
}

/* HERO */

.buddhism-addiction-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 100px 6vw;
  background: var(--ba-black);
}

.buddhism-addiction-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}

.buddhism-addiction-background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.buddhism-addiction-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.12) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.buddhism-addiction-hero-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

.buddhism-addiction-eyebrow {
  max-width: 650px;
  margin-bottom: 30px !important;
  color: var(--ba-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.buddhism-addiction-hero h1 {
  max-width: 850px;
  font-size: clamp(56px, 7.7vw, 132px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.buddhism-addiction-hero h1 span {
  display: block;
}

.buddhism-addiction-hero h1 span:last-child {
  color: var(--ba-yellow);
}

.buddhism-addiction-intro {
  max-width: 650px;
  margin-top: 34px !important;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
}

/* SECTIONS */

.ba-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(64px, 8vw, 120px) 6vw;
}

.ba-pink {
  background: var(--ba-pink);
  color: var(--ba-black);
}

.ba-yellow {
  background: var(--ba-yellow);
  color: var(--ba-black);
}

.ba-purple {
  background: var(--ba-purple);
  color: #fff;
}

.ba-black {
  background: var(--ba-black);
  color: #fff;
}

.ba-heading,
.ba-copy {
  min-width: 0;
}

.ba-number {
  margin-bottom: 26px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.6;
}

.ba-heading h2 {
  font-size: clamp(40px, 4.7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.ba-copy {
  max-width: 780px;
}

.ba-copy > p,
.ba-ending-copy > p {
  margin-bottom: 24px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
}

.ba-copy > p:last-child,
.ba-ending-copy > p:last-child {
  margin-bottom: 0;
}

.ba-copy > .ba-lead {
  margin-bottom: 28px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

/* QUOTE */

.ba-copy blockquote {
  margin-bottom: 34px;
  padding: 6px 0 6px 24px;
  border-left: 6px solid currentColor;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.ba-copy blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}

/* BOXES */

.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.ba-box {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

.ba-box h3,
.ba-stack-item h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.ba-box p,
.ba-stack-item p {
  font-size: 16px;
  line-height: 1.65;
}

.ba-callout {
  margin: 32px 0;
  padding: 28px;
  border: 3px solid currentColor;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* NUMBERED BOXES */

.ba-stack {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.ba-stack-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border: 2px solid currentColor;
}

.ba-stack-item > span {
  color: var(--ba-yellow);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.ba-stack-item > div {
  min-width: 0;
}

/* ENDING */

.buddhism-addiction-ending {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(70px, 9vw, 140px) 6vw;
  background: var(--ba-black);
  color: #fff;
}

.ba-ending-heading,
.ba-ending-copy {
  min-width: 0;
}

.ba-ending-small {
  margin-bottom: 28px !important;
  color: var(--ba-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.ba-ending-heading h2 {
  font-size: clamp(48px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.ba-ending-heading h2 span {
  color: var(--ba-pink);
}

.ba-ending-copy {
  max-width: 780px;
}

.ba-back-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px solid var(--ba-yellow);
  background: var(--ba-yellow);
  color: var(--ba-black);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-decoration: none;
}

.ba-back-button:hover {
  background: var(--ba-black);
  color: var(--ba-yellow);
}

.ba-back-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 767px) {
  .buddhism-addiction-hero {
    align-items: flex-start;
    min-height: max(900px, 125svh);
    padding: 70px 6vw 80px;
  }

  .buddhism-addiction-background-image {
    object-position: right bottom;
  }

  .buddhism-addiction-hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.25) 0%,
      rgba(8, 8, 8, 0.08) 45%,
      transparent 70%
    );
  }

  .buddhism-addiction-eyebrow {
    max-width: 340px;
    margin-bottom: 26px !important;
    font-size: 10px;
    letter-spacing: 0.065em;
  }

  .buddhism-addiction-hero h1 {
    max-width: 600px;
    font-size: clamp(44px, 9.8vw, 76px);
  }

  .buddhism-addiction-intro {
    max-width: 360px;
    margin-top: 26px !important;
    font-size: 16px;
  }

  .ba-section,
  .buddhism-addiction-ending {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 60px 6vw;
  }

  .ba-heading h2 {
    font-size: clamp(40px, 9vw, 65px);
  }

  .ba-copy,
  .ba-ending-copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .ba-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ba-box,
  .ba-callout {
    padding: 22px;
  }

  .ba-stack-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .ba-stack-item > span {
    font-size: 27px;
  }

  .ba-back-button {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================
   CBT & ADDICTION
   ========================================== */

.cbt-addiction-page {
  --ca-black: #080808;
  --ca-pink: #ff1493;
  --ca-yellow: #eaff00;
  --ca-purple: #8a00ff;

  background: var(--ca-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.cbt-addiction-page,
.cbt-addiction-page * {
  box-sizing: border-box;
}

.cbt-addiction-page h1,
.cbt-addiction-page h2,
.cbt-addiction-page h3,
.cbt-addiction-page p,
.cbt-addiction-page blockquote {
  margin: 0;
}

/* HERO */

.cbt-addiction-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 100px 6vw;
  background: var(--ca-black);
}

.cbt-addiction-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}

.cbt-addiction-background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.cbt-addiction-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.12) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.cbt-addiction-hero-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

.cbt-addiction-eyebrow {
  max-width: 650px;
  margin-bottom: 30px !important;
  color: var(--ca-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.cbt-addiction-hero h1 {
  max-width: 850px;
  font-size: clamp(56px, 7.7vw, 132px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.cbt-addiction-hero h1 span {
  display: block;
}

.cbt-addiction-hero h1 span:last-child {
  color: var(--ca-yellow);
}

.cbt-addiction-intro {
  max-width: 650px;
  margin-top: 34px !important;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
}

/* SECTIONS */

.ca-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(64px, 8vw, 120px) 6vw;
}

.ca-pink {
  background: var(--ca-pink);
  color: var(--ca-black);
}

.ca-yellow {
  background: var(--ca-yellow);
  color: var(--ca-black);
}

.ca-purple {
  background: var(--ca-purple);
  color: #fff;
}

.ca-black {
  background: var(--ca-black);
  color: #fff;
}

.ca-heading,
.ca-copy {
  min-width: 0;
}

.ca-number {
  margin-bottom: 26px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.6;
}

.ca-heading h2 {
  font-size: clamp(40px, 4.7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.ca-copy {
  max-width: 780px;
}

.ca-copy > p,
.ca-ending-copy > p {
  margin-bottom: 24px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
}

.ca-copy > p:last-child,
.ca-ending-copy > p:last-child {
  margin-bottom: 0;
}

.ca-copy > .ca-lead {
  margin-bottom: 28px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

/* QUOTE */

.ca-copy blockquote {
  margin-bottom: 34px;
  padding: 6px 0 6px 24px;
  border-left: 6px solid currentColor;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.ca-copy blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}

/* BOXES */

.ca-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.ca-box {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

.ca-box h3,
.ca-stack-item h3,
.ca-thoughts h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.ca-box p,
.ca-stack-item p,
.ca-thoughts p {
  font-size: 16px;
  line-height: 1.65;
}

.ca-callout {
  margin: 32px 0;
  padding: 28px;
  border: 3px solid currentColor;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* THINKING PATTERNS */

.ca-thoughts {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.ca-thoughts > div {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

/* NUMBERED BOXES */

.ca-stack {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.ca-stack-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border: 2px solid currentColor;
}

.ca-stack-item > span {
  color: var(--ca-yellow);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.ca-stack-item > div {
  min-width: 0;
}

/* ENDING */

.cbt-addiction-ending {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(70px, 9vw, 140px) 6vw;
  background: var(--ca-black);
  color: #fff;
}

.ca-ending-heading,
.ca-ending-copy {
  min-width: 0;
}

.ca-ending-small {
  margin-bottom: 28px !important;
  color: var(--ca-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.ca-ending-heading h2 {
  font-size: clamp(48px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.ca-ending-heading h2 span {
  color: var(--ca-pink);
}

.ca-ending-copy {
  max-width: 780px;
}

.ca-back-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px solid var(--ca-yellow);
  background: var(--ca-yellow);
  color: var(--ca-black);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-decoration: none;
}

.ca-back-button:hover {
  background: var(--ca-black);
  color: var(--ca-yellow);
}

.ca-back-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 767px) {
  .cbt-addiction-hero {
    align-items: flex-start;
    min-height: max(900px, 125svh);
    padding: 70px 6vw 80px;
  }

  .cbt-addiction-background-image {
    object-position: right bottom;
  }

  .cbt-addiction-hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.25) 0%,
      rgba(8, 8, 8, 0.08) 45%,
      transparent 70%
    );
  }

  .cbt-addiction-eyebrow {
    max-width: 340px;
    margin-bottom: 26px !important;
    font-size: 10px;
    letter-spacing: 0.065em;
  }

  .cbt-addiction-hero h1 {
    max-width: 600px;
    font-size: clamp(44px, 9.8vw, 76px);
  }

  .cbt-addiction-intro {
    max-width: 360px;
    margin-top: 26px !important;
    font-size: 16px;
  }

  .ca-section,
  .cbt-addiction-ending {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 60px 6vw;
  }

  .ca-heading h2 {
    font-size: clamp(40px, 9vw, 65px);
  }

  .ca-copy,
  .ca-ending-copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .ca-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ca-box,
  .ca-callout,
  .ca-thoughts > div {
    padding: 22px;
  }

  .ca-stack-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .ca-stack-item > span {
    font-size: 27px;
  }

  .ca-back-button {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================
   DBT & ADDICTION
   ========================================== */

.dbt-addiction-page {
  --da-black: #080808;
  --da-pink: #ff1493;
  --da-yellow: #eaff00;
  --da-purple: #8a00ff;

  background: var(--da-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.dbt-addiction-page,
.dbt-addiction-page * {
  box-sizing: border-box;
}

.dbt-addiction-page h1,
.dbt-addiction-page h2,
.dbt-addiction-page h3,
.dbt-addiction-page p,
.dbt-addiction-page blockquote {
  margin: 0;
}

/* HERO */

.dbt-addiction-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 100px 6vw;
  background: var(--da-black);
}

.dbt-addiction-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}

.dbt-addiction-background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.dbt-addiction-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.12) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.dbt-addiction-hero-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

.dbt-addiction-eyebrow {
  max-width: 650px;
  margin-bottom: 30px !important;
  color: var(--da-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.dbt-addiction-hero h1 {
  max-width: 850px;
  font-size: clamp(56px, 7.7vw, 132px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.dbt-addiction-hero h1 span {
  display: block;
}

.dbt-addiction-hero h1 span:last-child {
  color: var(--da-yellow);
}

.dbt-addiction-intro {
  max-width: 650px;
  margin-top: 34px !important;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
}

/* SECTIONS */

.da-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(64px, 8vw, 120px) 6vw;
}

.da-pink {
  background: var(--da-pink);
  color: var(--da-black);
}

.da-yellow {
  background: var(--da-yellow);
  color: var(--da-black);
}

.da-purple {
  background: var(--da-purple);
  color: #fff;
}

.da-black {
  background: var(--da-black);
  color: #fff;
}

.da-heading,
.da-copy {
  min-width: 0;
}

.da-number {
  margin-bottom: 26px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.6;
}

.da-heading h2 {
  font-size: clamp(40px, 4.7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.da-copy {
  max-width: 780px;
}

.da-copy > p,
.da-ending-copy > p {
  margin-bottom: 24px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
}

.da-copy > p:last-child,
.da-ending-copy > p:last-child {
  margin-bottom: 0;
}

.da-copy > .da-lead {
  margin-bottom: 28px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

/* QUOTES */

.da-copy blockquote {
  margin-bottom: 34px;
  padding: 6px 0 6px 24px;
  border-left: 6px solid currentColor;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.da-copy blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}

/* BOXES */

.da-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.da-box {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

.da-box h3,
.da-stack-item h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.da-box p,
.da-stack-item p {
  font-size: 16px;
  line-height: 1.65;
}

.da-callout {
  margin: 32px 0;
  padding: 28px;
  border: 3px solid currentColor;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* NUMBERED BOXES */

.da-stack {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.da-stack-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border: 2px solid currentColor;
}

.da-stack-item > span {
  color: var(--da-yellow);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.da-stack-item > div {
  min-width: 0;
}

/* ENDING */

.dbt-addiction-ending {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(70px, 9vw, 140px) 6vw;
  background: var(--da-black);
  color: #fff;
}

.da-ending-heading,
.da-ending-copy {
  min-width: 0;
}

.da-ending-small {
  margin-bottom: 28px !important;
  color: var(--da-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.da-ending-heading h2 {
  font-size: clamp(48px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.da-ending-heading h2 span {
  color: var(--da-pink);
}

.da-ending-copy {
  max-width: 780px;
}

.da-back-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px solid var(--da-yellow);
  background: var(--da-yellow);
  color: var(--da-black);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-decoration: none;
}

.da-back-button:hover {
  background: var(--da-black);
  color: var(--da-yellow);
}

.da-back-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 767px) {
  .dbt-addiction-hero {
    align-items: flex-start;
    min-height: max(900px, 125svh);
    padding: 70px 6vw 80px;
  }

  .dbt-addiction-background-image {
    object-position: right bottom;
  }

  .dbt-addiction-hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.25) 0%,
      rgba(8, 8, 8, 0.08) 45%,
      transparent 70%
    );
  }

  .dbt-addiction-eyebrow {
    max-width: 340px;
    margin-bottom: 26px !important;
    font-size: 10px;
    letter-spacing: 0.065em;
  }

  .dbt-addiction-hero h1 {
    max-width: 600px;
    font-size: clamp(44px, 9.8vw, 76px);
  }

  .dbt-addiction-intro {
    max-width: 360px;
    margin-top: 26px !important;
    font-size: 16px;
  }

  .da-section,
  .dbt-addiction-ending {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 60px 6vw;
  }

  .da-heading h2 {
    font-size: clamp(40px, 9vw, 65px);
  }

  .da-copy,
  .da-ending-copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .da-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .da-box,
  .da-callout {
    padding: 22px;
  }

  .da-stack-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .da-stack-item > span {
    font-size: 27px;
  }

  .da-back-button {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================
   HINDUISM & ADDICTION
   ========================================== */

.hinduism-addiction-page {
  --ha-black: #080808;
  --ha-pink: #ff1493;
  --ha-yellow: #eaff00;
  --ha-purple: #8a00ff;

  background: var(--ha-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.hinduism-addiction-page,
.hinduism-addiction-page * {
  box-sizing: border-box;
}

.hinduism-addiction-page h1,
.hinduism-addiction-page h2,
.hinduism-addiction-page h3,
.hinduism-addiction-page p,
.hinduism-addiction-page blockquote {
  margin: 0;
}

/* HERO */

.hinduism-addiction-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 100px 6vw;
  background: var(--ha-black);
}

.hinduism-addiction-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}

.hinduism-addiction-background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.hinduism-addiction-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.12) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.hinduism-addiction-hero-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

.hinduism-addiction-eyebrow {
  max-width: 650px;
  margin-bottom: 30px !important;
  color: var(--ha-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.hinduism-addiction-hero h1 {
  max-width: 850px;
  font-size: clamp(56px, 7.7vw, 132px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.hinduism-addiction-hero h1 span {
  display: block;
}

.hinduism-addiction-hero h1 span:last-child {
  color: var(--ha-yellow);
}

.hinduism-addiction-intro {
  max-width: 650px;
  margin-top: 34px !important;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
}

/* SECTIONS */

.ha-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(64px, 8vw, 120px) 6vw;
}

.ha-pink {
  background: var(--ha-pink);
  color: var(--ha-black);
}

.ha-yellow {
  background: var(--ha-yellow);
  color: var(--ha-black);
}

.ha-purple {
  background: var(--ha-purple);
  color: #fff;
}

.ha-black {
  background: var(--ha-black);
  color: #fff;
}

.ha-heading,
.ha-copy {
  min-width: 0;
}

.ha-number {
  margin-bottom: 26px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.6;
}

.ha-heading h2 {
  font-size: clamp(40px, 4.7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.ha-copy {
  max-width: 780px;
}

.ha-copy > p,
.ha-ending-copy > p {
  margin-bottom: 24px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
}

.ha-copy > p:last-child,
.ha-ending-copy > p:last-child {
  margin-bottom: 0;
}

.ha-copy > .ha-lead {
  margin-bottom: 28px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

/* QUOTES */

.ha-copy blockquote {
  margin-bottom: 34px;
  padding: 6px 0 6px 24px;
  border-left: 6px solid currentColor;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.ha-copy blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}

/* BOXES */

.ha-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.ha-box {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

.ha-box h3,
.ha-stack-item h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.ha-box p,
.ha-stack-item p {
  font-size: 16px;
  line-height: 1.65;
}

.ha-callout {
  margin: 32px 0;
  padding: 28px;
  border: 3px solid currentColor;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* NUMBERED BOXES */

.ha-stack {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.ha-stack-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border: 2px solid currentColor;
}

.ha-stack-item > span {
  color: var(--ha-yellow);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.ha-stack-item > div {
  min-width: 0;
}

/* ENDING */

.hinduism-addiction-ending {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(70px, 9vw, 140px) 6vw;
  background: var(--ha-black);
  color: #fff;
}

.ha-ending-heading,
.ha-ending-copy {
  min-width: 0;
}

.ha-ending-small {
  margin-bottom: 28px !important;
  color: var(--ha-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.ha-ending-heading h2 {
  font-size: clamp(48px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.ha-ending-heading h2 span {
  color: var(--ha-pink);
}

.ha-ending-copy {
  max-width: 780px;
}

.ha-back-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px solid var(--ha-yellow);
  background: var(--ha-yellow);
  color: var(--ha-black);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-decoration: none;
}

.ha-back-button:hover {
  background: var(--ha-black);
  color: var(--ha-yellow);
}

.ha-back-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 767px) {
  .hinduism-addiction-hero {
    align-items: flex-start;
    min-height: max(900px, 125svh);
    padding: 70px 6vw 80px;
  }

  .hinduism-addiction-background-image {
    object-position: right bottom;
  }

  .hinduism-addiction-hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.25) 0%,
      rgba(8, 8, 8, 0.08) 45%,
      transparent 70%
    );
  }

  .hinduism-addiction-eyebrow {
    max-width: 340px;
    margin-bottom: 26px !important;
    font-size: 10px;
    letter-spacing: 0.065em;
  }

  .hinduism-addiction-hero h1 {
    max-width: 600px;
    font-size: clamp(44px, 9.8vw, 76px);
  }

  .hinduism-addiction-intro {
    max-width: 360px;
    margin-top: 26px !important;
    font-size: 16px;
  }

  .ha-section,
  .hinduism-addiction-ending {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 60px 6vw;
  }

  .ha-heading h2 {
    font-size: clamp(40px, 9vw, 65px);
  }

  .ha-copy,
  .ha-ending-copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .ha-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ha-box,
  .ha-callout {
    padding: 22px;
  }

  .ha-stack-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .ha-stack-item > span {
    font-size: 27px;
  }

  .ha-back-button {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================
   IFS & ADDICTION
   ========================================== */

.ifs-addiction-page {
  --ia-black: #080808;
  --ia-pink: #ff1493;
  --ia-yellow: #eaff00;
  --ia-purple: #8a00ff;

  background: var(--ia-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.ifs-addiction-page,
.ifs-addiction-page * {
  box-sizing: border-box;
}

.ifs-addiction-page h1,
.ifs-addiction-page h2,
.ifs-addiction-page h3,
.ifs-addiction-page p,
.ifs-addiction-page blockquote {
  margin: 0;
}

/* HERO */

.ifs-addiction-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 100px 6vw;
  background: var(--ia-black);
}

.ifs-addiction-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}

.ifs-addiction-background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.ifs-addiction-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.12) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.ifs-addiction-hero-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

.ifs-addiction-eyebrow {
  max-width: 650px;
  margin-bottom: 30px !important;
  color: var(--ia-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.ifs-addiction-hero h1 {
  max-width: 850px;
  font-size: clamp(56px, 7.7vw, 132px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.ifs-addiction-hero h1 span {
  display: block;
}

.ifs-addiction-hero h1 span:last-child {
  color: var(--ia-yellow);
}

.ifs-addiction-intro {
  max-width: 650px;
  margin-top: 34px !important;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
}

/* SECTIONS */

.ia-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(64px, 8vw, 120px) 6vw;
}

.ia-pink {
  background: var(--ia-pink);
  color: var(--ia-black);
}

.ia-yellow {
  background: var(--ia-yellow);
  color: var(--ia-black);
}

.ia-purple {
  background: var(--ia-purple);
  color: #fff;
}

.ia-black {
  background: var(--ia-black);
  color: #fff;
}

.ia-heading,
.ia-copy {
  min-width: 0;
}

.ia-number {
  margin-bottom: 26px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.6;
}

.ia-heading h2 {
  font-size: clamp(40px, 4.7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.ia-copy {
  max-width: 780px;
}

.ia-copy > p,
.ia-ending-copy > p {
  margin-bottom: 24px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
}

.ia-copy > p:last-child,
.ia-ending-copy > p:last-child {
  margin-bottom: 0;
}

.ia-copy > .ia-lead {
  margin-bottom: 28px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

/* QUOTE */

.ia-copy blockquote {
  margin-bottom: 34px;
  padding: 6px 0 6px 24px;
  border-left: 6px solid currentColor;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.ia-copy blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}

/* BOXES */

.ia-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.ia-box {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

.ia-box h3,
.ia-stack-item h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.ia-box p,
.ia-stack-item p {
  font-size: 16px;
  line-height: 1.65;
}

.ia-callout {
  margin: 32px 0;
  padding: 28px;
  border: 3px solid currentColor;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* NUMBERED BOXES */

.ia-stack {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.ia-stack-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border: 2px solid currentColor;
}

.ia-stack-item > span {
  color: var(--ia-yellow);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.ia-stack-item > div {
  min-width: 0;
}

/* ENDING */

.ifs-addiction-ending {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(70px, 9vw, 140px) 6vw;
  background: var(--ia-black);
  color: #fff;
}

.ia-ending-heading,
.ia-ending-copy {
  min-width: 0;
}

.ia-ending-small {
  margin-bottom: 28px !important;
  color: var(--ia-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.ia-ending-heading h2 {
  font-size: clamp(48px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.ia-ending-heading h2 span {
  color: var(--ia-pink);
}

.ia-ending-copy {
  max-width: 780px;
}

.ia-back-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px solid var(--ia-yellow);
  background: var(--ia-yellow);
  color: var(--ia-black);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-decoration: none;
}

.ia-back-button:hover {
  background: var(--ia-black);
  color: var(--ia-yellow);
}

.ia-back-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 767px) {
  .ifs-addiction-hero {
    align-items: flex-start;
    min-height: max(900px, 125svh);
    padding: 70px 6vw 80px;
  }

  .ifs-addiction-background-image {
    object-position: right bottom;
  }

  .ifs-addiction-hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.25) 0%,
      rgba(8, 8, 8, 0.08) 45%,
      transparent 70%
    );
  }

  .ifs-addiction-eyebrow {
    max-width: 340px;
    margin-bottom: 26px !important;
    font-size: 10px;
    letter-spacing: 0.065em;
  }

  .ifs-addiction-hero h1 {
    max-width: 600px;
    font-size: clamp(44px, 9.8vw, 76px);
  }

  .ifs-addiction-intro {
    max-width: 360px;
    margin-top: 26px !important;
    font-size: 16px;
  }

  .ia-section,
  .ifs-addiction-ending {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 60px 6vw;
  }

  .ia-heading h2 {
    font-size: clamp(40px, 9vw, 65px);
  }

  .ia-copy,
  .ia-ending-copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .ia-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-box,
  .ia-callout {
    padding: 22px;
  }

  .ia-stack-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .ia-stack-item > span {
    font-size: 27px;
  }

  .ia-back-button {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================
   STOICISM & ADDICTION
   ========================================== */

.stoicism-addiction-page {
  --sa-black: #080808;
  --sa-pink: #ff1493;
  --sa-yellow: #eaff00;
  --sa-purple: #8a00ff;

  background: var(--sa-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.stoicism-addiction-page,
.stoicism-addiction-page * {
  box-sizing: border-box;
}

.stoicism-addiction-page h1,
.stoicism-addiction-page h2,
.stoicism-addiction-page h3,
.stoicism-addiction-page p,
.stoicism-addiction-page blockquote {
  margin: 0;
}

/* HERO */

.stoicism-addiction-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 100px 6vw;
  background: var(--sa-black);
}

.stoicism-addiction-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}

.stoicism-addiction-background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.stoicism-addiction-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.12) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.stoicism-addiction-hero-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

.stoicism-addiction-eyebrow {
  max-width: 650px;
  margin-bottom: 30px !important;
  color: var(--sa-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.stoicism-addiction-hero h1 {
  max-width: 850px;
  font-size: clamp(56px, 7.7vw, 132px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.stoicism-addiction-hero h1 span {
  display: block;
}

.stoicism-addiction-hero h1 span:last-child {
  color: var(--sa-yellow);
}

.stoicism-addiction-intro {
  max-width: 650px;
  margin-top: 34px !important;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
}

/* SECTIONS */

.sa-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(64px, 8vw, 120px) 6vw;
}

.sa-pink {
  background: var(--sa-pink);
  color: var(--sa-black);
}

.sa-yellow {
  background: var(--sa-yellow);
  color: var(--sa-black);
}

.sa-purple {
  background: var(--sa-purple);
  color: #fff;
}

.sa-black {
  background: var(--sa-black);
  color: #fff;
}

.sa-heading,
.sa-copy {
  min-width: 0;
}

.sa-number {
  margin-bottom: 26px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.6;
}

.sa-heading h2 {
  font-size: clamp(40px, 4.7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.sa-copy {
  max-width: 780px;
}

.sa-copy > p,
.sa-ending-copy > p {
  margin-bottom: 24px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
}

.sa-copy > p:last-child,
.sa-ending-copy > p:last-child {
  margin-bottom: 0;
}

.sa-copy > .sa-lead {
  margin-bottom: 28px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

/* QUOTE */

.sa-copy blockquote {
  margin-bottom: 34px;
  padding: 6px 0 6px 24px;
  border-left: 6px solid currentColor;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.sa-copy blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}

/* BOXES */

.sa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.sa-box {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

.sa-box h3,
.sa-stack-item h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.sa-box p,
.sa-stack-item p {
  font-size: 16px;
  line-height: 1.65;
}

.sa-callout {
  margin: 32px 0;
  padding: 28px;
  border: 3px solid currentColor;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* NUMBERED BOXES */

.sa-stack {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.sa-stack-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border: 2px solid currentColor;
}

.sa-stack-item > span {
  color: var(--sa-yellow);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.sa-stack-item > div {
  min-width: 0;
}

/* ENDING */

.stoicism-addiction-ending {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(70px, 9vw, 140px) 6vw;
  background: var(--sa-black);
  color: #fff;
}

.sa-ending-heading,
.sa-ending-copy {
  min-width: 0;
}

.sa-ending-small {
  margin-bottom: 28px !important;
  color: var(--sa-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.sa-ending-heading h2 {
  font-size: clamp(48px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.sa-ending-heading h2 span {
  color: var(--sa-pink);
}

.sa-ending-copy {
  max-width: 780px;
}

.sa-back-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px solid var(--sa-yellow);
  background: var(--sa-yellow);
  color: var(--sa-black);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-decoration: none;
}

.sa-back-button:hover {
  background: var(--sa-black);
  color: var(--sa-yellow);
}

.sa-back-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 767px) {
  .stoicism-addiction-hero {
    align-items: flex-start;
    min-height: max(900px, 125svh);
    padding: 70px 6vw 80px;
  }

  .stoicism-addiction-background-image {
    object-position: right bottom;
  }

  .stoicism-addiction-hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.25) 0%,
      rgba(8, 8, 8, 0.08) 45%,
      transparent 70%
    );
  }

  .stoicism-addiction-eyebrow {
    max-width: 340px;
    margin-bottom: 26px !important;
    font-size: 10px;
    letter-spacing: 0.065em;
  }

  .stoicism-addiction-hero h1 {
    max-width: 600px;
    font-size: clamp(44px, 9.8vw, 76px);
  }

  .stoicism-addiction-intro {
    max-width: 360px;
    margin-top: 26px !important;
    font-size: 16px;
  }

  .sa-section,
  .stoicism-addiction-ending {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 60px 6vw;
  }

  .sa-heading h2 {
    font-size: clamp(40px, 9vw, 65px);
  }

  .sa-copy,
  .sa-ending-copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .sa-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-box,
  .sa-callout {
    padding: 22px;
  }

  .sa-stack-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .sa-stack-item > span {
    font-size: 27px;
  }

  .sa-back-button {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================
   THE BIG PICTURE & ADDICTION
   ========================================== */

.big-picture-addiction-page {
  --bpa-black: #080808;
  --bpa-pink: #ff1493;
  --bpa-yellow: #eaff00;
  --bpa-purple: #8a00ff;

  background: var(--bpa-black);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.big-picture-addiction-page,
.big-picture-addiction-page * {
  box-sizing: border-box;
}

.big-picture-addiction-page h1,
.big-picture-addiction-page h2,
.big-picture-addiction-page h3,
.big-picture-addiction-page p,
.big-picture-addiction-page blockquote {
  margin: 0;
}

/* HERO */

.big-picture-addiction-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 100px 6vw;
  background: var(--bpa-black);
}

.big-picture-addiction-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}

.big-picture-addiction-background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.big-picture-addiction-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.12) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.big-picture-addiction-hero-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

.big-picture-addiction-eyebrow {
  max-width: 650px;
  margin-bottom: 30px !important;
  color: var(--bpa-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.big-picture-addiction-hero h1 {
  max-width: 850px;
  font-size: clamp(56px, 7.7vw, 132px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.big-picture-addiction-hero h1 span {
  display: block;
}

.big-picture-addiction-hero h1 span:last-child {
  color: var(--bpa-yellow);
}

.big-picture-addiction-intro {
  max-width: 650px;
  margin-top: 34px !important;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
}

/* SECTIONS */

.bpa-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(64px, 8vw, 120px) 6vw;
}

.bpa-pink {
  background: var(--bpa-pink);
  color: var(--bpa-black);
}

.bpa-yellow {
  background: var(--bpa-yellow);
  color: var(--bpa-black);
}

.bpa-purple {
  background: var(--bpa-purple);
  color: #fff;
}

.bpa-black {
  background: var(--bpa-black);
  color: #fff;
}

.bpa-heading,
.bpa-copy {
  min-width: 0;
}

.bpa-number {
  margin-bottom: 26px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.6;
}

.bpa-heading h2 {
  font-size: clamp(40px, 4.7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.bpa-copy {
  max-width: 780px;
}

.bpa-copy > p,
.bpa-ending-copy > p {
  margin-bottom: 24px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
}

.bpa-copy > p:last-child,
.bpa-ending-copy > p:last-child {
  margin-bottom: 0;
}

.bpa-copy > .bpa-lead {
  margin-bottom: 28px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

/* QUOTE */

.bpa-copy blockquote {
  margin-bottom: 34px;
  padding: 6px 0 6px 24px;
  border-left: 6px solid currentColor;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.bpa-copy blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}

/* BOXES */

.bpa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.bpa-box {
  min-width: 0;
  padding: 24px;
  border: 2px solid currentColor;
}

.bpa-box h3,
.bpa-stack-item h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.bpa-box p,
.bpa-stack-item p {
  font-size: 16px;
  line-height: 1.65;
}

.bpa-callout {
  margin: 32px 0;
  padding: 28px;
  border: 3px solid currentColor;
  font-size: clamp(23px, 2.4vw, 35px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* NUMBERED BOXES */

.bpa-stack {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.bpa-stack-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border: 2px solid currentColor;
}

.bpa-stack-item > span {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.bpa-stack-item > div {
  min-width: 0;
}

/* ENDING */

.big-picture-addiction-ending {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 100px);
  padding: clamp(70px, 9vw, 140px) 6vw;
  background: var(--bpa-black);
  color: #fff;
}

.bpa-ending-heading,
.bpa-ending-copy {
  min-width: 0;
}

.bpa-ending-small {
  margin-bottom: 28px !important;
  color: var(--bpa-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.bpa-ending-heading h2 {
  font-size: clamp(48px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.bpa-ending-heading h2 span {
  color: var(--bpa-pink);
}

.bpa-ending-copy {
  max-width: 780px;
}

.bpa-back-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px solid var(--bpa-yellow);
  background: var(--bpa-yellow);
  color: var(--bpa-black);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-decoration: none;
}

.bpa-back-button:hover {
  background: var(--bpa-black);
  color: var(--bpa-yellow);
}

.bpa-back-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* MOBILE */

@media (max-width: 767px) {
  .big-picture-addiction-hero {
    align-items: flex-start;
    min-height: max(900px, 125svh);
    padding: 70px 6vw 80px;
  }

  .big-picture-addiction-background-image {
    object-position: right bottom;
  }

  .big-picture-addiction-hero::after {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.25) 0%,
      rgba(8, 8, 8, 0.08) 45%,
      transparent 70%
    );
  }

  .big-picture-addiction-eyebrow {
    max-width: 340px;
    margin-bottom: 26px !important;
    font-size: 10px;
    letter-spacing: 0.065em;
  }

  .big-picture-addiction-hero h1 {
    max-width: 600px;
    font-size: clamp(44px, 9.8vw, 76px);
  }

  .big-picture-addiction-intro {
    max-width: 360px;
    margin-top: 26px !important;
    font-size: 16px;
  }

  .bpa-section,
  .big-picture-addiction-ending {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 60px 6vw;
  }

  .bpa-heading h2 {
    font-size: clamp(40px, 9vw, 65px);
  }

  .bpa-copy,
  .bpa-ending-copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .bpa-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpa-box,
  .bpa-callout {
    padding: 22px;
  }

  .bpa-stack-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .bpa-stack-item > span {
    font-size: 27px;
  }

  .bpa-back-button {
    width: 100%;
    text-align: center;
  }
}

/* =========================================
   TOOLBOX / PLAY THE TAPE FORWARD
   ========================================= */

.tape-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.tape-page .tape-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;

  background-color: #080808;
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.85),
      rgba(8, 8, 8, 0.2)
    ),
    url(/assets/toolbox_play_the_tape_forward_mobile.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tape-page .tape-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.tape-page .tape-eyebrow,
.tape-page .tape-number {
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tape-page .tape-hero h1 {
  max-width: 950px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.tape-page .tape-hero h1 span {
  display: block;
}

.tape-page .tape-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.tape-page .tape-section {
  padding: 64px 24px;
}

.tape-page .tape-section-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.tape-page .tape-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tape-page .tape-copy {
  max-width: 760px;
}

.tape-page .tape-copy p,
.tape-page .tape-box p,
.tape-page .tape-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.tape-page .tape-copy p:last-child,
.tape-page .tape-box p:last-child,
.tape-page .tape-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.tape-page .tape-pink {
  background-color: #ff1493;
  color: #080808;
}

.tape-page .tape-yellow {
  background-color: #eaff00;
  color: #080808;
}

.tape-page .tape-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

.tape-page .tape-black {
  background-color: #080808;
  color: #ffffff;
}

/* CALLOUT BOXES */

.tape-page .tape-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

/* THREE-CARD GRID */

.tape-page .tape-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.tape-page .tape-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.tape-page .tape-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .tape-page .tape-hero {
    padding: 120px 48px 80px;

    background-image:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, 0.8),
        rgba(8, 8, 8, 0.05)
      ),
      url(/assets/toolbox_play_the_tape_forward_desktop.png);
  }

  .tape-page .tape-section {
    padding: 96px 48px;
  }

  .tape-page .tape-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================
   TOOLBOX / TEN TEN TEN
   ========================================= */

.ten-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.ten-page .ten-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.ten-page .ten-hero-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.ten-page .ten-hero-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.ten-page .ten-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.8),
    rgba(8, 8, 8, 0.15)
  );
  pointer-events: none;
}

.ten-page .ten-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.ten-page .ten-eyebrow,
.ten-page .ten-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ten-page .ten-hero h1 {
  margin: 0;
  color: #eaff00;
  font-size: clamp(4rem, 18vw, 10rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.065em;
}

.ten-page .ten-hero h1 span {
  display: block;
}

.ten-page .ten-tagline {
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.ten-page .ten-intro {
  max-width: 560px;
  margin: 24px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.ten-page .ten-section {
  padding: 64px 24px;
}

.ten-page .ten-section-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.ten-page .ten-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ten-page .ten-copy {
  max-width: 760px;
}

.ten-page .ten-copy p,
.ten-page .ten-box p,
.ten-page .ten-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.ten-page .ten-copy p:last-child,
.ten-page .ten-box p:last-child,
.ten-page .ten-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.ten-page .ten-black {
  background-color: #080808;
  color: #ffffff;
}

.ten-page .ten-pink {
  background-color: #ff1493;
  color: #080808;
}

.ten-page .ten-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

.ten-page .ten-yellow {
  background-color: #eaff00;
  color: #080808;
}

/* BOXES */

.ten-page .ten-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.ten-page .ten-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.ten-page .ten-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.ten-page .ten-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .ten-page .ten-hero {
    padding: 120px 48px 80px;
  }

  .ten-page .ten-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .ten-page .ten-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / WHEN YOU DON'T TRUST YOUR MOOD
   ========================================= */

.mood-check-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.mood-check-page,
.mood-check-page *,
.mood-check-page *::before,
.mood-check-page *::after {
  box-sizing: border-box;
}

/* HERO */

.mood-check-page .mood-check-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.mood-check-page .mood-check-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.mood-check-page .mood-check-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.mood-check-page .mood-check-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.mood-check-page .mood-check-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.mood-check-page .mood-check-eyebrow,
.mood-check-page .mood-check-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mood-check-page .mood-check-hero h1 {
  max-width: 950px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mood-check-page .mood-check-hero h1 span {
  display: block;
}

.mood-check-page .mood-check-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.mood-check-page .mood-check-section {
  padding: 64px 24px;
}

.mood-check-page .mood-check-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.mood-check-page .mood-check-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mood-check-page .mood-check-copy {
  max-width: 760px;
}

.mood-check-page .mood-check-copy p,
.mood-check-page .mood-check-box p,
.mood-check-page .mood-check-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.mood-check-page .mood-check-copy p:last-child,
.mood-check-page .mood-check-box p:last-child,
.mood-check-page .mood-check-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.mood-check-page .mood-check-black {
  background-color: #080808;
  color: #ffffff;
}

.mood-check-page .mood-check-pink {
  background-color: #ff1493;
  color: #080808;
}

.mood-check-page .mood-check-yellow {
  background-color: #eaff00;
  color: #080808;
}

.mood-check-page .mood-check-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.mood-check-page .mood-check-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.mood-check-page .mood-check-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.mood-check-page .mood-check-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.mood-check-page .mood-check-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .mood-check-page .mood-check-hero {
    padding: 120px 48px 80px;
  }

  .mood-check-page .mood-check-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .mood-check-page .mood-check-section {
    padding: 96px 48px;
  }

  .mood-check-page .mood-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================
   TOOLBOX / PRESS PAUSE
   ========================================= */

.pause-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.pause-page .pause-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.pause-page .pause-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.pause-page .pause-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.pause-page .pause-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.pause-page .pause-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.pause-page .pause-eyebrow,
.pause-page .pause-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pause-page .pause-hero h1 {
  max-width: 950px;
  margin: 0;
  color: #eaff00;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pause-page .pause-hero h1 span {
  display: block;
}

.pause-page .pause-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.pause-page .pause-section {
  padding: 64px 24px;
}

.pause-page .pause-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.pause-page .pause-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pause-page .pause-copy {
  max-width: 760px;
}

.pause-page .pause-copy p,
.pause-page .pause-box p,
.pause-page .pause-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.pause-page .pause-copy p:last-child,
.pause-page .pause-box p:last-child,
.pause-page .pause-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.pause-page .pause-black {
  background-color: #080808;
  color: #ffffff;
}

.pause-page .pause-pink {
  background-color: #ff1493;
  color: #080808;
}

.pause-page .pause-yellow {
  background-color: #eaff00;
  color: #080808;
}

.pause-page .pause-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.pause-page .pause-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.pause-page .pause-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.pause-page .pause-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.pause-page .pause-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .pause-page .pause-hero {
    padding: 120px 48px 80px;
  }

  .pause-page .pause-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .pause-page .pause-section {
    padding: 96px 48px;
  }

  .pause-page .pause-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================
   TOOLBOX / AFTER YOU FUCK UP
   ========================================= */

.repair-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.repair-page .repair-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.repair-page .repair-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.repair-page .repair-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.repair-page .repair-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.repair-page .repair-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.repair-page .repair-eyebrow,
.repair-page .repair-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.repair-page .repair-hero h1 {
  max-width: 950px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.repair-page .repair-hero h1 span {
  display: block;
}

.repair-page .repair-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.repair-page .repair-section {
  padding: 64px 24px;
}

.repair-page .repair-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.repair-page .repair-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.repair-page .repair-copy {
  max-width: 760px;
}

.repair-page .repair-copy p,
.repair-page .repair-box p,
.repair-page .repair-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.repair-page .repair-copy p:last-child,
.repair-page .repair-box p:last-child,
.repair-page .repair-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.repair-page .repair-black {
  background-color: #080808;
  color: #ffffff;
}

.repair-page .repair-pink {
  background-color: #ff1493;
  color: #080808;
}

.repair-page .repair-yellow {
  background-color: #eaff00;
  color: #080808;
}

.repair-page .repair-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.repair-page .repair-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.repair-page .repair-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.repair-page .repair-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.repair-page .repair-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .repair-page .repair-hero {
    padding: 120px 48px 80px;
  }

  .repair-page .repair-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .repair-page .repair-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / THE BARE MINIMUM DAY
   ========================================= */

.minimum-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.minimum-page .minimum-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.minimum-page .minimum-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.minimum-page .minimum-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.minimum-page .minimum-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.minimum-page .minimum-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.minimum-page .minimum-eyebrow,
.minimum-page .minimum-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.minimum-page .minimum-hero h1 {
  max-width: 1100px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 7.5vw, 6.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.minimum-page .minimum-hero h1 span {
  display: block;
}

.minimum-page .minimum-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.minimum-page .minimum-section {
  padding: 64px 24px;
}

.minimum-page .minimum-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.minimum-page .minimum-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.minimum-page .minimum-copy {
  max-width: 760px;
}

.minimum-page .minimum-copy p,
.minimum-page .minimum-box p,
.minimum-page .minimum-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.minimum-page .minimum-copy p:last-child,
.minimum-page .minimum-box p:last-child,
.minimum-page .minimum-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.minimum-page .minimum-black {
  background-color: #080808;
  color: #ffffff;
}

.minimum-page .minimum-pink {
  background-color: #ff1493;
  color: #080808;
}

.minimum-page .minimum-yellow {
  background-color: #eaff00;
  color: #080808;
}

.minimum-page .minimum-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.minimum-page .minimum-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.minimum-page .minimum-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.minimum-page .minimum-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.minimum-page .minimum-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .minimum-page .minimum-hero {
    padding: 120px 48px 80px;
  }

  .minimum-page .minimum-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .minimum-page .minimum-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / TIME CAPSULE
   ========================================= */

.capsule-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.capsule-page .capsule-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.capsule-page .capsule-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.capsule-page .capsule-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.capsule-page .capsule-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.capsule-page .capsule-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.capsule-page .capsule-eyebrow,
.capsule-page .capsule-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.capsule-page .capsule-hero h1 {
  max-width: 950px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.capsule-page .capsule-hero h1 span {
  display: block;
}

.capsule-page .capsule-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.capsule-page .capsule-section {
  padding: 64px 24px;
}

.capsule-page .capsule-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.capsule-page .capsule-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.capsule-page .capsule-copy {
  max-width: 760px;
}

.capsule-page .capsule-copy p,
.capsule-page .capsule-box p,
.capsule-page .capsule-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.capsule-page .capsule-copy p:last-child,
.capsule-page .capsule-box p:last-child,
.capsule-page .capsule-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.capsule-page .capsule-black {
  background-color: #080808;
  color: #ffffff;
}

.capsule-page .capsule-pink {
  background-color: #ff1493;
  color: #080808;
}

.capsule-page .capsule-yellow {
  background-color: #eaff00;
  color: #080808;
}

.capsule-page .capsule-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.capsule-page .capsule-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.capsule-page .capsule-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.capsule-page .capsule-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.capsule-page .capsule-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .capsule-page .capsule-hero {
    padding: 120px 48px 80px;
  }

  .capsule-page .capsule-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .capsule-page .capsule-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / ARE YOU THE FUCKING ORACLE?
   ========================================= */

.oracle-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.oracle-page .oracle-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.oracle-page .oracle-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.oracle-page .oracle-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.oracle-page .oracle-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.oracle-page .oracle-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.oracle-page .oracle-eyebrow,
.oracle-page .oracle-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.oracle-page .oracle-hero h1 {
  max-width: 950px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.oracle-page .oracle-hero h1 span {
  display: block;
}

.oracle-page .oracle-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.oracle-page .oracle-section {
  padding: 64px 24px;
}

.oracle-page .oracle-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.oracle-page .oracle-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.oracle-page .oracle-copy {
  max-width: 760px;
}

.oracle-page .oracle-copy p,
.oracle-page .oracle-box p,
.oracle-page .oracle-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.oracle-page .oracle-copy p:last-child,
.oracle-page .oracle-box p:last-child,
.oracle-page .oracle-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.oracle-page .oracle-black {
  background-color: #080808;
  color: #ffffff;
}

.oracle-page .oracle-pink {
  background-color: #ff1493;
  color: #080808;
}

.oracle-page .oracle-yellow {
  background-color: #eaff00;
  color: #080808;
}

.oracle-page .oracle-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.oracle-page .oracle-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.oracle-page .oracle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.oracle-page .oracle-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.oracle-page .oracle-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .oracle-page .oracle-hero {
    padding: 120px 48px 80px;
  }

  .oracle-page .oracle-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .oracle-page .oracle-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / ASKING FOR HELP
   ========================================= */

.help-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.help-page .help-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.help-page .help-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.help-page .help-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.help-page .help-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.help-page .help-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.help-page .help-eyebrow,
.help-page .help-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.help-page .help-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 7.5vw, 6.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.help-page .help-hero h1 span {
  display: block;
}

.help-page .help-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.help-page .help-section {
  padding: 64px 24px;
}

.help-page .help-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.help-page .help-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.help-page .help-copy {
  max-width: 760px;
}

.help-page .help-copy p,
.help-page .help-box p,
.help-page .help-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.help-page .help-copy p:last-child,
.help-page .help-box p:last-child,
.help-page .help-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.help-page .help-black {
  background-color: #080808;
  color: #ffffff;
}

.help-page .help-pink {
  background-color: #ff1493;
  color: #080808;
}

.help-page .help-yellow {
  background-color: #eaff00;
  color: #080808;
}

.help-page .help-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.help-page .help-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.help-page .help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.help-page .help-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.help-page .help-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .help-page .help-hero {
    padding: 120px 48px 80px;
  }

  .help-page .help-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .help-page .help-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / LET CREATIVITY IN
   ========================================= */

.creative-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.creative-page .creative-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.creative-page .creative-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.creative-page .creative-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.creative-page .creative-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.creative-page .creative-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.creative-page .creative-eyebrow,
.creative-page .creative-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.creative-page .creative-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.creative-page .creative-hero h1 span {
  display: block;
}

.creative-page .creative-tagline {
  max-width: 700px;
  margin: 32px 0 0;
  color: #eaff00;
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.creative-page .creative-intro {
  max-width: 560px;
  margin: 24px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.creative-page .creative-section {
  padding: 64px 24px;
}

.creative-page .creative-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.creative-page .creative-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.creative-page .creative-copy {
  max-width: 760px;
}

.creative-page .creative-copy p,
.creative-page .creative-box p,
.creative-page .creative-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.creative-page .creative-copy p:last-child,
.creative-page .creative-box p:last-child,
.creative-page .creative-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.creative-page .creative-black {
  background-color: #080808;
  color: #ffffff;
}

.creative-page .creative-pink {
  background-color: #ff1493;
  color: #080808;
}

.creative-page .creative-yellow {
  background-color: #eaff00;
  color: #080808;
}

.creative-page .creative-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.creative-page .creative-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.creative-page .creative-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.creative-page .creative-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.creative-page .creative-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .creative-page .creative-hero {
    padding: 120px 48px 80px;
  }

  .creative-page .creative-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .creative-page .creative-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / WHAT'S YOUR FUCKING NORMAL?
   ========================================= */

.baseline-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.baseline-page .baseline-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.baseline-page .baseline-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.baseline-page .baseline-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.baseline-page .baseline-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.baseline-page .baseline-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.baseline-page .baseline-eyebrow,
.baseline-page .baseline-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.baseline-page .baseline-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.baseline-page .baseline-hero h1 span {
  display: block;
}

.baseline-page .baseline-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.baseline-page .baseline-section {
  padding: 64px 24px;
}

.baseline-page .baseline-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.baseline-page .baseline-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.baseline-page .baseline-copy {
  max-width: 760px;
}

.baseline-page .baseline-copy p,
.baseline-page .baseline-box p,
.baseline-page .baseline-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.baseline-page .baseline-copy p:last-child,
.baseline-page .baseline-box p:last-child,
.baseline-page .baseline-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.baseline-page .baseline-black {
  background-color: #080808;
  color: #ffffff;
}

.baseline-page .baseline-pink {
  background-color: #ff1493;
  color: #080808;
}

.baseline-page .baseline-yellow {
  background-color: #eaff00;
  color: #080808;
}

.baseline-page .baseline-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.baseline-page .baseline-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.baseline-page .baseline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.baseline-page .baseline-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.baseline-page .baseline-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .baseline-page .baseline-hero {
    padding: 120px 48px 80px;
  }

  .baseline-page .baseline-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .baseline-page .baseline-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / URGENT ACCORDING TO WHO?
   ========================================= */

.urgency-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.urgency-page .urgency-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.urgency-page .urgency-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.urgency-page .urgency-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.urgency-page .urgency-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.urgency-page .urgency-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.urgency-page .urgency-eyebrow,
.urgency-page .urgency-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.urgency-page .urgency-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #eaff00;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.urgency-page .urgency-hero h1 span {
  display: block;
}

.urgency-page .urgency-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.urgency-page .urgency-section {
  padding: 64px 24px;
}

.urgency-page .urgency-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.urgency-page .urgency-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.urgency-page .urgency-copy {
  max-width: 760px;
}

.urgency-page .urgency-copy p,
.urgency-page .urgency-box p,
.urgency-page .urgency-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.urgency-page .urgency-copy p:last-child,
.urgency-page .urgency-box p:last-child,
.urgency-page .urgency-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.urgency-page .urgency-black {
  background-color: #080808;
  color: #ffffff;
}

.urgency-page .urgency-pink {
  background-color: #ff1493;
  color: #080808;
}

.urgency-page .urgency-yellow {
  background-color: #eaff00;
  color: #080808;
}

.urgency-page .urgency-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.urgency-page .urgency-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.urgency-page .urgency-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.urgency-page .urgency-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.urgency-page .urgency-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .urgency-page .urgency-hero {
    padding: 120px 48px 80px;
  }

  .urgency-page .urgency-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .urgency-page .urgency-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / DON'T POKE THE BIPOLAR BEAR
   ========================================= */

.bear-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.bear-page .bear-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.bear-page .bear-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.bear-page .bear-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.bear-page .bear-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.bear-page .bear-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.bear-page .bear-eyebrow,
.bear-page .bear-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bear-page .bear-hero h1 {
  max-width: 1100px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 7.5vw, 6.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bear-page .bear-hero h1 span {
  display: block;
}

.bear-page .bear-intro {
  max-width: 560px;
  margin: 32px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.bear-page .bear-section {
  padding: 64px 24px;
}

.bear-page .bear-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.bear-page .bear-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bear-page .bear-copy {
  max-width: 760px;
}

.bear-page .bear-copy p,
.bear-page .bear-box p,
.bear-page .bear-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.bear-page .bear-copy p:last-child,
.bear-page .bear-box p:last-child,
.bear-page .bear-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.bear-page .bear-black {
  background-color: #080808;
  color: #ffffff;
}

.bear-page .bear-pink {
  background-color: #ff1493;
  color: #080808;
}

.bear-page .bear-yellow {
  background-color: #eaff00;
  color: #080808;
}

.bear-page .bear-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.bear-page .bear-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.bear-page .bear-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.bear-page .bear-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.bear-page .bear-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .bear-page .bear-hero {
    padding: 120px 48px 80px;
  }

  .bear-page .bear-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .bear-page .bear-section {
    padding: 96px 48px;
  }

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

/* =========================================
   TOOLBOX / WHO AM I WITHOUT IT?
   ========================================= */

.identity-page {
  background-color: #080808;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

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

/* HERO */

.identity-page .identity-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 24px 72px;
  background-color: #080808;
}

.identity-page .identity-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.identity-page .identity-background img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.identity-page .identity-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.85),
    rgba(8, 8, 8, 0.2)
  );
  pointer-events: none;
}

.identity-page .identity-hero-content {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.identity-page .identity-eyebrow,
.identity-page .identity-number {
  margin: 0 0 24px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.identity-page .identity-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.identity-page .identity-hero h1 span {
  display: block;
}

.identity-page .identity-tagline {
  max-width: 700px;
  margin: 32px 0 0;
  color: #eaff00;
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.identity-page .identity-intro {
  max-width: 560px;
  margin: 24px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* SECTIONS */

.identity-page .identity-section {
  padding: 64px 24px;
}

.identity-page .identity-inner {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.identity-page .identity-section h2 {
  margin: 0 0 32px;
  color: inherit;
  font-size: clamp(1.75rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.identity-page .identity-copy {
  max-width: 760px;
}

.identity-page .identity-copy p,
.identity-page .identity-box p,
.identity-page .identity-callout p {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.identity-page .identity-copy p:last-child,
.identity-page .identity-box p:last-child,
.identity-page .identity-callout p:last-child {
  margin-bottom: 0;
}

/* SECTION COLORS */

.identity-page .identity-black {
  background-color: #080808;
  color: #ffffff;
}

.identity-page .identity-pink {
  background-color: #ff1493;
  color: #080808;
}

.identity-page .identity-yellow {
  background-color: #eaff00;
  color: #080808;
}

.identity-page .identity-purple {
  background-color: #8a00ff;
  color: #ffffff;
}

/* BOXES */

.identity-page .identity-callout {
  max-width: 760px;
  margin-top: 32px;
  padding: 24px;
  border: 3px solid currentColor;
}

.identity-page .identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.identity-page .identity-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.identity-page .identity-box h3 {
  margin: 0 0 16px;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* DESKTOP */

@media (min-width: 768px) {
  .identity-page .identity-hero {
    padding: 120px 48px 80px;
  }

  .identity-page .identity-hero::after {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.05)
    );
  }

  .identity-page .identity-section {
    padding: 96px 48px;
  }

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

/* =========================================
   RELAPSE PLANS LANDING PAGE
   ========================================= */

.relapse-hub {
  background: #080808;
  color: #fff;
}

.relapse-hub,
.relapse-hub * {
  box-sizing: border-box;
}

.relapse-hub-container {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.relapse-hub-hero {
  padding: 110px 24px 72px;
  background: #080808;
  border-bottom: 12px solid #ff1493;
}

.relapse-hub-back {
  display: inline-block;
  margin-bottom: 56px;
  color: #eaff00;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.relapse-hub-back:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.relapse-hub-eyebrow,
.relapse-hub-label {
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.relapse-hub-eyebrow {
  color: #ff1493;
}

.relapse-hub h1 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(2.5rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  overflow-wrap: break-word;
}

.relapse-hub-intro {
  max-width: 600px;
  margin: 32px 0 0;
  color: #eaff00;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
}

.relapse-hub-note,
.relapse-hub-plans,
.relapse-hub-footer {
  padding: 64px 24px;
}

.relapse-hub-note {
  background: #eaff00;
  color: #080808;
}

.relapse-hub h2 {
  margin: 0 0 28px;
  font-size: clamp(2rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  overflow-wrap: break-word;
}

.relapse-hub-copy {
  max-width: 760px;
}

.relapse-hub-copy p,
.relapse-hub-heading > p:last-child {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
}

.relapse-hub-plans {
  background: #080808;
  color: #fff;
}

.relapse-hub-heading {
  max-width: 800px;
  margin-bottom: 40px;
}

.relapse-hub-heading .relapse-hub-label {
  color: #ff1493;
}

.relapse-hub-heading > p:last-child {
  max-width: 600px;
  color: #d8d8d8;
}

.relapse-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.relapse-hub-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 3px solid #080808;
  color: #080808;
  text-decoration: none;
  transition: transform 180ms ease;
}

.relapse-hub-card:hover {
  transform: translateY(-5px);
}

.relapse-hub-card:focus-visible,
.relapse-hub-back:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 6px;
}

.relapse-hub-card-pink {
  background: #ff1493;
}

.relapse-hub-card-yellow {
  background: #eaff00;
}

.relapse-hub-card-purple {
  background: #8a00ff;
  color: #fff;
}

.relapse-hub-card-black {
  background: #080808;
  border-color: #eaff00;
  color: #eaff00;
}

.relapse-hub-number {
  margin: 0 0 32px;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.relapse-hub-card h3 {
  margin: 0 0 24px;
  font-size: clamp(1.8rem, 6.5vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}

.relapse-hub-description {
  margin: 0 0 32px;
  font-size: 1rem;
  line-height: 1.65;
}

.relapse-hub-cta {
  display: block;
  margin-top: auto;
  padding-top: 20px;
  border-top: 2px solid currentColor;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.relapse-hub-footer {
  background: #ff1493;
  color: #080808;
}

@media (min-width: 768px) {
  .relapse-hub-hero {
    padding: 120px 48px 96px;
  }

  .relapse-hub-note,
  .relapse-hub-plans,
  .relapse-hub-footer {
    padding: 96px 48px;
  }

  .relapse-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .relapse-hub-heading {
    margin-bottom: 56px;
  }

  .relapse-hub-card {
    padding: 36px;
  }

  .relapse-hub-card h3 {
    font-size: clamp(2rem, 3.8vw, 3.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .relapse-hub-card {
    transition: none;
  }

  .relapse-hub-card:hover {
    transform: none;
  }
}

/* =========================================
   INDIVIDUAL RELAPSE PLAN PAGES
   ========================================= */

.relapse-plan-page {
  background: #080808;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.relapse-plan-page,
.relapse-plan-page * {
  box-sizing: border-box;
}

.relapse-plan-container {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.relapse-plan-hero {
  display: flex;
  align-items: center;
  min-height: 85vh;
  min-height: 85svh;
  padding: 110px 24px 72px;
  background: #080808;
  border-bottom: 12px solid #ff1493;
}

.relapse-plan-back {
  display: inline-block;
  margin-bottom: 48px;
  color: #eaff00;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.relapse-plan-back:hover,
.relapse-plan-return:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.relapse-plan-eyebrow,
.relapse-plan-label {
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.relapse-plan-eyebrow {
  color: #ff1493;
}

.relapse-plan-page h1 {
  margin: 0;
  font-size: clamp(2rem, 8.5vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.relapse-plan-page h1 span {
  display: block;
  overflow-wrap: anywhere;
}

.relapse-plan-intro {
  max-width: 700px;
  margin: 32px 0 0;
  color: #eaff00;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.6;
}

.relapse-plan-section {
  padding: 64px 24px;
}

.relapse-plan-pink {
  background: #ff1493;
  color: #080808;
}

.relapse-plan-yellow {
  background: #eaff00;
  color: #080808;
}

.relapse-plan-purple {
  background: #8a00ff;
  color: #fff;
}

.relapse-plan-black {
  background: #080808;
  color: #fff;
}

.relapse-plan-black .relapse-plan-label {
  color: #ff1493;
}

.relapse-plan-page h2 {
  margin: 0 0 32px;
  font-size: clamp(1.8rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}

.relapse-plan-copy {
  max-width: 760px;
}

.relapse-plan-copy p,
.relapse-plan-box p,
.relapse-plan-script p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.relapse-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.relapse-plan-box {
  min-width: 0;
  padding: 24px;
  border: 3px solid currentColor;
}

.relapse-plan-page h3 {
  margin: 0 0 18px;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.relapse-plan-black .relapse-plan-box {
  border-color: #eaff00;
}

.relapse-plan-black .relapse-plan-box h3 {
  color: #eaff00;
}

.relapse-plan-script {
  margin-top: 24px;
  padding: 28px;
  background: #080808;
  color: #fff;
  border: 3px solid #080808;
}

.relapse-plan-script h3 {
  color: #eaff00;
}

.relapse-plan-return {
  display: inline-block;
  margin-top: 40px;
  color: #080808;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.relapse-plan-back:focus-visible {
  outline: 3px solid #eaff00;
  outline-offset: 6px;
}

.relapse-plan-return:focus-visible {
  outline: 3px solid #080808;
  outline-offset: 6px;
}

@media (min-width: 768px) {
  .relapse-plan-hero {
    padding: 120px 48px 96px;
  }

  .relapse-plan-section {
    padding: 96px 48px;
  }

  .relapse-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .relapse-plan-box {
    padding: 32px;
  }

  .relapse-plan-script {
    margin-top: 32px;
    padding: 36px;
  }

  .relapse-plan-page h2 {
    margin-bottom: 40px;
  }
}

/* ==========================================
   SPIRITUALITY / PAGANISM
   ========================================== */

.spirituality-paganism-page {
  --pagan-black: #080808;
  --pagan-pink: #ff1493;
  --pagan-yellow: #eaff00;
  --pagan-purple: #8a00ff;
  --pagan-white: #ffffff;

  background: var(--pagan-black);
  color: var(--pagan-white);
  font-family: Arial, Helvetica, sans-serif;
}

.spirituality-paganism-page,
.spirituality-paganism-page * {
  box-sizing: border-box;
}

/* HERO */

.spirituality-paganism-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;

  min-height: 1050px;
  min-height: max(1050px, 125svh);
  padding: 110px 22px 70px;

  background-color: var(--pagan-black);
  background-image:
    url(/assets/spirituality_paganism_mobile.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.spirituality-paganism-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 850px;
}

.spirituality-paganism-eyebrow {
  margin: 0 0 30px;
  max-width: 100%;

  color: var(--pagan-yellow);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
}

.spirituality-paganism-hero h1 {
  margin: 0;

  color: var(--pagan-white);
  font-size: clamp(48px, 12vw, 90px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.spirituality-paganism-hero h1 span {
  display: block;
}

.spirituality-paganism-intro {
  margin: 30px 0 0;
  max-width: 520px;

  color: var(--pagan-white);
  font-size: clamp(13px, 3.6vw, 18px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.015em;
}

/* CONTENT SECTIONS */

.spirituality-paganism-content {
  width: 100%;
}

.spirituality-paganism-page .sh-section {
  padding: 65px 22px;
  border-top: 3px solid var(--pagan-black);
}

.spirituality-paganism-page .sh-section-black {
  background: var(--pagan-black);
  color: var(--pagan-white);
}

.spirituality-paganism-page .sh-section-pink {
  background: var(--pagan-pink);
  color: var(--pagan-black);
}

.spirituality-paganism-page .sh-section-yellow {
  background: var(--pagan-yellow);
  color: var(--pagan-black);
}

.spirituality-paganism-page .sh-section-purple {
  background: var(--pagan-purple);
  color: var(--pagan-white);
}

.spirituality-paganism-page .sh-number {
  margin: 0 0 25px;

  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.spirituality-paganism-page .sh-section > h2 {
  margin: 0 0 35px;
  max-width: 1050px;

  font-size: clamp(38px, 10vw, 100px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.055em;
  overflow-wrap: break-word;
}

.spirituality-paganism-page .sh-copy {
  width: 100%;
  max-width: 1050px;
}

.spirituality-paganism-page .sh-copy > p {
  margin: 0 0 22px;

  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.8;
}

.spirituality-paganism-page .sh-copy > p:last-child {
  margin-bottom: 0;
}

/* LITTLE BOXES */

.spirituality-paganism-page .sh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 32px 0;
}

.spirituality-paganism-page .sh-mini-card {
  min-width: 0;
  padding: 25px;
  border: 3px solid currentColor;
}

.spirituality-paganism-page .sh-mini-card > span {
  display: block;
  margin-bottom: 18px;

  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.09em;
}

.spirituality-paganism-page .sh-mini-card h3 {
  margin: 0 0 16px;

  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
}

.spirituality-paganism-page .sh-mini-card p {
  margin: 0;

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

/* STACKED STATEMENTS */

.spirituality-paganism-page .sh-stack {
  display: grid;
  gap: 12px;
  margin: 30px 0;
}

.spirituality-paganism-page .sh-stack > span {
  display: block;
  padding: 20px;
  border: 2px solid currentColor;

  font-size: clamp(15px, 2vw, 20px);
  font-weight: 900;
  line-height: 1.4;
}

/* CALLOUTS */

.spirituality-paganism-page .sh-callout,
.spirituality-paganism-page .sh-thought {
  margin: 32px 0;
  padding: 25px;
  border: 3px solid currentColor;

  font-size: clamp(20px, 4vw, 36px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}

.spirituality-paganism-page
.sh-section-black
.sh-callout {
  color: var(--pagan-yellow);
}

.spirituality-paganism-page
.sh-section-purple
.sh-callout {
  color: var(--pagan-yellow);
}

/* PRACTICE BOXES */

.spirituality-paganism-page .sh-practice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 32px 0;
}

.spirituality-paganism-page .sh-practice-grid > div {
  min-width: 0;
  padding: 25px;
  border: 3px solid currentColor;
}

.spirituality-paganism-page .sh-practice-grid span {
  display: block;
  margin-bottom: 20px;

  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}

.spirituality-paganism-page .sh-practice-grid p {
  margin: 0;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
}

/* ENDING */

.spirituality-paganism-page .sh-ending {
  padding: 75px 22px;
  background: var(--pagan-black);
  color: var(--pagan-white);
}

.spirituality-paganism-page .sh-ending > p:first-child {
  margin: 0 0 30px;

  color: var(--pagan-yellow);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.spirituality-paganism-page .sh-ending h2 {
  margin: 0 0 30px;

  font-size: clamp(48px, 12vw, 130px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.spirituality-paganism-page .sh-ending-copy {
  max-width: 650px;
  margin: 0 0 35px;

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

.spirituality-paganism-page .sh-back-link {
  display: inline-block;
  max-width: 100%;
  padding: 17px 22px;
  border: 2px solid var(--pagan-yellow);

  color: var(--pagan-yellow);
  background: transparent;

  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;

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

.spirituality-paganism-page .sh-back-link:hover {
  background: var(--pagan-yellow);
  color: var(--pagan-black);
}

.spirituality-paganism-page .sh-back-link:focus-visible {
  outline: 3px solid var(--pagan-white);
  outline-offset: 5px;
}

/* TABLET */

@media (min-width: 600px) {
  .spirituality-paganism-page .sh-grid,
  .spirituality-paganism-page .sh-practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spirituality-paganism-page .sh-section,
  .spirituality-paganism-page .sh-ending {
    padding-right: 40px;
    padding-left: 40px;
  }
}

/* DESKTOP BACKGROUND */

@media (min-width: 900px) {
  .spirituality-paganism-hero {
    align-items: center;

    min-height: 800px;
    min-height: max(800px, 100svh);
    padding: 120px 5vw 90px;

    background-image:
      url(/assets/spirituality_paganism_desktop.png);
    background-position: right center;
  }

  .spirituality-paganism-hero-content {
    max-width: 58%;
  }

  .spirituality-paganism-eyebrow {
    margin-bottom: 35px;
    font-size: 12px;
  }

  .spirituality-paganism-hero h1 {
    font-size: clamp(70px, 7.5vw, 145px);
  }

  .spirituality-paganism-intro {
    margin-top: 35px;
    font-size: clamp(15px, 1.3vw, 20px);
  }

  .spirituality-paganism-page .sh-section,
  .spirituality-paganism-page .sh-ending {
    padding: 95px 8vw;
  }

  .spirituality-paganism-page .sh-section > h2 {
    margin-bottom: 45px;
    font-size: clamp(60px, 6.5vw, 110px);
  }

  .spirituality-paganism-page .sh-grid,
  .spirituality-paganism-page .sh-practice-grid {
    gap: 22px;
  }

  .spirituality-paganism-page .sh-mini-card,
  .spirituality-paganism-page .sh-practice-grid > div {
    padding: 32px;
  }
}

/* ==========================================
   FIRST DUI / THIRD DUI — COMPLETE STYLES
   ========================================== */

.dui-story-page {
  --story-black: #080808;
  --story-pink: #ff1493;
  --story-yellow: #eaff00;
  --story-purple: #8a00ff;
  --story-white: #ffffff;

  width: 100%;
  margin: 0;
  background: var(--story-black);
  color: var(--story-white);
  font-family: Arial, Helvetica, sans-serif;
}

.dui-story-page,
.dui-story-page *,
.dui-story-page *::before,
.dui-story-page *::after {
  box-sizing: border-box;
}

.dui-story-page h1,
.dui-story-page h2,
.dui-story-page p {
  margin: 0;
}

/* ==========================================
   HERO / BACKGROUND IMAGES
   ========================================== */

.dui-story-page .ds-hero {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;

  min-height: 800px;
  min-height: max(800px, 100svh);

  padding: 140px 6vw 90px;
  border-bottom: 4px solid var(--story-pink);

  background-color: var(--story-black);
  background-image: var(--dui-desktop, none);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.dui-story-page .ds-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;

  content: "";
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0.35) 0%,
    rgba(8, 8, 8, 0.1) 45%,
    transparent 75%
  );
}

.dui-story-page .ds-hero-inner,
.dui-story-page .ds-layout,
.dui-story-page .ds-ending-inner {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.dui-story-page .ds-hero-inner {
  position: relative;
}

.dui-story-page .ds-eyebrow {
  max-width: 55%;
  margin-bottom: 30px;

  color: var(--story-yellow);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.dui-story-page .ds-hero h1 {
  max-width: 58%;

  color: var(--story-white);
  font-size: clamp(76px, 12vw, 190px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.dui-story-page .ds-hero h1 span {
  display: block;
}

.dui-story-page .ds-hero h1 span:last-child {
  color: var(--story-pink);
}

.dui-story-page .ds-intro {
  max-width: 48%;
  margin-top: 35px;

  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 800;
  line-height: 1.6;
}

/* ==========================================
   CONTEXT STRIP
   ========================================== */

.dui-story-page .ds-context {
  padding: 35px 6vw;
  background: var(--story-yellow);
  color: var(--story-black);
}

.dui-story-page .ds-context p {
  max-width: 1300px;
  margin: 0 auto;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
}

/* ==========================================
   STORY LAYOUT
   ========================================== */

.dui-story-page .ds-body {
  padding: 80px 6vw;
  background: var(--story-black);
}

.dui-story-page .ds-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(35px, 5vw, 80px);
}

.dui-story-page .ds-sidebar,
.dui-story-page .ds-copy {
  min-width: 0;
}

/* ==========================================
   SIDEBAR
   ========================================== */

.dui-story-page .ds-label {
  margin-bottom: 20px;

  color: var(--story-yellow);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.dui-story-page .ds-sidebar h2 {
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

.dui-story-page .ds-note {
  margin-top: 28px;
  padding: 22px;
  border: 2px solid var(--story-purple);

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

/* ==========================================
   STORY TEXT
   ========================================== */

.dui-story-page .ds-copy {
  width: 100%;
  max-width: 780px;
  overflow-wrap: break-word;
}

.dui-story-page .ds-copy p {
  margin-bottom: 25px;

  font-size: 19px;
  line-height: 1.9;
}

.dui-story-page .ds-copy p:last-child {
  margin-bottom: 0;
}

.dui-story-page .ds-copy h2 {
  margin: 55px 0 25px;

  color: var(--story-yellow);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.dui-story-page .ds-copy h2:first-child {
  margin-top: 0;
}

.dui-story-page .ds-copy h3 {
  margin: 35px 0 18px;

  color: var(--story-pink);
  font-size: clamp(23px, 2.5vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.dui-story-page .ds-copy a {
  color: var(--story-yellow);
  text-underline-offset: 4px;
}

.dui-story-page .ds-copy a:hover {
  color: var(--story-pink);
}

.dui-story-page .ds-copy a:focus-visible {
  outline: 2px solid var(--story-yellow);
  outline-offset: 4px;
}

/* QUOTES */

.dui-story-page .ds-copy blockquote {
  margin: 35px 0;
  padding: 25px;
  border-left: 4px solid var(--story-pink);

  background: #151515;
}

.dui-story-page .ds-copy blockquote p {
  font-size: clamp(21px, 2.5vw, 29px);
  font-weight: 700;
  line-height: 1.5;
}

.dui-story-page .ds-copy blockquote p:last-child {
  margin-bottom: 0;
}

.dui-story-page .ds-copy blockquote cite {
  display: block;
  margin-top: 18px;

  color: var(--story-yellow);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
}

/* OPTIONAL STORY IMAGES */

.dui-story-page .ds-copy img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 30px 0;
}

/* SECTION DIVIDERS */

.dui-story-page .ds-copy hr {
  margin: 40px 0;
  border: 0;
  border-top: 2px solid var(--story-purple);
}

/* ==========================================
   EDITABLE PLACEHOLDERS
   ========================================== */

.dui-story-page .ds-copy .ds-placeholder {
  padding: 25px;
  border-left: 4px solid var(--story-pink);

  background: #151515;
  color: #dddddd;
}

/* ==========================================
   ENDING
   ========================================== */

.dui-story-page .ds-ending {
  padding: 70px 6vw;
  background: var(--story-purple);
  color: var(--story-white);
}

.dui-story-page .ds-ending h2 {
  margin-bottom: 25px;

  font-size: clamp(38px, 6vw, 75px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dui-story-page .ds-ending-copy {
  max-width: 720px;
  margin-bottom: 30px;

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

.dui-story-page .ds-back {
  display: inline-block;
  max-width: 100%;

  padding: 17px 22px;
  border: 2px solid var(--story-yellow);

  background: var(--story-black);
  color: var(--story-yellow);

  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-decoration: none;

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

.dui-story-page .ds-back:hover {
  background: var(--story-yellow);
  color: var(--story-black);
}

.dui-story-page .ds-back:focus-visible {
  outline: 3px solid var(--story-white);
  outline-offset: 5px;
}

/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 1000px) {
  .dui-story-page .ds-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
    gap: 45px;
  }

  .dui-story-page .ds-note {
    max-width: 600px;
  }
}

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

@media (max-width: 767px) {
  .dui-story-page .ds-hero {
    align-items: flex-start;

    min-height: 1000px;
    min-height: max(1000px, 125svh);

    padding: 115px 22px 60px;

    background-image: var(--dui-mobile, none);
    background-position: center bottom;
    background-size: cover;
  }

  .dui-story-page .ds-hero::before {
    background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.15) 0%,
      transparent 65%
    );
  }

  .dui-story-page .ds-eyebrow {
    max-width: 100%;
    margin-bottom: 28px;

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

  .dui-story-page .ds-hero h1 {
    max-width: 100%;
    font-size: clamp(75px, 22vw, 145px);
  }

  .dui-story-page .ds-intro {
    max-width: 100%;
    margin-top: 28px;
    font-size: 17px;
  }

  .dui-story-page .ds-context {
    padding: 28px 22px;
  }

  .dui-story-page .ds-context p {
    font-size: 16px;
  }

  .dui-story-page .ds-body,
  .dui-story-page .ds-ending {
    padding: 55px 22px;
  }

  .dui-story-page .ds-layout {
    gap: 38px;
  }

  .dui-story-page .ds-sidebar h2 {
    font-size: 42px;
  }

  .dui-story-page .ds-note {
    margin-top: 23px;
    padding: 20px;
  }

  .dui-story-page .ds-copy p {
    font-size: 17px;
    line-height: 1.85;
  }

  .dui-story-page .ds-copy h2 {
    margin-top: 40px;
    font-size: 29px;
  }

  .dui-story-page .ds-copy h3 {
    font-size: 24px;
  }

  .dui-story-page .ds-copy .ds-placeholder,
  .dui-story-page .ds-copy blockquote {
    padding: 20px;
  }

  .dui-story-page .ds-ending-copy {
    font-size: 17px;
  }

  .dui-story-page .ds-back {
    padding: 16px 18px;
    font-size: 12px;
  }
}


/* =========================================
   PRESS SEND — BIPOLAR SOBER
   Addiction / Perspectives
========================================= */

.press-send-page {
  --ps-black: #080808;
  --ps-pink: #ff1493;
  --ps-yellow: #eaff00;
  --ps-purple: #8a00ff;
  --ps-white: #ffffff;

  background: var(--ps-black);
  color: var(--ps-white);
  overflow: hidden;
  font-family: inherit;
}

.press-send-page *,
.press-send-page *::before,
.press-send-page *::after {
  box-sizing: border-box;
}

.press-send-container {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* HERO */

.press-send-hero {
  min-height: 85vh;
  background:
    radial-gradient(
      circle at 85% 60%,
      rgba(138, 0, 255, .17),
      transparent 45%
    ),
    var(--ps-black);
  display: flex;
}

.press-send-hero-inner {
  width: min(1280px, calc(100% - 64px));
  margin: auto;
  padding: 65px 0 35px;
}

.press-send-eyebrow {
  color: var(--ps-yellow);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 50px;
}

.press-send-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  align-items: center;
}

.press-send-kicker {
  font-size: .9rem;
  font-weight: 900;
  color: var(--ps-pink);
  letter-spacing: .15em;
  margin: 0 0 20px;
}

.press-send-hero h1 {
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 1000;
  line-height: .82;
  letter-spacing: -.085em;
  margin: 0;
}

.press-send-hero h1 > span {
  display: block;
}

.press-send-title-accent {
  color: var(--ps-pink);
}

.press-send-period {
  color: var(--ps-yellow);
}

.press-send-tagline {
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: .07em;
  margin: 35px 0 0;
}

.press-send-hero-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #404040;
  margin-top: 70px;
  padding-top: 18px;
  color: #bcbcbc;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}

/* PHONE GRAPHIC */

.press-send-phone {
  width: 100%;
  max-width: 310px;
  min-height: 485px;
  border: 7px solid #303030;
  border-radius: 38px;
  background: #171717;
  padding: 24px 17px 20px;
  box-shadow:
    0 0 0 2px #666,
    18px 22px 0 rgba(138, 0, 255, .6);
  transform: rotate(7deg);
}

.press-send-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ddd;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .1em;
  padding-bottom: 26px;
  border-bottom: 1px solid #333;
}

.press-send-phone-dot {
  width: 9px;
  height: 9px;
  background: var(--ps-pink);
  border-radius: 50%;
}

.press-send-bubble {
  width: fit-content;
  max-width: 88%;
  padding: 13px 17px;
  border-radius: 19px;
  margin: 15px 0;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.4;
}

.press-send-bubble.incoming {
  background: #3b3b3b;
  color: white;
  border-bottom-left-radius: 4px;
}

.press-send-bubble.outgoing {
  background: var(--ps-pink);
  color: #080808;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.press-send-bubble.last {
  min-width: 68px;
}

.press-send-typing {
  display: flex;
  gap: 5px;
  padding: 3px;
}

.press-send-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #080808;
  opacity: .7;
}

.press-send-phone-bottom {
  margin-top: 45px;
  border: 1px solid #555;
  border-radius: 30px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 7px 6px 15px;
  font-size: .65rem;
  color: #999;
  letter-spacing: .1em;
}

.press-send-send-arrow {
  background: var(--ps-yellow);
  color: #080808;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 900;
}

/* SHARED SECTIONS */

.press-send-section {
  padding: 105px 0;
}

.press-send-section-number {
  color: var(--ps-pink);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .15em;
  margin: 0 0 30px;
}

.press-send-section h2 {
  font-size: clamp(2.6rem, 6.8vw, 6rem);
  font-weight: 1000;
  letter-spacing: -.055em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 0 42px;
}

.press-send-section h2 span {
  color: var(--ps-pink);
}

.press-send-prose {
  max-width: 790px;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.9;
}

.press-send-prose p {
  margin: 0 0 1.5em;
}

/* INTRO */

.press-send-intro-section {
  background: var(--ps-yellow);
  color: var(--ps-black);
}

.press-send-intro-section .press-send-section-number {
  color: var(--ps-purple);
}

.press-send-intro-section h2 span {
  color: var(--ps-purple);
}

/* JOURNAL */

.press-send-journal-section {
  background: var(--ps-black);
}

.press-send-journal-section h2 span {
  color: var(--ps-yellow);
}

.press-send-journal {
  max-width: 850px;
  padding: 45px 48px;
  background: #151515;
  border-left: 6px solid var(--ps-pink);
  box-shadow: 12px 12px 0 rgba(138, 0, 255, .35);
}

.press-send-journal-label {
  color: var(--ps-yellow);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .18em;
  margin: 0 0 35px;
}

.press-send-journal p:not(.press-send-journal-label) {
  font-size: clamp(1rem, 1.3vw, 1.13rem);
  line-height: 1.95;
  margin: 0 0 1.5em;
}

.press-send-journal p:last-child {
  margin-bottom: 0;
}

/* REFLECTION */

.press-send-reflection-section {
  background: var(--ps-purple);
  color: white;
}

.press-send-reflection-section .press-send-section-number {
  color: var(--ps-yellow);
}

.press-send-reflection-section h2 span {
  color: var(--ps-yellow);
}

/* END */

.press-send-end {
  background: var(--ps-pink);
  color: var(--ps-black);
  padding: 65px 0;
  text-align: center;
}

.press-send-end-title {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 1000;
  letter-spacing: -.07em;
  line-height: 1;
  margin: 0 0 15px;
}

.press-send-end-title span {
  color: var(--ps-yellow);
}

.press-send-end p:not(.press-send-end-title) {
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.6;
}

.press-send-back {
  display: inline-block;
  margin-top: 35px;
  padding: 15px 25px;
  background: var(--ps-black);
  color: var(--ps-white);
  border: 2px solid var(--ps-black);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
  transition: .2s ease;
}

.press-send-back:hover {
  background: var(--ps-yellow);
  color: var(--ps-black);
}

/* TABLET */

@media (max-width: 900px) {
  .press-send-hero-grid {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 20px;
  }

  .press-send-phone {
    min-height: 430px;
    transform: rotate(4deg) scale(.88);
    transform-origin: center;
  }

  .press-send-hero h1 {
    font-size: clamp(4.5rem, 12vw, 8rem);
  }
}

/* MOBILE */

@media (max-width: 650px) {
  .press-send-container {
    width: calc(100% - 36px);
  }

  .press-send-hero {
    min-height: auto;
  }

  .press-send-hero-inner {
    width: calc(100% - 36px);
    padding: 45px 0 24px;
  }

  .press-send-eyebrow {
    font-size: .59rem;
    line-height: 1.6;
    margin-bottom: 42px;
  }

  .press-send-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .press-send-hero h1 {
    font-size: clamp(4.2rem, 19vw, 7.6rem);
  }

  .press-send-tagline {
    font-size: 1rem;
    margin-top: 28px;
  }

  .press-send-phone {
    width: 255px;
    min-height: 415px;
    margin: 0 auto;
    transform: rotate(5deg);
    box-shadow:
      0 0 0 2px #666,
      10px 12px 0 rgba(138, 0, 255, .6);
  }

  .press-send-hero-footer {
    margin-top: 48px;
    font-size: .55rem;
    line-height: 1.5;
  }

  .press-send-section {
    padding: 70px 0;
  }

  .press-send-section h2 {
    font-size: clamp(2.4rem, 10vw, 4rem);
    margin-bottom: 32px;
  }

  .press-send-prose {
    font-size: 1rem;
    line-height: 1.8;
  }

  .press-send-journal {
    padding: 30px 22px;
    border-left-width: 4px;
    box-shadow: 6px 6px 0 rgba(138, 0, 255, .35);
  }

  .press-send-journal p:not(.press-send-journal-label) {
    font-size: 1rem;
    line-height: 1.8;
  }

  .press-send-end {
    padding: 55px 0;
  }

  .press-send-end-title {
    font-size: clamp(3rem, 13vw, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-send-back {
    transition: none;
  }
}


/* =========================================
   BIPOLAR SOBER — ON PSYCHOSIS
   Desktop + Mobile
========================================= */

.psychosis-page {
  --psy-black: #080808;
  --psy-pink: #ff1493;
  --psy-yellow: #eaff00;
  --psy-purple: #8a00ff;
  --psy-white: #ffffff;

  background: var(--psy-black);
  color: var(--psy-white);
  overflow-x: clip;
  font-family: inherit;
}

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

.psychosis-container {
  width: min(1040px, calc(100% - 48px));
  margin-inline: auto;
}

.psychosis-page h1,
.psychosis-page h2,
.psychosis-page h3 {
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.psychosis-page p {
  overflow-wrap: break-word;
}

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

.psychosis-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;

  background-color: var(--psy-black);
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 8, 8, .95) 0%,
      rgba(8, 8, 8, .78) 34%,
      rgba(8, 8, 8, .20) 75%,
      rgba(8, 8, 8, .08) 100%
    ),
    url(/assets/bipolar-psychosis-desktop-2aec40f7079a9420b29595f416bd44401567266d957d76f615a7f67ea282c74b.png);

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.psychosis-hero-content {
  position: relative;
  z-index: 1;
  width: min(1260px, calc(100% - 72px));
  margin: auto;
  padding: 105px 0 75px;
}

.psychosis-eyebrow {
  color: var(--psy-yellow);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .15em;
  margin: 0 0 70px;
}

.psychosis-hero-number {
  color: var(--psy-pink);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .19em;
  margin: 0 0 18px;
}

.psychosis-hero h1 {
  max-width: 950px;
  font-size: clamp(3.4rem, 8.3vw, 9rem);
  line-height: .91;
  letter-spacing: -.075em;
  font-weight: 1000;
  margin: 0;
}

.psychosis-hero h1 > span {
  display: block;
}

.psychosis-hero h1 > span:nth-child(2) {
  color: var(--psy-pink);
}

.psychosis-dot {
  color: var(--psy-yellow);
}

.psychosis-hero-tagline {
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .065em;
  margin: 35px 0 40px;
}

.psychosis-scroll,
.psychosis-back {
  display: inline-block;
  padding: 16px 24px;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-decoration: none;
  transition:
    transform .2s ease,
    background-color .2s ease;
}

.psychosis-scroll {
  background: var(--psy-yellow);
  color: var(--psy-black);
}

.psychosis-scroll:hover {
  background: var(--psy-pink);
  color: var(--psy-black);
  transform: translateY(-3px);
}

.psychosis-scroll:focus-visible,
.psychosis-back:focus-visible {
  outline: 3px solid var(--psy-white);
  outline-offset: 5px;
}

/* =========================================
   SHARED TYPOGRAPHY
========================================= */

.psychosis-label {
  color: var(--psy-pink);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.6;
  margin: 0 0 30px;
  text-transform: uppercase;
}

.psychosis-story-text {
  max-width: 775px;
  margin-top: 35px;
}

.psychosis-story-text p {
  font-size: clamp(1.04rem, 1.5vw, 1.19rem);
  line-height: 2;
  margin: 0 0 1.65em;
  font-weight: 400;
}

.psychosis-story-text p:last-child {
  margin-bottom: 0;
}

.psychosis-story-text em {
  font-style: italic;
  color: var(--psy-pink);
}

.psychosis-scene {
  padding: 110px 0 125px;
}

/* =========================================
   OPENING
========================================= */

.psychosis-opening {
  background: var(--psy-black);
  padding: 115px 0;
}

.psychosis-opening h2 {
  font-size: clamp(3.5rem, 9vw, 8.4rem);
  font-weight: 1000;
  line-height: .94;
  letter-spacing: -.07em;
  margin: 0 0 55px;
}

.psychosis-opening h2 span {
  color: var(--psy-pink);
}

.psychosis-opening-line {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* =========================================
   911 / PINK
========================================= */

.psychosis-scene-pink {
  background: var(--psy-pink);
  color: var(--psy-black);
}

.psychosis-scene-pink .psychosis-label {
  color: var(--psy-black);
}

.psychosis-scene-pink h2 {
  font-size: clamp(6rem, 17vw, 14rem);
  font-weight: 1000;
  line-height: .9;
  letter-spacing: -.09em;
  margin: 0 0 60px;
}

.psychosis-dialogue {
  max-width: 900px;
  padding: 32px 0 45px;
  border-top: 4px solid var(--psy-black);
  border-bottom: 4px solid var(--psy-black);
}

.psychosis-dialogue-label {
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 30px;
}

.psychosis-dialogue-big {
  font-size: clamp(1.9rem, 4.5vw, 4rem);
  font-weight: 1000;
  letter-spacing: -.045em;
  line-height: 1.1;
  margin: 0 0 45px;
}

.psychosis-dialogue-small {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  font-weight: 700;
  margin: 0 0 18px;
}

.psychosis-dialogue-answer {
  color: var(--psy-yellow);
  background: var(--psy-black);
  display: inline-block;
  padding: 12px 20px;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 1000;
  line-height: 1.1;
  transform: rotate(-2deg);
  margin: 10px 0;
}

/* =========================================
   THE NIGHT / BLACK
========================================= */

.psychosis-scene-dark {
  background:
    radial-gradient(
      circle at 95% 10%,
      rgba(138, 0, 255, .20),
      transparent 50%
    ),
    var(--psy-black);
}

.psychosis-scene-dark h2 {
  font-size: clamp(2.7rem, 7vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: -.06em;
  font-weight: 1000;
  margin: 0 0 55px;
}

.psychosis-scene-dark h2 span {
  color: var(--psy-yellow);
}

.psychosis-pullquote {
  position: relative;
  max-width: 940px;
  border-left: 8px solid var(--psy-pink);
  padding: 32px 0 32px 35px;
  margin: 80px 0;
  color: var(--psy-pink);
  background: rgba(255, 20, 147, .045);
  font-size: clamp(1.7rem, 4.2vw, 4rem);
  font-weight: 1000;
  line-height: 1.18;
  letter-spacing: -.045em;
}

/* =========================================
   SLEEP / YELLOW
========================================= */

.psychosis-sleep {
  padding: 115px 0;
  background: var(--psy-yellow);
  color: var(--psy-black);
}

.psychosis-sleep .psychosis-label {
  color: var(--psy-purple);
}

.psychosis-sleep-lead {
  font-size: clamp(1rem, 2.4vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .12em;
  margin: 0 0 15px;
}

.psychosis-sleep h2 {
  font-size: clamp(5rem, 16vw, 12rem);
  font-weight: 1000;
  line-height: .84;
  letter-spacing: -.075em;
  margin: 0 0 60px;
}

.psychosis-sleep h2 span {
  color: var(--psy-purple);
}

/* =========================================
   RECORD PLAYER / PURPLE
========================================= */

.psychosis-scene-purple {
  background: var(--psy-purple);
  color: var(--psy-white);
}

.psychosis-scene-purple .psychosis-label {
  color: var(--psy-yellow);
}

.psychosis-command {
  padding: 30px 0;
  border-top: 3px solid var(--psy-yellow);
  border-bottom: 3px solid var(--psy-yellow);
  max-width: 930px;
}

.psychosis-command-index {
  display: block;
  color: var(--psy-yellow);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 25px;
}

.psychosis-command p {
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  font-weight: 1000;
  letter-spacing: -.06em;
  line-height: 1.04;
  margin: 0;
}

.psychosis-warning {
  display: inline-block;
  background: var(--psy-yellow);
  color: var(--psy-black);
  padding: 18px 28px;
  margin: 55px 0 15px;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 1000;
  line-height: 1.1;
  letter-spacing: -.055em;
  transform: rotate(-2deg);
}

/* =========================================
   REACHING OUT / YELLOW
========================================= */

.psychosis-scene-yellow {
  background: #f0f0ed;
  color: var(--psy-black);
}

.psychosis-scene-yellow .psychosis-label {
  color: var(--psy-purple);
}

.psychosis-scene-yellow h2 {
  font-size: clamp(2.9rem, 7vw, 6.5rem);
  font-weight: 1000;
  letter-spacing: -.06em;
  line-height: 1.03;
  margin: 0 0 60px;
}

.psychosis-scene-yellow h2 span {
  color: var(--psy-purple);
}

.psychosis-help-words {
  margin-top: 65px;
  padding: 28px 0;
  border-top: 5px solid var(--psy-black);
  border-bottom: 5px solid var(--psy-black);
  color: var(--psy-purple);
  font-size: clamp(1.6rem, 4.7vw, 4.2rem);
  font-weight: 1000;
  letter-spacing: -.04em;
  line-height: 1.15;
}

/* =========================================
   DIAGNOSIS / BLACK
========================================= */

.psychosis-diagnosis {
  padding: 120px 0 135px;
  background: var(--psy-black);
}

.psychosis-diagnosis-heading > span {
  display: block;
  color: var(--psy-yellow);
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 28px;
}

.psychosis-diagnosis h2 {
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  font-weight: 1000;
  letter-spacing: -.065em;
  line-height: 1.08;
  margin: 0 0 60px;
}

.psychosis-diagnosis h2 span {
  color: var(--psy-pink);
}

.psychosis-final-line {
  margin-top: 85px;
  border-top: 1px solid #555;
  padding-top: 45px;
  max-width: 970px;
  font-size: clamp(1.5rem, 4vw, 3.7rem);
  font-weight: 1000;
  line-height: 1.25;
  letter-spacing: -.04em;
}

.psychosis-final-line span {
  color: var(--psy-yellow);
}

/* =========================================
   EDUCATION / EDITABLE ARTICLE
========================================= */

.psychosis-education {
  padding: 115px 0 135px;
  background: #f3f0e8;
  color: var(--psy-black);
}

.psychosis-education .psychosis-label {
  color: var(--psy-purple);
}

.psychosis-education > .psychosis-container > h2 {
  font-size: clamp(3rem, 7.5vw, 7rem);
  font-weight: 1000;
  line-height: .98;
  letter-spacing: -.065em;
  margin: 0 0 45px;
}

.psychosis-education > .psychosis-container > h2 span {
  color: var(--psy-purple);
}

.psychosis-education-intro {
  max-width: 760px;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 75px;
}

.psychosis-article {
  border-top: 5px solid var(--psy-black);
}

.psychosis-article-block {
  padding: 65px 0;
  border-bottom: 2px solid rgba(8, 8, 8, .18);
}

.psychosis-article-number {
  color: var(--psy-purple);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .13em;
  margin: 0 0 18px;
}

.psychosis-article-block h3 {
  font-size: clamp(1.65rem, 3.7vw, 3.2rem);
  font-weight: 1000;
  letter-spacing: -.045em;
  line-height: 1.1;
  margin: 0 0 30px;
}

.psychosis-article-block p:not(.psychosis-article-number) {
  max-width: 780px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.95;
  margin: 0 0 1.5em;
}

.psychosis-article-block p:last-child {
  margin-bottom: 0;
}

/* =========================================
   END
========================================= */

.psychosis-end {
  background: var(--psy-pink);
  color: var(--psy-black);
  padding: 100px 0;
}

.psychosis-end-small {
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .15em;
  margin: 0 0 30px;
}

.psychosis-end h2 {
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-weight: 1000;
  letter-spacing: -.06em;
  line-height: 1.03;
  margin: 0 0 45px;
}

.psychosis-end h2 span {
  color: var(--psy-white);
}

.psychosis-back {
  background: var(--psy-black);
  color: var(--psy-white);
}

.psychosis-back:hover {
  background: var(--psy-yellow);
  color: var(--psy-black);
  transform: translateY(-3px);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
  .psychosis-hero {
    min-height: 78svh;
    background-position: 58% center;
  }

  .psychosis-hero-content {
    width: calc(100% - 48px);
  }

  .psychosis-hero h1 {
    font-size: clamp(3.2rem, 9vw, 6.5rem);
  }

  .psychosis-scene,
  .psychosis-opening,
  .psychosis-sleep,
  .psychosis-diagnosis,
  .psychosis-education {
    padding-top: 90px;
    padding-bottom: 95px;
  }
}

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

@media (max-width: 650px) {
  .psychosis-container {
    width: calc(100% - 36px);
  }

  .psychosis-hero {
    min-height: 92svh;
    align-items: flex-start;

    background-image:
      linear-gradient(
        180deg,
        rgba(8, 8, 8, .83) 0%,
        rgba(8, 8, 8, .55) 33%,
        rgba(8, 8, 8, .12) 65%,
        rgba(8, 8, 8, .27) 100%
      ),
      url(/assets/bipolar-psychosis-mobile-09ecbf8e444fbc35ea51e4c4285844dc2dd6d6c9106503d65b4d06ecb3c595ae.png);

    background-position: center center;
    background-size: cover;
  }

  .psychosis-hero-content {
    width: calc(100% - 36px);
    padding: 45px 0 50px;
  }

  .psychosis-eyebrow {
    font-size: .58rem;
    line-height: 1.6;
    margin-bottom: 48px;
  }

  .psychosis-hero-number {
    font-size: .72rem;
  }

  .psychosis-hero h1 {
    font-size: clamp(2.8rem, 12.5vw, 5.2rem);
    line-height: .96;
  }

  .psychosis-hero-tagline {
    font-size: 1rem;
    margin-top: 28px;
    margin-bottom: 30px;
  }

  .psychosis-scroll {
    padding: 13px 18px;
    font-size: .72rem;
  }

  .psychosis-scene,
  .psychosis-opening,
  .psychosis-sleep,
  .psychosis-diagnosis,
  .psychosis-education {
    padding: 70px 0 80px;
  }

  .psychosis-label {
    font-size: .67rem;
    margin-bottom: 25px;
  }

  .psychosis-story-text {
    margin-top: 28px;
  }

  .psychosis-story-text p {
    font-size: 1.03rem;
    line-height: 1.82;
    margin-bottom: 1.5em;
  }

  .psychosis-opening h2 {
    font-size: clamp(2.7rem, 12vw, 4.5rem);
    margin-bottom: 38px;
  }

  .psychosis-scene-pink h2 {
    font-size: clamp(5rem, 24vw, 8rem);
    margin-bottom: 35px;
  }

  .psychosis-dialogue {
    padding: 25px 0 32px;
  }

  .psychosis-dialogue-big {
    font-size: clamp(1.45rem, 7.5vw, 2.8rem);
    margin-bottom: 30px;
  }

  .psychosis-dialogue-answer {
    font-size: 2.3rem;
    padding: 12px 14px;
  }

  .psychosis-scene-dark h2 {
    font-size: clamp(2.35rem, 9.5vw, 4rem);
    margin-bottom: 35px;
  }

  .psychosis-pullquote {
    margin: 55px 0;
    padding: 22px 0 22px 18px;
    border-left-width: 5px;
    font-size: clamp(1.45rem, 6.8vw, 2.6rem);
  }

  .psychosis-sleep h2 {
    font-size: clamp(4.5rem, 19vw, 7.5rem);
    margin-bottom: 40px;
  }

  .psychosis-command p {
    font-size: clamp(1.9rem, 8.5vw, 3.8rem);
  }

  .psychosis-warning {
    font-size: clamp(1.6rem, 8vw, 3.2rem);
    padding: 16px 18px;
    margin-top: 35px;
  }

  .psychosis-scene-yellow h2,
  .psychosis-diagnosis h2 {
    font-size: clamp(2.25rem, 9.2vw, 4rem);
    margin-bottom: 35px;
  }

  .psychosis-help-words {
    margin-top: 45px;
    font-size: clamp(1.3rem, 6.3vw, 2.5rem);
  }

  .psychosis-final-line {
    margin-top: 55px;
    padding-top: 30px;
    font-size: clamp(1.3rem, 6.5vw, 2.5rem);
  }

  .psychosis-education > .psychosis-container > h2 {
    font-size: clamp(2.65rem, 11vw, 4.5rem);
  }

  .psychosis-education-intro {
    font-size: 1.1rem;
    margin-bottom: 55px;
  }

  .psychosis-article-block {
    padding: 45px 0;
  }

  .psychosis-article-block h3 {
    font-size: clamp(1.55rem, 7vw, 2.6rem);
  }

  .psychosis-article-block p:not(.psychosis-article-number) {
    font-size: 1rem;
    line-height: 1.82;
  }

  .psychosis-end {
    padding: 65px 0;
  }

  .psychosis-end h2 {
    font-size: clamp(2.4rem, 10vw, 4.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .psychosis-scroll,
  .psychosis-back {
    transition: none;
  }
}


/* ========================================
   FIRST DUI — STORY IMPACT STYLING
======================================== */

/* Emphasized narrative statements */

.first-dui-page .ds-impact {
  margin: 45px 0 !important;
  padding: 22px 0 22px 25px;
  border-left: 6px solid var(--story-pink);
  color: var(--story-pink);
  font-size: clamp(23px, 3vw, 35px) !important;
  font-weight: 900;
  line-height: 1.35 !important;
}


/* BLACKOUT MOMENT */

.first-dui-page .ds-blackout {
  margin: 75px 0;
  padding: 55px 30px;
  background: var(--story-pink);
  color: var(--story-black);
  text-align: center;
  transform: rotate(-1deg);
}

.first-dui-page .ds-blackout-label {
  display: block;
  margin-bottom: 28px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.first-dui-page .ds-blackout p {
  margin: 0;
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.05;
}


/* JAIL INSTRUCTIONS */

.first-dui-page .ds-jail-commands {
  margin: 45px 0;
  padding: 30px;
  background: #181818;
  border: 2px solid var(--story-purple);
}

.first-dui-page .ds-jail-commands p {
  margin: 0 0 15px;
  color: var(--story-yellow);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.first-dui-page .ds-jail-commands p:last-child {
  margin-bottom: 0;
}


/* CONSEQUENCES */

.first-dui-page .ds-consequences {
  margin: 45px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.first-dui-page .ds-consequences span {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 12px 18px;
  background: var(--story-yellow);
  color: var(--story-black);
  font-size: clamp(17px, 2.5vw, 25px);
  font-weight: 900;
  line-height: 1.3;
  transform: rotate(-1deg);
}

.first-dui-page .ds-consequences span:nth-child(2) {
  background: var(--story-purple);
  color: white;
  transform: rotate(1deg);
}


/* FINAL STORY SENTENCE */

.first-dui-page .ds-story-final {
  margin: 55px 0 0 !important;
  padding-top: 25px;
  border-top: 3px solid var(--story-yellow);
  color: var(--story-yellow);
  font-size: clamp(24px, 4vw, 43px) !important;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.15 !important;
}


/* ENDING EYEBROW */

.first-dui-page .ds-ending-eyebrow {
  margin-bottom: 22px;
  color: var(--story-yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}


/* MOBILE */

@media (max-width: 767px) {

  .first-dui-page .ds-impact {
    margin: 35px 0 !important;
    padding-left: 18px;
    font-size: 24px !important;
  }

  .first-dui-page .ds-blackout {
    margin: 55px 0;
    padding: 45px 18px;
  }

  .first-dui-page .ds-blackout p {
    font-size: clamp(35px, 10vw, 55px);
  }

  .first-dui-page .ds-jail-commands {
    padding: 22px 18px;
  }

  .first-dui-page .ds-jail-commands p {
    font-size: 20px;
  }

  .first-dui-page .ds-consequences span {
    font-size: 19px;
    padding: 12px;
  }

  .first-dui-page .ds-story-final {
    font-size: 28px !important;
  }
}


/* =========================================
   THIRD DUI — STORY STYLING
   Bipolar Sober / Addiction / Perspectives
========================================= */

/* Mania announcement */

.third-dui-page .ds-mania-callout {
  margin: 50px 0;
  padding: 28px 30px;
  background: var(--story-purple);
  color: #ffffff;
  border-left: 7px solid var(--story-yellow);
  transform: rotate(-1deg);
}

.third-dui-page .ds-mania-callout p {
  margin: 0 0 12px;
  color: var(--story-yellow);
  font-size: clamp(45px, 7vw, 90px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
}

.third-dui-page .ds-mania-callout span {
  display: block;
  font-size: clamp(15px, 2.3vw, 23px);
  font-weight: 900;
  letter-spacing: .08em;
}


/* Phone call */

.third-dui-page .ds-phone-call {
  padding: 28px 32px;
  margin: 35px 0;
  background: #181818;
  border: 2px solid var(--story-pink);
}

.third-dui-page .ds-phone-call .ds-phone-label {
  color: var(--story-pink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  margin: 0 0 15px;
}

.third-dui-page .ds-phone-call p:last-child {
  color: #ffffff;
  font-size: clamp(24px, 3vw, 37px);
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}


/* Jackpot / internal conflict */

.third-dui-page .ds-jackpot {
  margin: 65px 0 45px;
  padding: 40px 30px;
  background: var(--story-yellow);
  color: var(--story-black);
}

.third-dui-page .ds-jackpot .ds-jackpot-main {
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.065em;
  margin: 0 0 12px;
}

.third-dui-page .ds-jackpot .ds-jackpot-sub {
  margin: 0 0 25px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.5;
}

.third-dui-page .ds-jackpot .ds-jackpot-no {
  display: inline-block;
  margin: 0 0 12px;
  padding: 8px 18px;
  background: var(--story-black);
  color: var(--story-pink);
  font-size: clamp(42px, 7vw, 80px);
  line-height: 1;
  font-weight: 900;
  transform: rotate(-3deg);
}


/* Guess who won */

.third-dui-page .ds-guess-who {
  color: var(--story-pink);
  font-size: clamp(30px, 5vw, 58px) !important;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.2 !important;
  margin: 45px 0 70px !important;
}


/* Drinking decision */

.third-dui-page .ds-impact {
  padding: 25px 0 25px 25px;
  margin: 50px 0 !important;
  border-left: 7px solid var(--story-pink);
  color: var(--story-pink);
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 900;
  line-height: 1.45 !important;
}


/* Blackout */

.third-dui-page .ds-blackout {
  margin: 70px 0;
  padding: 55px 28px;
  text-align: center;
  background: var(--story-pink);
  color: var(--story-black);
  transform: rotate(-1deg);
}

.third-dui-page .ds-blackout-label {
  display: block;
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}

.third-dui-page .ds-blackout p {
  margin: 0;
  font-size: clamp(37px, 6vw, 70px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.05;
}


/* Legal consequences */

.third-dui-page .ds-consequences {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 50px 0;
}

.third-dui-page .ds-consequences span {
  display: inline-block;
  max-width: 100%;
  padding: 13px 18px;
  background: var(--story-yellow);
  color: var(--story-black);
  font-size: clamp(17px, 2.5vw, 25px);
  font-weight: 900;
  line-height: 1.25;
  transform: rotate(-1deg);
}

.third-dui-page .ds-consequences span:nth-child(2) {
  background: var(--story-purple);
  color: white;
  transform: rotate(1deg);
}

.third-dui-page .ds-consequences span:nth-child(3) {
  background: var(--story-pink);
  color: var(--story-black);
}


/* Accountability */

.third-dui-page .ds-accountability {
  padding: 28px 0;
  margin: 55px 0 !important;
  border-top: 4px solid var(--story-yellow);
  border-bottom: 4px solid var(--story-yellow);
  color: var(--story-yellow);
  font-size: clamp(25px, 4vw, 46px) !important;
  font-weight: 900;
  line-height: 1.18 !important;
  letter-spacing: -.045em;
}


/* Final prison statement */

.third-dui-page .ds-prison-warning {
  margin: 40px 0 65px;
  padding: 42px 35px;
  background: var(--story-purple);
  color: white;
  border: 3px solid var(--story-pink);
  box-shadow: 12px 12px 0 rgba(255, 20, 147, .35);
}

.third-dui-page .ds-prison-warning .ds-prison-label {
  color: var(--story-yellow);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  margin: 0 0 25px;
}

.third-dui-page .ds-prison-warning p:last-child {
  margin: 0;
  font-size: clamp(30px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.05em;
}


/* Ending eyebrow */

.third-dui-page .ds-ending-eyebrow {
  margin-bottom: 22px;
  color: var(--story-yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}


/* MOBILE */

@media (max-width: 767px) {

  .third-dui-page .ds-mania-callout {
    padding: 25px 20px;
  }

  .third-dui-page .ds-mania-callout p {
    font-size: clamp(45px, 15vw, 70px);
  }

  .third-dui-page .ds-phone-call {
    padding: 25px 20px;
  }

  .third-dui-page .ds-jackpot {
    padding: 35px 18px;
  }

  .third-dui-page .ds-jackpot .ds-jackpot-main {
    font-size: clamp(44px, 13vw, 75px);
  }

  .third-dui-page .ds-guess-who {
    font-size: clamp(28px, 8vw, 42px) !important;
  }

  .third-dui-page .ds-impact {
    padding-left: 18px;
    font-size: 23px !important;
  }

  .third-dui-page .ds-blackout {
    padding: 45px 15px;
  }

  .third-dui-page .ds-blackout p {
    font-size: clamp(34px, 9vw, 55px);
  }

  .third-dui-page .ds-consequences span {
    font-size: 19px;
    padding: 12px;
  }

  .third-dui-page .ds-accountability {
    font-size: clamp(24px, 7.4vw, 36px) !important;
  }

  .third-dui-page .ds-prison-warning {
    padding: 35px 20px;
    box-shadow: 6px 6px 0 rgba(255, 20, 147, .35);
  }

  .third-dui-page .ds-prison-warning p:last-child {
    font-size: clamp(28px, 8vw, 45px);
  }
}