/* ================= Tokens ================= */
:root {
  --bg: #ffffff;
  --bg-raised: #f5f5f7;
  --ink: #1d1d1f;
  --ink-60: rgba(29, 29, 31, 0.64);
  --ink-40: rgba(29, 29, 31, 0.54);
  --gold: #a5782e;
  --gold-bright: #b8862f;
  --gold-deep: #8a6a30;
  --cream: #f4f1e9;
  --cream-ink: #1d1b16;
  --cream-ink-60: rgba(29, 27, 22, 0.62);
  --hairline: rgba(29, 29, 31, 0.1);
  --radius-lg: 22px;
  --radius-md: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font: 400 100%/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: rgba(176, 138, 69, 0.35); }

/* ================= Type scale ================= */
.display {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
  font-weight: 640;
}
.headline {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-weight: 620;
}
.display em, .headline em {
  font-style: normal;
  color: var(--gold-bright);
}
.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.section-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 40em;
  margin: 1.4rem auto 0;
}
.section-head { text-align: center; padding: 0 24px; max-width: 62rem; margin: 0 auto; }

/* ================= Buttons ================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 120ms ease-out, background 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 18px -8px rgba(176, 138, 69, 0.45);
}
.btn-gold:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 10px 30px -8px rgba(211, 171, 95, 0.65); }
.btn-ghost {
  background: rgba(29, 29, 31, 0.05);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.btn-ghost:hover { background: rgba(29, 29, 31, 0.09); }
.btn-sm { font-size: 0.92rem; padding: 0.62em 1.3em; }
.btn-wide { justify-content: center; width: 100%; }
.link-quiet { color: var(--ink-60); font-size: 0.95rem; font-weight: 500; }
.link-quiet:hover { color: var(--ink); }

/* ================= Header ================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background 300ms ease, box-shadow 300ms ease;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 var(--hairline);
}
.header-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.header-logo { display: inline-flex; align-items: flex-start; gap: 2px; }
.header-logo img { height: 50px; width: auto; }
.logo-tm { font-size: 0.55rem; font-weight: 600; color: var(--ink-40); line-height: 1; }
sup.tm { font-size: 0.55em; font-weight: 600; }
.header-nav { display: flex; gap: 1.6rem; margin: 0 auto; }
.header-nav a {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-60);
  transition: color 160ms ease;
}
.header-nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 1.1rem; }

/* ================= Hero ================= */
.hero {
  padding: clamp(7rem, 14vh, 10rem) 24px 0;
  text-align: center;
  position: relative;
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 80vh;
  background: radial-gradient(50% 60% at 50% 20%, rgba(176, 138, 69, 0.16), transparent 70%);
  pointer-events: none;
}
.hero-copy { position: relative; max-width: 60rem; margin: 0 auto; }
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-60);
  max-width: 44em;
  margin: 1.6rem auto 0;
}
.hero-ctas {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.hero-note { margin-top: 1.2rem; font-size: 0.88rem; color: var(--ink-40); }

.hero-stage {
  perspective: 1200px;
  max-width: 74rem;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  position: relative;
}
.hero-tilt {
  transform: rotateX(16deg) scale(0.94);
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}
.browser-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid rgba(29, 29, 31, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 40px 90px -30px rgba(0, 0, 0, 0.25),
    0 90px 160px -40px rgba(176, 138, 69, 0.12);
}
.browser-chrome {
  display: flex;
  gap: 7px;
  padding: 13px 16px;
  background: rgba(29, 29, 31, 0.04);
  border-bottom: 1px solid var(--hairline);
}
.browser-chrome span {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(29, 29, 31, 0.15);
}
/* ================= Trust ================= */
.trust { padding: clamp(4.5rem, 9vh, 7rem) 24px; text-align: center; }
.trust-line { font-size: 0.95rem; color: var(--ink-40); margin-bottom: 1.8rem; }
.logo-conveyor {
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 55s linear infinite;
}
.logo-set {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  padding-right: 4.5rem;
}
.logo-set img {
  height: 32px;
  width: auto;
  opacity: 0.55;
}
.logo-bhg {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  color: rgba(29, 29, 31, 0.5);
  white-space: nowrap;
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
}

/* ================= Scrollytelling ================= */
.autopilot { padding: clamp(3rem, 8vh, 6rem) 0 clamp(5rem, 12vh, 9rem); }

/* ================= Collections (light band) ================= */
.collections {
  background: var(--cream);
  color: var(--cream-ink);
  padding: clamp(5rem, 12vh, 9rem) 0;
  overflow: clip;
}
.collections .eyebrow { color: var(--gold-deep); }
.collections .section-sub { color: var(--cream-ink-60); }

/* ================= Listing studio section ================= */
.listings { padding: clamp(5rem, 12vh, 9rem) 24px; }

/* ================= Millie ================= */
.millie {
  background: var(--bg-raised);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(5rem, 12vh, 9rem) 24px;
}
.millie .section-sub { max-width: 44em; }
.millie-points {
  max-width: 62rem;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 3rem;
  text-align: left;
}
.millie-points li { color: var(--ink-60); font-size: 0.98rem; }
.millie-points strong { color: var(--ink); font-weight: 620; }
.millie-stage {
  max-width: 74rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
}

/* ================= Channels ================= */
.channels { padding: clamp(5rem, 12vh, 8rem) 24px; text-align: center; }
.channel-row {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.4rem;
  flex-wrap: wrap;
}
.channel-row li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.05rem;
  font-weight: 550;
  color: var(--ink-60);
  transition: color 200ms ease;
}
.channel-row li:hover { color: var(--ink); }
.channel-row svg { width: 26px; height: 26px; color: var(--gold-bright); }

/* ================= Audience ================= */
.audience { padding: 0 24px clamp(5rem, 12vh, 9rem); text-align: center; }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 66rem;
  margin: 2.6rem auto 0;
}
.audience-card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2rem 1.6rem;
  text-align: left;
}
.audience-card h3 {
  font-weight: 620;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  color: var(--gold-bright);
  margin-bottom: 0.5rem;
}
.audience-card p { color: var(--ink-60); font-size: 0.96rem; }

/* ================= Pricing ================= */
.pricing { padding: clamp(5rem, 11vh, 8rem) 24px clamp(5rem, 12vh, 9rem); text-align: center; }
.price-card {
  max-width: 30rem;
  margin: 2.6rem auto 0;
  background: linear-gradient(180deg, rgba(176, 138, 69, 0.12), rgba(176, 138, 69, 0.03));
  border: 1px solid rgba(176, 138, 69, 0.35);
  border-radius: 26px;
  padding: 2.2rem 2rem;
}
.price-toggle {
  display: inline-flex;
  background: rgba(29, 29, 31, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 1.6rem;
}
.price-toggle button {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--ink-60);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.5em 1.2em;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}
.price-toggle button.is-active { background: var(--ink); color: var(--bg); }
.price-badge {
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.price-line { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin: 0.6rem 0 1.4rem; }
.price-now {
  font-size: 4rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-per { color: var(--ink-60); }
.price-was { color: var(--ink-40); text-decoration: line-through; font-size: 1.3rem; }
.price-features {
  text-align: left;
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.8rem;
}
.price-features li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-60);
  font-size: 0.95rem;
}
.price-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85em;
  height: 0.45em;
  border-left: 2px solid var(--gold-bright);
  border-bottom: 2px solid var(--gold-bright);
  transform: rotate(-45deg);
}
.price-bonus {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--ink-60);
}
.price-bonus s { color: var(--ink-40); }
.price-bonus strong { color: var(--gold-bright); font-weight: 650; }
.price-guarantee {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--gold-bright);
}
.price-note { margin-top: 1.1rem; font-size: 0.85rem; color: var(--ink-40); }
.price-note a { color: var(--gold-bright); }

/* ================= Closer ================= */
.closer {
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) 24px;
  position: relative;
  overflow: clip;
}
.closer::before {
  content: "";
  position: absolute;
  inset: auto -10% -40%;
  height: 70vh;
  background: radial-gradient(50% 60% at 50% 80%, rgba(176, 138, 69, 0.18), transparent 70%);
  pointer-events: none;
}
.closer > * { position: relative; }

/* ================= Footer ================= */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 3.5rem 24px 2rem;
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
}
.footer-brand img { height: 56px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: var(--ink-40); font-size: 0.9rem; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.footer-cols h3 {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 0.9rem;
}
.footer-cols a {
  display: block;
  font-size: 0.92rem;
  color: var(--ink-60);
  padding: 0.22rem 0;
}
.footer-cols a:hover { color: var(--ink); }
.footer-fine {
  max-width: 72rem;
  margin: 2.5rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  font-size: 0.84rem;
  color: var(--ink-40);
}
.footer-fine a { color: var(--ink-60); }

/* ================= Demo modal ================= */
.demo-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.demo-modal[hidden] { display: none; }
.demo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 3, 0.7);
  backdrop-filter: blur(12px);
}
.demo-panel {
  position: relative;
  width: min(1280px, 94vw);
  border-radius: var(--radius-lg);
  background: #000;
  border: 1px solid rgba(245, 242, 234, 0.18);
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.9);
  transform-origin: center;
  animation: panel-in 420ms var(--ease-out);
}
@keyframes panel-in {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
}
.demo-panel video, .demo-panel iframe { display: block; width: 100%; aspect-ratio: 1920 / 1042; border: 0; border-radius: var(--radius-lg); }
.demo-close {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(245, 242, 234, 0.18);
  backdrop-filter: blur(8px);
  color: #f5f2ea;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.demo-close:active { transform: scale(0.94); }

/* ================= Problem → Studio reveal ================= */
.problem {
  position: relative;
  height: 250vh;
  padding: 0 24px;
}
.problem-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  padding: 3rem 0;
}
.problem-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.problem-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.8rem, 4vh, 3rem);
}
.problem-statement {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 620;
  letter-spacing: -0.018em;
  line-height: 1.35;
  max-width: 30em;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.15em;
}
.problem-line { position: relative; padding-left: 1.5em; }
.problem-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}
.problem-line span { color: rgba(29, 29, 31, 0.13); transition: color 300ms linear; }
.problem-line span.lit { color: rgba(29, 29, 31, 0.78); }
.problem-worse {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 620;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 550ms var(--ease-out), transform 650ms var(--ease-out);
}
.problem-worse em { font-style: normal; color: var(--gold-bright); }
.problem-worse.on { opacity: 1; transform: none; }

.studio-reveal {
  position: relative;
  width: min(860px, 94vw);
  opacity: 0;
  transform: translateY(28px) scale(0.95);
  transition: opacity 700ms var(--ease-out), transform 850ms var(--ease-out);
}
.studio-reveal.on { opacity: 1; transform: none; }
.studio-sky {
  position: absolute;
  inset: -150px -40px -120px;
  z-index: 1;
  perspective: 900px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.sky-post {
  position: absolute;
  left: 50%;
  top: 55%;
  width: clamp(84px, 9.5vw, 122px);
  margin-left: calc(clamp(84px, 9.5vw, 122px) * -0.5);
  background: #fff;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.25);
  padding: 5px 5px 0;
  opacity: 0;
}
.sky-post::before {
  content: "";
  display: block;
  height: 10px;
  margin: 1px 1px 4px;
  background:
    radial-gradient(circle at 5px 5px, #d9b25f 3.4px, transparent 3.9px),
    linear-gradient(#e2ddd2 0 0) no-repeat 13px 1.5px / 36px 3px,
    linear-gradient(#eeebe3 0 0) no-repeat 13px 6.5px / 24px 2.5px;
  background-repeat: no-repeat;
}
.sky-post img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.sky-post::after {
  content: "";
  display: block;
  height: 9px;
  margin: 3px 1px 1px;
  background:
    radial-gradient(circle at 4px 4.5px, #cfc9bc 2.6px, transparent 3px),
    radial-gradient(circle at 15px 4.5px, #cfc9bc 2.6px, transparent 3px),
    radial-gradient(circle at 26px 4.5px, #cfc9bc 2.6px, transparent 3px);
  background-repeat: no-repeat;
}
.studio-reveal.on .sky-post {
  animation: studio-ascend 12s linear infinite;
  animation-delay: var(--t);
}
@keyframes studio-ascend {
  0% { opacity: 0; transform: rotateY(var(--a0)) translateZ(-290px) translateY(200px) scale(0.85); }
  12% { opacity: 0.95; }
  70% { opacity: 0.95; }
  100% { opacity: 0; transform: rotateY(var(--a1)) translateZ(-290px) translateY(-250px) scale(0.7); }
}
.studio-core { position: relative; z-index: 2; padding: 0.6rem 1.6rem; }
.studio-glow {
  position: absolute;
  inset: -26% -8%;
  z-index: -1;
  background: radial-gradient(50% 55% at 50% 50%, rgba(255, 255, 255, 0.94) 38%, rgba(255, 255, 255, 0.55) 70%, transparent 100%);
}
.studio-presenting {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 1rem;
}
.studio-name {
  font-size: clamp(2.1rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  padding-bottom: 0.08em;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 240, 200, 0.9) 50%, rgba(255, 255, 255, 0) 58%) no-repeat 210% 0 / 200% 100%,
    linear-gradient(180deg, #d9b25f 0%, #b8862f 58%, #96702a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.studio-name sup { font-size: 0.26em; font-weight: 600; vertical-align: top; position: relative; top: 0.55em; margin-left: 0.12em; color: #cda255; }
.studio-reveal.on .studio-name { animation: studio-shine 2s var(--ease-out) 250ms both; }
@keyframes studio-shine {
  from { background-position: 210% 0, 0 0; }
  to { background-position: -110% 0, 0 0; }
}
.studio-sub {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink-60);
}

/* ================= Manifesto ================= */
.manifesto {
  padding: clamp(5rem, 12vh, 9rem) 24px;
  text-align: center;
}
.manifesto .section-sub { margin: 1.4rem auto 0; max-width: 44em; }

/* ================= Hero calendar ================= */
.hero-cal {
  width: min(880px, 100%);
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 40px 90px -40px rgba(0, 0, 0, 0.25), 0 90px 160px -40px rgba(176, 138, 69, 0.12);
  padding: 1.1rem 1.2rem 1.3rem;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.2rem 0.9rem;
}
.cal-head strong { font-size: 1rem; font-weight: 650; }
.cal-badge {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--gold);
  border: 1.2px solid var(--gold);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  opacity: 0;
  transition: opacity 450ms ease;
}
.hero-cal.filled .cal-badge { opacity: 1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  aspect-ratio: 1 / 0.82;
  border: 1px solid rgba(29, 29, 31, 0.07);
  border-radius: 9px;
  position: relative;
  padding: 5px;
  font-size: 0.66rem;
  color: var(--ink-40);
  font-weight: 550;
  overflow: hidden;
}
.cal-cell.has-post { border-color: rgba(165, 120, 46, 0.28); }
.cal-fill {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out);
}
.cal-fill.on { opacity: 1; transform: none; }
.tick-wash {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(217, 178, 95, 0.14), rgba(176, 138, 69, 0.2));
}
.tick {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(150, 112, 42, 0.7);
}

/* "to get" animated underline (between-listings headline) */
.tg { position: relative; display: inline-block; }
.tg .tg-stroke {
  position: absolute;
  left: -3%;
  bottom: -0.14em;
  width: 106%;
  height: 0.2em;
  color: var(--gold-bright);
  overflow: visible;
}
.tg .tg-stroke path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.headline.in .tg .tg-stroke path { animation: tg-draw 650ms var(--ease-out) 900ms forwards; }
@keyframes tg-draw { to { stroke-dashoffset: 0; } }

/* ================= The promise ================= */
.promise { padding: clamp(5rem, 12vh, 9rem) 24px; }
.promise-pillars {
  max-width: 64rem;
  margin: clamp(2.8rem, 7vh, 4.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 2.8rem;
  text-align: left;
}
.promise-pillar { position: relative; padding-left: 2.2rem; }
.promise-pillar::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 50%;
}
.promise-pillar strong { display: block; font-weight: 620; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.promise-pillar span { color: var(--ink-60); font-size: 0.95rem; }

/* ================= Two ways ================= */
.two-ways { padding: clamp(5rem, 12vh, 9rem) 24px; }
.ways-grid {
  max-width: 62rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.way-card {
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2.1rem 2rem 1.9rem;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms ease;
}
.way-card:hover {
  transform: translateY(-4px);
  border-color: rgba(176, 138, 69, 0.5);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.2);
}
.way-kicker {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}
.way-card h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 630;
  letter-spacing: -0.018em;
  margin: 0.7rem 0 0.6rem;
}
.way-card p { color: var(--ink-60); max-width: 26em; }
.way-link {
  display: inline-block;
  margin-top: 1.2rem;
  font-weight: 620;
  font-size: 0.95rem;
  color: var(--gold-bright);
}

/* ================= Campaigns pipeline ================= */
.campaigns { padding: clamp(5rem, 12vh, 9rem) 24px; }
.pipe { width: min(920px, 100%); margin: clamp(2.5rem, 6vh, 4rem) auto 0; }
.pipe-input {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: min(430px, 90vw);
  margin: 0 auto;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: #fff;
  padding: 0.75em 0.7em 0.75em 1.1em;
  font-weight: 550;
  font-size: 0.98rem;
  box-shadow: 0 16px 40px -18px rgba(176, 138, 69, 0.5);
}
.pipe-input .mock-spark { color: var(--gold); }
.pipe-text { white-space: nowrap; overflow: hidden; }
.pipe-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--gold);
  animation: caret-blink 1s steps(1) infinite;
}
.pipe-send {
  margin-left: auto;
  flex: none;
  width: 1.9em;
  height: 1.9em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
  font-weight: 700;
}
.pipe-flow {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-end;
  margin-top: 2.6rem;
  min-height: 230px;
  flex-wrap: wrap;
}
.pipe-flow .out {
  width: clamp(105px, 12.5vw, 165px);
  border-radius: 12px;
  box-shadow: 0 26px 55px -20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-46px) scale(0.55);
}
.pipe.play .pipe-flow .out { animation: drop-out 650ms var(--ease-out) forwards; }
.pipe.play .pipe-flow .out:nth-child(1) { animation-delay: 2.2s; }
.pipe.play .pipe-flow .out:nth-child(2) { animation-delay: 2.45s; }
.pipe.play .pipe-flow .out:nth-child(3) { animation-delay: 2.7s; }
.pipe.play .pipe-flow .out:nth-child(4) { animation-delay: 2.95s; }
.pipe.play .pipe-flow .out:nth-child(5) { animation-delay: 3.2s; }
@keyframes drop-out { to { opacity: 1; transform: none; } }
@keyframes caret-blink { 50% { opacity: 0; } }
.pipe-flow .out:nth-child(odd) { rotate: -2deg; }
.pipe-flow .out:nth-child(even) { rotate: 2deg; margin-bottom: 12px; }
.pipe-note {
  text-align: center;
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--ink-40);
  opacity: 0;
  transition: opacity 500ms ease 3.9s;
}
.pipe.play .pipe-note { opacity: 1; }

/* ================= Collections fan deck ================= */
.coll-deck {
  position: relative;
  width: min(880px, 94vw);
  height: clamp(270px, 34vw, 390px);
  margin: clamp(3rem, 7vh, 4.5rem) auto 0;
}
.coll-deck img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(140px, 16vw, 205px);
  margin-left: calc(clamp(140px, 16vw, 205px) * -0.5);
  border-radius: 12px;
  box-shadow: 0 22px 45px -18px rgba(0, 0, 0, 0.32);
  transform-origin: 50% 150%;
  transform: rotate(calc(var(--r) * 0.72));
  transition: transform 550ms var(--ease-out);
}
.coll-deck:hover img { transform: rotate(calc(var(--r) * 1.28)) translateY(-46px) rotate(calc(var(--r) * -0.42)); }
.coll-badge {
  position: absolute;
  z-index: 10;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--cream-ink);
  background: #fff;
  border: 1px solid rgba(29, 29, 31, 0.08);
  border-radius: 999px;
  padding: 0.55em 1.2em;
  box-shadow: 0 14px 30px -14px rgba(29, 29, 31, 0.22);
}
.coll-badge svg, .coll-badge { }
.coll-badge svg { color: var(--gold-bright); }
.coll-badge .spark { font-style: normal; color: var(--gold-bright); }
.coll-badge svg { width: 0.95rem; height: 0.95rem; margin-right: 0.4em; vertical-align: -0.16em; }
.coll-badge.b1 { top: -6%; right: 6%; rotate: 4deg; }
.coll-badge.b2 { top: 14%; left: 2%; rotate: -5deg; }
.coll-badge.b3 { bottom: 24%; right: 0; rotate: -3deg; }
.coll-badge.b4 { bottom: 14%; left: 1%; rotate: 3deg; }
.coll-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: clamp(5rem, 11vh, 7.5rem);
  padding: 0 24px;
}
.coll-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold);
  border: 1.2px solid rgba(165, 120, 46, 0.45);
  border-radius: 999px;
  padding: 0.5em 1.2em;
  background: rgba(255, 255, 255, 0.55);
}
.coll-chip svg { width: 1.05rem; height: 1.05rem; }

/* ================= Social mockups ================= */
.mockup-row {
  max-width: 56rem;
  margin: clamp(2.8rem, 7vh, 4.5rem) auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.85fr;
  gap: 1.2rem;
  align-items: start;
  text-align: left;
}
.sm-col { display: grid; gap: 0.5rem 1.2rem; align-content: start; }
.sm-col .sm { margin-bottom: 0.9rem; }
.sm-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-left: 0.2rem;
}
.sm-tag svg { width: 0.95rem; height: 0.95rem; }
.sm {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 55px -28px rgba(0, 0, 0, 0.25);
  font-size: 0.72rem;
}
.sm-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0.9rem; }
.sm-head img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.sm-id { line-height: 1.25; }
.sm-id strong { display: block; font-size: 0.82rem; }
.sm-id span { color: var(--ink-40); font-size: 0.72rem; }
.sm-dots { margin-left: auto; color: var(--ink-40); font-weight: 700; letter-spacing: 0.08em; }
.sm-text { padding: 0 0.9rem 0.7rem; color: var(--ink); line-height: 1.45; }
.sm-media { width: 100%; display: block; }
.sm-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  color: var(--ink-40);
  font-size: 0.68rem;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.sm-meta > span { overflow: hidden; text-overflow: ellipsis; }
.sm-actions {
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0.9rem;
  color: var(--ink-60);
  font-weight: 600;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--hairline);
}
.sm-igbar { display: flex; gap: 0.9rem; padding: 0.65rem 0.9rem 0.3rem; color: var(--ink); }
.sm-igbar svg { width: 1.3rem; height: 1.3rem; }
.sm-igbar .sm-save { margin-left: auto; }
.sm-likes { padding: 0 0.9rem; font-weight: 650; font-size: 0.78rem; }
.sm-caption { padding: 0.25rem 0.9rem 0; line-height: 1.45; font-size: 0.76rem; }
.sm-caption strong { font-weight: 650; }
.sm-view { padding: 0.3rem 0.9rem 0.9rem; color: var(--ink-40); font-size: 0.74rem; }
.sm-tt { position: relative; aspect-ratio: 9 / 15.2; background: #0b0b0d; color: #fff; }
.sm-story { position: relative; background: #000; color: #fff; overflow: hidden; padding-bottom: 3.15rem; }
.sm-story-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sm-story::after {
  content: "";
  position: absolute;
  inset: 0 0 72%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent);
}
.sm-story-top { position: absolute; top: 0.6rem; left: 0.7rem; right: 0.7rem; z-index: 2; }
.sm-story-bars { display: flex; gap: 4px; margin-bottom: 0.55rem; }
.sm-story-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.45); }
.sm-story-bars i.on { background: #fff; }
.sm-story-id { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); }
.sm-story-id img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.6); }
.sm-story-id span { opacity: 0.75; }
.sm-story-reply {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.62rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sm-story-reply span {
  flex: 1;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 0.45em 0.9em;
  background: rgba(0, 0, 0, 0.18);
}
.sm-story-reply svg { width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4)); }
.sm-tt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.sm-tt::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.65));
}
.sm-tt-top {
  position: absolute;
  top: 0.8rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.76rem;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.sm-tt-top span { opacity: 0.7; }
.sm-tt-rail {
  position: absolute;
  right: 0.55rem;
  bottom: 4.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 650;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.sm-tt-rail img { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover; }
.sm-tt-rail span { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.sm-tt-rail svg { width: 1.4rem; height: 1.4rem; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4)); }
.sm-tt-cap {
  position: absolute;
  left: 0.8rem;
  right: 3rem;
  bottom: 0.9rem;
  z-index: 2;
  line-height: 1.35;
}
.sm-tt-cap strong { font-size: 0.78rem; }
.sm-tt-cap p { font-size: 0.7rem; opacity: 0.92; margin: 0.2rem 0; }
.sm-tt-cap span { font-size: 0.66rem; opacity: 0.75; }

/* mockup wall: living content additions */
.swapper { transition: opacity 320ms ease; }
.swapper.fading { opacity: 0; }
.sm-reacts { display: inline-flex; align-items: center; gap: 0.3rem; }
.rx {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid #fff;
}
.rx svg { width: 0.6rem; height: 0.6rem; }
.rx-like { background: #1877f2; }
.rx-love { background: #f02849; margin-left: -0.45rem; }
.sm-actions span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sm-actions svg { width: 1rem; height: 1rem; }
.sm-carousel { position: relative; overflow: hidden; }
.sm-car-track { display: flex; transition: transform 600ms var(--ease-out); }
.sm-car-track > img { width: 100%; flex: none; display: block; }
.sm-car-count {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  padding: 0.25em 0.7em;
}
.sm-car-dots {
  position: absolute;
  bottom: 0.55rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 2;
}
.sm-car-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: background 250ms ease, transform 250ms ease; }
.sm-car-dots i.on { background: #fff; transform: scale(1.25); }
.sm-story-bars i { position: relative; overflow: hidden; }
.sm-story-bars i s {
  position: absolute;
  inset: 0;
  width: 0;
  background: #fff;
  border-radius: 2px;
}
.kenburns { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.12) translateY(-2.5%); }
}

/* ================= Brand kit demo ================= */
.bk-demo {
  max-width: 56rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background: #fff;
  border: 1px solid rgba(29, 29, 31, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.2);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.bk-controls { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.bk-extract {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  font-weight: 550;
}
.bk-link-ico { flex: none; color: var(--ink-40); }
.bk-url { white-space: nowrap; overflow: hidden; }
.bk-caret {
  width: 2px;
  height: 1.05em;
  background: var(--gold);
  animation: caret-blink 1s steps(1) infinite;
}
.bk-extract-btn {
  margin-left: auto;
  flex: none;
  font-size: 0.85rem;
  font-weight: 620;
  color: #fff;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  padding: 0.55em 1.1em;
  white-space: nowrap;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.bk-extract-btn.pulse { transform: scale(0.95); box-shadow: 0 0 0 5px rgba(184, 134, 47, 0.18); }
.bk-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bk-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cream-ink-60);
  border: 1px solid rgba(29, 29, 31, 0.1);
  border-radius: 999px;
  padding: 0.28rem 0.85rem 0.28rem 0.35rem;
  background: #fff;
  transition: opacity 300ms ease;
}
.bk-swatch i {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 31, 0.14);
  transition: background 500ms ease;
}
.bk-kit-name { font-weight: 620; color: var(--cream-ink); font-size: 0.95rem; transition: opacity 300ms ease; }
.bk-manual { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.bk-manual-or { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); }
.bk-manual-row { display: flex; align-items: center; gap: 0.5rem; }
.bk-mchip { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid rgba(29, 29, 31, 0.14); transition: background 400ms ease, box-shadow 250ms ease, transform 250ms var(--ease-out); }
.bk-mchip.edit { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); transform: scale(1.14); }
.bk-apply { margin-left: 0.4rem; display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.84rem; font-weight: 650; color: #fff; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-radius: 999px; padding: 0.42em 1.15em; transition: transform 200ms ease, box-shadow 200ms ease; }
.bk-apply.pulse { transform: scale(0.95); box-shadow: 0 0 0 5px rgba(184, 134, 47, 0.18); }
.bk-demo.fading .bk-kit-name, .bk-demo.fading .bk-swatch { opacity: 0.25; }
.bk-preview { display: flex; flex-direction: column; gap: 0.6rem; }
.bk-preview-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.bk-post {
  --bkp: #b40101;
  --bkd: #333333;
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(29, 29, 31, 0.1);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.25);
  background: #fff;
}
.bk-post-photo { position: relative; flex: 1; min-height: 0; }
.bk-post-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 95% 86%, 90% 92%, 85% 86%, 80% 92%, 75% 86%, 70% 92%, 65% 86%, 60% 92%, 55% 86%, 50% 92%, 45% 86%, 40% 92%, 35% 86%, 30% 92%, 25% 86%, 20% 92%, 15% 86%, 10% 92%, 5% 86%, 0 92%);
}
.bk-post-price {
  position: absolute;
  right: 6%;
  bottom: -18%;
  z-index: 2;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--bkd);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  transition: background 600ms ease;
}
.bk-post-price strong { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em; }
.bk-post-price svg { width: 2.4rem; height: 0.35rem; opacity: 0.8; }
.bk-post-body { position: relative; padding: 1rem 1.1rem 0.9rem; text-align: center; }
.bk-post-flower {
  position: absolute;
  left: 0.7rem;
  top: 0.9rem;
  font-size: 1.6rem;
  color: var(--bkp);
  opacity: 0.22;
  transition: color 600ms ease;
}
.bk-post-script {
  display: block;
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-size: 1.7rem;
  line-height: 0.8;
  color: var(--bkp);
  transition: color 600ms ease;
}
.bk-post-title {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bkd);
  line-height: 1.1;
  transition: color 600ms ease;
}
.bk-post-specs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.7rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-ink);
}
.bk-post-specs svg { width: 0.95rem; height: 0.95rem; margin-right: 0.3rem; vertical-align: -0.18em; color: var(--bkp); transition: color 600ms ease; }
.bk-post-addr { display: block; font-size: 0.74rem; font-weight: 650; color: var(--cream-ink); }
.bk-post-agent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  text-align: left;
}
.bk-post-agent img { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; }
.bk-post-agent-name { font-size: 0.72rem; font-weight: 700; color: var(--cream-ink); line-height: 1.2; }
.bk-post-agent-name em { display: block; font-style: normal; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bkp); transition: color 600ms ease; }
.bk-post-brand { margin-left: auto; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bkd); transition: color 600ms ease; }
.bk-post-brand em { display: block; font-style: normal; font-size: 0.5rem; letter-spacing: 0.34em; color: var(--cream-ink-60); }
.bk-pillars { margin-top: clamp(2.5rem, 6vh, 4rem); margin-bottom: clamp(4rem, 9vh, 7rem); }

/* ================= Automations flow ================= */
.auto-flow {
  max-width: 68rem;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.15fr auto 1fr auto 0.85fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
}
.auto-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 1rem;
}
.auto-arrow {
  font-size: 1.8rem;
  color: var(--gold-bright);
  font-weight: 300;
}
.auto-chips { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.auto-chip { cursor: pointer; }
.auto-chip {
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--ink-60);
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 0.45em 1.05em;
  transition: color 350ms ease, border-color 350ms ease, background 350ms ease, transform 350ms var(--ease-out);
}
.auto-chip.is-live {
  color: var(--gold-deep);
  border-color: var(--gold);
  background: rgba(184, 134, 47, 0.08);
  transform: translateX(4px);
}
.auto-card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}
.auto-card img {
  width: clamp(150px, 16vw, 200px);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 26px 55px -20px rgba(0, 0, 0, 0.28);
  transition: opacity 250ms ease, transform 350ms var(--ease-out);
}
.auto-card img.swap { opacity: 0; transform: scale(0.94); }
.auto-ready {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(184, 134, 47, 0.1);
  border-radius: 999px;
  padding: 0.35em 1em;
}
.auto-send { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.auto-send-btn {
  font-size: 1.05rem;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  padding: 0.7em 2.2em;
  box-shadow: 0 10px 26px -10px rgba(176, 138, 69, 0.6);
}
.auto-send-note { font-size: 0.9rem; color: var(--ink-40); max-width: 15em; }
.auto-more {
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--gold-bright);
  padding: 0.45em 1.05em 0;
}

/* ================= UI mocks ================= */
.mock {
  background: #f6f3ec;
  color: #1f1d17;
  border-radius: var(--radius-lg);
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(29, 29, 31, 0.1);
  overflow: hidden;
}
.mock em { font-style: normal; display: block; color: rgba(31, 29, 23, 0.5); font-size: 0.86em; }
.mock .mock-spark { color: var(--gold-deep); }

/* --- hero: Millie chat + campaign pane --- */
.mock-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  border-radius: 0;
  border: none;
  box-shadow: none;
  text-align: left;
  height: 44em;
}
.hero-chat {
  background: #efece3;
  border-right: 1px solid rgba(31, 29, 23, 0.08);
  display: flex;
  flex-direction: column;
  padding: 1.1em 1.2em;
  min-width: 0;
}
.hero-chat-head {
  font-weight: 650;
  color: var(--gold-deep);
  padding-bottom: 0.8em;
  border-bottom: 1px solid rgba(31, 29, 23, 0.08);
}
.hero-chat-log {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7em;
  padding: 0.9em 0;
  min-height: 0;
}
.hb {
  max-width: 88%;
  padding: 0.7em 0.95em;
  border-radius: 1em;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out);
}
.hb.show { opacity: 1; transform: none; }
.hb-user {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
  font-weight: 550;
  border-bottom-right-radius: 0.3em;
}
.hb-millie {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(31, 29, 23, 0.08);
  color: rgba(31, 29, 23, 0.82);
  border-bottom-left-radius: 0.3em;
}
.hb-dots { padding: 0.8em 1em; }
.hb-dots i {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: rgba(31, 29, 23, 0.4);
  margin-right: 0.28em;
  animation: dot-bounce 1s ease-in-out infinite;
}
.hb-dots i:nth-child(2) { animation-delay: 150ms; }
.hb-dots i:nth-child(3) { animation-delay: 300ms; margin-right: 0; }
@keyframes dot-bounce { 40% { transform: translateY(-0.25em); } }
.hero-chat-input {
  display: flex;
  align-items: center;
  gap: 0.6em;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 0.6em 0.55em 0.6em 1em;
  background: #fff;
  font-weight: 550;
}
.hero-input-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.4em;
}
.hero-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--gold-deep);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-camp { padding: 1.2em 1.4em; display: flex; flex-direction: column; min-width: 0; }
.hero-camp-title { font-size: 1.15em; font-weight: 650; }
.hero-camp-title em { font-size: 0.78em; font-weight: 500; margin-top: 0.15em; }
.hero-stages { display: flex; gap: 0.5em; margin: 1em 0; flex-wrap: wrap; }
.hero-stages span {
  border: 1.5px solid rgba(31, 29, 23, 0.12);
  border-radius: 0.8em;
  padding: 0.45em 0.9em;
  font-weight: 600;
  font-size: 0.88em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out), border-color 300ms ease;
}
.hero-stages span.show { opacity: 1; transform: none; }
.hero-stages span em { color: var(--gold-deep); font-size: 0.86em; display: none; }
.hero-stages span.sched { border-color: var(--gold); }
.hero-stages span.sched em { display: block; }
.hero-designs { display: grid; grid-template-columns: repeat(4, minmax(0, 6.6em)); gap: 0.7em; }
.hero-designs img {
  width: 100%;
  border-radius: 0.7em;
  border: 1px solid rgba(31, 29, 23, 0.1);
  box-shadow: 0 12px 28px -12px rgba(31, 29, 23, 0.35);
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out);
}
.hero-designs img.show { opacity: 1; transform: none; }
.hero-camp-foot {
  margin-top: auto;
  margin-top: auto;
  padding-top: 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  border-top: 1px solid rgba(31, 29, 23, 0.08);
  font-size: 0.92em;
  color: rgba(31, 29, 23, 0.55);
  opacity: 0;
  transition: opacity 450ms ease;
}
.hero-camp-foot.show { opacity: 1; }
.hero-camp-foot strong { color: #1f1d17; }
.hero-open-cal {
  margin-left: auto;
  font-weight: 620;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
}
.mock-row {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.6em 0.2em;
  border-top: 1px solid rgba(31, 29, 23, 0.07);
}
.mock-thumb {
  width: 2.6em;
  height: 2.6em;
  object-fit: cover;
  object-position: top;
  border-radius: 0.5em;
  border: 1px solid rgba(31, 29, 23, 0.1);
}
.mock-what { flex: 1; font-weight: 550; }
.mock-status {
  font-size: 0.78em;
  font-weight: 600;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: rgba(176, 138, 69, 0.14);
  color: var(--gold-deep);
}
.mock-status.is-live { background: rgba(96, 148, 86, 0.14); color: #4c7a3f; }
.mock-approve {
  font-size: 0.85em;
  font-weight: 620;
  padding: 0.4em 1.1em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
}

/* --- generic panel --- */
.mock-panel { width: 100%; max-width: 36em; padding: 1.4em 1.5em; margin: auto; }
.mock-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  font-size: 1.15em;
  margin-bottom: 0.35em;
}
.mock-count {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(176, 138, 69, 0.13);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  white-space: nowrap;
}
.mock-panel-sub { color: rgba(31, 29, 23, 0.55); margin-bottom: 0.9em; }
.mock-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.75em 0;
  border-top: 1px solid rgba(31, 29, 23, 0.07);
}
.mock-switch-name { font-weight: 600; }
.mock-toggle {
  flex: none;
  width: 2.5em;
  height: 1.45em;
  border-radius: 999px;
  background: rgba(31, 29, 23, 0.16);
  position: relative;
}
.mock-toggle::after {
  content: "";
  position: absolute;
  top: 0.16em;
  left: 0.16em;
  width: 1.13em;
  height: 1.13em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 300ms var(--ease-out);
}
.mock-toggle.on { background: var(--gold); }
.mock-toggle.on::after { transform: translateX(1.05em); }

.mock-foot-note {
  margin-top: 1em;
  padding-top: 0.85em;
  border-top: 1px solid rgba(31, 29, 23, 0.07);
  color: rgba(31, 29, 23, 0.5);
  font-size: 0.9em;
}

.mock-collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.mock-collection {
  border: 1.5px solid rgba(31, 29, 23, 0.1);
  border-radius: 0.9em;
  overflow: hidden;
  background: #fff;
}
.mock-collection.is-picked { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 138, 69, 0.2); }
.mock-collection img { width: 100%; aspect-ratio: 4 / 4.1; object-fit: cover; object-position: top; }
.mock-collection span { display: block; padding: 0.5em 0.7em; font-weight: 600; font-size: 0.88em; }
.mock-collection.is-picked span::after { content: " ✓"; color: var(--gold-deep); }
.mock-chip, .mock-chip-gold {
  font-size: 0.82em;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3em 0.95em;
  border: 1px solid rgba(31, 29, 23, 0.14);
  color: rgba(31, 29, 23, 0.55);
}
.mock-chip-gold { border-color: var(--gold); background: rgba(176, 138, 69, 0.12); color: var(--gold-deep); }

/* --- brand kit --- */
/* --- chat generation (Millie designs and writes) --- */
.mock-chatgen { max-width: 32em; }
.mock-chatbar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 0.65em 0.6em 0.65em 1em;
  background: #fff;
  font-weight: 550;
}
.mock-typing-text { flex: 1; white-space: nowrap; overflow: hidden; }
.mock-chat-send {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
  font-weight: 700;
}
.mock-millie-bubble {
  margin-top: 1em;
  background: #fff;
  border: 1px solid rgba(31, 29, 23, 0.09);
  border-radius: 1em;
  border-top-left-radius: 0.3em;
  padding: 0.85em 1em;
  color: rgba(31, 29, 23, 0.8);
}
.mock-millie-bubble strong { display: block; color: var(--gold-deep); margin-bottom: 0.25em; }
.mock-pop-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7em;
  margin-top: 1em;
}
.mock-pop-row img {
  width: 100%;
  border-radius: 0.7em;
  border: 1px solid rgba(31, 29, 23, 0.1);
  box-shadow: 0 12px 28px -12px rgba(31, 29, 23, 0.35);
}

/* --- channels routing --- */
.mock-accounts { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.8em 0 1em; }
.mock-account {
  font-size: 0.88em;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.4em 1em;
  border: 1.5px solid rgba(31, 29, 23, 0.12);
  color: rgba(31, 29, 23, 0.5);
}
.mock-account.is-on { border-color: var(--gold); color: var(--gold-deep); background: rgba(176, 138, 69, 0.1); }
.mock-route {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 0;
  border-top: 1px solid rgba(31, 29, 23, 0.07);
}
.mock-route-name { flex: 1; font-weight: 600; }

.mock-photo-badge, .mock-photo-tag {
  position: absolute;
  left: 1em;
  bottom: 1em;
  font-size: 0.82em;
  font-weight: 600;
  padding: 0.4em 1em;
  border-radius: 999px;
  background: rgba(20, 18, 13, 0.72);
  color: #f5f2ea;
  backdrop-filter: blur(6px);
}
.mock-photo-tag { top: 1em; bottom: auto; }


.audience-card a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(165, 120, 46, 0.4); }
.audience-card a:hover { text-decoration-color: var(--gold-deep); }

/* ================= Proof: stats + testimonials ================= */
.proof { padding: clamp(5rem, 12vh, 9rem) 24px; }
.proof-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  text-align: center;
}
.proof-stat strong {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--gold-bright);
  line-height: 1;
}
.proof-stat span { display: block; margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-60); max-width: 12em; }
.quote-grid {
  max-width: 68rem;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.quote-card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.quote-card blockquote {
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote-card blockquote::before { content: "“"; color: var(--gold-bright); font-weight: 700; }
.quote-card blockquote::after { content: "”"; color: var(--gold-bright); font-weight: 700; }
.quote-card figcaption { margin-top: auto; font-weight: 620; font-size: 0.92rem; }
.quote-card figcaption em { display: block; font-style: normal; font-weight: 400; color: var(--ink-40); font-size: 0.85rem; margin-top: 0.15rem; }

/* ================= FAQ ================= */
.faq { padding: clamp(4rem, 10vh, 7rem) 24px; }
.faq-list { max-width: 46rem; margin: clamp(2.2rem, 5vh, 3.5rem) auto 0; }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list details:first-child { border-top: 1px solid var(--hairline); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0.2rem;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i {
  flex: none;
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
}
.faq-list summary i::before, .faq-list summary i::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 300ms var(--ease-out);
}
.faq-list summary i::before { width: 100%; height: 2px; }
.faq-list summary i::after { width: 2px; height: 100%; }
.faq-list details[open] summary i::after { transform: rotate(90deg) scaleY(0); }
.faq-list details p {
  padding: 0 2.6rem 1.3rem 0.2rem;
  color: var(--ink-60);
  max-width: 40em;
}

/* ================= Reveal ================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }
.reveal.d4 { transition-delay: 360ms; }
.reveal.in { opacity: 1; transform: none; }

/* ================= Responsive ================= */

/* ================= Elevation pass: top fold ================= */
.hero::before {
  inset: -24% -14% auto;
  height: 90vh;
  background: radial-gradient(52% 62% at 50% 22%, rgba(184, 134, 47, 0.2), rgba(184, 134, 47, 0.06) 55%, transparent 74%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: -12% -8% -20%;
  background: radial-gradient(58% 60% at 50% 48%, rgba(201, 151, 59, 0.16), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.display em, .headline em {
  background: linear-gradient(180deg, #d9b25f 0%, #b8862f 58%, #96702a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-cal {
  border-color: rgba(29, 29, 31, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 14px 28px -14px rgba(0, 0, 0, 0.12),
    0 48px 95px -40px rgba(0, 0, 0, 0.26),
    0 100px 170px -50px rgba(176, 138, 69, 0.18);
}
.cal-cell img { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); }
.btn { transition: transform 180ms var(--ease-out), background 200ms ease, box-shadow 250ms ease; }
.btn-gold {
  background: linear-gradient(180deg, #c9973b 0%, #a5782e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 8px 20px -8px rgba(165, 120, 46, 0.55);
}
.btn-gold:hover {
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 14px 30px -10px rgba(165, 120, 46, 0.65);
}
.btn-ghost:hover { transform: translateY(-1.5px); }

/* ================= Elevation pass: dark finale ================= */
.manifesto, .closer, .site-footer {
  background: #0f0d09;
  color: #f5f2ea;
  position: relative;
}
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40vh;
  background: radial-gradient(55% 80% at 50% 0%, rgba(201, 151, 59, 0.14), transparent 70%);
  pointer-events: none;
}
.manifesto::after, .closer::after, .site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.manifesto { padding-bottom: clamp(3rem, 7vh, 5rem); }
.manifesto .headline, .closer .display { color: #f5f2ea; }
.manifesto .headline em, .closer .display em {
  background: linear-gradient(180deg, #ecd08c 0%, #c9973b 55%, #a5782e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.manifesto .section-sub, .closer .section-sub { color: rgba(245, 242, 234, 0.62); }
.closer {
  padding-top: clamp(3rem, 7vh, 5rem);
}
.closer::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60vh;
  background: radial-gradient(50% 70% at 50% 100%, rgba(201, 151, 59, 0.16), transparent 70%);
  pointer-events: none;
}
.closer .hero-ctas, .closer .display, .closer .section-sub { position: relative; z-index: 1; }
.closer .btn-ghost {
  background: rgba(245, 242, 234, 0.08);
  color: #f5f2ea;
  border-color: rgba(245, 242, 234, 0.16);
}
.closer .btn-ghost:hover { background: rgba(245, 242, 234, 0.14); }
.site-footer { border-top: 1px solid rgba(245, 242, 234, 0.1); }
.site-footer .footer-brand p { color: rgba(245, 242, 234, 0.45); }
.site-footer .footer-cols h3 { color: rgba(245, 242, 234, 0.45); }
.site-footer .footer-cols a { color: rgba(245, 242, 234, 0.6); }
.site-footer .footer-cols a:hover { color: #f5f2ea; }
.site-footer .footer-fine { color: rgba(245, 242, 234, 0.4); border-top: 1px solid rgba(245, 242, 234, 0.08); }
.site-footer .footer-fine a { color: rgba(245, 242, 234, 0.55); }


/* ================= Elevation pass: middle sweep ================= */
/* material system: cards and mocks get layered shadows + top light */
.pipe-flow .out,
.coll-deck img,
.auto-card img {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 10px 20px -10px rgba(0, 0, 0, 0.18),
    0 30px 60px -25px rgba(0, 0, 0, 0.3);
}
.sm {
  border-color: rgba(29, 29, 31, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 14px 28px -14px rgba(0, 0, 0, 0.14),
    0 42px 80px -35px rgba(0, 0, 0, 0.28);
  transition: transform 300ms var(--ease-out), box-shadow 350ms ease;
}
.sm:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 20px 38px -16px rgba(0, 0, 0, 0.18),
    0 60px 100px -40px rgba(0, 0, 0, 0.34);
}
.bk-demo {
  border-color: rgba(29, 29, 31, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 16px 32px -16px rgba(0, 0, 0, 0.12),
    0 50px 100px -45px rgba(0, 0, 0, 0.25);
}
.quote-card {
  transition: transform 300ms var(--ease-out), box-shadow 350ms ease, border-color 300ms ease;
}
.quote-card:hover {
  transform: translateY(-3px);
  border-color: rgba(176, 138, 69, 0.35);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.16);
}
.price-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 24px 50px -25px rgba(0, 0, 0, 0.18),
    0 70px 130px -50px rgba(176, 138, 69, 0.22);
}

/* light behind each section hero object */
.pipe, .coll-deck, .auto-flow, .mockup-row, .bk-demo, .price-card { position: relative; }
.pipe::before,
.coll-deck::before,
.auto-flow::before,
.mockup-row::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(55% 55% at 50% 45%, rgba(201, 151, 59, 0.11), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.millie-stage { position: relative; }
.millie-stage::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  background: radial-gradient(55% 60% at 50% 50%, rgba(201, 151, 59, 0.13), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* gradient seams instead of hard white/cream edges */
.collections {
  background: linear-gradient(180deg, #fff 0%, var(--cream) 5%, var(--cream) 95%, #fff 100%);
}
.millie {
  background: linear-gradient(180deg, #fff 0%, var(--bg-raised) 6%, var(--bg-raised) 94%, #fff 100%);
  border-top: none;
  border-bottom: none;
}

/* metallic gold on the proof numerals */
.proof-stat strong {
  background: linear-gradient(180deg, #d9b25f 0%, #b8862f 58%, #96702a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* stories and TikTok share the same lifted material */
.sm-tt, .sm-story { border: none; }


/* ================= Pricing: dark spread ================= */
.pricing {
  background: #0f0d09;
  color: #f5f2ea;
  position: relative;
  overflow: clip;
}
.pricing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 50vh;
  background: radial-gradient(52% 75% at 50% 0%, rgba(201, 151, 59, 0.15), transparent 70%);
  pointer-events: none;
}
.pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pricing .headline { color: #f5f2ea; }
.pricing .headline em {
  background: linear-gradient(180deg, #ecd08c 0%, #c9973b 55%, #a5782e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pricing .eyebrow { color: #c9973b; }
.price-spread {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  max-width: 60rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  align-items: center;
}
.spread-col { display: grid; gap: 0.6rem; }
.spread-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(245, 242, 234, 0.05);
  border: 1px solid rgba(245, 242, 234, 0.1);
  border-radius: 999px;
  padding: 0.62em 1.2em;
  font-size: 0.9rem;
  font-weight: 550;
  color: rgba(245, 242, 234, 0.78);
  text-align: left;
  backdrop-filter: blur(6px);
}
.spread-chip i {
  font-style: normal;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #c9973b, #a5782e);
  flex: none;
}
.spread-core { text-align: center; }
.pricing .price-toggle {
  display: inline-flex;
  background: rgba(245, 242, 234, 0.08);
  border-radius: 999px;
  padding: 0.25rem;
  margin-bottom: 1.4rem;
}
.pricing .price-toggle button {
  font: 600 0.85rem/1 inherit;
  color: rgba(245, 242, 234, 0.6);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.55em 1.2em;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}
.pricing .price-toggle button.is-active {
  background: linear-gradient(180deg, #c9973b, #a5782e);
  color: #fff;
}
.pricing .price-line { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; }
.pricing .price-now {
  font-size: clamp(3.6rem, 6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #ecd08c, #c9973b 60%, #a5782e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pricing .price-per { color: rgba(245, 242, 234, 0.5); }
.pricing .price-was { color: rgba(245, 242, 234, 0.32); text-decoration: line-through; }
.price-billed { font-size: 0.88rem; font-weight: 600; color: rgba(245, 242, 234, 0.7); margin-top: -0.8rem; margin-bottom: 1rem; }
.agent-add { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 0.1rem 0 0.35rem; }
.agent-btn { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid rgba(217, 178, 95, 0.5); background: rgba(217, 178, 95, 0.1); color: #f5f2ea; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1; padding: 0; transition: background 200ms ease, opacity 200ms ease; }
.agent-btn:hover:not(:disabled) { background: rgba(217, 178, 95, 0.28); }
.agent-btn:disabled { opacity: 0.35; cursor: default; }
.agent-count { font-weight: 650; color: #f5f2ea; min-width: 8.2rem; text-align: center; }
.agent-count b { color: #d9b25f; }
.agent-note { font-size: 0.85rem; color: rgba(245, 242, 234, 0.65); margin-bottom: 1.15rem; }
.sp-early {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ecd08c;
  margin: 0.5rem 0 1.3rem;
}
.pricing .price-bonus { position: relative; z-index: 1; text-align: center; margin-top: clamp(2.2rem, 5vh, 3.2rem); color: #ecd08c; font-size: 0.95rem; }
.pricing .price-bonus s { color: rgba(245, 242, 234, 0.4); }
.pricing .price-bonus strong { color: #ecd08c; }
.pricing .price-guarantee { position: relative; z-index: 1; text-align: center; margin-top: 0.6rem; color: rgba(245, 242, 234, 0.55); font-size: 0.9rem; font-weight: 550; }
.pricing .price-note { position: relative; z-index: 1; text-align: center; margin-top: 0.6rem; color: rgba(245, 242, 234, 0.4); font-size: 0.85rem; }
.pricing .price-note a { color: rgba(245, 242, 234, 0.65); text-decoration: underline; }
@media (max-width: 960px) {
  .header-nav { display: none; }
  .header-inner { gap: 1rem; }
  .header-actions { margin-left: auto; }
  .link-quiet { white-space: nowrap; }
  .auto-flow { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .auto-arrow { transform: rotate(90deg); }
  .auto-chips { align-items: center; }
  .auto-send { align-items: center; }
  .auto-send-note { max-width: 24em; }
  .logo-set { gap: 2.5rem; padding-right: 2.5rem; }
  .logo-set img { height: 26px; }
  .trust { padding: 3.5rem 24px; }
  .millie-points { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ways-grid { grid-template-columns: 1fr; }
  .price-spread { grid-template-columns: 1fr; }
  .spread-core { order: -1; }
  .promise-pillars { grid-template-columns: 1fr; }
  .cal-grid { gap: 4px; }
  .cal-cell { font-size: 0.55rem; border-radius: 6px; }
  .tick { width: 1.15rem; height: 1.15rem; font-size: 0.55rem; }
  .quote-grid { grid-template-columns: 1fr; }
  .proof-stats { gap: 1.6rem 2.5rem; }
  .hero-float { display: none; }
  .hero-camp { display: none; }
  .mock-hero { grid-template-columns: 1fr; height: 36em; }
  .hero-chat { border-right: none; }
  .mock-collection-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
  .sky-post { width: 66px; margin-left: -33px; }
  .studio-sky { inset: -90px -10px -70px; }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: opacity 300ms ease; transform: none; }
  .hero-tilt { transform: none !important; }
  .hero-float { transform: none !important; }
  .problem { height: auto; padding: clamp(5rem, 12vh, 9rem) 24px; }
  .problem-line span { color: rgba(29, 29, 31, 0.78); transition: none; }
  .problem-worse {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 620;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 550ms var(--ease-out), transform 650ms var(--ease-out);
}
.problem-worse em { font-style: normal; color: var(--gold-bright); }
.problem-worse.on { opacity: 1; transform: none; }

.studio-reveal { opacity: 1; transform: none; transition: none; }
  .studio-reveal.on .studio-name, .studio-name { animation: none; background-position: 0 0; }
  .demo-panel { animation: none; }
}


/* ================= Listing studio ================= */
.stu { position: relative; }
.stu .cursor {
  position: absolute; z-index: 30; width: 20px; height: 24px; pointer-events: none;
  left: 60%; top: 40%;
  transition: left 450ms cubic-bezier(0.4, 0, 0.2, 1), top 450ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms ease, opacity 400ms ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.stu .cursor.click { transform: scale(0.82); }
.stu.user-driven .cursor { opacity: 0; }
.stu .tab { cursor: pointer; }
.stu-stage-img { transition: filter 800ms ease, opacity 400ms ease; }
.stu-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 380ms ease; pointer-events: none;
}
.stu[data-tool="film"] .stu-vid { opacity: 1; }
.stu[data-tool="film"] .stu-vid.swapping { opacity: 0; }
.vid-styles, .stg-chips {
  position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.35rem; z-index: 3;
  opacity: 0; transition: opacity 300ms ease; pointer-events: none;
}
.stu[data-tool="film"] .vid-styles { opacity: 1; }
.stu[data-tool="stage"] .stg-chips { opacity: 1; }
.vid-styles b, .stg-chips b {
  font-weight: 600; font-size: 0.76rem; color: #fff;
  background: rgba(20, 17, 12, 0.5); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 0.38em 0.95em; transition: background 350ms ease;
}
.vid-styles b.on, .stg-chips b.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.stu[data-tool="film"] .vid-styles, .stu[data-tool="stage"] .stg-chips { pointer-events: auto; }
.vid-styles b, .stg-chips b { cursor: pointer; }
.stage-styles { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.stu[data-tool="stage"] .stage-styles { opacity: 1; }
.stage-styles img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 700ms ease;
}
.stage-styles img.on { opacity: 1; }
.stu-prog {
  position: absolute; left: 1rem; right: 1rem; bottom: 5.4rem; height: 3px; z-index: 2;
  background: rgba(255, 255, 255, 0.32); border-radius: 2px; overflow: hidden;
  opacity: 0; transition: opacity 300ms ease;
}
.stu[data-tool="film"] .stu-prog { opacity: 1; }
.stu-prog s { position: absolute; inset: 0; background: #fff; transform-origin: left; }
.stu-market {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #f4f1e9; opacity: 0; transition: opacity 450ms ease; pointer-events: none;
}
.stu[data-tool="market"] .stu-market { opacity: 1; }

.stu2 { max-width: 56rem; margin: clamp(2.4rem, 6vh, 4rem) auto 0; }
.stu2 .seg {
  position: relative; display: flex; gap: 0.25rem; width: max-content;
  margin: 0 auto 1.6rem; background: rgba(29, 29, 31, 0.05); border-radius: 999px; padding: 0.3rem;
}
.stu2 .tab {
  position: relative; z-index: 1; font-size: 0.92rem; font-weight: 620; color: var(--ink-60);
  padding: 0.55em 1.5em; border-radius: 999px; transition: color 300ms;
}
.stu2 .tab.on { color: #fff; }
.stu2 .seg-pill {
  position: absolute; top: 0.3rem; bottom: 0.3rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  transition: left 400ms cubic-bezier(0.22, 1, 0.36, 1), width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stu2 .stage {
  position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.22), 0 54px 110px -48px rgba(0, 0, 0, 0.42);
}
.stu2 .stage > img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; display: block; }
.stu2 .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 3rem 1.6rem 1.3rem;
  background: linear-gradient(180deg, transparent, rgba(15, 13, 9, 0.66));
  color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; text-align: left;
}
.stu2 .cap strong { display: block; font-size: 1.15rem; font-weight: 650; }
.stu2 .cap span { font-size: 0.86rem; opacity: 0.82; }

/* market: live feed */
.feed { display: flex; gap: clamp(0.8rem, 1.6vw, 1.2rem); align-items: center; justify-content: center; }
.feed-card {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.18), 0 24px 48px -20px rgba(0, 0, 0, 0.35);
}
.feed-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.65rem; font-size: 0.68rem; font-weight: 650; color: var(--ink); }
.feed-head i { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.feed-head span { color: var(--ink-40); font-weight: 600; margin-left: auto; }
.feed-car { width: clamp(11rem, 16vw, 13.5rem); }
.feed-car .shot { position: relative; overflow: hidden; }
.feed-car .track { display: flex; width: 100%; transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1); }
.feed-car .track img { width: 100%; flex: none; display: block; }
.feed-count {
  position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.62rem; font-weight: 650; color: #fff;
  background: rgba(20, 17, 12, 0.62); border-radius: 999px; padding: 0.25em 0.75em;
}
.feed-dots { display: flex; gap: 0.25rem; justify-content: center; padding: 0.45rem 0 0.55rem; }
.feed-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(29, 29, 31, 0.18); transition: background 300ms; }
.feed-dots i.on { background: var(--gold-bright); }
.feed-story { align-self: stretch; position: relative; }
.feed-story .story-shot { position: relative; height: 100%; width: 100%; overflow: hidden; }
.feed-story .story-shot > img, .feed-story .story-shot > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 500ms ease;
}
.feed-story .story-shot > img.on, .feed-story .story-shot > video.on { opacity: 1; }
.feed-story .story-shot video.crop-bars { transform: scale(1.22); }
.feed-story .bars { position: absolute; top: 0.45rem; left: 0.45rem; right: 0.45rem; display: flex; gap: 0.2rem; z-index: 2; }
.feed-story .bars i { position: relative; overflow: hidden; flex: 1; height: 2.2px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
.feed-story .bars i s { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.feed-story .bars i.done s { transform: scaleX(1); }
.feed-story .bars i.act s { animation: story-fill 2600ms linear forwards; }
@keyframes story-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.feed-post { width: clamp(10.5rem, 15vw, 13rem); }
.cs-card { font-size: clamp(0.5rem, 0.72vw, 0.62rem); background: #fff; text-align: left; }
.cs-photo { position: relative; }
.cs-photo img { width: 100%; aspect-ratio: 1/0.92; object-fit: cover; display: block; border-radius: 0 0 48% 52% / 0 0 9% 11%; }
.cs-bubble { position: absolute; top: 0; right: 0; background: #f5f2ea; border-radius: 0 0 0 100%; padding: 0.9em 1em 2em 2.6em; text-align: right; }
.cs-bubble strong { display: block; font-size: 1.15em; font-weight: 650; color: #2b2925; }
.cs-bubble span { font-size: 1.05em; font-weight: 700; color: var(--gold-bright); }
.cs-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; padding: 0.9em 1.3em 0.1em; }
.cs-script { display: block; font-family: "Great Vibes", cursive; font-size: 2.5em; line-height: 0.7; color: var(--gold-bright); }
.cs-soon { display: block; font-size: 2.3em; font-weight: 800; letter-spacing: -0.02em; color: #2b2925; }
.cs-price { display: block; font-size: 1.8em; font-weight: 800; color: #2b2925; text-align: right; }
.cs-addr { display: block; text-align: center; font-size: 1.05em; font-weight: 600; color: #2b2925; padding: 1em 0 1.4em; }

@media (max-width: 820px) {
  .stu2 .seg .tab { font-size: 0.78rem; padding: 0.5em 0.85em; }
  .stu2 .stage > img { aspect-ratio: 16/11; }
  .stu2 .cap { padding: 2.2rem 1.1rem 1rem; }
  .stu2 .cap strong { font-size: 0.98rem; }
  .stu2 .cap span { font-size: 0.78rem; }
  .stu-prog { bottom: 4.6rem; }
  .feed { gap: 0.6rem; }
  .feed-post { width: clamp(8.5rem, 40vw, 11rem); }
  .feed-car { width: clamp(8rem, 36vw, 11rem); }
  .feed-story { display: none; }
}

/* carousel: rebuilt Private Tour slide */
.feed-car .track > * { width: 100%; flex: none; }
.pt-slide { aspect-ratio: 4/5; display: flex; flex-direction: column; background: #fff; text-align: left; font-size: clamp(0.5rem, 0.72vw, 0.62rem); }
.pt-photo { flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 48% 52% / 0 0 12% 14%; }
.pt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-body { padding: 1.1em 1.5em 0; }
.pt-script { display: block; font-family: "Great Vibes", cursive; font-size: 2.1em; line-height: 0.75; color: var(--gold-bright); }
.pt-title { display: block; font-size: 1.95em; font-weight: 800; letter-spacing: -0.02em; color: #2b2925; }
.pt-rule { display: block; width: 3.2em; height: 2px; border-radius: 2px; background: var(--gold-bright); margin: 0.8em 0 0; }
.pt-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 1em 1em 1.25em; white-space: nowrap; }
.pt-who { display: flex; align-items: center; gap: 0.5em; flex: none; }
.pt-who img { width: 2.3em; height: 2.3em; border-radius: 50%; object-fit: cover; flex: none; }
.pt-who strong { display: block; font-size: 0.98em; font-weight: 700; color: #2b2925; line-height: 1.25; }
.pt-who em { display: block; font-style: normal; font-size: 0.86em; font-weight: 600; color: var(--gold-bright); }
.pt-reach { text-align: right; flex: none; }
.pt-reach strong { display: block; font-size: 0.94em; font-weight: 700; color: var(--gold-bright); line-height: 1.3; }
.pt-reach em { display: block; font-style: normal; font-size: 0.84em; font-weight: 600; color: var(--gold-bright); }


/* ================= Meadowbrush designs (channels wall) ================= */
.mb-art {
  position: relative; width: 100%; overflow: hidden;
  container-type: inline-size;
  background: #101b2c;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: left;
}
.mb-ava { border-radius: 50%; overflow: hidden; flex: none; }
.mb-ava img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.75); transform-origin: 50% 24%; }

/* Facebook: Just Listed */
.mb-fb { aspect-ratio: 4/5; }
.mb-fb .mb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-grad { position: absolute; left: 0; right: 0; bottom: 12.8cqw; height: 76cqw; background: linear-gradient(rgba(16, 27, 44, 0), rgba(16, 27, 44, 0.55) 52%, rgba(16, 27, 44, 0.94)); }
.mb-badge {
  position: absolute; left: 5.6cqw; top: 5.2cqw;
  background: #be9b57; color: #fff;
  font-size: 2.2cqw; font-weight: 700; letter-spacing: 0.52cqw;
  padding: 1.8cqw 3.2cqw; border-radius: 0.8cqw;
}
.mb-listing { position: absolute; left: 5.6cqw; right: 5.6cqw; bottom: 18.4cqw; }
.mb-addr { display: block; font-family: "Playfair Display", serif; font-size: 6.4cqw; font-weight: 600; color: #fff; }
.mb-sub { display: block; font-size: 2.6cqw; letter-spacing: 0.24cqw; color: rgba(255, 255, 255, 0.85); margin-top: 0.8cqw; }
.mb-specs { display: flex; gap: 4.4cqw; margin-top: 3.6cqw; }
.mb-specs span { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.2cqw; font-weight: 700; letter-spacing: 0.28cqw; color: #fff; }
.mb-specs svg { width: 3.4cqw; height: 3.4cqw; flex: none; }
.mb-rule { display: block; width: 11.2cqw; height: 0.6cqw; background: #c9a968; margin-top: 3.6cqw; }
.mb-price { display: block; font-family: "Playfair Display", serif; font-size: 8cqw; font-weight: 700; color: #c9a968; margin-top: 2.4cqw; }
.mb-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 12.8cqw; background: #101b2c; display: flex; align-items: center; gap: 2.4cqw; padding: 0 5.6cqw; }
.mb-foot .mb-ava { width: 6.8cqw; height: 6.8cqw; }
.mb-foot-id strong { display: block; font-size: 2.6cqw; font-weight: 700; color: #f4efe7; }
.mb-foot-id em { display: block; font-style: normal; font-size: 1.6cqw; letter-spacing: 0.32cqw; font-weight: 700; color: #c9a968; }
.mb-foot-tel { margin-left: auto; font-size: 2.4cqw; letter-spacing: 0.2cqw; color: rgba(244, 239, 231, 0.85); }

/* Instagram: mortgage slides + stories */
.mb-bg { position: absolute; inset: 0; opacity: 0.35; }
.mb-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-shade { position: absolute; inset: 0; background: linear-gradient(rgba(16, 27, 44, 0.55), rgba(16, 27, 44, 0.85)); }
.mb-slide { aspect-ratio: 470/587; }
.mb-count { position: absolute; top: 3.4cqw; right: 3.4cqw; background: rgba(244, 239, 231, 0.14); color: #f4efe7; font-size: 2.55cqw; font-weight: 600; border-radius: 2.55cqw; padding: 0.85cqw 2.55cqw; }
.mb-body { position: absolute; left: 7.7cqw; right: 7.7cqw; top: 11cqw; }
.mb-eyebrow { display: block; font-size: 2.34cqw; letter-spacing: 0.85cqw; font-weight: 700; color: #c9a968; }
.mb-title { display: block; font-family: "Playfair Display", serif; font-size: 8.1cqw; font-weight: 600; color: #f4efe7; margin-top: 3cqw; }
.mb-rule2 { display: block; width: 11.9cqw; height: 0.64cqw; background: #c9a968; margin-top: 3.8cqw; }
.mb-rows { display: flex; flex-direction: column; gap: 6.4cqw; margin-top: 9.4cqw; }
.mb-slide.four .mb-rows { gap: 4.2cqw; margin-top: 6.4cqw; }
.mb-row { display: flex; gap: 3.4cqw; }
.mb-row svg { width: 5.1cqw; height: 5.1cqw; flex: none; margin-top: 0.4cqw; }
.mb-row strong { display: block; font-size: 3.6cqw; font-weight: 700; color: #f4efe7; }
.mb-row em { display: block; font-style: normal; font-size: 2.77cqw; color: rgba(244, 239, 231, 0.72); margin-top: 0.85cqw; line-height: 1.45; }
.mb-cutout { position: absolute; right: -3cqw; bottom: 0; height: 40.4cqw; filter: drop-shadow(0 0.85cqw 3cqw rgba(0, 0, 0, 0.35)); }
.mb-sig { position: absolute; left: 7.7cqw; bottom: 6.8cqw; }
.mb-sig i { display: block; width: 8.5cqw; height: 0.43cqw; background: #c9a968; margin-bottom: 2.55cqw; }
.mb-sig strong { display: block; font-size: 3cqw; font-weight: 700; color: #f4efe7; }
.mb-sig em { display: block; font-style: normal; font-size: 2.77cqw; color: rgba(244, 239, 231, 0.7); margin-top: 0.43cqw; }

.mb-story { aspect-ratio: 9/16; }
.mb-story .mb-body { left: 8.3cqw; right: 8.3cqw; top: 26cqw; }
.mb-story .mb-eyebrow { font-size: 2.78cqw; letter-spacing: 0.94cqw; }
.mb-story .mb-title { font-size: 8.9cqw; }
.mb-story .mb-rows { gap: 5.6cqw; margin-top: 7.5cqw; }
.mb-story .mb-row svg { width: 5.6cqw; height: 5.6cqw; }
.mb-story .mb-row strong { font-size: 4.44cqw; }
.mb-story .mb-row em { font-size: 3.6cqw; }
.mb-story .mb-cutout { right: -3.9cqw; height: 48.6cqw; }
.mb-story .mb-sig { left: 8.3cqw; bottom: 7cqw; }
.mb-story .mb-sig strong { font-size: 4.6cqw; }
.mb-story .mb-sig em { font-size: 4.1cqw; }
.mb-sig-logo { display: block; height: 7cqw; margin-top: 2.6cqw; }

/* story slides stack inside the frame */
.sm-story-slides { position: relative; width: 100%; aspect-ratio: 9 / 16; z-index: 1; }
.sm-story-slides { perspective: 900px; }
.sm-story-slides .mb-story.on { z-index: 2; }
.mb-story.cube-out {
  transform-origin: left center;
  animation: cube-out 550ms cubic-bezier(0.45, 0, 0.2, 1) both;
  opacity: 1 !important;
  transition: none;
  z-index: 1;
}
.mb-story.cube-in {
  transform-origin: right center;
  animation: cube-in 550ms cubic-bezier(0.45, 0, 0.2, 1) both;
  opacity: 1 !important;
  transition: none;
  z-index: 3;
}
@keyframes cube-out {
  from { transform: rotateY(0deg); filter: brightness(1); }
  to { transform: rotateY(-88deg); filter: brightness(0.55); }
}
@keyframes cube-in {
  from { transform: rotateY(88deg); filter: brightness(0.55); }
  to { transform: rotateY(0deg); filter: brightness(1); }
}
.sm-story-slides .mb-story { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 400ms ease; }
.sm-story-slides .mb-story.on { opacity: 1; }
.sm-car-track > * { width: 100%; flex: none; }


/* Meadowbrush Spotlight (LinkedIn 4:5 + FB story 9:16) */
.mb-spot { aspect-ratio: 4/5; background: #f4efe7; }
.mb-spot .mb-photo { position: absolute; left: 0; top: 0; width: 100%; height: 56cqw; object-fit: cover; }
.mb-zig { position: absolute; left: 0; top: 52.2cqw; width: 100%; height: 4cqw; display: block; }
.mb-fl1 { position: absolute; left: 6cqw; top: 61.5cqw; width: 7cqw; height: 7cqw; }
.mb-fl2 { position: absolute; right: 6.4cqw; top: 72cqw; width: 5.4cqw; height: 5.4cqw; }
.mb-spot-title { position: absolute; left: 8cqw; right: 8cqw; top: 63.5cqw; text-align: center; }
.mb-one { display: block; font-family: "Playfair Display", serif; font-size: 7.2cqw; font-weight: 600; color: #16243a; white-space: nowrap; }
.mb-pills { display: flex; flex-direction: column; gap: 5.6cqw; margin: 7.5cqw auto 0; width: max-content; text-align: left; }
.mb-pill { display: flex; align-items: center; gap: 3.6cqw; }
.mb-pill i { width: 8cqw; height: 8cqw; flex: none; border-radius: 50%; background: #be9b57; display: grid; place-items: center; }
.mb-pill i svg { width: 4cqw; height: 4cqw; }
.mb-pill span { font-size: 3.5cqw; font-weight: 700; letter-spacing: 0.4cqw; color: #16243a; }
.mb-spot-foot { position: absolute; left: 6.4cqw; right: 6.4cqw; bottom: 4.6cqw; display: flex; align-items: center; gap: 2.4cqw; white-space: nowrap; }
.mb-spot-foot .mb-foot-id { flex: 1; min-width: 0; }
.mb-spot-foot .mb-ava { width: 10cqw; height: 10cqw; }
.mb-spot-foot .mb-foot-id strong { color: #16243a; font-size: 4.2cqw; }
.mb-spot-foot .mb-foot-id em { color: #be9b57; }
.mb-wordmark { margin-left: auto; height: 5.4cqw; display: block; flex: none; }
.mb-mark { margin-left: auto; height: 10cqw; display: block; flex: none; }

.mb-spot.tall { aspect-ratio: 9/16; }
.mb-spot.tall .mb-photo { height: 83.3cqw; }
.mb-spot.tall .mb-zig { top: 78.6cqw; height: 5cqw; }
.mb-spot.tall .mb-fl1 { left: 4.6cqw; top: 92cqw; width: 8cqw; height: 8cqw; }
.mb-spot.tall .mb-fl2 { right: 5cqw; top: 103cqw; width: 6.4cqw; height: 6.4cqw; }
.mb-spot.tall .mb-spot-title { left: 8.9cqw; right: 8.9cqw; top: 94cqw; }
.mb-spot.tall .mb-one { font-size: 7.8cqw; }
.mb-spot.tall .mb-pills { gap: 8.5cqw; margin-top: 10.5cqw; }
.mb-spot.tall .mb-pill i { width: 10.2cqw; height: 10.2cqw; }
.mb-spot.tall .mb-pill i svg { width: 5cqw; height: 5cqw; }
.mb-spot.tall .mb-pill span { font-size: 4.4cqw; letter-spacing: 0.5cqw; }
.mb-spot.tall .mb-spot-foot { left: 6.7cqw; right: 6.7cqw; bottom: 2.3cqw; justify-content: center; }
.mb-spot.tall .mb-spot-foot .mb-foot-id { flex: none; }
.mb-spot.tall .mb-spot-foot .mb-ava { width: 10cqw; height: 10cqw; }
.mb-spot.tall .mb-foot-id strong { font-size: 4.3cqw; }
.mb-spot.tall .mb-foot-id em { font-size: 2.2cqw; letter-spacing: 0.39cqw; }
.mb-spot.tall .mb-wordmark { height: 5.8cqw; }

/* TikTok open house overlay */
.sm-tt { container-type: inline-size; }
.sm-tt-slides { position: absolute; inset: 0; }
.sm-tt-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms ease; }
.sm-tt-slides img.on { opacity: 1; }
.mb-tt-shade { position: absolute; inset: 0; background: linear-gradient(rgba(16, 27, 44, 0.78), rgba(16, 27, 44, 0.55) 55%, rgba(16, 27, 44, 0.38)); pointer-events: none; }
.mb-tt { position: absolute; left: 6.1cqw; top: 21.1cqw; width: 80.6cqw; pointer-events: none; text-align: left; font-family: "Manrope", -apple-system, sans-serif; }
.mb-tt .mb-badge { position: static; display: inline-block; font-size: 2.8cqw; letter-spacing: 0.67cqw; padding: 2.2cqw 3.9cqw; border-radius: 1.1cqw; }
.mb-tt-addr { display: block; font-family: "Playfair Display", serif; font-size: 7.2cqw; font-weight: 600; color: #fff; margin-top: 4.4cqw; white-space: nowrap; text-shadow: 0 1px 6px rgba(16, 27, 44, 0.4); }
.mb-tt-city { display: block; font-size: 3.1cqw; letter-spacing: 0.39cqw; color: rgba(255, 255, 255, 0.88); margin-top: 1.4cqw; text-shadow: 0 1px 4px rgba(16, 27, 44, 0.4); }
.mb-tt .mb-specs { gap: 3.9cqw; margin-top: 3.9cqw; }
.mb-tt .mb-specs span { font-size: 2.8cqw; letter-spacing: 0.28cqw; text-shadow: 0 1px 4px rgba(16, 27, 44, 0.4); }
.mb-tt .mb-specs svg { width: 3.9cqw; height: 3.9cqw; }
.mb-tt-rule { display: block; width: 13.3cqw; height: 0.83cqw; background: #c9a968; margin-top: 4.4cqw; }
.mb-tt-when { display: flex; flex-direction: column; gap: 3.1cqw; margin-top: 4.4cqw; }
.mb-tt-when span { display: flex; align-items: center; gap: 2.8cqw; font-size: 4.2cqw; font-weight: 800; letter-spacing: 0.5cqw; color: #fff; text-shadow: 0 1px 4px rgba(16, 27, 44, 0.4); }
.mb-tt-when svg { width: 5.3cqw; height: 5.3cqw; flex: none; }
.mb-tt-price { display: block; font-family: "Playfair Display", serif; font-size: 7.2cqw; font-weight: 700; color: #c9a968; margin-top: 5cqw; text-shadow: 0 1px 6px rgba(16, 27, 44, 0.5); }


/* Millie demo: option chips, cursor, mini calendar */
.hero-chat { position: relative; }
.hero-chat .cursor {
  position: absolute; z-index: 20; width: 18px; height: 22px; pointer-events: none;
  left: 55%; top: 30%; opacity: 0;
  transition: left 650ms cubic-bezier(0.4, 0, 0.2, 1), top 650ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms ease, opacity 300ms ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.hero-chat .cursor.show { opacity: 1; }
.hero-chat .cursor.click { transform: scale(0.8); }
.hb-opts { display: flex; flex-wrap: wrap; gap: 0.45em; background: none !important; border: none !important; padding: 0.2em 0 !important; }
.hb-opts .opt {
  font-size: 0.92em; font-weight: 600; color: var(--gold-deep);
  border: 1.2px solid rgba(165, 120, 46, 0.45); border-radius: 999px;
  padding: 0.45em 1.1em; background: rgba(176, 138, 69, 0.06);
  transition: background 250ms ease, color 250ms ease;
}
.hb-opts .opt.picked { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #fff; border-color: transparent; }
.hero-mini-cal { display: none; margin-top: 0.9em; }
.hero-mini-cal.show { display: block; }
.hero-mini-head { font-size: 0.72em; font-weight: 650; color: var(--ink); margin-bottom: 0.5em; }
.hero-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.hero-mini-grid span {
  position: relative;
  aspect-ratio: 1 / 0.72;
  border: 1px solid rgba(29, 29, 31, 0.07);
  border-radius: 5px;
  font-size: 0.5em;
  font-weight: 550;
  color: var(--ink-40);
  padding: 2px 0 0 3px;
}
.hero-mini-grid span.has s { opacity: 0; transform: scale(0.5); }
.hero-mini-grid span.on { border-color: rgba(165, 120, 46, 0.3); background: rgba(217, 178, 95, 0.1); }
.hero-mini-grid s {
  text-decoration: none;
  position: absolute; left: 50%; top: 55%; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff; font-size: 0.9em; font-weight: 700;
  transition: opacity 280ms var(--ease-out), transform 360ms var(--ease-out);
}
.hero-mini-grid span.on s { opacity: 1; transform: none; }


/* ================= Millie hover explainer ================= */
.millie-ref {
  text-decoration: underline dotted rgba(165, 120, 46, 0.55);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
  outline: none;
}
.millie-ref:hover, .millie-ref:focus-visible { text-decoration-color: var(--gold-deep); color: var(--gold-deep); }
.millie-pop {
  position: fixed;
  z-index: 200;
  width: 17rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 16px -8px rgba(0, 0, 0, 0.18), 0 24px 50px -20px rgba(0, 0, 0, 0.3);
  padding: 0.9rem 1rem;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
  pointer-events: none;
}
.millie-pop.show { opacity: 1; transform: none; }
.millie-pop .mb-ava { width: 2.2rem; height: 2.2rem; flex: none; margin-top: 0.1rem; }
.mb-ava-pop img { transform: scale(1.15); transform-origin: 50% 30%; }
.millie-pop strong { display: block; font-size: 0.85rem; font-weight: 680; color: var(--ink); }
.millie-pop strong em { font-style: normal; font-weight: 600; color: var(--gold-deep); }
.millie-pop p { font-size: 0.78rem; line-height: 1.5; color: var(--ink-60); margin-top: 0.2rem; }

/* ================= Legal pages ================= */
.legal-top { max-width: 46rem; margin: 0 auto; padding: 1.6rem 24px 0; display: flex; align-items: center; justify-content: space-between; }
.legal-top img { height: 34px; width: auto; display: block; }
.legal-top .legal-home { font-size: 0.9rem; font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.legal-top .legal-home:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal { max-width: 46rem; margin: 0 auto; padding: 3rem 24px 4rem; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.legal .legal-updated { margin: 0.6rem 0 2.4rem; font-size: 0.9rem; color: var(--ink-40); }
.legal h2 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 2.2rem 0 0.7rem; }
.legal p, .legal li { font-size: 0.98rem; line-height: 1.7; color: var(--ink-60); }
.legal p + p { margin-top: 0.7rem; }
.legal ul { margin: 0.7rem 0 0.7rem 1.2rem; display: grid; gap: 0.45rem; }
.legal strong { color: var(--ink); font-weight: 650; }
.legal a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(165, 120, 46, 0.4); }
.legal-foot { max-width: 46rem; margin: 0 auto; padding: 0 24px 3rem; display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.85rem; color: var(--ink-40); border-top: 1px solid var(--hairline); padding-top: 1.4rem; }
.legal-foot a { color: var(--ink-40); text-decoration: none; }
.legal-foot a:hover { color: var(--gold-deep); }

/* ================= Mobile refinements ================= */
/* Decorative glows (.auto-flow::before etc.) extend past the viewport and make
   mobile browsers widen the layout viewport; clip at the root so they can't. */
html { overflow-x: clip; }

@media (max-width: 620px) {
  /* Header: compact so logo + actions always fit */
  .header-inner { padding: 10px 12px; gap: 0.6rem; }
  .header-logo img { height: 42px; }
  .header-actions { gap: 0.6rem; }
  .header-actions .btn-sm { padding: 0.62em 0.95em; }

  /* Tighter vertical rhythm: desktop vh-based paddings leave dead space on phones */
  .autopilot { padding: 2.5rem 0 3.5rem; }
  .two-ways, .campaigns, .listings, .millie, .channels, .proof { padding: 3.5rem 20px; }
  .auto-flow { margin-top: 2rem; }
  .ways-grid, .millie-stage, .bk-demo, .pipe, .stu2 { margin-top: 2rem; }
  .coll-chips { margin-top: 2.5rem; }

  /* Problem scrollytelling: shorter scrub, and the floating sky posts
     collide with the headline at this width */
  .problem { height: 190vh; }
  .studio-sky { display: none; }

  /* Brand kit demo: single column so the extract pill has room */
  .bk-demo { grid-template-columns: 1fr; }

  /* Listing studio: no fake cursor on touch, tabs stay on one scrollable line */
  .stu .cursor { display: none; }
  .stu2 .seg { max-width: calc(100vw - 40px); overflow-x: auto; scrollbar-width: none; }
  .stu2 .seg::-webkit-scrollbar { display: none; }
  .stu2 .seg .tab { font-size: 0.74rem; padding: 0.5em 0.7em; }

  /* Collections: floating badges overlap the card fan at this width */
  .coll-badge { display: none; }

  /* Social mockups: one readable column instead of three crushed ones */
  .mockup-row { grid-template-columns: 1fr; max-width: 24rem; margin-left: auto; margin-right: auto; gap: 1.8rem; }

  /* Millie chat demo: trim the mostly-empty window */
  .mock-hero { height: 42em; }
}

/* ================= Contact form ================= */
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 34rem; margin-top: 2rem; }
.contact-form label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.contact-form input,
.contact-form textarea {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid rgba(29, 29, 31, 0.16);
  border-radius: 12px;
  padding: 0.7em 0.9em;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.contact-form textarea { resize: vertical; min-height: 8em; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.15);
}
.contact-form .btn { align-self: flex-start; }
.contact-status { min-height: 1.4em; font-size: 0.92rem; color: var(--gold-deep); }

/* ================= Trustpilot badge (About) ================= */
.tp-badge {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.8rem 0;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(29, 29, 31, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.18);
}
.tp-word { flex: none; font-weight: 700; font-size: 0.95rem; color: var(--ink); min-width: 6.6em; }
.tp-stars { flex: none; }
.tp-stars { display: flex; gap: 2px; }
.tp-stars i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  background: #00b67a;
}
.tp-stars svg { width: 0.98rem; height: 0.98rem; fill: #fff; }
.tp-text { font-size: 0.84rem; color: var(--ink-60); white-space: nowrap; }
@media (max-width: 620px) { .tp-text { white-space: normal; } }
.tp-text a { color: #00b67a; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* ================= Mobile refinements, round 2 ================= */
@media (max-width: 620px) {
  /* headlines: drop desktop line breaks, wrap naturally */
  .headline br { display: none; }

  /* checklist ticks were hugging the screen edge (both pillar lists) */
  .promise-pillars { padding: 0 12px; }

  /* listing studio: style chips move to the bottom of the photo,
     clear of the top-left badge; progress bar moves top-right,
     clear of the caption */
  .vid-styles, .stg-chips { top: auto; bottom: 6.2rem; left: 1rem; right: 1rem; justify-content: flex-end; flex-wrap: wrap; }
  .stu-prog { bottom: auto; top: 1.15rem; left: auto; right: 1rem; width: 42%; }
  .stu2 .cap strong { font-size: 0.92rem; }

  /* market tab: smaller cards anchored to the top so the caption stays clear */
  .stu-market { place-items: start center; padding-top: 1rem; }
  .feed-post { width: 8rem; }
  .feed-car { width: 7.5rem; }
  .stu2[data-tool="market"] .stage > img { aspect-ratio: 16/14; }
}

@media (max-width: 620px) {
  /* market tab: compact cards that clear the caption */
  .feed-post { width: 7.6rem; }
  .feed-car { width: 7.2rem; }
  .feed-head { font-size: 0.58rem; white-space: nowrap; }
  .feed .cs-addr { display: none; }
  .feed .cs-bubble { padding: 0.6em 0.7em 1.4em 1.8em; }
}

@media (max-width: 620px) {
  .feed-head span { display: none; }
  .feed .cs-body { font-size: 0.82em; }
}

@media (max-width: 620px) {
  .headline { font-size: 1.72rem; text-wrap: balance; }
}

/* Mobile Millie demo: chat plays first, then the campaign panel takes over */
@media (max-width: 620px) {
  .mock-hero.show-camp .hero-chat { display: none; }
  .mock-hero.show-camp .hero-camp {
    display: flex;
    animation: camp-in 500ms var(--ease-out);
  }
}
@keyframes camp-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* very narrow phones: keep the bigger logo from crowding the header actions */
@media (max-width: 380px) {
  .header-logo img { height: 36px; }
}

/* ================= Video credits page ================= */
.credits-page { max-width: 66rem; margin: 0 auto; padding: 3rem 24px 5rem; text-align: center; }
.credits-page .headline { margin: 0.4rem 0 1rem; }
.credits-page .section-sub { max-width: 34em; margin: 0 auto; }
.credits-toggle {
  position: relative; display: inline-flex; gap: 0.25rem; margin: 2.2rem auto 2.4rem;
  background: rgba(29, 29, 31, 0.05); border-radius: 999px; padding: 0.3rem;
}
.credits-toggle button {
  position: relative; z-index: 1; border: 0; background: none; font: inherit;
  font-size: 0.92rem; font-weight: 620; color: var(--ink-60);
  padding: 0.55em 1.4em; border-radius: 999px; cursor: pointer;
  transition: color 300ms ease;
}
.credits-toggle button.is-active { color: #fff; }
.credits-pill {
  position: absolute; top: 0.3rem; bottom: 0.3rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  transition: left 400ms cubic-bezier(0.22, 1, 0.36, 1), width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.credits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; text-align: left; }
.credit-card {
  position: relative; display: flex; flex-direction: column; gap: 0.45rem;
  background: #fff; border: 1px solid rgba(29, 29, 31, 0.09); border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem; box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.22);
}
.credit-card.featured { border-color: var(--gold); box-shadow: 0 24px 54px -26px rgba(184, 134, 47, 0.4); }
.credit-flag {
  position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 999px; padding: 0.3em 1em;
}
.credit-card h3 { font-size: 1.05rem; font-weight: 650; }
.credit-price { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.credit-price span { font-size: 0.95rem; font-weight: 500; color: var(--ink-40); }
.credit-amount { font-weight: 600; color: var(--gold-deep); }
.credit-rate { font-size: 0.88rem; color: var(--ink-40); margin-bottom: 0.9rem; }
.credit-card .btn { margin-top: auto; }
.credits-note { max-width: 44em; margin: 2.4rem auto 0; font-size: 0.9rem; color: var(--ink-40); }
@media (max-width: 900px) { .credits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .credits-grid { grid-template-columns: 1fr; } }

.credit-save {
  display: inline-block;
  margin-left: 0.55em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-deep);
  background: rgba(184, 134, 47, 0.12);
  border-radius: 999px;
  padding: 0.2em 0.75em;
  white-space: nowrap;
}

.legal h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 0.5rem; }

.tp-badge + .tp-badge { margin-top: -0.8rem; }
.tp-stars.tp-redfin i { background: #c82021; }
.tp-badge:has(.tp-redfin) .tp-text a { color: #c82021; }

@media (max-width: 620px) { .tp-badge { flex-wrap: wrap; } }

/* ================= Makers / pedigree bars ================= */
.makers-bar {
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-40);
}
.makers-bar a { font-weight: 600; color: var(--ink-60); }
.makers-bar a:hover { color: var(--ink); }
.makers-bar .mk-sep { margin: 0 0.55em; color: rgba(29, 29, 31, 0.25); }
.makers-bar em { font-style: normal; font-weight: 500; color: var(--ink-40); }
.mk-tp { color: #00996a !important; }
.mk-rf { color: #c82021 !important; }
.makers-bar .mk-tp:hover { color: #00b67a !important; }
.makers-bar .mk-rf:hover { color: #e03a3b !important; }
.footer-makers { margin-top: 0.7rem; font-size: 0.8rem; color: rgba(245, 242, 234, 0.4); }
.footer-makers a { font-weight: 600; color: rgba(245, 242, 234, 0.6); }
.footer-makers a:hover { color: #f5f2ea; }
.footer-makers a.mk-tp { color: #2ecf94 !important; }
@media (max-width: 620px) {
  .makers-bar { padding: 0 24px; }
  .makers-bar .mk-sep { display: block; height: 0.35em; overflow: hidden; color: transparent; }
}

.mk-flip { display: inline-block; text-align: center; transform-origin: 50% 100%; transition: transform 280ms ease, opacity 280ms ease; }
.mk-flip.flip-out { transform: rotateX(90deg); opacity: 0; }
.mk-flip.flip-in { animation: mk-flip-in 400ms var(--ease-out); }
@keyframes mk-flip-in {
  from { transform: rotateX(-90deg); opacity: 0; }
  to { transform: rotateX(0); opacity: 1; }
}

/* ================= VS24 pedigree bar (hero + pricing) ================= */
.vsbar {
  margin-top: 1.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--ink-40);
}
.vsbar .mk-flip b { font-weight: 650; color: var(--ink-60); }
.vsbar-ratings {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink-60);
}
.vs-stars { font-style: normal; letter-spacing: 0.08em; margin-right: 0.4em; font-size: 1.05em; }
.vs-tp { color: #00b67a; }
.vs-rf { color: #c82021; }
.pricing .vsbar { color: rgba(245, 242, 234, 0.45); }
.pricing .vsbar .mk-flip b, .pricing .vsbar-ratings { color: rgba(245, 242, 234, 0.8); }

/* ================= VS24 bar variants (testimonials) ================= */
.vs-variants { margin-top: clamp(2.5rem, 6vh, 4rem); display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
.var-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(29, 29, 31, 0.3); margin-top: 1.4rem; }
.vsbar-lg { margin-top: 0; font-size: 1.02rem; }
.vsbar-lg .vsbar-ratings { font-size: 1.08rem; gap: 2rem; }
.vsbar-lg em, .vsbar-ratings em { font-style: normal; font-weight: 500; color: var(--ink-40); }
.vscards { display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 0.98rem; color: var(--ink-40); }
.vscards-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.vscard {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 14px;
  padding: 1rem 1.8rem; box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.2);
}
.vscard .vs-stars { font-size: 1.15rem; margin: 0; }
.vscard strong { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.vscard span { font-size: 0.85rem; color: var(--ink-40); }
.vsline { text-align: center; font-size: 0.95rem; color: var(--ink-40); padding: 0 24px; }
.vsline b { font-weight: 700; color: var(--ink); }
.vsline em { font-style: normal; color: var(--ink-40); }
.vsline .vs-stars { font-size: 1em; }
.vsline .mk-sep { margin: 0 0.5em; color: rgba(29, 29, 31, 0.25); }
.vsline .mk-flip b { color: var(--ink-60); }

.vscards .vsbar-line { font-size: 1rem; }
.vsbar-footer { margin: 2.4rem auto 0; padding: 0 24px; font-size: 0.92rem; color: rgba(245, 242, 234, 0.45); }
.vsbar-footer .mk-flip b { color: rgba(245, 242, 234, 0.8); font-weight: 650; }
.vsbar-footer .vsbar-ratings { color: rgba(245, 242, 234, 0.85); font-size: 0.98rem; }
.vsbar-footer em { font-style: normal; font-weight: 500; color: rgba(245, 242, 234, 0.45); }

.vscards { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.vscard { cursor: default; }

/* instant styled tooltips */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: max-content;
  max-width: 270px;
  padding: 0.6em 0.95em;
  background: rgba(29, 29, 31, 0.94);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  border-radius: 10px;
  z-index: 30;
  pointer-events: none;
  animation: tip-in 180ms ease forwards;
}
[data-tip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(29, 29, 31, 0.94);
  z-index: 30;
  pointer-events: none;
}
@keyframes tip-in {
  from { opacity: 0; transform: translate(-50%, 5px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* CLS: reserve the hero calendar's height before JS builds the cells */
.cal-grid:empty { aspect-ratio: 2.127 / 1; }

/* width/height attrs only reserve space; CSS height-only sizing keeps natural width */
.mb-cutout, .mb-mark, .mb-sig-logo { width: auto; }

@media (max-width: 620px) {
  /* phones: single staged photo and single clip, no style pickers */
  .stg-chips, .vid-styles { display: none; }
}

@media (max-width: 620px) {
  /* phones: headline only over the studio photo */
  .stu2 .cap span { display: none; }
  .stu2 .cap { padding: 2rem 1.1rem 0.9rem; }
}

/* ================= Lead magnet landing page ================= */
.lm-page { max-width: 62rem; margin: 0 auto; padding: 2.2rem 24px 4rem; text-align: center; }
.lm-brand img { height: 40px; width: auto; margin: 0 auto 2.5rem; }
.lm-page .headline { max-width: 16em; margin: 0.4rem auto 1rem; }
.lm-page .section-sub { max-width: 36em; margin: 0 auto; }
.lm-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; margin-top: clamp(2.2rem, 6vh, 3.5rem); text-align: left;
}
.lm-cal {
  background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem 1.1rem; box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.25);
  transform: rotate(-1.2deg);
}
.lm-cal-head { font-weight: 700; margin-bottom: 0.9rem; }
.lm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.lm-cal-grid span {
  aspect-ratio: 1 / 0.95; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 8px;
  padding: 4px 5px; font-size: 0.62rem; font-weight: 600; color: var(--ink-40);
  display: flex; flex-direction: column; justify-content: space-between;
}
.lm-cal-grid span i { font-style: normal; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.03em; color: var(--gold-deep); }
.lm-cal-grid span.on { background: rgba(184, 134, 47, 0.08); border-color: rgba(184, 134, 47, 0.35); }
.lm-cal-foot { margin-top: 0.8rem; font-size: 0.78rem; color: var(--ink-40); }
.lm-points { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.lm-points li { position: relative; padding-left: 1.6rem; font-size: 0.98rem; color: var(--ink-60); }
.lm-points li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }
.lm-form { margin-top: 0; max-width: none; }
.lm-fine { margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-40); }
.lm-fine a { text-decoration: underline; text-underline-offset: 2px; }
.lm-thanks { max-width: 34em; margin: 3rem auto 0; }
.lm-thanks h2 { font-size: 1.5rem; font-weight: 650; margin-bottom: 0.8rem; }
.lm-thanks p { color: var(--ink-60); margin-bottom: 1.4rem; }
.lm-trust { margin-top: 3.5rem; font-size: 0.85rem; color: var(--ink-40); }
@media (max-width: 760px) {
  .lm-grid { grid-template-columns: 1fr; }
  .lm-cal { transform: none; }
}

/* free-posts lead magnet: fanned sample designs */
.lm-posts { position: relative; display: flex; justify-content: center; align-items: center; min-height: 20rem; }
.lm-posts img {
  width: 42%; border-radius: 12px; border: 1px solid rgba(29, 29, 31, 0.08);
  box-shadow: 0 24px 55px -25px rgba(0, 0, 0, 0.35);
}
.lm-posts img:nth-child(1) { transform: rotate(-7deg) translateX(18%); z-index: 1; }
.lm-posts img:nth-child(2) { transform: translateY(-4%); z-index: 2; }
.lm-posts img:nth-child(3) { transform: rotate(7deg) translateX(-18%); z-index: 1; }

/* free-posts: step labels + post picker */
.lm-step {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-weight: 700; font-size: 1.05rem; margin: clamp(2.2rem, 5vh, 3rem) 0 1.1rem;
}
.lm-step span {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center;
}
.lm-picker {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem;
  max-width: 46rem; margin: 0 auto; text-align: left;
}
.lm-picker button {
  font: inherit; cursor: pointer; text-align: left;
  background: #fff; border: 1.5px solid rgba(29, 29, 31, 0.12); border-radius: 14px;
  padding: 0.9rem 1rem; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.lm-picker button strong { display: block; font-weight: 650; margin-bottom: 0.15rem; }
.lm-picker button em { font-style: normal; font-size: 0.82rem; color: var(--ink-40); }
.lm-picker button:hover { border-color: var(--gold); }
.lm-picker button.on {
  border-color: var(--gold); background: rgba(184, 134, 47, 0.07);
  box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.15); transform: translateY(-2px);
}
.lm-pick-count { margin-top: 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--ink-40); }
.lm-pick-count.done { color: var(--gold-deep); }
.lm-form-wide { max-width: 46rem; margin: 0 auto; }
.lm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; text-align: left; margin-bottom: 1.1rem; }
.lm-fields label span i { font-style: normal; font-weight: 400; color: var(--ink-40); }
.lm-form-wide .btn { align-self: center; min-width: 20rem; }
@media (max-width: 700px) {
  .lm-picker { grid-template-columns: 1fr 1fr; }
  .lm-fields { grid-template-columns: 1fr; }
  .lm-form-wide .btn { min-width: 0; width: 100%; }
}

/* ================= Demo booking page ================= */
.book-embed {
  max-width: 52rem; margin: clamp(2rem, 5vh, 3rem) auto 0;
  background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.2); overflow: hidden;
}
.book-embed iframe { display: block; width: 100%; height: 720px; border: 0; }
.book-pending {
  padding: 4rem 2rem; text-align: center; color: var(--ink-40); font-weight: 550;
}
.lm-brand a { display: inline-block; }
@media (max-width: 620px) { .book-embed iframe { height: 640px; } }

.book-founder {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 1.2rem; display: block;
  border: 3px solid #fff; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.3);
}

.book-tips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin-top: 1.6rem;
}
.book-tips span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-60);
  background: #fff; border: 1px solid rgba(184, 134, 47, 0.35);
  border-radius: 999px; padding: 0.5em 1.1em;
}
.book-tips i { font-style: normal; }

/* About: founder byline */
.about-founder {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 1.8rem 0 0.6rem;
}
.about-founder img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.3);
}
.about-founder strong { display: block; font-weight: 650; color: var(--ink); }
.about-founder span { font-size: 0.85rem; color: var(--ink-40); }

/* ================= Hero: a listing and your brand become the month ================= */
.display.display-tight { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.hero-copy.wide { max-width: 68rem; }
.hero-stage.fan-hero { perspective: none; }
.fan-stage {
  width: min(1000px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: 250px 70px 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 0; row-gap: 26px; position: relative;
}
.src-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.3); text-align: left;
  transform: translateY(18px); opacity: 0;
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}
.fan-stage.play .src-card { opacity: 1; transform: none; }
.fan-stage.play .src-card.brand { transition-delay: 900ms; }
.src-card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.src-body { padding: 12px 14px 14px; }
.src-tag {
  display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); background: rgba(184,134,47,0.12); border-radius: 999px; padding: 3px 9px; margin-bottom: 7px;
}
.src-title { font-weight: 650; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.25; }
.src-meta { font-size: 0.8rem; color: var(--ink-60); margin-top: 3px; }
.src-price { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.2rem; margin-top: 6px; color: var(--ink); }
.brand-row { display: flex; align-items: center; gap: 12px; padding: 14px 14px 4px; }
.brand-row img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--hairline); }
.swatches { display: flex; gap: 6px; margin-top: 8px; }
.swatches span { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.beam {
  height: 2px; position: relative; align-self: center;
  background: repeating-linear-gradient(90deg, var(--gold-bright) 0 8px, transparent 8px 14px);
  opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 300ms ease, transform 500ms var(--ease-out);
}
.beam::after {
  content: ""; position: absolute; right: -3px; top: -5px; width: 0; height: 0;
  border-left: 8px solid var(--gold-bright); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.fan-stage.play .beam { opacity: 1; transform: scaleX(1); }
.fan-stage.play .beam.b1 { transition-delay: 450ms; }
.fan-stage.play .beam.b2 { transition-delay: 1350ms; }
.fan { position: relative; height: 250px; }
.fan-label {
  position: absolute; left: 0; top: -2px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40);
  opacity: 0; transition: opacity 400ms ease;
}
.fan-stage.play .fan-label { opacity: 1; }
.fan-item {
  position: absolute; left: 0; top: 54%; width: 150px; aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden; background: #ECEAE4;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05);
  transform: translate(-220px, -50%) rotate(0deg) scale(0.6); opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 500ms ease;
}
.fan-item.story { width: 112px; aspect-ratio: 9 / 16; }
.fan-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-item .chip {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 0.62rem; font-weight: 700; color: #262626; background: rgba(255,255,255,0.94);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.fan-stage.play .fan-item { opacity: 1; }
.fan-stage.play .fan-item:nth-of-type(1) { transform: translate(0px, -50%) rotate(-8deg); }
.fan-stage.play .fan-item:nth-of-type(2) { transform: translate(165px, -52%) rotate(-3deg); }
.fan-stage.play .fan-item:nth-of-type(3) { transform: translate(325px, -50%) rotate(3deg); }
.fan-stage.play .fan-item:nth-of-type(4) { transform: translate(490px, -47%) rotate(9deg); }
.fan-stage.play .fan.r1 .fan-item:nth-of-type(1) { transition-delay: 700ms; }
.fan-stage.play .fan.r1 .fan-item:nth-of-type(2) { transition-delay: 850ms; }
.fan-stage.play .fan.r1 .fan-item:nth-of-type(3) { transition-delay: 1000ms; }
.fan-stage.play .fan.r1 .fan-item:nth-of-type(4) { transition-delay: 1150ms; }
.fan-stage.play .fan.r2 .fan-item:nth-of-type(1) { transition-delay: 1600ms; }
.fan-stage.play .fan.r2 .fan-item:nth-of-type(2) { transition-delay: 1750ms; }
.fan-stage.play .fan.r2 .fan-item:nth-of-type(3) { transition-delay: 1900ms; }
.fan-stage.play .fan.r2 .fan-item:nth-of-type(4) { transition-delay: 2050ms; }
@media (max-width: 900px) {
  .fan-stage { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .src-card { width: min(320px, 100%); }
  .beam { width: 2px; height: 34px; background: repeating-linear-gradient(180deg, var(--gold-bright) 0 8px, transparent 8px 14px); transform-origin: top; transform: scaleY(0); }
  .beam::after { right: -5px; top: auto; bottom: -3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold-bright); border-bottom: 0; }
  .fan-stage.play .beam { transform: scaleY(1); }
  .fan { height: auto; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 18px; margin-bottom: 20px; }
  .fan-label { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .fan-item, .fan-stage.play .fan-item { position: static; width: 22%; max-width: 150px; transform: none !important; transition-delay: 0ms !important; }
  .fan-item.story { width: 17%; }
}
@media (prefers-reduced-motion: reduce) {
  .src-card, .beam, .fan-item, .fan-label { transition: none !important; }
}

/* hero fan-out: room for the poster shadows to fade, and a softer shadow */
.hero.hero-fan { padding-bottom: clamp(3rem, 6vh, 5rem); }
.fan-item { box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.src-card { box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.26); }

/* hero fan-out: topic tags read as labels, not part of the poster */
.fan-item .chip {
  color: #fff;
  background: rgba(29, 29, 31, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.58rem;
  padding: 4px 9px;
}

/* studio sky: cards 20% larger */
.sky-post {
  width: clamp(101px, 11.4vw, 146px);
  margin-left: calc(clamp(101px, 11.4vw, 146px) * -0.5);
}

/* demo inputs are movies, not fields: no I-beam, no selection */
.pipe-input, .hero-chat-input, .hero-chat-log, .bk-url { cursor: default; user-select: none; -webkit-user-select: none; }

/* campaign pipes: a conversation with Millie, not an input */
.chat-pipe .chat { width: min(520px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.chat-pipe .bubble { max-width: 86%; padding: 0.7em 1em; border-radius: 16px; font-size: 0.98rem; font-weight: 550; line-height: 1.4; text-align: left; }
.chat-pipe .bubble small { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 4px; }
.chat-pipe .bubble.you { align-self: flex-end; background: linear-gradient(180deg, rgba(184,134,47,0.16), rgba(184,134,47,0.1)); border: 1px solid rgba(184,134,47,0.3); border-bottom-right-radius: 5px; min-width: 9em; }
.chat-pipe .bubble.millie { align-self: flex-start; background: #fff; border: 1px solid var(--hairline); border-bottom-left-radius: 5px; opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 400ms var(--ease-out); }
.chat-pipe .chat.replied .bubble.millie { opacity: 1; transform: none; }
.chat-pipe .bubble .mock-spark { color: var(--gold); margin-right: 0.3em; }
.chat-pipe .typing-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.chat-pipe .typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-40); animation: chat-dot 1s ease-in-out infinite; }
.chat-pipe .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-pipe .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
/* designs drop right after Millie answers (the old delays waited on the typing) */
.chat-pipe.play .pipe-flow .out:nth-child(1) { animation-delay: 0.3s; }
.chat-pipe.play .pipe-flow .out:nth-child(2) { animation-delay: 0.55s; }
.chat-pipe.play .pipe-flow .out:nth-child(3) { animation-delay: 0.8s; }
.chat-pipe.play .pipe-flow .out:nth-child(4) { animation-delay: 1.05s; }
.chat-pipe.play .pipe-flow .out:nth-child(5) { animation-delay: 1.3s; }
.chat-pipe .pipe-note { transition-delay: 1.9s; }

/* brand kit demo: the website address is something you told Millie, not a field */
.bk-chat { display: flex; flex-direction: column; gap: 8px; }
.bk-bubble { max-width: 92%; padding: 0.6em 0.95em; border-radius: 15px; font-size: 0.95rem; font-weight: 550; line-height: 1.4; text-align: left; }
.bk-bubble small { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 3px; }
.bk-bubble.you { align-self: flex-end; background: linear-gradient(180deg, rgba(184,134,47,0.16), rgba(184,134,47,0.1)); border: 1px solid rgba(184,134,47,0.3); border-bottom-right-radius: 5px; min-width: 11em; }
.bk-bubble.you .bk-link-ico { vertical-align: -2px; margin-right: 0.35em; }
.bk-bubble.millie { align-self: flex-start; background: #fff; border: 1px solid var(--hairline); border-bottom-left-radius: 5px; }
.bk-reply { display: inline-block; transition: transform 200ms var(--ease-out), color 200ms ease; }
.bk-reply .mock-spark { color: var(--gold); margin-right: 0.25em; }
.bk-reply.pulse { transform: scale(0.97); color: var(--gold-deep); }

/* Millie demo, after the chat: campaign panel takes the window, calendar in front */
.mock-hero.show-camp { grid-template-columns: 1fr; }
.mock-hero.show-camp .hero-chat { display: none; }
.mock-hero.show-camp .hero-camp { display: flex; animation: camp-in 500ms var(--ease-out); }
.mock-hero.show-camp .hero-stages { margin: 0.7em 0; }
.mock-hero.show-camp .hero-designs { grid-template-columns: repeat(4, minmax(0, 5.4em)); }
.mock-hero.show-camp .hero-mini-cal { flex: 1; margin-top: 0.8em; }
.mock-hero.show-camp .hero-mini-head { font-size: 0.9em; margin-bottom: 0.6em; }
.mock-hero.show-camp .hero-mini-grid { gap: 5px; }
.mock-hero.show-camp .hero-mini-grid span { aspect-ratio: 1 / 0.5; border-radius: 7px; font-size: 1.05em; }

/* Millie demo handoff (desktop): chat pane folds away, campaign panel widens, calendar fills the room left */
@media (min-width: 621px) {
  .mock-hero { transition: grid-template-columns 800ms var(--ease-out); }
  .mock-hero.show-camp { grid-template-columns: 0fr 12fr; }
  .hero-chat { min-width: 0; overflow: hidden; transition: opacity 320ms ease, padding 800ms var(--ease-out), border-color 300ms ease; }
  .mock-hero.show-camp .hero-chat { display: flex; opacity: 0; padding-left: 0; padding-right: 0; border-right-color: transparent; pointer-events: none; }
  .mock-hero.show-camp .hero-camp { animation: none; padding-bottom: 1.4em; }
  .hero-camp { min-height: 0; }
  .mock-hero.show-camp .hero-mini-cal { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 0.8em; }
  .mock-hero.show-camp .hero-mini-grid { flex: 1; min-height: 0; grid-auto-rows: 1fr; }
  .mock-hero.show-camp .hero-mini-grid span { aspect-ratio: auto; min-height: 0; }
  .mock-hero.show-camp .hero-camp-foot { margin-top: 0.9em; padding-top: 0.9em; flex: none; }
}

/* studio sky: three depth tiers so cards stack cleanly instead of slicing through each other */
.studio-sky { transform-style: flat; }
.sky-post { z-index: var(--zi, 2); }
@keyframes studio-ascend {
  0%   { opacity: 0; transform: rotateY(var(--a0)) translateZ(var(--depth, -290px)) translateY(200px) scale(var(--s0, 0.85)); }
  12%  { opacity: var(--op, 0.95); }
  70%  { opacity: var(--op, 0.95); }
  100% { opacity: 0; transform: rotateY(var(--a1)) translateZ(var(--depth, -290px)) translateY(-250px) scale(var(--s1, 0.7)); }
}


/* ================= AI video section (homepage) ================= */
position: sticky; top: 0; z-index: 60; background: var(--ink); color: #fff; font-size: 0.85rem; text-align: center; padding: 10px 16px;
}
color: #e2c48a;
}
max-width: 64rem; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 12px;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
content: ""; flex: 1; height: 1px; background: var(--hairline);
}
height: 1px; background: var(--hairline); margin: clamp(3rem, 7vh, 5rem) 0 0;
}
#ai-video .aivid {
padding: clamp(3rem, 7vh, 5rem) 24px; position: relative; overflow: clip;
}
#ai-video .aivid .section-head {
position: relative;
}
#ai-video .vwrap {
max-width: 64rem; margin: clamp(2.2rem, 5vh, 3.4rem) auto 0; position: relative;
}
#ai-video /* ---- shared: stage chrome ---- */
  .stage {
position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: #111;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 50px 110px -40px rgba(0,0,0,0.45), 0 90px 160px -40px rgba(176,138,69,0.18);
    user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
#ai-video .stage video, #ai-video .stage .still {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#ai-video .stage video {
opacity: 0; transition: opacity 500ms ease;
}
#ai-video .stage video.on {
opacity: 1;
}
#ai-video .crop-bars {
transform: scale(1.24);
}
#ai-video .vlabel {
position: absolute; z-index: 5; top: 14px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; background: rgba(29,29,31,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 7px;
    transition: opacity 300ms ease;
}
#ai-video .vlabel.l {
left: 14px;
}
#ai-video .vlabel.r {
right: 14px;
}
#ai-video .vlabel i {
width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,0.3); animation: rec 1.4s ease-in-out infinite;
}
@keyframes rec {
50% {
opacity: 0.35;
}
}
#ai-video .vlabel .dots {
display: inline-flex; gap: 3px; margin-left: 2px;
}
#ai-video .vlabel .dots i {
width: 4px; height: 4px; background: #fff; box-shadow: none; animation: dotb 1s ease-in-out infinite;
}
#ai-video .vlabel .dots i:nth-child(2) {
animation-delay: 0.15s;
}
#ai-video .vlabel .dots i:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes dotb {
50% {
opacity: 0.3; transform: translateY(-2px);
}
}
#ai-video .vstyles {
position: absolute; z-index: 5; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: flex; gap: 4px; padding: 4px; border-radius: 999px;
    background: rgba(29,29,31,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18);
}
#ai-video .vstyles button {
font: inherit; font-size: 0.8rem; font-weight: 650; color: rgba(255,255,255,0.8); background: transparent; border: 0; border-radius: 999px;
    padding: 7px 14px; cursor: pointer; transition: background 250ms ease, color 250ms ease; white-space: nowrap;
}
#ai-video .vstyles button.on {
background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #fff;
}
#ai-video .vprog {
position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.18);
}
#ai-video .vprog s {
position: absolute; inset: 0; background: var(--gold-bright); transform-origin: left; transform: scaleX(0);
}
#ai-video .flash {
position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none;
}
@keyframes flash {
0% {
opacity: 0;
}
12% {
opacity: 0.55;
}
100% {
opacity: 0;
}
}
#ai-video /* the split: photo clipped to the left of a draggable divider */
  .stage .still-wrap {
position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--split, 100%)) 0 0); transition: opacity 600ms ease;
}
#ai-video .stage .still-wrap .still {
opacity: 0; transition: opacity 400ms ease;
}
#ai-video .stage .still-wrap .still.on {
opacity: 1;
}
#ai-video .stage .divider {
position: absolute; top: 0; bottom: 0; left: var(--split, 100%); width: 2px; margin-left: -1px; z-index: 3; background: rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); transition: opacity 600ms ease;
}
#ai-video .stage .knob {
position: absolute; top: 50%; left: var(--split, 100%); z-index: 4; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%; background: rgba(255,255,255,0.96); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center; gap: 3px; cursor: ew-resize; color: var(--ink); transition: opacity 600ms ease;
}
#ai-video .stage .knob::before, #ai-video .stage .knob::after {
content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
#ai-video .stage .knob::before {
border-right: 6px solid currentColor;
}
#ai-video .stage .knob::after {
border-left: 6px solid currentColor;
}
#ai-video .stage.revealed .still-wrap, #ai-video .stage.revealed .divider, #ai-video .stage.revealed .knob {
transition: clip-path 2600ms var(--ease-out), left 2600ms var(--ease-out), opacity 600ms ease;
}
#ai-video .stage.dragging .still-wrap, #ai-video .stage.dragging .divider, #ai-video .stage.dragging .knob {
transition: none !important;
}
#ai-video /* hold-then-move: the photo covers everything, #ai-video then lets go */
  .stage.mode-hold .divider, #ai-video .stage.mode-hold .knob {
opacity: 0; pointer-events: none;
}
#ai-video .stage.mode-hold .still-wrap {
clip-path: none;
}
#ai-video .stage.mode-hold.go .still-wrap {
opacity: 0;
}
#ai-video .stage.mode-hold.go .flash {
animation: flash 700ms ease-out;
}
#ai-video .stage.mode-hold .vlabel.r {
opacity: 0;
}
#ai-video .stage.mode-hold.go .vlabel.r {
opacity: 1;
}
#ai-video .stage.mode-hold.go .vlabel.l {
opacity: 0.55;
}
#ai-video .stage.mode-hold.go .vlabel.l .dots {
display: none;
}
#ai-video .stage:not(.mode-hold) .vlabel.l .dots {
display: none;
}
#ai-video /* rooms strip */
  .rooms {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px;
}
#ai-video .room {
width: 150px; text-align: left; cursor: pointer; border: 0; background: transparent; padding: 0; font: inherit; color: inherit;
}
#ai-video .room .th {
display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #ECEAE4; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); position: relative; transition: box-shadow 250ms ease, transform 250ms var(--ease-out);
}
#ai-video .room .th img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
#ai-video .room.on .th {
box-shadow: 0 0 0 2.5px var(--gold-bright);
}
#ai-video .room:hover .th {
transform: translateY(-2px);
}
#ai-video .room strong {
display: block; font-size: 0.82rem; font-weight: 650; margin-top: 7px;
}
#ai-video .room span {
font-size: 0.7rem; color: var(--ink-40);
}
#ai-video /* wall */
  .wall {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
#ai-video .tile {
position: relative; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 30px 70px -36px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.06);
}
#ai-video .tile.wide {
grid-column: span 2; grid-row: span 2; aspect-ratio: auto;
}
#ai-video .tile video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#ai-video .tile .cap {
position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#ai-video .tile .cap strong {
font-size: 0.8rem; font-weight: 650; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
#ai-video .tile .cap span {
font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(184,134,47,0.92); border-radius: 999px; padding: 4px 8px; white-space: nowrap;
}
#ai-video .tile.wide .cap strong {
font-size: 1rem;
}
#ai-video .wall-note {
text-align: center; margin-top: 14px; font-size: 0.86rem; color: var(--ink-40);
}
#ai-video /* story */
  .storyC {
display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 60rem; margin: 0 auto;
}
#ai-video .storyC .copy {
text-align: left;
}
#ai-video .storyC .copy .headline {
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}
#ai-video .storyC .copy .section-sub {
margin-left: 0;
}
#ai-video .styles-list {
margin-top: 1.6rem; display: grid; gap: 10px;
}
#ai-video .styles-list button {
display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; text-align: left; font: inherit; color: inherit;
    background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color 250ms ease, box-shadow 250ms ease;
}
#ai-video .styles-list button.on {
border-color: rgba(184,134,47,0.6); box-shadow: 0 0 0 3px rgba(184,134,47,0.12);
}
#ai-video .styles-list button i {
width: 34px; height: 34px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--gold); font-style: normal;
}
#ai-video .styles-list button i svg {
width: 18px; height: 18px;
}
#ai-video .styles-list button strong {
display: block; font-size: 0.95rem; font-weight: 650;
}
#ai-video .styles-list button span {
font-size: 0.84rem; color: var(--ink-60); line-height: 1.4;
}
#ai-video .styles-list button em {
font-style: normal; font-size: 0.7rem; color: var(--ink-40); margin-left: 6px;
}
#ai-video .phone {
position: relative; width: 300px; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; background: #111; margin: 0 auto;
    box-shadow: 0 0 0 7px #1d1d1f, 0 0 0 8px rgba(255,255,255,0.35), 0 50px 100px -40px rgba(0,0,0,0.55);
}
#ai-video .phone video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease;
}
#ai-video .phone video.on {
opacity: 1;
}
#ai-video .phone .bars {
position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 2;
}
#ai-video .phone .bars i {
position: relative; overflow: hidden; flex: 1; height: 2.6px; border-radius: 2px; background: rgba(255,255,255,0.4);
}
#ai-video .phone .bars i s {
position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0);
}
#ai-video .phone .bars i.done s {
transform: scaleX(1);
}
#ai-video .phone .bars i.act s {
animation: fill var(--dur, 6000ms) linear forwards;
}
@keyframes fill {
to {
transform: scaleX(1);
}
}
#ai-video .phone .who {
position: absolute; top: 24px; left: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.78rem; font-weight: 650; text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#ai-video .phone .who i {
width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: block;
}
#ai-video .phone .who i img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
#ai-video .phone .who em {
display: block; font-style: normal; font-weight: 400; font-size: 0.66rem; opacity: 0.8;
}
#ai-video .phone .sticker {
position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%) rotate(-3deg); z-index: 2;
    background: #fff; color: var(--ink); border-radius: 12px; padding: 8px 14px; text-align: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
#ai-video .phone .sticker b {
display: block; font-family: "Playfair Display", serif; font-size: 1rem;
}
#ai-video .phone .sticker span {
font-size: 0.66rem; color: var(--ink-60);
}
#ai-video .phone .reply {
position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 8px;
}
#ai-video .phone .reply span {
flex: 1; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 8px 12px; font-size: 0.74rem; color: rgba(255,255,255,0.85);
}
#ai-video .phone .reply b {
color: #fff; font-size: 1rem;
}
#ai-video /* ---- Option F: big box, #ai-video six cards, #ai-video then the clip inside the design ---- */
  .rooms.six .room {
width: calc(16.66% - 10px);
}
#ai-video .room .th .tags {
position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; gap: 4px; flex-wrap: wrap;
}
#ai-video .room .th .tags b {
font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(29,29,31,0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 999px; padding: 3px 7px;
}
#ai-video .room .th .play {
position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 200ms ease;
}
#ai-video .room .th .play::after {
content: ""; border-left: 9px solid #1d1d1f; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px;
}
#ai-video .room:hover .th .play {
opacity: 1;
}
#ai-video .vstyles button[hidden] {
display: none;
}
#ai-video .hint {
position: absolute; z-index: 6; top: calc(50% + 40px); left: var(--split, 100%); transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 0.78rem; font-weight: 650; color: var(--ink); background: rgba(255,255,255,0.96); border-radius: 999px; padding: 8px 14px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.45); opacity: 0; pointer-events: none;
    transition: opacity 400ms ease, left 2600ms var(--ease-out);
}
#ai-video .hint::before {
content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; background: rgba(255,255,255,0.96); transform: rotate(45deg); border-radius: 2px;
}
#ai-video .hint b {
display: inline-flex; gap: 2px; color: var(--gold); animation: nudge 1.2s ease-in-out infinite;
}
@keyframes nudge {
50% {
transform: translateX(4px);
}
}
#ai-video .stage.hinting .hint:not(.hint2) {
opacity: 1;
}
#ai-video .stage.mode-hold .hint, #ai-video .stage.dragging .hint {
opacity: 0 !important;
}
#ai-video .into {
max-width: 64rem; margin: clamp(3.5rem, 8vh, 6rem) auto 0;
}
#ai-video .into .section-head {
margin-bottom: clamp(1.8rem, 4vh, 2.6rem);
}
#ai-video .pipe3 {
display: grid; grid-template-columns: 1fr 44px 1fr 44px 1.15fr; align-items: center; gap: 12px;
}
#ai-video .pipe3 .node {
position: relative; border-radius: 16px; overflow: hidden; background: #ECEAE4; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.05);
}
#ai-video .pipe3 .node.photo, #ai-video .pipe3 .node.clip {
aspect-ratio: 3 / 2;
}
#ai-video .pipe3 .node img, #ai-video .pipe3 .node video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#ai-video .pipe3 .node .tag {
position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(29,29,31,0.66); backdrop-filter: blur(6px); border-radius: 999px; padding: 5px 9px;
}
#ai-video .pipe3 .arrow {
height: 2px; background: repeating-linear-gradient(90deg, var(--gold-bright) 0 8px, transparent 8px 14px); position: relative;
}
#ai-video .pipe3 .arrow::after {
content: ""; position: absolute; right: -3px; top: -5px; border-left: 8px solid var(--gold-bright); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
#ai-video .pipe3 .lbl {
text-align: center; margin-top: 10px; font-size: 0.82rem; color: var(--ink-60);
}
#ai-video .pipe3 .lbl b {
color: var(--ink); font-weight: 650;
}
#ai-video .mg {
position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #ECEAE4; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.05);
}
#ai-video .mg iframe {
position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; border: 0; transform-origin: 0 0; transform: scale(var(--s, 0.25)); pointer-events: none;
}
#ai-video .mg-divider {
display: flex; align-items: center; gap: 14px; margin: clamp(2rem, 4vh, 2.8rem) 0 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40);
}
#ai-video .mg-divider::before, #ai-video .mg-divider::after {
content: ""; flex: 1; height: 1px; background: var(--hairline);
}
#ai-video .mg-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px;
}
#ai-video .mg-row .lbl {
text-align: center; margin-top: 8px; font-size: 0.8rem; color: var(--ink-40);
}
#ai-video .mg-row .lbl b {
color: var(--ink); font-weight: 650;
}
@media (max-width: 720px) {
#ai-video .rooms.six .room {
width: calc(33.33% - 8px);
}
#ai-video .pipe3 {
grid-template-columns: 1fr 1fr; gap: 10px;
}
#ai-video .pipe3 .arrow {
display: none;
}
#ai-video .pipe3 > div:last-child {
grid-column: span 2; max-width: 260px; margin: 0 auto;
}
#ai-video .mg-row {
grid-template-columns: 1fr; max-width: 260px; margin-left: auto; margin-right: auto;
}
#ai-video .stage {
border-radius: 14px;
}
#ai-video .vstyles button {
font-size: 0.72rem; padding: 6px 10px;
}
#ai-video .vlabel {
font-size: 0.56rem; padding: 5px 8px;
}
#ai-video .room {
width: calc(33.33% - 8px);
}
#ai-video .room span {
display: none;
}
#ai-video .wall {
grid-template-columns: repeat(2, 1fr); gap: 8px;
}
#ai-video .tile {
border-radius: 10px;
}
#ai-video .tile.wide {
grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2;
}
#ai-video .tile .cap strong {
font-size: 0.7rem;
}
#ai-video .tile .cap span {
font-size: 0.5rem;
}
#ai-video .storyC {
grid-template-columns: 1fr;
}
#ai-video .storyC .copy {
text-align: center;
}
#ai-video .storyC .copy .section-sub {
margin-left: auto;
}
#ai-video .phone {
width: 240px;
}
}
@media (prefers-reduced-motion: reduce) {
#ai-video .stage .still-wrap, #ai-video .stage .divider, #ai-video .stage .knob, #ai-video .stage video {
transition: none !important;
}
#ai-video .flash {
animation: none !important;
}
#ai-video .vlabel i {
animation: none;
}
}

/* TikTok mockup: the slides are clips now, same crossfade as the photos had */
.sm-tt-slides video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms ease; }
.sm-tt-slides video.on { opacity: 1; }

/* two-ways cards: an icon tile above the kicker */
.way-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: var(--cream); color: var(--gold); margin-bottom: 1.1rem; box-shadow: inset 0 0 0 1px rgba(184,134,47,0.18); transition: transform 300ms var(--ease-out), background 250ms ease; }
.way-icon svg { width: 23px; height: 23px; }
.way-card:hover .way-icon { transform: translateY(-2px) rotate(-4deg); background: rgba(184,134,47,0.16); }

/* replay pills under one-shot animations */
.replay-row { text-align: center; margin-top: 1.1rem; }
.replay {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-60);
  background: rgba(29,29,31,0.05); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0.4em 0.9em; cursor: pointer; transition: background 200ms ease, color 200ms ease;
}
.replay:hover { color: var(--ink); background: rgba(29,29,31,0.09); }
.hero-replay { margin-top: 0.4rem; }

/* AI video: second hint, pointing at Step Inside */

#ai-video .hint2 { top: auto; bottom: 66px; left: 50%; transform: translateX(-50%); transition: opacity 400ms ease; }
#ai-video .hint2::before { top: auto; bottom: -6px; }
#ai-video .hint2 b { animation: nudge-down 1.2s ease-in-out infinite; }
  @keyframes nudge-down { 50% { transform: translateY(4px); } }
#ai-video .stage.hinting2 .hint2 { opacity: 1; }
#ai-video .stage.mode-hold .hint2 { opacity: 0 !important; }



/* ================= Staging section ================= */
.staging { padding: clamp(4rem, 9vh, 7rem) 24px; position: relative; overflow: clip; }
.stg-wrap { max-width: 64rem; margin: clamp(2.2rem, 5vh, 3.4rem) auto 0; position: relative; }
.stg-tabs { display: flex; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--hairline); width: max-content; margin: 0 auto 16px; }
.stg-tabs button { font: inherit; font-size: 0.86rem; font-weight: 650; color: var(--ink-60); background: transparent; border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: background 250ms ease, color 250ms ease; }
.stg-tabs button.on { background: var(--ink); color: #fff; }
.stg-stage {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: #ECEAE4;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 50px 110px -40px rgba(0,0,0,0.45), 0 90px 160px -40px rgba(176,138,69,0.18);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.stg-after img, .stg-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stg-after img { opacity: 0; transition: opacity 700ms ease; }
.stg-after img.on { opacity: 1; }
.stg-before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--split, 100%)) 0 0); }
.stg-divider { position: absolute; top: 0; bottom: 0; left: var(--split, 100%); width: 2px; margin-left: -1px; z-index: 3; background: rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.stg-knob {
  position: absolute; top: 50%; left: var(--split, 100%); z-index: 4; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(255,255,255,0.96); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center; gap: 3px; cursor: ew-resize; color: var(--ink);
}
.stg-knob::before, .stg-knob::after { content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.stg-knob::before { border-right: 6px solid currentColor; }
.stg-knob::after { border-left: 6px solid currentColor; }
.stg-stage.revealed .stg-before, .stg-stage.revealed .stg-divider, .stg-stage.revealed .stg-knob { transition: clip-path 2600ms var(--ease-out), left 2600ms var(--ease-out); }
.stg-stage.dragging .stg-before, .stg-stage.dragging .stg-divider, .stg-stage.dragging .stg-knob { transition: none !important; }
.stg-label {
  position: absolute; z-index: 5; top: 14px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(29,29,31,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 6px 11px;
}
.stg-label.l { left: 14px; }
.stg-label.r { right: 14px; }
.stg-looks {
  position: absolute; z-index: 5; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 28px);
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: rgba(29,29,31,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18);
}
.stg-looks::-webkit-scrollbar { display: none; }
.stg-looks button { font: inherit; font-size: 0.8rem; font-weight: 650; color: rgba(255,255,255,0.8); background: transparent; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; transition: background 250ms ease, color 250ms ease; }
.stg-looks button.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #fff; }
.stg-items { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.stg-item { width: 150px; text-align: left; cursor: pointer; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; }
.stg-item .th { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #ECEAE4; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); transition: box-shadow 250ms ease, transform 250ms var(--ease-out); }
.stg-item .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stg-item.on .th { box-shadow: 0 0 0 2.5px var(--gold-bright); }
.stg-item:hover .th { transform: translateY(-2px); }
.stg-item strong { display: block; font-size: 0.82rem; font-weight: 650; margin-top: 7px; }
@media (max-width: 720px) {
  .stg-stage { border-radius: 14px; }
  .stg-looks button { font-size: 0.7rem; padding: 6px 10px; }
  .stg-label { font-size: 0.56rem; padding: 5px 8px; }
  .stg-item { width: calc(33.33% - 8px); }
  .stg-item strong { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stg-stage.revealed .stg-before, .stg-stage.revealed .stg-divider, .stg-stage.revealed .stg-knob, .stg-after img { transition: none !important; }
}

/* AI video: still under the clips */
#ai-video .stage .base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* golden underline inside body copy, drawn when the paragraph reveals */
.section-sub .tg { font-style: normal; font-weight: 600; color: var(--ink); }
.section-sub .tg .tg-stroke { color: var(--gold-bright); }
.section-sub.in .tg .tg-stroke path { animation: tg-draw 650ms var(--ease-out) 700ms forwards; }

/* campaign chat: the typed line wraps inside its bubble like a real message */
.chat-pipe .bubble .pipe-text { white-space: normal; overflow: visible; }
.chat-pipe .bubble.you { max-width: 82%; }


/* ================= chat-driven demo sections (share, edit) ================= */
.mdemo .flow-wrap {
  max-width: 72rem; margin: clamp(2.6rem, 6vh, 4.2rem) auto 0; padding: 0 24px;
}
.mdemo .flow {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 40px 90px -40px rgba(0,0,0,0.25), 0 90px 160px -40px rgba(176,138,69,0.12);
    overflow: hidden; text-align: left;
    user-select: none; -webkit-user-select: none;
}
.mdemo .rail {
  display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--hairline);
    background: var(--bg-raised); overflow-x: auto; scrollbar-width: none;
}
.mdemo .rail::-webkit-scrollbar {
  display: none;
}
.mdemo .rail li {
  position: relative; flex: 1 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 10px; border-radius: 10px; cursor: pointer;
    font-size: 0.86rem; font-weight: 600; color: var(--ink-40); white-space: nowrap;
    transition: color 250ms ease, background 250ms ease;
}
.mdemo .rail li:hover {
  color: var(--ink);
}
.mdemo .rail li b {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 700; color: var(--ink-40);
    box-shadow: inset 0 0 0 1.5px rgba(29,29,31,0.18); background: #fff;
    transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
.mdemo .rail li small {
  font-weight: 500; color: var(--ink-40);
}
.mdemo .rail li.done {
  color: var(--ink-60);
}
.mdemo .rail li.done b {
  background: var(--ink); color: #fff; box-shadow: none; font-size: 0;
}
.mdemo .rail li.done b::after {
  content: "✓"; font-size: 0.62rem;
}
.mdemo .rail li.on {
  color: var(--ink); background: #fff; box-shadow: 0 1px 0 var(--hairline), 0 6px 18px -12px rgba(0,0,0,0.3);
}
.mdemo .rail li.on b {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #fff; box-shadow: none;
}
.mdemo .rail li i {
  position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
    background: rgba(184,134,47,0.18); overflow: hidden; opacity: 0;
}
.mdemo .rail li i s {
  position: absolute; inset: 0; background: var(--gold-bright); transform-origin: left; transform: scaleX(0);
}
.mdemo .rail li.on i {
  opacity: 1;
}
.mdemo .rail li.on i s {
  animation: rail-fill var(--dur, 4000ms) linear forwards;
}
@keyframes rail-fill {
to {
  transform: scaleX(1);
}
}
.mdemo .flow-body {
  display: grid; grid-template-columns: 300px 1fr; height: 540px; position: relative;
}
.mdemo .chat-col, .mdemo .canvas {
  transition: opacity 600ms ease, filter 600ms ease;
}
.mdemo .flow-body.focus-chat .canvas {
  opacity: 0.35; filter: saturate(0.4);
}
.mdemo .flow-body.focus-chat.your-turn .canvas {
  opacity: 0.78; filter: saturate(0.8);
}
.mdemo .scene-cap {
  transition: opacity 400ms ease 900ms, bottom 400ms var(--ease-out);
}
.mdemo .flow-body.your-turn .scene-cap {
  bottom: 62px;
}
.mdemo .flow-body.focus-canvas .chat-col {
  opacity: 0.42; filter: saturate(0.4);
}
.mdemo .flow-body.focus-chat .chat-col {
  box-shadow: inset -3px 0 0 var(--gold-bright);
}
.mdemo .flow-body.focus-canvas .canvas {
  box-shadow: inset 3px 0 0 var(--gold-bright);
}
.mdemo .chat-col {
  border-right: 1px solid var(--hairline); background: #fbfaf8;
    display: flex; flex-direction: column; padding: 16px; min-height: 0; overflow: hidden; position: relative;
}
.mdemo .send-hint {
  position: absolute; left: 312px; bottom: 22px; z-index: 6;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 0.78rem; font-weight: 650; color: #fff; background: var(--ink); border-radius: 999px; padding: 8px 14px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity 300ms ease, transform 400ms var(--ease-out);
}
.mdemo .send-hint::after {
  content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); border-radius: 2px;
}
.mdemo .send-hint b {
  color: var(--gold-bright); animation: hint-left 1.2s ease-in-out infinite;
}
@keyframes hint-left {
50% {
  transform: translateX(-3px);
}
}
.mdemo .send-hint.show {
  opacity: 1; transform: none;
}
.mdemo .chat-head {
  display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.mdemo .chat-head .mb-ava {
  width: 34px; height: 34px;
}
.mdemo .chat-head strong {
  display: block; font-size: 0.92rem; font-weight: 650; line-height: 1.15;
}
.mdemo .chat-head span {
  font-size: 0.74rem; color: var(--ink-40);
}
.mdemo .chat-head .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34c759; display: inline-block; margin-right: 4px;
}
.mdemo .chat-log {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding-top: 14px; overflow: hidden;
}
.mdemo .msg {
  max-width: 92%; padding: 0.66em 0.9em; border-radius: 16px; font-size: 0.9rem; font-weight: 500; line-height: 1.4;
    opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 420ms var(--ease-out);
}
.mdemo .msg.show {
  opacity: 1; transform: none;
}
.mdemo .msg small {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 3px;
}
.mdemo .msg.you {
  align-self: flex-end; background: linear-gradient(180deg, rgba(184,134,47,0.16), rgba(184,134,47,0.1)); border: 1px solid rgba(184,134,47,0.3); border-bottom-right-radius: 5px; min-width: 6em;
}
.mdemo .msg.millie {
  align-self: flex-start; background: #fff; border: 1px solid var(--hairline); border-bottom-left-radius: 5px;
}
.mdemo .msg .spark {
  color: var(--gold); margin-right: 0.3em;
}
.mdemo .caret {
  display: inline-block; width: 2px; height: 0.95em; background: var(--gold-bright); vertical-align: -0.15em; margin-left: 2px; animation: caret-blink 900ms steps(1) infinite;
}
@keyframes caret-blink {
50% {
  opacity: 0;
}
}
.mdemo .dots {
  display: inline-flex; gap: 3px; vertical-align: middle; padding: 0.2em 0;
}
.mdemo .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-40); animation: dot-bob 1s ease-in-out infinite;
}
.mdemo .dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.mdemo .dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dot-bob {
0%, 100% {
  transform: translateY(0); opacity: 0.5;
}
50% {
  transform: translateY(-3px); opacity: 1;
}
}
.mdemo .chat-foot {
  margin-top: 12px; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    border: 1px solid var(--hairline); border-radius: 18px; padding: 8px 12px; background: #fff;
    font: inherit; font-size: 0.84rem; color: var(--ink-40); cursor: default;
    transition: border-color 250ms ease, box-shadow 250ms ease, color 250ms ease;
}
.mdemo .chat-foot span {
  line-height: 1.3;
}
.mdemo .chat-foot.ready {
  border-color: rgba(184,134,47,0.6); box-shadow: 0 0 0 3px rgba(184,134,47,0.12); color: var(--ink); cursor: pointer;
}
.mdemo .chat-foot.ready b {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); animation: send-pulse 1.4s ease-in-out infinite;
}
.mdemo .chat-foot.ready:hover {
  box-shadow: 0 0 0 4px rgba(184,134,47,0.2);
}
@keyframes send-pulse {
50% {
  transform: scale(1.12); box-shadow: 0 0 0 6px rgba(184,134,47,0.18);
}
}
.mdemo .chat-foot span {
  flex: 1;
}
.mdemo .chat-foot b {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.mdemo .canvas {
  position: relative; overflow: hidden; background:
    radial-gradient(60% 50% at 50% 0%, rgba(176,138,69,0.08), transparent 70%), #fff;
}
.mdemo .scene {
  position: absolute; inset: 0; padding: 26px; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 360ms ease, visibility 0s linear 360ms;
}
.mdemo .scene.on {
  opacity: 1; visibility: visible; transition: opacity 360ms ease;
}
.mdemo .pop {
  opacity: 0; transform: translateY(14px) scale(0.94); transition: opacity 420ms ease, transform 620ms var(--ease-out);
}
.mdemo .scene.on .pop {
  opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 150ms + var(--base, 0ms));
}
.mdemo .scene:not(.on) .pop {
  transition: none;
}
.mdemo .tag {
  display: inline-flex; align-items: center; gap: 0.4em;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold); background: rgba(184,134,47,0.12); border-radius: 999px; padding: 4px 10px;
}
.mdemo .tag.dark {
  color: #fff; background: rgba(29,29,31,0.8);
}
.mdemo .scene-cap {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 0.82rem; color: var(--ink-40);
    opacity: 0; transition: opacity 400ms ease 900ms;
}
.mdemo .scene.on .scene-cap {
  opacity: 1;
}
.mdemo .lst {
  width: min(360px, 100%); background: #fff; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0,0,0,0.3);
}
.mdemo .lst-photo {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #ECEAE4;
}
.mdemo .lst-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block;
}
.mdemo .lst-photo .tag {
  position: absolute; left: 10px; top: 10px;
}
.mdemo .lst-photo .count {
  position: absolute; right: 10px; bottom: 10px; font-size: 0.66rem; font-weight: 700; color: #fff; background: rgba(29,29,31,0.7); border-radius: 999px; padding: 3px 8px;
}
.mdemo .lst-body {
  padding: 14px 16px 16px;
}
.mdemo .lst-title {
  font-weight: 650; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.25;
}
.mdemo .lst-meta {
  font-size: 0.82rem; color: var(--ink-60); margin-top: 3px;
}
.mdemo .lst-price {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.35rem; margin-top: 8px; color: var(--ink);
}
.mdemo .lst-facts {
  display: flex; gap: 12px; margin-top: 10px; font-size: 0.78rem; color: var(--ink-60);
}
.mdemo .lst-facts span b {
  color: var(--ink); font-weight: 650;
}
.mdemo .plan {
  width: min(520px, 100%); background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.25);
}
.mdemo .plan-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.mdemo .plan-head strong {
  font-size: 0.95rem; font-weight: 650;
}
.mdemo .plan-head span {
  font-size: 0.76rem; color: var(--ink-40);
}
.mdemo .week {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hairline);
}
.mdemo .week em {
  font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40);
}
.mdemo .week div {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mdemo .chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: var(--ink);
    border: 1px solid var(--hairline); background: #fbfaf8; border-radius: 999px; padding: 5px 10px 5px 7px;
}
.mdemo .chip u {
  text-decoration: none; font-size: 0.64rem; font-weight: 700; color: #fff; background: var(--ink); border-radius: 999px; padding: 2px 6px;
}
.mdemo .chip.vid u {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}
.mdemo .chip svg {
  width: 12px; height: 12px; color: var(--ink-40);
}
.mdemo .plan-sum {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 0.8rem; color: var(--ink-60); display: flex; justify-content: space-between;
}
.mdemo .plan-sum b {
  color: var(--ink); font-weight: 650;
}
.mdemo .designs {
  display: grid; grid-template-columns: repeat(3, 138px); gap: 14px; position: relative;
}
.mdemo .poster {
  aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #ECEAE4; position: relative;
    box-shadow: 0 16px 36px -16px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.05);
}
.mdemo .poster img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mdemo .designs .poster.story {
  width: 98px; aspect-ratio: 9 / 16; justify-self: center;
}
.mdemo .poster .chip-lbl {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
    background: rgba(29,29,31,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: 999px; padding: 4px 9px; white-space: nowrap;
}
.mdemo .designs .poster:nth-of-type(1) {
  transform: translateY(14px) rotate(-3deg) scale(0.92);
}
.mdemo .designs .poster:nth-of-type(3) {
  transform: translateY(14px) rotate(3deg) scale(0.92);
}
.mdemo .designs .poster:nth-of-type(5) {
  transform: translateY(14px) rotate(2deg) scale(0.92);
}
.mdemo .kit-badge {
  position: absolute; right: -14px; top: -16px; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--hairline); border-radius: 999px;
    padding: 6px 12px 6px 7px; font-size: 0.74rem; font-weight: 650; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.3);
}
.mdemo .kit-badge .sw {
  display: flex;
}
.mdemo .kit-badge .sw i {
  width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; margin-right: -4px;
}
.mdemo .write {
  display: flex; align-items: center; gap: 22px;
}
.mdemo .write .poster {
  width: 210px; flex: none;
}
.mdemo .cap-card {
  width: min(320px, 100%); background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.25);
}
.mdemo .cap-head {
  display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--ink-40); padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
}
.mdemo .cap-head svg {
  width: 14px; height: 14px; color: var(--ink);
}
.mdemo .cap-head b {
  color: var(--ink); font-weight: 650;
}
.mdemo .cap-text {
  font-size: 0.86rem; line-height: 1.5; color: var(--ink); min-height: 7.2em; padding-top: 10px;
}
.mdemo .cap-text .tags {
  color: var(--gold-deep); display: block; margin-top: 6px;
}
.mdemo .cap-foot {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); display: flex; gap: 6px; flex-wrap: wrap;
}
.mdemo .cap-foot span {
  font-size: 0.7rem; font-weight: 600; color: var(--ink-60); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 9px; background: #fbfaf8;
}
.mdemo .cap-foot span::before {
  content: "“";
}
.mdemo .cap-foot span::after {
  content: "”";
}
.mdemo .stg {
  width: min(560px, 100%);
}
.mdemo .stg-frame {
  position: relative; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #ECEAE4; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05);
}
.mdemo .stg-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms ease;
}
.mdemo .stg-frame > img.on {
  opacity: 1;
}
.mdemo .stg-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2; transition: background 300ms ease;
}
.mdemo .stg-badge.done {
  background: rgba(184,134,47,0.95); color: #fff;
}
.mdemo .stg-chips {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; justify-content: center;
}
.mdemo .stg-chips b {
  font-size: 0.7rem; font-weight: 650; color: #fff; background: rgba(0,0,0,0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 5px 11px; white-space: nowrap; transition: background 250ms ease, border-color 250ms ease;
}
.mdemo .stg-chips b.on {
  background: rgba(184,134,47,0.92); border-color: rgba(255,255,255,0.5);
}
.mdemo .wall6 {
  display: grid; grid-template-columns: repeat(3, 176px); gap: 10px;
}
.mdemo .wall6 .tile {
  position: relative; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #ECEAE4; box-shadow: 0 16px 36px -16px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.05);
}
.mdemo .wall6 video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.mdemo .wall6 video.crop-bars {
  transform: scale(1.24);
}
.mdemo .wall6 .chip-lbl {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(29,29,31,0.72); backdrop-filter: blur(6px); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.mdemo .mgs {
  display: flex; gap: 16px; align-items: flex-start;
}
.mdemo .mg {
  position: relative; width: 168px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #ECEAE4; box-shadow: 0 16px 36px -16px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.05);
}
.mdemo .mg iframe {
  position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; border: 0; transform-origin: 0 0; transform: scale(var(--s, 0.155)); pointer-events: none;
}
.mdemo .mg .chip-lbl {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(29,29,31,0.72); backdrop-filter: blur(6px); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.mdemo .film {
  display: flex; align-items: center; gap: 18px;
}
.mdemo .still {
  width: 200px; flex: none;
}
.mdemo .still .frame {
  aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 20px 44px -22px rgba(0,0,0,0.35);
}
.mdemo .still .frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mdemo .still .frame img.crop-bars {
  transform: scale(1.24);
}
.mdemo .still p {
  margin-top: 8px; font-size: 0.76rem; color: var(--ink-40); text-align: center;
}
.mdemo .beam {
  width: 54px; height: 2px; flex: none; position: relative;
    background: repeating-linear-gradient(90deg, var(--gold-bright) 0 8px, transparent 8px 14px);
    opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 300ms ease 500ms, transform 500ms var(--ease-out) 500ms;
}
.mdemo .beam::after {
  content: ""; position: absolute; right: -3px; top: -5px; width: 0; height: 0;
    border-left: 8px solid var(--gold-bright); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.mdemo .scene.on .beam {
  opacity: 1; transform: scaleX(1);
}
.mdemo .phone {
  position: relative; width: 200px; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #111;
    box-shadow: 0 0 0 6px #1d1d1f, 0 0 0 7px rgba(255,255,255,0.35), 0 36px 70px -30px rgba(0,0,0,0.5);
    flex: none;
}
.mdemo .phone video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease;
}
.mdemo .phone video.on {
  opacity: 1;
}
.mdemo .phone video.crop-bars {
  transform: scale(1.24);
}
.mdemo .phone .bars {
  position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2;
}
.mdemo .phone .bars i {
  position: relative; overflow: hidden; flex: 1; height: 2.4px; border-radius: 2px; background: rgba(255,255,255,0.4);
}
.mdemo .phone .bars i s {
  position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0);
}
.mdemo .phone .bars i.done s {
  transform: scaleX(1);
}
.mdemo .phone .bars i.act s {
  animation: rail-fill var(--dur, 6000ms) linear forwards;
}
.mdemo .phone .who {
  position: absolute; top: 20px; left: 12px; z-index: 2; display: flex; align-items: center; gap: 7px; color: #fff; font-size: 0.7rem; font-weight: 650; text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.mdemo .phone .who i {
  width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); display: inline-flex; align-items: center; justify-content: center; font-size: 0.58rem; font-style: normal;
}
.mdemo .phone .who em {
  display: block; font-style: normal; font-weight: 400; font-size: 0.6rem; opacity: 0.8;
}
.mdemo .phone .styles {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 2; display: flex; gap: 6px; justify-content: center;
}
.mdemo .phone .styles b {
  font-size: 0.6rem; font-weight: 650; white-space: nowrap; color: #fff; background: rgba(0,0,0,0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 4px 8px; transition: background 250ms ease, border-color 250ms ease;
}
.mdemo .phone .styles b.on {
  background: rgba(184,134,47,0.9); border-color: rgba(255,255,255,0.5);
}
.mdemo .phone .styles b::before {
  content: "✦ "; opacity: 0;
}
.mdemo .phone .styles b.on::before {
  opacity: 1;
}
.mdemo .cal {
  width: min(600px, 100%); background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.25); position: relative;
}
.mdemo .cal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.mdemo .cal-head strong {
  font-size: 0.95rem; font-weight: 650;
}
.mdemo .cal-badge {
  font-size: 0.74rem; font-weight: 650; color: var(--gold); border: 1.2px solid var(--gold); border-radius: 999px; padding: 4px 10px;
    opacity: 0; transition: opacity 400ms ease 1900ms, background 300ms ease, color 300ms ease;
}
.mdemo .scene.on .cal-badge {
  opacity: 1;
}
.mdemo .cal-badge b {
  display: none; font-weight: inherit;
}
.mdemo .cal-badge.approved {
  background: var(--ink); color: #fff; border-color: var(--ink); transition-delay: 0ms;
}
.mdemo .cal-badge.approved > span {
  display: none;
}
.mdemo .cal-badge.approved b {
  display: inline;
}
.mdemo .cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px;
}
.mdemo .cal-days span {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-40); text-align: center;
}
.mdemo .cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.mdemo .cell {
  aspect-ratio: 4 / 5; border-radius: 8px; position: relative; overflow: hidden;
    background: #f6f4ef; border: 1px solid rgba(29,29,31,0.07);
}
.mdemo .cell em {
  position: absolute; left: 6px; top: 5px; font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--ink-40); z-index: 2; transition: color 300ms ease;
}
.mdemo .cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(0.7); transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out);
}
.mdemo .cell.on img {
  opacity: 1; transform: none;
}
.mdemo .cell.on em {
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.mdemo .cell .play {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(255,255,255,0.92); display: none; align-items: center; justify-content: center; z-index: 2;
}
.mdemo .cell .play::after {
  content: ""; border-left: 7px solid #1d1d1f; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; margin-left: 2px;
}
.mdemo .cell.vid.on .play {
  display: inline-flex;
}
.mdemo .cell .plat {
  position: absolute; right: 4px; bottom: 4px; z-index: 2; display: flex; gap: 2px; opacity: 0; transition: opacity 300ms ease 300ms;
}
.mdemo .cell.on .plat {
  opacity: 1;
}
.mdemo .cell .plat i {
  width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.94); display: inline-flex; align-items: center; justify-content: center;
}
.mdemo .cell .plat svg {
  width: 8px; height: 8px; color: #1d1d1f;
}
.mdemo .cal-foot {
  margin-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--ink-60);
}
.mdemo .cal-foot .btn {
  pointer-events: none;
}
.mdemo .cal-foot .approve {
  opacity: 0; transform: translateY(6px); transition: opacity 350ms ease 2100ms, transform 450ms var(--ease-out) 2100ms;
}
.mdemo .scene.on .cal-foot .approve {
  opacity: 1; transform: none;
}
.mdemo .cal.approved .approve {
  opacity: 0; transition-delay: 0ms;
}
.mdemo .cursor {
  position: absolute; width: 18px; z-index: 10; left: 0; top: 0; opacity: 0; pointer-events: none; transition: transform 600ms var(--ease-out), opacity 250ms ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.mdemo .cursor.show {
  opacity: 1;
}
.mdemo .cursor.press {
  animation: press 220ms ease;
}
@keyframes press {
50% {
  scale: 0.82;
}
}
@media (max-width: 900px) {
.mdemo .flow-body {
  grid-template-columns: 1fr; height: auto;
}
.mdemo .chat-col {
  border-right: 0; border-bottom: 1px solid var(--hairline);
}
.mdemo .chat-log {
  min-height: 150px; max-height: 210px;
}
.mdemo .send-hint {
  left: auto; right: 16px; bottom: auto; top: 0; transform: translateY(-110%);
}
.mdemo .send-hint::after {
  left: auto; right: 22px; top: auto; bottom: -5px; margin: 0;
}
.mdemo .send-hint b {
  animation: hint-down 1.2s ease-in-out infinite;
}
@keyframes hint-down {
50% {
  transform: translateY(3px);
}
}
.mdemo .canvas {
  min-height: 470px;
}
.mdemo .scene {
  padding: 18px;
}
.mdemo .designs {
  grid-template-columns: repeat(3, minmax(0, 118px)); gap: 10px;
}
.mdemo .kit-badge {
  right: 0; top: -14px;
}
.mdemo .write {
  flex-direction: column; gap: 14px;
}
.mdemo .write .poster {
  width: 150px;
}
.mdemo .cap-text {
  min-height: 6em;
}
.mdemo .film {
  flex-direction: column; gap: 10px;
}
.mdemo .still {
  width: 136px;
}
.mdemo .still p {
  display: none;
}
.mdemo .beam {
  width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--gold-bright) 0 8px, transparent 8px 14px); transform-origin: top; transform: scaleY(0);
}
.mdemo .beam::after {
  right: -5px; top: auto; bottom: -3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold-bright); border-bottom: 0;
}
.mdemo .scene.on .beam {
  transform: scaleY(1);
}
.mdemo .phone {
  width: 136px;
}
.mdemo .wall6 {
  grid-template-columns: repeat(2, minmax(0, 150px)); gap: 8px;
}
.mdemo .mgs {
  gap: 10px;
}
.mdemo .mg {
  width: 104px;
}
.mdemo .stg-chips b {
  font-size: 0.56rem; padding: 4px 7px;
}
.mdemo .stg-badge {
  font-size: 0.54rem;
}
.mdemo .phone .who {
  font-size: 0.58rem; top: 16px; left: 9px;
}
.mdemo .phone .who em {
  display: none;
}
.mdemo .phone .who > span {
  display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mdemo .scene-cap {
  display: none;
}
.mdemo .phone .styles b {
  font-size: 0.5rem; padding: 3px 6px;
}
.mdemo .cal-head {
  flex-wrap: wrap; gap: 6px;
}
.mdemo .cal-badge .long {
  display: none;
}
.mdemo .cell em {
  font-size: 0.52rem;
}
.mdemo .cal-foot {
  flex-direction: column; gap: 8px; align-items: stretch; text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.mdemo .msg, .mdemo .pop, .mdemo .scene, .mdemo .beam, .mdemo .cell img, .mdemo .cal-badge, .mdemo .cursor {
  transition: none !important;
}
.mdemo .rail li.on i s, .mdemo .phone .bars i s {
  animation: none !important; transform: scaleX(1);
}
.mdemo .caret, .mdemo .dots i {
  animation: none;
}
}
.mdemo .msg .att {
  display: block; width: 150px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; margin-top: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.mdemo .msg .att img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mdemo .chat-foot .att-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 650; color: var(--ink-60); background: var(--cream); border-radius: 8px; padding: 3px 8px 3px 3px; margin-right: 6px; vertical-align: middle;
}
.mdemo .chat-foot .att-chip img {
  width: 22px; height: 22px; border-radius: 5px; object-fit: cover;
}
.mdemo .edit-wrap {
  display: flex; align-items: center; gap: 22px;
}
.mdemo .poster-stack {
  position: relative; width: 230px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #ECEAE4; box-shadow: 0 16px 36px -16px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.05); flex: none;
}
.mdemo .poster-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms ease;
}
.mdemo .poster-stack img.on {
  opacity: 1;
}
.mdemo .poster-stack .kit {
  position: absolute; left: 8px; top: 8px; z-index: 2; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(29,29,31,0.72); backdrop-filter: blur(6px); border-radius: 999px; padding: 4px 8px; transition: opacity 300ms ease;
}
.mdemo .poster-stack .swap-glow {
  position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 3px var(--gold-bright); border-radius: 10px; opacity: 0; transition: opacity 300ms ease; pointer-events: none;
}
.mdemo .poster-stack.flash .swap-glow {
  opacity: 1;
}
.mdemo .cap-card.dim {
  opacity: 0.35;
}
.mdemo .cap-text s {
  text-decoration: line-through; color: var(--ink-40);
}
@media (max-width: 900px) {
.mdemo .edit-wrap {
  flex-direction: column; gap: 12px;
}
.mdemo .poster-stack {
  width: 170px;
}
}
.mdemo { text-align: left; }
.mdemo .flow-wrap { margin-top: clamp(2.2rem, 5vh, 3.4rem); }
.millie .mdemo { margin-bottom: clamp(2rem, 4vh, 3rem); }
@media (max-width: 900px) {
  /* the pointer floats above the Send row (bottom of the stacked chat column), never over the draft */
  .mdemo .send-hint { left: auto; right: 16px; bottom: auto; top: calc(var(--chat-h, 330px) - 112px); transform: none; font-size: 0.72rem; padding: 7px 11px; }
  .mdemo .send-hint.show { transform: none; }
  /* scenes flow in the document on phones, so the canvas is exactly as tall as what it shows */
  .mdemo .canvas { min-height: 0; }
  .mdemo .scene { position: relative; inset: auto; padding: 18px 14px 22px; }
  .mdemo .scene:not(.on) { display: none; }
  .mdemo .scene.on { display: flex; visibility: visible; opacity: 1; }
  .mdemo .flow-body { min-height: 0; }
  /* on phones the hint lives inside the Send row as a caption, so it never covers a message */
  .mdemo .send-hint { display: none; }
  .mdemo .chat-foot { flex-wrap: wrap; }
  .mdemo .chat-foot.ready::after { content: attr(data-hint) " ↑"; flex-basis: 100%; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold); padding-top: 5px; }
  .mdemo .plan-sum { flex-direction: column; gap: 3px; }
  .mdemo .plan-head { flex-wrap: wrap; gap: 2px 10px; }
}
/* staging: the look chips wrap on phones instead of scrolling */
@media (max-width: 720px) {
  .stg-looks { flex-wrap: wrap; justify-content: center; border-radius: 16px; max-width: calc(100% - 20px); left: 10px; transform: none; }
}

/* edit demo: the stage never re-centres while the caption retypes */
.mdemo .edit-wrap { width: min(100%, 572px); }
.mdemo .edit-wrap .cap-card { flex: none; width: 320px; }
.mdemo .edit-wrap .cap-text { min-height: 9.6em; }
@media (max-width: 900px) {
  .mdemo .edit-wrap { width: 100%; }
  .mdemo .edit-wrap .cap-card { width: min(320px, 100%); }
}

/* cap-card header: platform + date on the first row, post type on its own row (no mid-phrase wrapping) */
.mdemo .cap-head { flex-wrap: wrap; white-space: nowrap; row-gap: 2px; }
.mdemo .cap-head .cap-date { flex: 0 0 auto; margin-left: auto; }
.mdemo .cap-head .cap-kind { flex: 0 0 100%; order: 3; padding-left: 22px; color: var(--ink-60); }