/* AI Edit House: scenes 2, 3, 5, 6 and 7, and the reel viewer. Phone first. */

/* ---------- Shared scene shell ---------- */

.scene {
  position: relative;
  padding: clamp(64px, 15vw, 140px) 0;
  isolation: isolate;
  /* Sideways only: the soft glows may spill gently into the next scene instead of ending in a hard edge. */
  overflow-x: clip;
}
.scene > .glow {
  width: min(1000px, 150vw);
  height: 620px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  z-index: -1;
}
.scene-head {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  text-align: center;
}
.scene-head .lede {
  max-width: 46ch;
}
.scene .title {
  color: #f7f1e6;
}

/* ---------- Scene 2: Yes, AI edited these ---------- */

.made > .glow {
  top: 62%;
  opacity: 0.55;
}
.made-more {
  margin: -4px 0 0;
  max-width: 34ch;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 220, 140, 0.88);
  text-wrap: balance;
}

/* The row glides on its own (see scenes.js); a finger can swipe it, and the next card always peeks in. */
.reel-row {
  margin-top: clamp(36px, 6vw, 60px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.reel-row::-webkit-scrollbar {
  display: none;
}
.reel-row:focus {
  outline: none;
}
.reel-track {
  display: flex;
  width: max-content;
  gap: clamp(20px, 5vw, 36px);
  margin: 0;
  padding: 22px var(--gutter) 58px;
  list-style: none;
}
.reel-card {
  flex: none;
  width: clamp(188px, 54vw, 252px);
  transform: rotate(-2.2deg) translateY(6px);
  transition: transform 900ms var(--ease);
}
.reel-card:nth-child(even) {
  transform: rotate(1.8deg) translateY(-6px);
}
.reel-card:hover,
.reel-card:focus-within {
  transform: none;
}
.reel-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reel-open .phone,
.reel-open .screen {
  display: block;
}
.reel-open:focus-visible {
  outline: none;
}
.reel-open:focus-visible .phone {
  box-shadow: 0 0 0 2px var(--gold), 0 50px 90px -40px rgba(0, 0, 0, 0.9);
}
.reel-open .phone {
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(255, 228, 180, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 50px -24px rgba(212, 150, 60, 0.35);
}
.reel-open .screen {
  border-radius: 22px;
}
/* A small glass play mark: tap to watch with sound. */
.reel-open .sound,
.carousel-card .sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(7, 6, 11, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 600ms var(--ease), background-color 600ms var(--ease);
}
.reel-open .sound::after,
.carousel-card .sound::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  border-style: solid;
  border-width: 6.5px 0 6.5px 10px;
  border-color: transparent transparent transparent #fff;
}
.reel-open:hover .sound,
.carousel-card[data-slot="0"]:hover .sound {
  transform: scale(1.06);
  background: rgba(7, 6, 11, 0.6);
}
.soon {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe2a0;
  background: rgba(10, 9, 16, 0.72);
  border: 1px solid rgba(255, 201, 74, 0.45);
}
.reel-name {
  display: block;
  margin-top: 16px;
  line-height: 1.3;
}
.reel-name em {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.125rem;
  color: #f7f1e6;
}
.reel-name small {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}
/* On the hero reels only the front one shows the mark, fading in as it arrives. */
.carousel-card .sound {
  z-index: 2;
  opacity: 0;
  transition: opacity var(--glide) var(--glide-ease), transform 600ms var(--ease), background-color 600ms var(--ease);
}
.carousel-card[data-slot="0"] .sound {
  opacity: 1;
}
.carousel-card[data-slot="0"] {
  cursor: pointer;
}
.carousel-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold), 0 50px 90px -40px rgba(0, 0, 0, 0.9);
}
.needs-tap .sound {
  display: none;
}

/* "Made by a creator with 100M+ lifetime reel views": a quiet credential, the number in gold serif. */
.maker-line {
  margin: 0;
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(236, 232, 244, 0.72);
  text-align: center;
  text-wrap: balance;
}
.maker-line strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1;
  color: var(--gold);
}
.library-head .maker-line {
  margin-top: 2px;
}

/* ---------- Version 1, Scene 2: words only, right under the hero reels ----------
   No reels of its own: a thin gold line runs down from the reels above to the words. */
.made-words {
  padding: 24px 0 clamp(40px, 8vw, 72px);
  text-align: center;
}
.made-thread {
  display: block;
  width: 1px;
  height: clamp(56px, 12vw, 96px);
  margin: 0 auto 28px;
  background: linear-gradient(180deg, rgba(255, 201, 74, 0), rgba(255, 201, 74, 0.8));
  transform-origin: 50% 0;
}
.js .made-thread.rise {
  transform: scaleY(0);
  transition: opacity 1200ms var(--ease), transform 1400ms cubic-bezier(0.45, 0, 0.2, 1);
}
.js .made-thread.rise.in {
  transform: scaleY(1);
}
.made-words .title {
  font-size: clamp(1.9rem, 8.6vw, 4.75rem);
  line-height: 1.04;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .js .made-thread.rise {
    transform: none;
  }
}

/* ---------- Version 2, Scene 2: the hero reels, introduced ---------- */
@media (max-width: 1023px) {
  .words-first .made {
    padding-top: 48px;
  }
}
.made-show > .carousel {
  margin-top: clamp(28px, 6vw, 48px);
  padding-bottom: 36px;
}
/* The stage is only as tall as the front reel, so no gap opens under it. */
.made-show .carousel-stage {
  height: calc(min(52vw, 236px) * 16 / 9 + 16px);
}
.made-end {
  display: grid;
  justify-items: center;
  padding: 0 var(--gutter);
}
.made-end .scene-cta {
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .made-show {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 48px;
    align-items: center;
    max-width: var(--max);
    margin: 0 auto;
    padding-inline: var(--gutter);
  }
  .made-show > .glow {
    display: none;
  }
  .made-show .scene-head {
    grid-column: 1;
    grid-row: 2;
    justify-items: start;
    padding: 0;
    text-align: left;
  }
  .made-show .title {
    white-space: nowrap;
  }
  .made-show .made-more {
    max-width: 34ch;
  }
  .made-show > .carousel {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    padding: 0;
  }
  .made-show .carousel-stage {
    height: min(66vh, 600px);
  }
  .made-show .made-end {
    grid-column: 1;
    grid-row: 3;
    justify-items: start;
    padding: 28px 0 0;
  }
  .made-show .maker-line {
    max-width: none;
    text-align: left;
  }
  /* The side reels sit a little closer in, so they never reach the words. */
  .made-show .carousel-card[data-slot="1"] {
    transform: translate3d(66%, 10%, 0) rotateY(-28deg) scale(0.7);
  }
  .made-show .carousel-card[data-slot="3"] {
    transform: translate3d(-66%, 10%, 0) rotateY(28deg) scale(0.7);
  }
  .made-show .made-end .scene-cta {
    justify-content: flex-start;
  }
}

.maker {
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

/* ---------- The reel viewer (full reel, with sound) ---------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.viewer.open {
  visibility: visible;
  pointer-events: auto;
}
.viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 9, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.viewer.open .viewer-backdrop {
  opacity: 1;
}
.viewer-panel {
  position: relative;
  outline: none;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 600ms var(--ease), transform 700ms var(--ease);
}
.viewer.open .viewer-panel {
  opacity: 1;
  transform: none;
}
.viewer-stage {
  width: min(88vw, calc((100dvh - 170px) * 9 / 16), 420px);
  text-align: center;
}
.viewer-stage .phone {
  box-shadow: inset 0 0 0 1px rgba(255, 228, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 60px 120px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 90px -30px rgba(212, 150, 60, 0.45);
}
.viewer-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.viewer-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(7, 6, 11, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.viewer-toggle span::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 20px;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent #fff;
}
.viewer.paused .viewer-toggle span {
  opacity: 1;
  transform: none;
}
.viewer-progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.viewer-progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.viewer-name {
  margin: 18px 0 0;
  line-height: 1.3;
}
.viewer-name em {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.25rem;
  color: #f7f1e6;
}
.viewer-name small {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.viewer-name small .soon-word {
  color: #ffe2a0;
}
.viewer-close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  right: 14px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}
.viewer-close::before,
.viewer-close::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 23px;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}
.viewer-close::after {
  transform: rotate(-45deg);
}
.viewer-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
  .viewer-close {
    top: 24px;
    right: 24px;
  }
}

/* ---------- Scene 3: four promises ---------- */

.promises {
  padding-top: clamp(24px, 6vw, 60px);
}
.promises > .glow {
  opacity: 0.4;
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}
.promise {
  display: flex;
  flex-direction: column;
  padding: 6px 6px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}
.promise .frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  transition: box-shadow 1000ms var(--ease);
}
.promise .frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The still sits behind each clip, so a slow connection never shows a black card; the clip fades in
   once its first picture is ready. */
.promise .frame {
  background: #000 center / cover no-repeat;
}
.js .promise .frame > video {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.js .promise .frame > video.has-frame {
  opacity: 1;
}
/* Phones: one card's clip plays at a time, in turn; the others rest a little darker. */
.promise .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #07060b;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1000ms var(--ease);
}
.promises.in-turn .promise:not(.on) .frame::after {
  opacity: 0.38;
}
.promises.in-turn .promise.on .frame {
  box-shadow: 0 0 0 1px rgba(255, 201, 74, 0.45), 0 0 34px -8px rgba(255, 201, 74, 0.45);
}
.promise-style {
  margin: 12px 8px 0;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, 0.72);
}
.promise h3 {
  margin: 8px 8px 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1875rem, 5vw, 1.5rem);
  line-height: 1.12;
  color: #f7f1e6;
  text-wrap: balance;
}
.promise p {
  margin: 10px 8px 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(236, 232, 244, 0.72);
  text-wrap: pretty;
}
.promise .promise-small {
  margin-top: 8px;
  font-size: 0.75rem;
  color: rgba(255, 220, 140, 0.75);
}
@media (min-width: 1024px) {
  .promise-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .promise {
    padding: 8px 8px 24px;
    border-radius: 26px;
  }
  .promise .frame {
    border-radius: 19px;
  }
  .promise-style,
  .promise h3,
  .promise p {
    margin-left: 14px;
    margin-right: 14px;
  }
  .promise-style {
    margin-top: 18px;
  }
  .promise p {
    font-size: 0.9375rem;
  }
}

/* ---------- Scene 5: same reel, two looks ---------- */

.brand-inner {
  display: grid;
  gap: clamp(36px, 7vw, 56px);
  max-width: 1100px;
  margin: 0 auto;
}
/* Words only (Shine, 5 Nov 2026: no reel here, it repeated the others). */
.brand > .glow {
  top: 50%;
  opacity: 0.6;
}
.looks {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 0 var(--gutter);
}
.looks .phone {
  width: min(62vw, 290px);
  box-shadow: inset 0 0 0 1px rgba(255, 228, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 70px -24px rgba(212, 150, 60, 0.4);
}
/* Ember Black always underneath; Terracotta Paper is wiped across it behind a thin gold line, left to right. */
.looks .look-light {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1300ms cubic-bezier(0.45, 0, 0.2, 1);
}
.looks .look-light.on {
  clip-path: inset(0 0 0 0);
}
.looks .look-light.out {
  clip-path: inset(0 0 0 100%);
}
.looks .look-light.jump {
  transition: none;
}
.looks .wipe {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.looks .wipe::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 226, 154, 0), #ffe29a 18%, #ffc94a 50%, #ffe29a 82%, rgba(255, 226, 154, 0));
  box-shadow: 0 0 14px 2px rgba(255, 201, 74, 0.55);
}
.looks .wipe.go {
  animation: wipe 1300ms cubic-bezier(0.45, 0, 0.2, 1) both;
}
@keyframes wipe {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10%,
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
.look-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px -18px rgba(0, 0, 0, 0.8);
}
.look-switch .thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(255, 201, 74, 0.5);
  box-shadow: 0 0 22px -6px rgba(255, 201, 74, 0.45);
  transition: transform 900ms cubic-bezier(0.45, 0, 0.2, 1);
}
.look-switch.light .thumb {
  transform: translateX(100%);
}
.look-switch button {
  position: relative;
  min-width: 88px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: rgba(236, 232, 244, 0.6);
  font: 600 0.875rem/1 var(--sans);
  cursor: pointer;
  transition: color 700ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.look-switch button[aria-pressed="true"] {
  color: #fff;
}
.look-name {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.look-name em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.08em;
  color: rgba(255, 255, 255, 0.9);
}
/* ---------- Scene 6: you don't need to be techy ---------- */

.course > .glow {
  top: 56%;
  opacity: 0.45;
}
.note {
  position: relative;
  width: min(560px, calc(100% - 2 * var(--gutter)));
  margin: clamp(36px, 6vw, 52px) auto 0;
  padding: 30px 26px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 201, 74, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 70px -36px rgba(0, 0, 0, 0.9),
    0 0 60px -24px rgba(255, 201, 74, 0.3);
}
.note blockquote {
  margin: 0;
}
.note p {
  margin: 0;
  font-size: clamp(1rem, 4.2vw, 1.125rem);
  line-height: 1.65;
  color: rgba(247, 241, 230, 0.9);
  text-wrap: pretty;
}
.note figcaption {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--gold);
}
.note figcaption::before {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(255, 201, 74, 0.6);
}
.course-lines {
  display: grid;
  gap: 14px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}
.course-lines li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(236, 232, 244, 0.8);
}
.course-lines li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-2px);
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 201, 74, 0.8);
}

/* ---------- Scene 7: join, what you need, FAQ ---------- */

.join > .glow {
  top: 22%;
  opacity: 0.7;
}
.join-card {
  display: grid;
  gap: 30px;
  justify-items: center;
  width: min(1000px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 30px 22px 32px;
  border-radius: 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 201, 74, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -24px 40px -34px rgba(255, 201, 74, 0.5),
    0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 90px -30px rgba(255, 201, 74, 0.45);
}
.join .title {
  font-size: clamp(1.9rem, 7.6vw, 3.1rem);
}
.join-copy .lede {
  max-width: 40ch;
  margin: 14px auto 26px;
}
.join-copy .btn {
  min-width: 220px;
}
.join-copy .fine {
  margin-top: 14px;
}
@media (min-width: 900px) {
  .join-card {
    padding: 64px 56px 56px;
  }
}

.block-label {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, 0.8);
}
.need {
  width: min(760px, calc(100% - 2 * var(--gutter)));
  margin: clamp(56px, 10vw, 96px) auto 0;
  padding: 26px 22px 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.need-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.need-list li {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(236, 232, 244, 0.74);
}
.need-list strong {
  color: #f7f1e6;
  font-weight: 600;
}
@media (min-width: 768px) {
  .need {
    padding: 34px 36px 18px;
  }
}

.faq {
  width: min(760px, calc(100% - 2 * var(--gutter)));
  margin: clamp(56px, 10vw, 96px) auto 0;
}
.faq .block-label {
  margin-bottom: 6px;
}
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-item h4 {
  margin: 0;
}
.faq-item button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 18px 44px 18px 0;
  border: 0;
  background: none;
  color: #f7f1e6;
  font: 500 1rem/1.4 var(--sans);
  text-align: left;
  text-wrap: balance;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq-item button::before,
.faq-item button::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: rgba(255, 220, 140, 0.85);
  transition: transform 600ms var(--ease);
}
.faq-item button::after {
  transform: rotate(90deg);
}
.faq-item.open button::after {
  transform: rotate(0deg);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 600ms var(--ease);
}
.faq-a > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 600ms;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-item.open .faq-a > div {
  visibility: visible;
  transition-delay: 0s;
}
.faq-a p {
  margin: 0;
  padding: 0 28px 22px 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(236, 232, 244, 0.72);
}

/* ---------- Reduced motion: everything still, still finished ---------- */

@media (prefers-reduced-motion: reduce) {
  .reel-card,
  .reel-card:nth-child(even) {
    transition: none;
  }
}

/* ---------- Desktop refinements ---------- */

.promise h3 em.key {
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .reel-card {
    width: 228px;
  }
  .made-more {
    max-width: 40em;
    font-size: 0.9375rem;
  }
  .join-card {
    width: min(620px, calc(100% - 2 * var(--gutter)));
  }
  .join .title {
    font-size: 3.5rem;
  }
  .note {
    width: 600px;
    padding: 40px 44px 32px;
  }
  .note p {
    font-size: 1.1875rem;
  }
  .course-lines li {
    font-size: 1rem;
  }
}

.need-line {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #f7f1e6;
}

/* ---------- Option 2, phone: the strict review (6 Nov 2026) ----------
   One rhythm: 96 px between sections, 24 px inside large cards, 16 px inside small ones. The reels are not
   touched: their size stays as set in heroes.css. */
@media (max-width: 1023px) {
  /* First screen: the same space above the label and below the small line. */
  .calm-2 .hero-lined {
    padding-top: calc(env(safe-area-inset-top) + clamp(20px, 4svh, 40px));
  }
  .calm-2 .hero-lined .carousel {
    margin-top: 12px;
    padding-bottom: 16px;
  }
  .calm-2 .hero-lined.hero-carousel .hero-copy .hero-maker {
    margin-top: 14px;
  }
  .calm-2 .more-hint {
    margin-top: 0;
    padding: 13px 14px 27.5px;
  }
  /* A slightly smaller headline and tighter top lines lift the reels and buttons, so everything sits
     inside the first screen. The reels themselves keep their size. */
  .calm-2.top-a .hero-lined .hero-copy .display {
    font-size: clamp(1.875rem, 8.7vw, 2.1875rem);
  }
  .calm-2 .hero-lined .hero-copy .pill {
    margin-bottom: 14px;
  }
  .calm-2.top-a .hero-lined .hero-sub {
    margin-top: 8px;
  }
  .calm-2.top-a .reels-col {
    margin-top: clamp(18px, 3.2svh, 38px);
  }
  .calm-2 .lede {
    color: rgba(236, 232, 244, 0.78);
  }
  .calm-2 .loaded-tile .small-2 {
    display: block;
  }

  /* The tile: two sizes only, 26 for the headline and 15 for everything else. */
  .calm-2 .loaded-tile {
    gap: 20px;
    padding: 32px 24px;
  }
  .calm-2 .loaded-tile .hero-support,
  .calm-2 .loaded-tile .hero-small,
  .calm-2 .loaded-tile .callout {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: rgba(236, 232, 244, 0.78);
    text-wrap: balance;
  }
  .calm-2 .loaded-tile .hero-support {
    padding-bottom: 20px;
  }
  .calm-2 .loaded-tile .hero-small {
    padding-top: 20px;
    color: rgba(236, 232, 244, 0.62);
  }
  .calm-2 .loaded-tile .callout strong {
    margin-bottom: 6px;
    font-size: 1.625rem;
  }

  /* The same gap between every section. */
  .calm-2 .scene {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .calm-2 .library {
    padding-top: 96px;
    padding-bottom: 48px;
  }

  /* The two numbers sit either side of a centred line. */
  .calm-2 .numbers {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    justify-content: stretch;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .calm-2 .numbers .stat {
    justify-self: center;
  }

  /* Cards: one padding each, one gold glass edge. */
  .calm-2 .promise {
    padding: 16px;
    border-color: rgba(255, 201, 74, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  }
  .calm-2 .promise h3 {
    margin: 0;
  }
  .calm-2 .promise p {
    margin-left: 0;
    margin-right: 0;
  }
  .calm-2 .detail-cards li {
    padding: 16px;
    border-color: rgba(255, 201, 74, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 50px -34px rgba(0, 0, 0, 0.9);
  }
  .calm-2 .note {
    padding: 24px;
  }
  .calm-2 .join-card {
    padding: 32px 24px;
  }
  .calm-2 .need {
    padding: 24px 24px 12px;
  }

  /* Footer: the name lines read as one block, the links as another. */
  .calm-2 .site-footer ul {
    gap: 8px;
  }
  .calm-2 .site-footer li:nth-child(1),
  .calm-2 .site-footer li:nth-child(2) {
    margin-bottom: -6px;
  }
  .calm-2 .site-footer li:nth-child(3) {
    margin-bottom: 12px;
  }
}
@media (max-width: 767px) {
  /* The three lines start on the same edge as the text in Shine's note above them. */
  .calm-2 .course-lines {
    width: auto;
    max-width: none;
    margin-left: calc(var(--gutter) + 24px);
    margin-right: var(--gutter);
  }
}

/* ---------- Option 2, desktop: the same care as the phone (Shine, 6 Nov 2026) ----------
   Nothing here applies below 1024 px, so the approved phone version is not touched. One rhythm: 160 px
   between sections. */
@media (min-width: 1024px) {
  /* First screen: fills the window, the small line closes it. The reels only ever grow from here. */
  .calm-2 .hero-lined {
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 100svh;
    padding-top: calc(env(safe-area-inset-top) + 32px);
    padding-bottom: 0;
  }
  .calm-2 .hero-lined {
    --reel-w: clamp(240px, min(37vh, 24vw), 360px);
  }
  .calm-2 .hero-lined .carousel-stage {
    height: calc(var(--reel-w) * 16 / 9 + 12px);
  }
  .calm-2 .hero-lined .carousel-card {
    width: var(--reel-w);
    margin-left: calc(var(--reel-w) / -2);
  }
  /* The side reels sit closer in, so they never reach the headline. */
  .calm-2 .hero-lined .carousel-card[data-slot="1"] {
    transform: translate3d(66%, 10%, 0) rotateY(-28deg) scale(0.7);
  }
  .calm-2 .hero-lined .carousel-card[data-slot="3"] {
    transform: translate3d(-66%, 10%, 0) rotateY(28deg) scale(0.7);
  }
  .calm-2.top-a .reels-line {
    margin-bottom: 20px;
    font-size: 1.5rem;
  }
  .calm-2 .more-hint {
    margin: 0;
    padding: 14px 14px 26px;
  }

  /* The tile: two sizes, one rule width, the same as the phone. */
  .calm-2 .loaded {
    padding-top: 64px;
  }
  .calm-2 .loaded-tile {
    gap: 24px;
    padding: 40px 48px;
  }
  .calm-2 .loaded-tile .hero-support,
  .calm-2 .loaded-tile .hero-small,
  .calm-2 .loaded-tile .callout {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: rgba(236, 232, 244, 0.78);
  }
  .calm-2 .loaded-tile .small-2 {
    display: block;
  }
  .calm-2 .loaded-tile .callout strong {
    margin-bottom: 8px;
    font-size: 2.125rem;
  }

  /* One rhythm between sections. */
  .calm-2 .scene {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .calm-2 .library {
    padding-top: 160px;
    padding-bottom: 80px;
  }

  /* Four cards on the same edges as the first screen; headlines, text and small lines share their lines. */
  .calm-2 .promise-grid {
    grid-template-rows: auto auto auto;
    row-gap: 0;
    width: calc(100% - 2 * var(--gutter));
    padding: 0;
  }
  .calm-2 .promise {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 24px;
    border-color: rgba(255, 201, 74, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  }
  .calm-2 .promise h3 {
    margin: 0;
    font-size: 1.4375rem;
  }
  .calm-2 .promise:nth-child(3) h3 {
    max-width: 7em;
  }
  .calm-2 .promise p {
    margin-left: 0;
    margin-right: 0;
  }
  .calm-2 .detail-cards li {
    border-color: rgba(255, 201, 74, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 50px -34px rgba(0, 0, 0, 0.9);
  }

  /* Reading width: lines stay near 80 characters, and no single word is left alone on a line. */
  .calm-2 .join-copy .lede {
    max-width: 30rem;
    text-wrap: balance;
  }
  .calm-2 .need-list li,
  .calm-2 .faq-item p {
    text-wrap: pretty;
  }

  /* After the strict review. The first headline stays the largest on the page. */
  .calm-2 .scene .title,
  .calm-2 .library .title,
  .calm-2 .join .title {
    font-size: 3rem;
  }
  /* One column for everything that reads as text. */
  .calm-2 .loaded-tile {
    max-width: 680px;
  }
  /* The two numbers sit either side of the centre line. */
  .calm-2 .numbers {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    justify-content: stretch;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .calm-2 .numbers .stat {
    justify-self: center;
    max-width: none;
  }
  .calm-2 .promise p {
    text-wrap: balance;
  }
  /* Side reels: clean edges, and bright enough to read as reels. */
  .calm-2 .hero-lined .carousel-card {
    outline: 1px solid transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .calm-2 .hero-lined .carousel-card[data-slot="1"] .shade,
  .calm-2 .hero-lined .carousel-card[data-slot="3"] .shade {
    opacity: 0.55;
  }
  /* Sign-up: the page rests behind the form, and the form does not move when a message appears. */
  .calm-2 .sheet-backdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .calm-2 .field-error:empty {
    display: block;
    min-height: 1.25rem;
  }
}

/* ---------- Option 2, desktop first screen (Shine, 6 Nov 2026) ----------
   On a computer the tile's words sit on the left beside the reels, in small type, and the separate tile
   goes. On a phone these words stay in the tile, exactly as approved. */
.hero-desk {
  display: none;
}
@media (min-width: 1024px) {
  .hero-desk {
    display: block;
    width: 100%;
  }
  .calm-2 .loaded {
    display: none;
  }
  .calm-2 .hero-lined .hero-copy .hero-support {
    margin: 16px 0 0;
    font-size: 1rem;
    line-height: 1.6;
  }
  .calm-2 .hero-lined .hero-copy .hero-actions {
    margin-top: 24px;
  }
  /* After joining, "You're in." sits right under the button. */
  .calm-2 .hero-lined .hero-copy .joined-note {
    order: 0;
    margin-top: 16px;
  }
}

/* ---------- Option 2, desktop lower half (Shine, 6 Nov 2026) ----------
   Not the phone stacked wider: on the same 1200 px edges as the first screen, four tiles lead to two, then
   to one wide gold panel. What you need and FAQ: a heading on the left, the detail on the right. */
@media (min-width: 1024px) {
  .calm-2 {
    --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  }
  /* Get your editing hours back: the widest, warmest moment on the page. */
  .calm-2 .join-card {
    display: block;
    width: calc(100% - 2 * var(--edge));
    padding: 40px 48px;
    background: radial-gradient(70% 130% at 12% 50%, rgba(255, 201, 74, 0.13), rgba(255, 201, 74, 0) 70%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  }
  .calm-2 .join-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    column-gap: 72px;
    align-items: center;
    text-align: left;
  }
  .calm-2 .join .title {
    grid-column: 1;
    grid-row: 1 / span 4;
    font-size: 2.25rem;
    line-height: 1.12;
  }
  .calm-2 .join-copy .lede {
    grid-column: 2;
    max-width: none;
    margin: 0 0 20px;
    font-size: 1rem;
    text-wrap: pretty;
  }
  .calm-2 .join-copy .joined-note {
    grid-column: 2;
    grid-row: 1 / span 4;
    justify-content: flex-start;
    gap: 16px;
    margin: 0;
    font-size: 0.9375rem;
  }
  .calm-2 .join-copy .joined-note strong {
    font-size: 1.4375rem;
  }
  .calm-2 .join-copy .joined-ring {
    width: 44px;
    height: 44px;
  }
  .calm-2 .join > .glow {
    opacity: 0.45;
  }
  .calm-2 .join-copy .btn {
    grid-column: 2;
    justify-self: start;
  }
  .calm-2 .join-copy .fine {
    grid-column: 2;
    text-align: left;
  }

  /* What you need and FAQ: real headlines, seen at a glance. */
  .calm-2 .need,
  .calm-2 .faq {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    column-gap: 72px;
    width: calc(100% - 2 * var(--edge));
    margin: 96px auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .calm-2 .need .block-label,
  .calm-2 .faq .block-label {
    margin: 0;
    font-family: var(--serif);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    letter-spacing: 0;
    text-transform: none;
    color: #f7f1e6;
  }
  .calm-2 .need .block-label {
    grid-column: 1;
    grid-row: 1;
  }
  .calm-2 .need-line {
    grid-column: 1;
    grid-row: 2;
    margin: 16px 0 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(236, 232, 244, 0.78);
  }
  .calm-2 .need-list {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  .calm-2 .need-list li {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    column-gap: 24px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 201, 74, 0.16);
    border-bottom: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .calm-2 .need-list li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .calm-2 .need-list strong {
    color: #f7f1e6;
  }
  .calm-2 .faq .block-label {
    position: sticky;
    top: 96px;
    grid-column: 1;
    grid-row: 1 / span 12;
    align-self: start;
  }
  .calm-2 .faq-item {
    grid-column: 2;
    border-bottom-color: rgba(255, 201, 74, 0.16);
  }
  .calm-2 .faq-item:nth-child(2) {
    border-top: 1px solid rgba(255, 201, 74, 0.16);
  }
  .calm-2 .faq-item button {
    min-height: 62px;
    padding: 19px 48px 19px 0;
    font-size: 1rem;
  }
  .calm-2 .faq-a p {
    padding-bottom: 24px;
    font-size: 0.9375rem;
  }
}

/* Phone: What you need and FAQ read as real headlines (Shine, 6 Nov 2026). */
@media (max-width: 1023px) {
  .calm-2 .need .block-label,
  .calm-2 .faq .block-label {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: #f7f1e6;
  }
}

/* ---------- After the four tiles: the same tile look, phone and desktop (Shine, 6 Nov 2026) ----------
   Same glass, same edge, same left-aligned text as the four tiles, and sizes that step down from the first
   half: 26 px headlines on phones, 36 px on computers, reading text 14 to 16 px. */
.brand-looks {
  display: none;
}
.calm-2 .pair {
  display: grid;
  gap: 12px;
  margin: 48px var(--gutter);
}
.calm-2 .pair .scene {
  padding: 24px;
  border: 1px solid rgba(255, 201, 74, 0.22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}
.calm-2 .pair .glow {
  display: none;
}
.calm-2 .pair .scene-head {
  justify-items: start;
  gap: 10px;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.calm-2 .pair .pill {
  justify-content: flex-start;
}
.calm-2 .pair .pill::before {
  display: none;
}
.calm-2 .pair .scene .title {
  font-size: 1.625rem;
  line-height: 1.15;
}
.calm-2 .pair .lede {
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.calm-2 .brand-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}
.calm-2 .brand-looks {
  --look: min(37vw, 150px);
  position: relative;
  display: block;
  height: calc(var(--look) * 16 / 9 + 18px);
  margin-top: 20px;
}
.calm-2 .look {
  position: absolute;
  top: 0;
  width: var(--look);
  height: calc(var(--look) * 16 / 9);
  border-radius: 16px;
  object-fit: cover;
  outline: 1px solid rgba(255, 228, 180, 0.24);
  outline-offset: -1px;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9), 0 0 80px -8px rgba(255, 201, 74, 0.2);
}
.calm-2 .look-ember {
  left: calc(50% - var(--look) * 0.985);
  transform: rotate(-3deg);
}
.calm-2 .look-paper {
  top: 16px;
  left: calc(50% - var(--look) * 0.015);
  transform: rotate(3deg);
}
.calm-2 .pair .note {
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.calm-2 .pair .note p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(236, 232, 244, 0.78);
}
.calm-2 .pair .note .keep {
  white-space: nowrap;
}
.calm-2 .faq-a p {
  text-wrap: pretty;
}
.calm-2 .pair .note figcaption {
  justify-content: flex-start;
  margin-top: 8px;
  font-size: 1.25rem;
}
.calm-2 .pair .course-lines {
  gap: 8px;
  width: auto;
  max-width: none;
  margin: 16px 0 0;
}
.calm-2 .pair .course-lines li {
  padding: 0;
  border: 0;
  font-size: 0.875rem;
}
.calm-2 .pair .scene-cta {
  justify-content: flex-start;
  margin: 20px 0 0;
}
@media (max-width: 1023px) {
  .calm-2 .join .title {
    font-size: 1.625rem;
    line-height: 1.15;
  }
  .calm-2 .join-copy .lede {
    font-size: 0.9375rem;
  }
  .calm-2 .need-line {
    font-size: 0.875rem;
  }
  .calm-2 .join > .glow {
    opacity: 0.5;
  }
  .calm-2 .need-list li,
  .calm-2 .faq-a p {
    font-size: 0.875rem;
  }
  .calm-2 .faq-item button {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .calm-2 .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: calc(100% - 2 * var(--edge));
    margin: 80px auto;
  }
  .calm-2 .pair .scene {
    padding: 32px;
    border-radius: 26px;
  }
  .calm-2 .pair .scene .title {
    font-size: 2.25rem;
    line-height: 1.12;
  }
  .calm-2 .pair .lede {
    font-size: 1rem;
  }
  .calm-2 .brand-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 28px;
    height: 100%;
  }
  .calm-2 .brand-looks {
    --look: clamp(128px, 10.6vw, 152px);
    align-self: center;
    width: calc(var(--look) * 2);
    margin-top: 0;
  }
  .calm-2 .pair .note p {
    font-size: 1rem;
  }
  .calm-2 .pair .note figcaption {
    font-size: 1.375rem;
  }
  .calm-2 .pair .course-lines li {
    font-size: 0.9375rem;
  }

  /* What you need and FAQ: the same glass as the tiles above. */
  .calm-2 .need,
  .calm-2 .faq {
    padding: 40px 48px;
    border: 1px solid rgba(255, 201, 74, 0.22);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  }
  .calm-2 .need,
  .calm-2 .faq {
    margin-top: 20px;
  }
  .calm-2 .need {
    margin-top: 80px;
  }
  .calm-2 .need-list li:last-child {
    padding-bottom: 0;
  }
  .calm-2 .faq-item:last-child {
    border-bottom: 0;
  }
  .calm-2 .faq-item:nth-child(2) {
    border-top: 0;
  }
  .calm-2 .faq-item:nth-child(2) button {
    padding-top: 0;
    min-height: 0;
  }
  .calm-2 .faq-item:nth-child(2) button::before,
  .calm-2 .faq-item:nth-child(2) button::after {
    top: 12px;
  }
}
/* Small laptops: the two tiles stack, so nothing gets squeezed. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .calm-2 .pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Free gift tile (Shine, 6 Nov 2026) ----------
   The same glass as the tiles, sitting on top of the join panel. Its only motion is the site's one soft rise. */
.gift {
  display: grid;
  gap: 18px;
  margin: 0 var(--gutter);
  padding: 24px;
  border: 1px solid rgba(255, 201, 74, 0.22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}
.joined .gift {
  display: none;
}
html:not(.joined) .calm-2 .gift + .join {
  padding-top: 24px;
}
.gift-label {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(255, 220, 140, 0.8);
}
.gift-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4375rem;
  line-height: 1.15;
  color: #f7f1e6;
  text-wrap: balance;
}
.gift-line {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(236, 232, 244, 0.78);
}
.gift-side {
  display: grid;
  gap: 16px;
}
.gift-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gift-steps li {
  padding: 6px 8px;
  border: 1px solid rgba(255, 201, 74, 0.24);
  border-radius: 999px;
  background: rgba(255, 201, 74, 0.06);
  font-size: min(0.8125rem, 3.25vw);
  font-weight: 500;
  line-height: 1.2;
  color: #ffe2a0;
}
.gift .btn {
  width: 100%;
}
@media (min-width: 1024px) {
  .gift {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    column-gap: 72px;
    width: calc(100% - 2 * var(--edge));
    margin: 0 auto;
    padding: 32px 48px;
    border-radius: 26px;
  }
  .gift-title {
    font-size: 1.75rem;
  }
  .gift-line {
    font-size: 1rem;
  }
  .gift .btn {
    justify-self: start;
    width: auto;
  }
  .gift-steps {
    gap: 6px;
  }
  .gift-steps li {
    padding: 6px 12px;
    font-size: 0.8125rem;
  }
  html:not(.joined) .calm-2 .gift + .join {
    padding-top: 32px;
  }
}
@media (max-width: 1023px) {
  .gift-line-2 {
    display: block;
  }
}

/* The small labels on the tiles: easy to see at a glance (Shine, 6 Nov 2026). */
.calm-2 .pair .pill,
.calm-2 .gift-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.calm-2 .gift-label {
  margin-bottom: 8px;
}

/* Final review: one small gap between stacked tiles on computers; the joined link centered on phones. */
@media (min-width: 1024px) {
  html:not(.joined) .calm-2 .gift + .join {
    padding-top: 24px;
  }
  .calm-2 .need + .faq {
    margin-top: 24px;
  }
}
@media (max-width: 1023px) {
  .joined-again {
    margin-left: auto;
    margin-right: auto;
  }
}

/* An FAQ answer with more than one paragraph. */
.calm-2 .faq-a p:not(:last-child) {
  padding-bottom: 10px;
}

/* The tile's small line breaks at natural phrases on phones. */
@media (max-width: 1023px) {
  .ln-p {
    display: block;
  }
}

/* A three-line card headline keeps a clear gap above its text on computers. */
@media (min-width: 1024px) {
  .calm-2 .promise h3 {
    padding-bottom: 8px;
  }
}

/* ---------- The library explained (Shine's review, 6 Nov 2026) ----------
   Four quiet tiles under the small numbers: what it does, how it works, how it grows, what it depends on. */
.explain {
  display: grid;
  gap: 14px;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: 28px auto 0;
}
.explain-tile {
  padding: 24px 22px 24px;
  border: 1px solid rgba(255, 201, 74, 0.22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 50px -34px rgba(0, 0, 0, 0.9);
  /* 20 px of this covers the tile's rise, so it settles 32 px from the top. */
  scroll-margin-top: 52px;
}
.explain-tile h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: balance;
  color: #f7f1e6;
}
.explain-tile p,
.explain-tile li {
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
  color: rgba(236, 232, 244, 0.76);
}
.explain-tile p {
  margin: 0;
}
.explain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.explain-list li {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 201, 74, 0.16);
}
.explain-list li:last-child {
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .explain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
  }
  .explain-tile {
    padding: 30px 30px 30px;
  }
  .explain-tile h3 {
    font-size: 1.625rem;
  }
}

/* ---------- You're on the waitlist (Shine's review, 6 Nov 2026) ----------
   The line is the main point: big and alone, the paragraph under it, then two small buttons side by side. */
html.joined-fresh .hero-copy .hero-actions {
  display: none;
}
.joined-fresh .joined-now {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.joined-fresh .joined-now .joined-ring {
  width: 40px;
  height: 40px;
}
.joined-text {
  flex: none;
  width: 100%;
}
.joined-note .joined-head {
  margin: 0 0 10px;
}
.joined-note .joined-head strong {
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--gold);
}
.joined-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.joined-btn.btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .joined-btn.btn {
    flex: 0 1 200px;
  }
}
@media (min-width: 1024px) {
  .joined-fresh .joined-now {
    align-items: flex-start;
    text-align: left;
  }
  /* The ring's drawn edge sits inside its box, so the box steps left to line up with the words. */
  .joined-fresh .joined-now .joined-ring {
    margin-left: -4px;
  }
  .calm-2 .join-copy .joined-note .joined-head strong,
  .joined-note .joined-head strong {
    font-size: 2rem;
  }
  html.joined-fresh .calm-2 .hero-lined .hero-copy .joined-note {
    margin-top: 32px;
  }
  .hero-copy .joined-note .joined-head strong {
    font-size: 2.25rem;
  }
  .hero-copy .joined-text p:not(.joined-head) {
    max-width: 420px;
  }
  .joined-btns {
    justify-content: flex-start;
  }
  .joined-btn.btn {
    flex: 0 0 auto;
    padding: 10px 20px;
  }
}

/* ---------- Shine's website notes (6 Nov 2026) ----------
   First screen: one gold rule, then one section. The Trained on line sits on one line, slightly larger,
   with the small line right under it. */
@media (min-width: 1024px) {
  .calm-2 .hero-desk .callout {
    max-width: 480px;
    padding: 14px 0 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: rgba(236, 232, 244, 0.68);
  }
  .calm-2 .hero-desk .callout::after {
    display: none;
  }
  .calm-2 .hero-desk .callout strong {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
  }
  .calm-2 .hero-desk .hero-small {
    margin-top: 8px;
  }
}
/* The library line takes the same color as the words under the big numbers. On wider screens it is
   one quiet line. */
.calm-2 .library-head .lede {
  color: rgba(247, 241, 230, 0.78);
}
@media (min-width: 768px) {
  .calm-2 .library-head .lede {
    max-width: none;
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 300;
    font-synthesis: style;
    white-space: nowrap;
  }
  .calm-2 .library-head .lede .line {
    display: inline;
  }
}

/* ---------- Shine's phone notes (6 Nov 2026) ----------
   Website: the Trained on line is plain, like the line beside it. */
@media (min-width: 1024px) {
  .calm-2 .hero-desk .callout strong {
    font-weight: inherit;
    color: inherit;
  }
}
/* Phone tile: warm gold glass, and the two lines at one size. */
@media (max-width: 1023px) {
  .calm-2 .loaded-tile {
    background: radial-gradient(130% 62% at 50% 0%, rgba(255, 201, 74, 0.2), rgba(255, 201, 74, 0) 72%),
      linear-gradient(180deg, rgba(255, 201, 74, 0.1), rgba(255, 201, 74, 0.07));
    border-color: rgba(255, 201, 74, 0.44);
    box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.42), 0 30px 60px -36px rgba(0, 0, 0, 0.9),
      0 0 64px -22px rgba(255, 201, 74, 0.5);
  }
  .calm-2 .loaded-tile .hero-support,
  .calm-2 .loaded-tile .hero-small {
    border-image: linear-gradient(90deg, rgba(255, 201, 74, 0), rgba(255, 201, 74, 0.6), rgba(255, 201, 74, 0)) 1;
  }
  .calm-2 .loaded-tile .callout {
    font-family: var(--serif);
    font-size: clamp(1rem, 4.5vw, 1.1875rem);
    line-height: 1.3;
    color: #f7f1e6;
  }
  .calm-2 .loaded-tile .callout-1,
  .calm-2 .loaded-tile .callout-2 {
    display: block;
  }
  .calm-2 .loaded-tile .callout-2 {
    width: fit-content;
    margin: 2px auto 0;
    padding: 0 0.12em 0.08em 0.06em;
    font-style: italic;
    color: transparent;
    background: linear-gradient(100deg, #e3ae42, #ffcf62 50%, #e3ae42);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .calm-2 .loaded-tile .hero-support,
  .calm-2 .loaded-tile .hero-small {
    color: rgba(247, 241, 230, 0.72);
  }
}
/* Phone library line: two lines, smaller. */
@media (max-width: 767px) {
  .calm-2 .library-head .lede {
    max-width: none;
    font-size: clamp(0.75rem, 3.3vw, 0.875rem);
    line-height: 1.6;
    text-wrap: balance;
    font-style: italic;
    font-weight: 300;
    font-synthesis: style;
  }
  .calm-2 .library-head .lede .line {
    display: inline;
  }
}
/* Phones: the four tiles become one flow. A thin gold line runs down the side and draws itself as you
   scroll, and each point lights up when the line reaches it. Same type sizes as the rest of the phone page. */
.flow-rail {
  display: none;
}
@media (max-width: 767px) {
  .explain {
    position: relative;
    display: block;
    margin-top: 40px;
    padding-left: 34px;
  }
  .flow-rail {
    position: absolute;
    top: 12px;
    bottom: 0;
    left: 6px;
    display: block;
    width: 1px;
    background: rgba(255, 201, 74, 0.2);
    -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent);
    mask-image: linear-gradient(180deg, #000 84%, transparent);
  }
  .flow-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 201, 74, 0.35), rgba(255, 213, 107, 0.95));
    transform-origin: top;
  }
  .explain.flowing .flow-fill {
    transform: scaleY(var(--flow, 0));
  }
  .flow-bead {
    display: none;
  }
  .explain.flowing .flow-bead {
    position: absolute;
    top: -3px;
    left: -3px;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffe7ad;
    box-shadow: 0 0 14px 3px rgba(255, 201, 74, 0.6);
    transform: translateY(var(--flow-y, 0));
  }
  .explain.flowed .flow-bead {
    opacity: 0;
    transition: opacity 900ms var(--ease);
  }
  .explain-tile {
    position: relative;
    padding: 0 0 36px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .explain-tile:last-of-type {
    padding-bottom: 0;
  }
  .explain-tile::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -34px;
    width: 13px;
    height: 13px;
    border: 1px solid #ffc94a;
    border-radius: 50%;
    background: #ffc94a;
    box-shadow: 0 0 16px 3px rgba(255, 201, 74, 0.42);
    transition: background-color 900ms var(--ease), border-color 900ms var(--ease), box-shadow 900ms var(--ease);
  }
  .explain.flowing .explain-tile:not(.lit)::before {
    border-color: rgba(255, 201, 74, 0.4);
    background: var(--bg);
    box-shadow: none;
  }
  .explain-tile h3 {
    margin: 0 0 8px;
    font-size: clamp(1.1875rem, 5vw, 1.375rem);
  }
  .explain-tile p,
  .explain-tile li {
    font-size: 0.875rem;
    color: rgba(236, 232, 244, 0.72);
  }
  .explain-list li,
  .explain-list li:last-child {
    padding: 0;
    border-top: 0;
  }
  .explain-list li + li {
    margin-top: 11px;
  }
}
/* Website tiles: the same type as the promise cards. */
@media (min-width: 768px) {
  .explain-tile h3 {
    font-size: 1.4375rem;
  }
  .explain-tile p,
  .explain-tile li {
    font-size: 0.9375rem;
    color: rgba(236, 232, 244, 0.72);
  }
}

/* Website, just after joining: the same calm moment as the phone. The selling lines step aside, and the
   message sits alone in the gold tile, centered. */
@media (min-width: 1024px) {
  html.joined-fresh .calm-2 .hero-lined .hero-desk {
    display: none;
  }
  html.joined-fresh .calm-2 .hero-lined .hero-copy .joined-note {
    width: min(100%, 500px);
    margin-top: 28px;
    padding: 32px 36px 34px;
    border: 1px solid rgba(255, 201, 74, 0.44);
    border-radius: 24px;
    background: radial-gradient(130% 62% at 50% 0%, rgba(255, 201, 74, 0.2), rgba(255, 201, 74, 0) 72%),
      linear-gradient(180deg, rgba(255, 201, 74, 0.1), rgba(255, 201, 74, 0.07));
    box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.42), 0 30px 60px -36px rgba(0, 0, 0, 0.9),
      0 0 64px -22px rgba(255, 201, 74, 0.5);
  }
  .joined-fresh .hero-copy .joined-now {
    align-items: center;
    text-align: center;
  }
  .joined-fresh .hero-copy .joined-now .joined-ring {
    margin-left: 0;
  }
  .hero-copy .joined-note .joined-head strong {
    font-size: 1.875rem;
  }
  .hero-copy .joined-text p:not(.joined-head) {
    max-width: none;
    color: rgba(247, 241, 230, 0.78);
  }
  .hero-copy .joined-btns {
    justify-content: center;
  }
}
/* Small laptops: the tile stays clear of the side reel. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html.joined-fresh .calm-2 .hero-lined .hero-copy .joined-note {
    width: 440px;
    padding: 28px 28px 30px;
  }
}
/* A link inside an FAQ answer. */
.faq-a p a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}