/* Scene 1, the hero: the words, then the carousel. */

.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top) + 26px) var(--gutter) 0;
  overflow: hidden;
  isolation: isolate;
}
.hero .glow {
  z-index: -1;
}

/* ---------- The words ---------- */
/* Shine's pick (5 Nov 2026), "Reel first": on a phone the label, the one-line headline, a short gold rule
   and the second line in italic, then the reels, the buttons and the launch-price line; the supporting
   line, the callout and the small line follow. On desktop the words sit on the left in reading order
   (supporting line, buttons, launch-price line, callout, small line) and the reels on the right. */

.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.hero-main,
.hero-side {
  display: contents;
}

/* The label: fine tracked text between two gold hairlines. */
.hero-copy .pill {
  height: auto;
  margin-bottom: 20px;
  padding: 0;
  gap: 14px;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  white-space: nowrap;
  color: rgba(255, 220, 140, 0.8);
}
.hero-copy .pill::before,
.hero-copy .pill::after {
  content: "";
  width: 28px;
  height: 1px;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(90deg, rgba(255, 201, 74, 0), rgba(255, 201, 74, 0.75));
}
.hero-copy .pill::after {
  transform: scaleX(-1);
}

/* The headline: warm white on one line, a soft gold light behind it. */
.hero-copy .display {
  position: relative;
  font-size: clamp(1.9rem, 8.6vw, 2.25rem);
  line-height: 1.05;
  color: #f7f1e6;
  text-shadow: 0 0 40px rgba(255, 214, 150, 0.12);
}
.hero-copy .display::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -20%;
  background: radial-gradient(closest-side, rgba(255, 190, 80, 0.2), rgba(255, 190, 80, 0));
  pointer-events: none;
}
.hero-copy .display em.key {
  text-shadow: none;
}
.br-key {
  display: none;
}
/* The second line in italic, under a short gold rule. */
.hero-sub {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 4.7vw, 1.2rem);
  line-height: 1.2;
  color: rgba(247, 241, 230, 0.82);
}
.hero-sub::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 10px auto 9px;
  background: rgba(255, 201, 74, 0.7);
}
.hero-copy .hero-support {
  margin-top: 18px;
  max-width: 33ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(236, 232, 244, 0.68);
}
.hero-copy .hero-support strong {
  color: #fff;
}
/* The callout: an open block between two thin gold rules, its first sentence in bold ivory. */
.hero-copy .callout {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-top: 24px;
  padding: 13px 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(236, 232, 244, 0.72);
}
.hero-copy .callout::before,
.hero-copy .callout::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 201, 74, 0), rgba(255, 201, 74, 0.6) 30%, rgba(255, 201, 74, 0.6) 70%, rgba(255, 201, 74, 0));
}
.hero-copy .callout::before {
  top: 0;
}
.hero-copy .callout::after {
  bottom: 0;
}
.hero-copy .callout strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #f7f1e6;
}
.hero-copy .hero-small {
  margin-top: 12px;
  max-width: 36ch;
  text-wrap: balance;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(236, 232, 244, 0.5);
}
.hero-actions {
  display: flex;
  gap: 10px;
}
.hero-copy .hero-actions {
  margin-top: 22px;
}
.hero-actions .btn {
  padding: 0 20px;
}
/* The waitlist benefit, highlighted: gold text with a glowing gold dot (no border, Shine's pick). */
.hero-copy .hero-under {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #ffd98a;
  text-wrap: balance;
}
.hero-copy .hero-under::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 201, 74, 0.9);
}

/* Phones and tablets: reel first. The words' wrapper steps aside so the reels can sit between them. */
@media (max-width: 1023px) {
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }
  .hero-copy {
    display: contents;
  }
  .hero-copy .pill {
    order: 1;
    margin-bottom: 14px;
  }
  .hero-copy .display {
    order: 2;
  }
  .hero-copy .hero-sub {
    order: 3;
  }
  .hero .carousel {
    order: 4;
    width: 100%;
    margin-top: 14px;
    padding-bottom: 30px;
  }
  .hero .carousel-stage {
    height: min(82vw, 330px);
  }
  .hero .carousel-card {
    width: min(44vw, 176px);
    margin-left: calc(min(44vw, 176px) / -2);
  }
  .hero-copy .hero-actions {
    order: 5;
    margin-top: 0;
  }
  .hero-copy .hero-under {
    order: 6;
    gap: 8px;
    font-size: clamp(0.6875rem, 3.2vw, 0.8125rem);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .hero-copy .hero-support {
    order: 7;
    margin-top: 32px;
  }
  .hero-copy .callout {
    order: 8;
  }
  .hero-copy .hero-small {
    order: 9;
    margin-bottom: 8px;
  }
}

/* Small phones (360 px): a tighter label so it stays on one line, buttons that keep their gutter. */
@media (max-width: 400px) {
  .hero-actions {
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
  .hero-actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 14px;
    font-size: 0.875rem;
  }
}
/* Phones: smaller buttons and chip, tighter spacing, so the reels come into view sooner. */
@media (max-width: 767px) {
  .hero-copy .hero-support {
    margin-top: 14px;
  }
  .hero-actions .btn {
    min-height: 44px;
    padding: 0 17px;
    font-size: 0.84375rem;
  }
  .hero-copy .hero-under {
    margin-top: 10px;
    gap: 7px;
    font-size: clamp(0.625rem, 2.9vw, 0.71875rem);
  }
  .hero-copy .hero-under::before {
    width: 5px;
    height: 5px;
  }
  .hero-copy .callout {
    margin-top: 16px;
    padding: 10px 0 9px;
    font-size: 0.8125rem;
  }
  .hero-copy .callout strong {
    margin-bottom: 2px;
    font-size: 0.9375rem;
  }
  .hero-copy .hero-small {
    margin-top: 10px;
    max-width: 30ch;
    font-size: 0.78125rem;
    color: rgba(236, 232, 244, 0.6);
  }
}
@media (max-width: 380px) {
  .hero-copy .pill {
    gap: 10px;
    letter-spacing: 0.16em;
  }
  .hero-copy .pill::before,
  .hero-copy .pill::after {
    width: 14px;
  }
}

/* A soft floor shadow under the hero phones, so they sit in the light like objects. */
.lit::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -34px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: -1;
}

/* Desktop: side by side, the words on the left and the reels on the right. */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    align-items: center;
    padding-top: calc(env(safe-area-inset-top) + 40px);
    padding-bottom: 40px;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
  }
  .hero-inner .hero-copy {
    align-items: flex-start;
    text-align: left;
    margin: 0;
  }
  .hero-copy .pill {
    font-size: 0.75rem;
  }
  .hero-copy .pill::before {
    display: none;
  }
  .hero-copy .display {
    font-size: clamp(3rem, 4vw, 3.6rem);
  }
  .hero-sub {
    font-size: 1.625rem;
  }
  .hero-sub::before {
    margin: 14px 0 12px;
  }
  .hero-copy .hero-support {
    max-width: 460px;
    font-size: 1.0625rem;
  }
  .hero-actions .btn {
    padding: 0 28px;
  }
  .hero-copy .hero-small {
    max-width: 34em;
    font-size: 0.8125rem;
  }
  .hero-copy .hero-under {
    font-size: 0.875rem;
  }
  .hero-copy .callout {
    max-width: 480px;
    text-wrap: wrap;
    font-size: 0.9375rem;
  }
  .hero-copy .callout::before,
  .hero-copy .callout::after {
    background: linear-gradient(90deg, rgba(255, 201, 74, 0.6), rgba(255, 201, 74, 0.6) 60%, rgba(255, 201, 74, 0));
  }
}

/* ---------- The Carousel ---------- */

.carousel {
  /* How long one reel takes to glide into the front: an even ease in and out, so the turn feels smooth. */
  --glide: 1000ms;
  --glide-ease: cubic-bezier(0.45, 0, 0.2, 1);
  position: relative;
  margin: 28px auto 0;
  padding-bottom: 48px;
}
.carousel .glow {
  width: 680px;
  height: 680px;
  background: radial-gradient(closest-side, rgba(212, 150, 60, 0.3), rgba(212, 150, 60, 0.12) 50%, rgba(212, 150, 60, 0) 100%);
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
}
.carousel-stage {
  position: relative;
  height: min(118vw, 470px);
  perspective: 1400px;
}
.carousel-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(52vw, 236px);
  margin-left: calc(min(52vw, 236px) / -2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  /* The layers swap halfway through the glide, so a side reel never jumps over the front reel's face. */
  transition: transform var(--glide) var(--glide-ease), opacity var(--glide) var(--glide-ease), z-index 0ms linear calc(var(--glide) / 2);
  -webkit-tap-highlight-color: transparent;
}
/* A warm hairline edge and top highlight, so a dark reel never melts into the dark page. */
.carousel-card.phone {
  box-shadow: inset 0 0 0 1px rgba(255, 228, 180, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(212, 150, 60, 0.35);
}
.carousel-card .shade {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: #07060b;
  pointer-events: none;
  transition: opacity var(--glide) var(--glide-ease);
}
.carousel-card[data-slot="0"] {
  z-index: 3;
  transform: translate3d(0, 0, 0) scale(1);
  cursor: default;
}
.carousel-card[data-slot="0"] .shade {
  opacity: 0;
}
.carousel-card[data-slot="1"] {
  z-index: 2;
  transform: translate3d(64%, 11%, 0) rotateY(-26deg) scale(0.7);
}
.carousel-card[data-slot="3"] {
  z-index: 2;
  transform: translate3d(-64%, 11%, 0) rotateY(26deg) scale(0.7);
}
.carousel-card[data-slot="1"] .shade,
.carousel-card[data-slot="3"] .shade {
  opacity: 0.7;
}
.carousel-card[data-slot="2"] {
  z-index: 1;
  transform: translate3d(0, 2%, 0) scale(0.5);
  opacity: 0.45;
}
.carousel-card[data-slot="2"] .shade {
  opacity: 0.8;
}
.carousel-label {
  position: relative;
  height: 22px;
  margin-top: 16px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}
.carousel-label span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.carousel-label span.on {
  opacity: 1;
}
.carousel-label em {
  font-family: var(--serif);
  font-size: 1.08em;
  color: rgba(255, 255, 255, 0.9);
}
/* A thin gold line under the name fills over each turn: quietly says the reels move on their own. */
.carousel-progress {
  width: 56px;
  height: 1px;
  margin: 10px auto 0;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.carousel-progress i {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: 0 50%;
  animation: turn-fill 8000ms linear both;
}
.carousel.paused .carousel-progress i {
  animation-play-state: paused;
}
@keyframes turn-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-progress {
    display: none;
  }
}

@media (min-width: 1024px) {
  .carousel {
    margin: 0;
    padding: 0;
  }
  .carousel .glow {
    width: 980px;
    height: 980px;
  }
  .carousel-stage {
    height: min(66vh, 600px);
  }
  .carousel-card {
    width: clamp(240px, 20vw, 300px);
    margin-left: calc(clamp(240px, 20vw, 300px) / -2);
  }
  .carousel-card[data-slot="1"] {
    transform: translate3d(84%, 10%, 0) rotateY(-28deg) scale(0.7);
  }
  .carousel-card[data-slot="3"] {
    transform: translate3d(-84%, 10%, 0) rotateY(28deg) scale(0.7);
  }
}

/* ---------- Version 2: words first ----------
   The hero holds only the words and the buttons; the reels open the next scene ("Yes, AI edited these"). */
.hero-words {
  min-height: 0;
  overflow: visible;
  overflow-x: clip;
  padding-top: calc(env(safe-area-inset-top) + 52px);
  padding-bottom: 0;
}
.hero-words > .glow {
  width: min(900px, 170vw);
  height: 640px;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}
@media (max-width: 1023px) {
  .hero-words .hero-copy .pill {
    margin-bottom: 18px;
  }
  .hero-words .hero-copy .hero-support {
    order: 4;
    margin-top: 18px;
  }
  .hero-words .hero-copy .hero-actions {
    order: 5;
    margin-top: 26px;
  }
  .hero-words .hero-copy .hero-under {
    order: 6;
  }
  .hero-words .hero-copy .callout {
    order: 7;
    margin-top: 30px;
  }
  .hero-words .hero-copy .hero-small {
    order: 8;
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .hero-words {
    min-height: 84svh;
    padding-top: calc(env(safe-area-inset-top) + 72px);
    padding-bottom: 24px;
  }
  .hero-words .hero-inner {
    display: block;
    max-width: 760px;
  }
  .hero-words .hero-inner .hero-copy {
    align-items: center;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }
  .hero-words .hero-copy .pill::before {
    display: block;
  }
  .hero-words .hero-copy .display {
    font-size: clamp(4.25rem, 6vw, 5.5rem);
  }
  .hero-words .hero-sub {
    font-size: 1.75rem;
  }
  .hero-words .hero-sub::before {
    margin: 16px auto 14px;
  }
  .hero-words .hero-copy .hero-support {
    margin-top: 22px;
    max-width: 520px;
    font-size: 1.125rem;
  }
  .hero-words .hero-copy .hero-actions {
    margin-top: 32px;
  }
  .hero-words .hero-copy .callout {
    margin-top: 36px;
  }
  .hero-words .hero-copy .callout::before,
  .hero-words .hero-copy .callout::after {
    background: linear-gradient(90deg, rgba(255, 201, 74, 0), rgba(255, 201, 74, 0.6) 30%, rgba(255, 201, 74, 0.6) 70%, rgba(255, 201, 74, 0));
  }
  .hero-words .hero-copy .hero-small {
    max-width: 40em;
  }
}

/* "Made by a creator with 100M+ lifetime reel views." in the hero (Shine: somewhere important).
   Phone, reels first: right under the reels, above the buttons. Words first and desktop: under the second line. */
.hero-copy .hero-maker {
  margin-top: 14px;
  font-size: 0.875rem;
  color: rgba(236, 232, 244, 0.78);
}
@media (max-width: 1023px) {
  .hero-carousel .hero-copy .hero-maker {
    order: 5;
    margin: -8px 0 16px;
  }
  .hero-words .hero-copy .hero-maker {
    order: 3;
    margin-top: 12px;
  }
}
@media (min-width: 1024px) {
  .hero-copy .hero-maker {
    margin-top: 16px;
    font-size: 0.9375rem;
    text-align: left;
    max-width: none;
  }
  .hero-words .hero-copy .hero-maker {
    text-align: center;
  }
}

/* ---------- Version 3: reels first ----------
   The page opens on the proof: "Yes, AI edited these." over the reels, one gold button and the maker line.
   "Meet your AI editor" follows as the second scene, words only. */
@media (max-width: 1023px) {
  .hero-reels .hero-copy .hero-support {
    order: 3;
    margin-top: 12px;
    max-width: 30ch;
  }
  .hero-reels .hero-copy .hero-actions {
    margin-top: 2px;
  }
  .hero-reels .hero-copy .hero-maker {
    order: 7;
    margin: 16px 0 8px;
  }
  /* The hero ends with its words, so the gold line into the next scene peeks in at the bottom of the screen. */
  .hero-reels {
    --reel-w: min(56vw, calc(clamp(335px, 46svh, 400px) * 9 / 16));
    min-height: 0;
    padding-bottom: 4px;
  }
  .hero-reels .carousel {
    margin-top: 10px;
    padding-bottom: 26px;
  }
  .hero-reels .carousel-stage {
    height: calc(var(--reel-w) * 16 / 9 + 12px);
  }
  .hero-reels .carousel-card {
    width: var(--reel-w);
    margin-left: calc(var(--reel-w) / -2);
  }
  /* Larger reels: the side ones sit closer in, so they stay whole on the screen. */
  .hero-reels .carousel-card[data-slot="1"] {
    transform: translate3d(54%, 11%, 0) rotateY(-26deg) scale(0.7);
  }
  .hero-reels .carousel-card[data-slot="3"] {
    transform: translate3d(-54%, 11%, 0) rotateY(26deg) scale(0.7);
  }
}
.hero-reels .display {
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .hero-reels {
    min-height: 84svh;
  }
  .hero-reels .hero-copy .display {
    font-size: clamp(3.1rem, 4.4vw, 4rem);
  }
  .hero-reels .hero-copy .hero-support {
    margin-top: 22px;
    max-width: 30em;
  }
  .hero-reels .hero-copy .hero-actions {
    margin-top: 32px;
  }
}

.meet {
  position: relative;
  isolation: isolate;
}
.meet.hero-words {
  padding: 0 var(--gutter) 0;
}
.meet .hero-copy .hero-small {
  margin-top: 28px;
}
.meet .made-thread {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .meet.hero-words {
    min-height: 0;
    padding: 0 var(--gutter) 24px;
  }
  .meet.hero-words .hero-copy .display {
    font-size: 3.25rem;
  }
}

/* Versions 3 and 4: the light behind the headline is a soft round wash, and the reels' glow fades out
   on its own instead of stopping at the bottom of the hero. */
.hero-reels .hero-copy .display::before,
.hero-lined .hero-copy .display::before,
.meet .hero-copy .display::before {
  inset: -90% -15%;
  opacity: 0.55;
}
.hero-reels,
.hero-lined {
  overflow: visible;
  overflow-x: clip;
}

/* ---------- Version 4: one line above the reels ----------
   Version 1's hero with "Yes, AI edited these." naming the reels, so they read as results.
   "It arrives fully loaded" and the small line leave the hero for their own tile below. */
.reels-line {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 4.7vw, 1.2rem);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #f7f1e6;
}
.reels-col {
  min-width: 0;
  width: 100%;
}
@media (max-width: 1023px) {
  .hero-lined {
    min-height: 0;
  }
  /* The first screen, top to bottom: one large line, two equal lines, the reels, the buttons and the
     launch-price line, so the way in shows without scrolling, even in Instagram's shorter window. */
  .hero-lined {
    --reel-w: min(46vw, calc(clamp(304px, 38svh, 340px) * 9 / 16));
    padding-top: calc(env(safe-area-inset-top) + 18px);
  }
  .hero-lined .hero-copy .pill {
    margin-bottom: 10px;
  }
  .hero-lined .hero-sub {
    margin-top: 6px;
  }
  .hero-lined .hero-sub::before {
    display: none;
  }
  .reels-col {
    order: 4;
    margin-top: 12px;
  }
  .hero-lined .carousel {
    margin-top: 8px;
    padding-bottom: 20px;
  }
  .hero-lined .carousel-stage {
    height: calc(var(--reel-w) * 16 / 9 + 8px);
  }
  .hero-lined .carousel-card {
    width: var(--reel-w);
    margin-left: calc(var(--reel-w) / -2);
  }
  /* Above the reels' floor shadow, so the shadow never dims the gold button. The gold button is the
     wider of the two, and the pair lines up with the outer edges of the reels. */
  .hero-lined .hero-copy .hero-actions {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 8px;
    width: min(332px, 100%);
  }
  .hero-lined .hero-actions .btn {
    padding: 0 10px;
  }
  .hero-lined .hero-copy .hero-under {
    font-size: clamp(0.75rem, 3.3vw, 0.8125rem);
  }
  .hero-lined.hero-carousel .hero-copy .hero-maker {
    order: 7;
    margin: 16px 0 0;
    max-width: none;
    white-space: nowrap;
    font-size: clamp(0.75rem, 3.35vw, 0.8125rem);
  }
  .hero-lined .hero-copy .hero-support {
    order: 8;
    margin: 12px 0 4px;
  }
}
@media (min-width: 1024px) {
  .reels-line {
    margin-bottom: 26px;
    font-size: 1.625rem;
  }
  .hero-lined {
    min-height: 88svh;
  }
  .hero-lined .hero-sub::before {
    display: none;
  }
  .hero-lined .hero-sub {
    margin-top: 10px;
  }
  .hero-lined .carousel-stage {
    height: min(62vh, 560px);
  }
}

.loaded {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 44px var(--gutter) 0;
}
/* A soft gold light behind the glass, so the tile reads as glass and not as a grey box. */
.loaded::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(760px, 130vw);
  height: 420px;
  transform: translate(-50%, -44%);
  background: radial-gradient(closest-side, rgba(212, 150, 60, 0.2), rgba(212, 150, 60, 0));
  pointer-events: none;
}
.loaded-tile {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 24px 28px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 201, 74, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -36px rgba(0, 0, 0, 0.9),
    0 0 50px -26px rgba(255, 201, 74, 0.35);
}
.loaded-tile .callout {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(236, 232, 244, 0.76);
}
.loaded-tile .callout strong {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.15;
  color: #f7f1e6;
}
.loaded-tile .hero-small {
  max-width: 36ch;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 201, 74, 0.2);
  font-size: 0.8125rem;
  color: rgba(236, 232, 244, 0.6);
}
@media (min-width: 1024px) {
  .loaded {
    padding-top: 24px;
  }
  .loaded-tile {
    max-width: 640px;
    padding: 40px 48px 36px;
  }
  .loaded-tile .callout {
    font-size: 1.0625rem;
  }
  .loaded-tile .callout strong {
    font-size: 2.125rem;
  }
  .loaded-tile .hero-small {
    max-width: 56ch;
    font-size: 0.875rem;
  }
}

/* COPY allows two lines in a row with a gold word (Your, You), so "these" stays ivory italic here. */
.reels-line em.key {
  background: none;
  color: #f7f1e6;
  -webkit-text-fill-color: #f7f1e6;
}
/* The two lines under the headline match: same size, same ivory. */
.hero-lined .hero-sub {
  color: #f7f1e6;
}

/* ---------- Version 4, two forms for the top lines (Shine, 5 Nov 2026) ----------
   A: a slightly larger headline, the second line in small clean text, a quiet line above the reels.
   B: the second line a little smaller, the line above the reels between two gold hairlines. */
.top-a .hero-lined .hero-sub {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: rgba(236, 232, 244, 0.72);
}
.top-a .hero-lined .hero-sub em.key {
  font-size: 1.15em;
}
.top-a .reels-line {
  font-size: 1.125rem;
}
.top-b .hero-lined .hero-sub {
  font-size: 1rem;
}
.top-b .reels-line {
  font-size: 1.0625rem;
}
.top-b .reels-line::before,
.top-b .reels-line::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 1px;
  margin: 0 14px;
  background: linear-gradient(90deg, rgba(255, 201, 74, 0), rgba(255, 201, 74, 0.75));
}
.top-b .reels-line::after {
  transform: scaleX(-1);
}
@media (max-width: 1023px) {
  .top-a .hero-lined .hero-copy .display {
    font-size: clamp(2rem, 9.6vw, 2.375rem);
  }
  .top-a .hero-lined .hero-sub,
  .top-b .hero-lined .hero-sub {
    margin-top: 8px;
  }
  .top-a .reels-col {
    margin-top: 18px;
  }
  .top-b .reels-col {
    margin-top: 18px;
  }
  .top-a .hero-lined .carousel,
  .top-b .hero-lined .carousel {
    margin-top: 10px;
  }
}
@media (max-width: 380px) {
  .top-b .reels-line::before,
  .top-b .reels-line::after {
    width: 30px;
    margin: 0 10px;
  }
}
@media (min-width: 1024px) {
  .top-a .hero-lined .hero-sub {
    font-size: 1.125rem;
  }
  .top-a .reels-line {
    font-size: 1.25rem;
  }
  .top-b .hero-lined .hero-sub {
    font-size: 1.375rem;
  }
  .top-b .reels-line {
    font-size: 1.25rem;
  }
}

/* ---------- Version A, lighter first screen (Shine, 5 Nov 2026) ----------
   Option 2: more room around the introduction, larger reels; the supporting line moves into the tile.
   Option 3: everything stays, the last two lines smaller and softer. Phones only; desktop stays as A. */
.loaded-tile .hero-support {
  max-width: 30ch;
  margin: 0 0 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 201, 74, 0.2);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(236, 232, 244, 0.76);
}
.loaded-tile .hero-support strong {
  color: #fff;
}
@media (max-width: 1023px) {
  .calm-2 .hero-lined {
    /* The reels are one fixed size from the screen width only. Never tie them to the window height:
       Instagram's window changes height, and the reels then shrink. Shine's phone is 402 px wide. */
    --reel-w: min(54vw, 225px);
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: calc(env(safe-area-inset-top) + clamp(24px, 5svh, 46px));
  }
  .calm-2 .hero-lined .hero-inner {
    width: 100%;
  }
  .calm-2 .hero-lined .hero-copy .pill {
    margin-bottom: 18px;
  }
  .calm-2.top-a .hero-lined .hero-sub {
    margin-top: 10px;
  }
  .calm-2.top-a .reels-col {
    margin-top: clamp(22px, 4svh, 38px);
  }
  .calm-2 .hero-lined .carousel-card[data-slot="1"] {
    transform: translate3d(54%, 11%, 0) rotateY(-26deg) scale(0.7);
  }
  .calm-2 .hero-lined .carousel-card[data-slot="3"] {
    transform: translate3d(-54%, 11%, 0) rotateY(26deg) scale(0.7);
  }
  .calm-2 .hero-lined .hero-copy .hero-under {
    margin-top: 14px;
  }
  .calm-2 .hero-lined.hero-carousel .hero-copy .hero-maker {
    margin-top: 18px;
  }

  .calm-3 .hero-lined {
    --reel-w: min(46vw, calc(clamp(296px, 38svh, 330px) * 9 / 16));
    padding-top: calc(env(safe-area-inset-top) + 28px);
  }
  .calm-3 .hero-lined .hero-copy .pill {
    margin-bottom: 16px;
  }
  .calm-3.top-a .reels-col {
    margin-top: 26px;
  }
  .calm-3 .hero-lined.hero-carousel .hero-copy .hero-maker {
    margin-top: 22px;
    font-size: 0.75rem;
    color: rgba(236, 232, 244, 0.52);
  }
  .calm-3 .hero-lined.hero-carousel .hero-copy .hero-maker strong {
    font-size: 1.2em;
    color: rgba(255, 201, 74, 0.8);
  }
  .calm-3 .hero-lined .hero-copy .hero-support {
    margin: 8px 0 0;
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.55;
    color: rgba(236, 232, 244, 0.46);
  }
  .calm-3 .hero-lined .hero-copy .hero-support strong {
    font-weight: 500;
    color: rgba(236, 232, 244, 0.62);
  }
}

/* "Keep scrolling to know more": one plain small line, in the place it has in Shine's screenshot.
   No arrow, no effect; the bottom padding keeps the space the arrow had, so nothing above it moves. */
.more-hint {
  z-index: 3;
  align-self: center;
  justify-self: center;
  margin: auto 0 0;
  padding: 10px 14px 20px;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: rgba(236, 232, 244, 0.6);
}
@media (min-width: 1024px) {
  .more-hint {
    margin-top: 12px;
    font-size: 0.8125rem;
  }
}
/* Taller windows: the extra space splits evenly above and below instead of opening a gap over the line. */
@media (max-width: 1023px) and (min-height: 800px) {
  .calm-2 .hero-lined .hero-inner {
    margin-block: auto;
  }
  .more-hint {
    margin-top: 0;
  }
}

/* ---------- After sign-up: the joined message ----------
   Takes the place of the waitlist line, with the thin gold ring from the old You're in page. */
.joined-note {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(236, 232, 244, 0.76);
}
.joined-note strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.2;
  color: #ffd98a;
}
.joined-ring {
  flex: none;
  width: 30px;
  height: 30px;
  overflow: visible;
}
.joined-ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  animation: ring-draw 1600ms cubic-bezier(0.45, 0, 0.2, 1) 300ms forwards;
}
@keyframes ring-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.joined .joined-note {
  display: block;
}
.joined:not(.rejoin) .sheet {
  display: none;
}
.joined-ring path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tick-draw 700ms cubic-bezier(0.45, 0, 0.2, 1) 1500ms forwards;
}
@keyframes tick-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .joined-ring path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.joined-now,
.joined-back {
  display: none;
}
.joined-fresh .joined-now {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.joined:not(.joined-fresh) .joined-back {
  display: block;
}
.joined-text {
  min-width: 0;
  flex: 1;
}
.joined-text p {
  margin: 0;
  text-wrap: pretty;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(236, 232, 244, 0.82);
}
.joined-back {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #ffd98a;
}
.joined-again {
  display: block;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: rgba(236, 232, 244, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.joined .hero-under,
.joined .join-copy .lede,
.joined .join-copy .fine,
.joined [data-join],
.joined .scene-cta {
  display: none;
}
.joined .hero-copy .hero-actions {
  display: flex;
  justify-content: center;
}
.hero-copy .joined-note {
  order: 6;
  margin-top: 12px;
}
.join-copy .joined-note {
  justify-content: center;
  margin: 14px auto 22px;
}
@media (prefers-reduced-motion: reduce) {
  .joined-ring circle {
    animation: none;
    stroke-dashoffset: 0;
  }
}