/* SIYAI Editorial Planner — landing.
   The world: the app's own Siyai theme carried whole, with Siyai (the app's
   avatar) walking the visitor through real captures of the app. base.css holds
   the shared tokens and controls and is also used by the account and legal
   pages, so nothing here overrides it globally: every rule is scoped to a
   landing component.

   Motion grammar, once: things arrive from below and settle (--ease-out), the
   phone's screens push in like app navigation, hotspots pulse where the
   mechanism is, and Siyai hops between the places where it has something to
   point at. Every animated rule has a reduced-motion counterpart at the end. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --panel-r: clamp(28px, 3.6vw, 48px);
  --panel-inset: clamp(8px, 1.3vw, 18px);

  /* The planner's five post statuses. The app draws each as its colour on a
     10% tint of itself; at text size those colours fail AA on their own tint,
     so each text value is darkened to ≥5:1 and the hue kept (app: grey,
     orange, blue, purple, green — lib/widgets/post_card.dart). */
  --st-draft: #5f5f5f;       --st-draft-bg: #eeeeee;      /* 5.50:1 */
  --st-review: #9a4f00;      --st-review-bg: #fff1dc;     /* 5.40:1 */
  --st-approved: #1259a8;    --st-approved-bg: #e3f0fd;   /* 6.01:1 */
  --st-scheduled: #6e32bc;   --st-scheduled-bg: #efe6fb;  /* 6.11:1 */
  --st-published: #256b29;   --st-published-bg: #e6f4e7;  /* 5.74:1 */

  /* The AI studio's ground: violet-ink deepened toward its floor. */
  --studio: #33195e;
  --studio-floor: #200d3d;

  --sh-float: 0 2px 4px rgba(33, 19, 61, .08), 0 16px 36px -10px rgba(33, 19, 61, .32);
  --sh-phone: 0 3px 6px rgba(33, 19, 61, .12), 0 36px 70px -22px rgba(33, 19, 61, .55);
}

/* ---------------- Nav: a floating pill ---------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: 12px var(--panel-inset) 0;
  pointer-events: none;
}
.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: 1240px;
  min-height: 60px;
  margin-inline: auto;
  padding: .4rem .45rem .4rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9);
  /* Legibility over whatever scrolls beneath, not decoration: the pill sits
     over the aurora, the photos and the studio's dark field in turn. */
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 2px rgba(33, 19, 61, .06), 0 12px 32px -12px rgba(33, 19, 61, .32);
  overflow: hidden;
  pointer-events: auto;
  transition: transform .45s var(--ease-out), box-shadow .3s var(--ease-out);
}
.nav[data-away] .nav__bar { transform: translateY(calc(-100% - 64px)); box-shadow: none; }
.nav__home { display: flex; align-items: center; color: var(--violet); text-decoration: none; }
.nav__home:hover { color: var(--violet-deep); }
.nav__home .wordmark { width: 82px; height: 42px; }
.nav__links { display: flex; gap: .1rem; margin-left: .6rem; }
.nav__link {
  padding: .5rem .8rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--fs-note);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current='true'] { background: var(--lilac-50); color: var(--violet-deep); }
.nav__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nav__cta {
  min-height: 46px;
  padding: .55rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-note);
  box-shadow: none;
}
.nav__progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--lilac-200));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
}
@media (max-width: 480px) {
  .nav .ig--btn { display: none; }
  .nav__bar { padding-left: .9rem; gap: .5rem; }
  .nav__cta { padding-inline: .9rem; }
}

/* ---------------- Shared: section heads, facts, bubbles ---------------- */

.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section__head { max-width: 50ch; }
.section__head p { margin-top: 1.1rem; color: var(--ink-2); font-size: var(--fs-lead); }

.facts { display: grid; gap: .6rem; margin-top: 1.4rem; }
.facts li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  font-size: var(--fs-sm);
}
.facts svg { width: 18px; height: 18px; margin-top: .22em; color: var(--violet); }

/* Siyai's speech: a white card with a tail, never a tooltip. */
.bubble {
  position: relative;
  margin: 0;
  padding: .85rem 1.05rem;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-note);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.005em;
  box-shadow: var(--sh-float);
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 30px;
  width: 16px;
  height: 16px;
  border-radius: 0 0 var(--r-xs) 0;
  background: inherit;
  transform: rotate(45deg);
}

.demo-tag {
  display: inline-flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: 1.1rem;
  color: var(--ink-2);
  font-size: var(--fs-label);
}
.demo-tag svg { width: 16px; height: 16px; margin-top: .17em; flex: none; }
.feedband__copy .demo-tag { margin-top: 1.5rem; color: var(--ink-2); font-size: var(--fs-label); }
.demo-tag--center { display: flex; justify-content: center; }

/* The planner's status chips */
.st {
  display: inline-flex;
  align-items: center;
  padding: .3rem .72rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
}
.st--draft { background: var(--st-draft-bg); color: var(--st-draft); }
.st--review { background: var(--st-review-bg); color: var(--st-review); }
.st--approved { background: var(--st-approved-bg); color: var(--st-approved); }
.st--scheduled { background: var(--st-scheduled-bg); color: var(--st-scheduled); }
.st--published { background: var(--st-published-bg); color: var(--st-published); }

/* ---------------- The phone ----------------
   One object, sized by --w (the frame's width): bezel, radii, camera and home
   pill are all fractions of it, so it reads as the same phone at every size.
   The screen is exactly the captures' ratio, 720×1413 (1080×2120 source). */

.phone {
  --w: 300px;
  position: relative;
  flex: none;
  width: var(--w);
  padding: calc(var(--w) * .032);
  border-radius: calc(var(--w) * .158);
  background: linear-gradient(150deg, #4d3a78 0%, #251741 26%, #1a1030 62%, #3b2a60 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 0 0 calc(var(--w) * .01) #120a22,
    var(--sh-phone);
}
.phone::before {
  /* the side key */
  content: '';
  position: absolute;
  top: 24%;
  right: calc(var(--w) * -.011);
  width: calc(var(--w) * .013);
  height: 11%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #3a2a5e, #231542);
}
.phone__screen {
  position: relative;
  aspect-ratio: 720 / 1413;
  border-radius: calc(var(--w) * .126);
  overflow: hidden;
  background: #f4f4f4;
  isolation: isolate;
  transform: translateZ(0); /* Safari: keeps the radius clipping composited children */
}
.phone__screen::before {
  /* punch-hole camera, over the status bar's empty centre */
  content: '';
  position: absolute;
  top: calc(var(--w) * .021);
  left: 50%;
  z-index: 6;
  width: calc(var(--w) * .036);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c2140, #07040d 60%);
  transform: translateX(-50%);
}
.phone__screen::after {
  /* the gesture pill the capture's black bar used to hold */
  content: '';
  position: absolute;
  bottom: calc(var(--w) * .02);
  left: 50%;
  z-index: 6;
  width: 34%;
  height: calc(var(--w) * .011);
  border-radius: var(--r-pill);
  background: rgba(24, 14, 42, .5);
  transform: translateX(-50%);
}
.phone__shot,
.phone__screen > figure,
.long {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.phone__shot,
.phone__screen > figure > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Screens that take turns inside one phone push in like the app's own
   navigation: the new one slides a little from the right, the old one sinks. */
.phone__screen > [data-shot],
.phone__screen > .scr {
  opacity: 0;
  transform: translateX(7%) scale(1.01);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.phone__screen > [data-shot][data-active],
.phone__screen > .scr[data-active] { opacity: 1; transform: none; z-index: 1; }
.phone__screen > [data-shot][data-left],
.phone__screen > .scr[data-left] { transform: translateX(-5%) scale(.97); }

/* Full-page captures (the client portal): the status bar stays, the page
   scrolls beneath it to reach its buttons. */
.long { overflow: hidden; background: #fafafa; }
.long__bar { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: auto; }
.long__body {
  position: absolute;
  top: 3.18%; /* 45 / 1413: the bar's height */
  left: 0;
  width: 100%;
  height: auto;
  transition: transform 1.6s var(--ease-soft);
}
.long[data-down] .long__body { transform: translateY(var(--down)); }
.long[data-shot='review'] { --down: -21.83%; }   /* (1750 − 1368) / 1750 */
.long[data-shot='approved'] { --down: -23.45%; } /* (1787 − 1368) / 1787 */

/* ---------------- Hotspots ----------------
   A frame drawn round the thing that matters (never over it: the frame is
   hollow), a leader, and a label parked where the screen is empty. Everything
   is measured on the 720×1413 capture: data-at is the target's centre in %,
   data-box its size and data-to the label's offset, both in cqw (1% of the
   screen's width, so the geometry scales with the phone). site.js writes them
   as custom properties — the CSP forbids style="". */

.phone__screen { container-type: inline-size; }
.spot {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  z-index: 4;
  display: none;
  width: 0;
  height: 0;
  pointer-events: none;
}
.js .spot { display: block; }
.spot::before,
.spot::after {
  content: '';
  position: absolute;
  top: calc(var(--bh, 8cqw) / -2);
  left: calc(var(--bw, 8cqw) / -2);
  width: var(--bw, 8cqw);
  height: var(--bh, 8cqw);
  border: 2px solid var(--violet);
  border-radius: min(calc(var(--bh, 8cqw) / 2), 3.2cqw);
}
.spot::before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 7px rgba(145, 83, 223, .16);
  opacity: 0;
  transform: scale(1.14);
  transition: opacity .35s var(--ease-out), transform .55s var(--ease-out);
}
.spot::after { opacity: 0; }
.spot__line {
  position: absolute;
  top: -.75px;
  left: 0;
  width: var(--len, 0);
  height: 1.5px;
  background: var(--violet);
  transform-origin: 0 50%;
  transform: rotate(var(--ang, 0rad)) translateX(var(--from, 0));
  scale: 0 1;
  transition: scale .45s var(--ease-out);
}
.spot__label {
  position: absolute;
  top: var(--dy, 0);
  left: var(--dx, 0);
  padding: .28rem .6rem;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--violet-deep);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--violet), 0 6px 16px -4px rgba(33, 19, 61, .35);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
}

[data-live] .spot::before { opacity: 1; transform: none; }
[data-live] .spot::after { animation: frame-pulse 2.4s var(--ease-out) .6s infinite; }
[data-live] .spot__line { scale: 1 1; transition-delay: .18s; }
[data-live] .spot__label { opacity: 1; transform: translate(-50%, -50%); transition-delay: .32s; }
[data-live] .spot + .spot::before { transition-delay: .3s; }
[data-live] .spot + .spot .spot__line { transition-delay: .5s; }
[data-live] .spot + .spot .spot__label { transition-delay: .65s; }

@keyframes frame-pulse {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(1.22, 1.5); opacity: 0; }
}

/* ---------------- The "develop": the AI image coming into focus ----------------
   A shimmer over the photo area of the post-with-image capture (its rect on
   the 720×1413 screen) that clears when the moment arrives. */

.develop {
  position: absolute;
  top: 35.1%;
  left: 4.9%;
  z-index: 3;
  width: 90.2%;
  height: 57.5%;
  border-radius: calc(var(--w) * .03);
  background:
    linear-gradient(110deg, rgba(236, 228, 250, .9) 30%, rgba(255, 255, 255, .98) 46%, rgba(236, 228, 250, .9) 62%) 0 0 / 260% 100%,
    rgba(236, 228, 250, .6);
  -webkit-backdrop-filter: blur(16px) saturate(.5);
  backdrop-filter: blur(16px) saturate(.5);
  pointer-events: none;
  display: none;
}
.js .develop { display: block; animation: shimmer 1.3s linear infinite; }
[data-developed] .develop {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out);
  animation-play-state: paused;
}
@keyframes shimmer { to { background-position: -260% 0, 0 0; } }

/* ---------------- Hero ---------------- */

.hero {
  display: flex;
  align-items: center;
  min-height: min(100svh, 1000px);
  padding: clamp(110px, 15vh, 150px) 0 clamp(3.5rem, 7vw, 6rem);
  border-radius: 0 0 var(--panel-r) var(--panel-r);
  color: #fff;
}
.hero.aurora::after { animation: breathe 9s var(--ease-soft) infinite alternate; }
@keyframes breathe { from { opacity: .7; } to { opacity: 1; } }
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 38%), rgba(255, 255, 255, .13), transparent 62%);
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  max-width: 17ch;
  font-size: clamp(2.25rem, 4.15vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.hero__line { display: block; }
.hero h1 em { margin-top: .08em; font-style: normal; color: #f1e6ff; }
.hero__lead { margin-top: 1.5rem; max-width: 46ch; color: rgba(255, 255, 255, .94); font-size: var(--fs-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.25rem;
  margin-top: 1.7rem;
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-note);
}
.hero__reassure li { display: flex; align-items: center; gap: .45rem; }
.hero__reassure svg { width: 17px; height: 17px; flex: none; }
.hero__lead span { display: inline; }
.hero__new { margin-top: 1.3rem; }
.hero__new a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding: .4rem .95rem .4rem .75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.hero__new a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: sheen 4.5s var(--ease-soft) 1.6s infinite;
}
.hero__new a:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .7); color: #fff; }
.hero__new svg { width: 17px; height: 17px; flex: none; animation: twinkle 2.8s var(--ease-soft) infinite; }
@keyframes sheen { 0% { background-position: -150% 0; } 45%, 100% { background-position: 250% 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(18deg); } }

.hero__stage {
  position: relative;
  justify-self: center;
  width: min(100%, 560px);
  padding-block: 2rem;
  perspective: 1500px;
}
.hero__rig {
  position: relative;
  width: fit-content;
  margin: 0 7% 0 auto;
  transform: rotateY(var(--ry, -9deg)) rotateX(var(--rx, 3deg));
  transform-style: preserve-3d;
  transition: transform .9s var(--ease-out);
}
.phone--hero { --w: clamp(250px, 23vw, 322px); }

.float {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
  font-size: var(--fs-label);
  white-space: nowrap;
  pointer-events: none;
}
.float--notice {
  top: 7%;
  left: -52%;
  gap: .7rem;
  max-width: 17.5rem;
  padding: .75rem .95rem;
  border-radius: var(--r-md);
  background: #16101f;
  color: #fff;
  white-space: normal;
  box-shadow: 0 4px 10px rgba(12, 6, 24, .3), 0 24px 44px -14px rgba(12, 6, 24, .6);
  transform: translateZ(70px);
}
.float--notice svg { width: 26px; height: 26px; flex: none; color: #5fd068; }
.float--notice b { display: block; font-size: var(--fs-note); }
.float--notice span span { display: block; color: rgba(255, 255, 255, .8); line-height: 1.35; }
.float--badge {
  top: 44%;
  right: -26%;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(38, 32, 48, .82);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-float);
  transform: translateZ(90px);
}
.float--badge svg { width: 16px; height: 16px; }
.float--chip { top: 20%; right: -18%; transform: translateZ(40px); }
.float--chip .st { padding: .45rem .9rem; font-size: var(--fs-note); box-shadow: var(--sh-float); }
.float--tags {
  right: -30%;
  bottom: 13%;
  padding: .6rem .85rem;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--violet-strong);
  font-weight: 700;
  box-shadow: var(--sh-float);
  transform: translateZ(55px);
}

.hero__siyai {
  position: absolute;
  bottom: 0;
  left: -3%;
  z-index: 7;
  width: clamp(170px, 16.5vw, 246px);
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.hero__siyai[data-away] { opacity: 0; transform: translateY(12px) scale(.94); }
.hero__avatar {
  width: 100%;
  filter: drop-shadow(0 18px 24px rgba(40, 12, 80, .35));
  animation: bob 3.4s var(--ease-soft) infinite;
}
.bubble--hero {
  position: absolute;
  bottom: 96%;
  left: 18%;
  width: 15.5rem;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Entrance, once, on load: headline lines rise out of their own clip, then the
   lead, the actions, the phone, the floating UI, Siyai; last, the image in the
   phone develops — the product's newest trick performed in the first second. */
.js .hero__line { animation: line-in .95s var(--ease-out) backwards; }
.js .hero__line + .hero__line { animation-delay: .12s; }
.js .hero__lead { animation: rise .9s var(--ease-out) .28s backwards; }
.js .hero__new { animation: rise .9s var(--ease-out) .34s backwards; }
.js .hero__actions { animation: rise .9s var(--ease-out) .38s backwards; }
.js .hero__reassure { animation: rise .9s var(--ease-out) .48s backwards; }
.js .phone--hero { animation: phone-in 1.2s var(--ease-out) .2s backwards; }
.js .float { animation: pop .8s var(--ease-out) backwards; }
.js .float--notice { animation-delay: 1.5s; }
.js .float--badge { animation-delay: 1.15s; }
.js .float--chip { animation-delay: 1.3s; }
.js .float--tags { animation-delay: 1.45s; }
.js .hero__siyai { animation: siyai-in 1s var(--ease-out) .7s backwards; }
.js .bubble--hero { animation: bubble-in .6s var(--ease-out) 1.35s backwards; transform-origin: 20% 110%; }

@keyframes line-in {
  from { clip-path: inset(0 0 100% 0); transform: translateY(.55em); }
  to { clip-path: inset(-12% -4% -18% -4%); transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes phone-in { from { opacity: 0; transform: translateY(60px) rotateX(12deg); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes siyai-in { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes bubble-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ---------------- Ribbon ---------------- */

.ribbon {
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ribbon__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__list { display: flex; align-items: center; flex: none; }
.ribbon__list li {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  color: var(--violet-ink);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.ribbon__list li::after {
  /* the sprite's sparkle, as a mask so it takes the ribbon's violet */
  content: '';
  width: 18px;
  height: 18px;
  background: var(--violet);
  -webkit-mask: url('../img/sparkle.svg') center / contain no-repeat;
  mask: url('../img/sparkle.svg') center / contain no-repeat;
}
.ribbon__list li:nth-child(n + 7) { color: var(--violet-strong); font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- Light panels ----------------
   The app's header in its pale register: a lilac field that radiates from
   the top, on a panel with the header's rounded foot. It carries the planner's
   working surfaces (the tour, the five statuses) the way the app's own
   screens carry their cards. */

.tour,
.flowband {
  position: relative;
  isolation: isolate;
  margin-inline: var(--panel-inset);
  border-radius: var(--panel-r);
  background: radial-gradient(120% 70% at 50% -12%, #ece0fb 0%, var(--lilac-mist) 42%, #fcfaff 100%);
}
.tour::before,
.flowband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: repeating-conic-gradient(from 200deg at 50% -12%, rgba(145, 83, 223, .075) 0deg 3.2deg, rgba(145, 83, 223, 0) 3.2deg 9.4deg);
  -webkit-mask: radial-gradient(90% 55% at 50% -12%, #000 10%, transparent 75%);
  mask: radial-gradient(90% 55% at 50% -12%, #000 10%, transparent 75%);
  pointer-events: none;
}
.flowband { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* ---------------- Tour ---------------- */

.tour__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(1rem, 3vw, 2rem);
}
.tour__stage { display: none; }
.station { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.station h3 {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  max-width: 24ch;
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.station__glyph { width: 30px; height: 30px; margin-top: .12em; color: var(--violet); }
.station > p:not(.guide-line) { margin-top: 1rem; color: var(--ink-2); max-width: 52ch; }
.station__phone { display: flex; justify-content: center; margin-top: 2.2rem; }
.station__phone .phone { --w: min(76vw, 300px); }

.js .station__phone .phone { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.js .station__phone[data-live] .phone { opacity: 1; transform: none; }

@media (min-width: 1000px) {
  .js .tour__stage {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
  }
  .js .station__phone { display: none; }
  .js .station {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 88vh;
    padding-block: 10vh;
    opacity: .32;
    transition: opacity .5s var(--ease-out);
  }
  .js .station[data-active] { opacity: 1; }
  .js .tour__list { padding-bottom: 10vh; }
}
.tour__rig {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-top: 40px;
}
.phone--tour {
  --w: clamp(250px, calc((100vh - 170px) / 2.12), 330px);
  margin-right: 13%;
}
.tour__guide {
  position: absolute;
  bottom: 8vh;
  left: 0;
  width: 130px;
  aspect-ratio: 320 / 342;
}
.tour__dots {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  gap: 2px;
  transform: translateY(-50%);
}
/* Each dot is a full-height pill clipped down to a circle; the active one
   unclips, so the change is paint, never layout. */
.tour__dots li {
  width: 8px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--lilac-200);
  clip-path: inset(10px 0 10px 0 round 999px);
  transition: clip-path .45s var(--ease-out), background-color .3s var(--ease-out);
}
.tour__dots li[data-active] { background: var(--violet); clip-path: inset(0 0 0 0 round 999px); }

/* ---------------- Studio: the AI images ---------------- */

.studio { padding-inline: var(--panel-inset); }
.studio__panel {
  position: relative;
  padding-block: clamp(4.5rem, 8vw, 7rem) clamp(3.5rem, 6vw, 5.5rem);
  border-radius: var(--panel-r);
  background:
    radial-gradient(900px 520px at 85% -5%, rgba(154, 99, 226, .55), transparent 65%),
    radial-gradient(700px 480px at 0% 105%, rgba(145, 83, 223, .35), transparent 65%),
    linear-gradient(180deg, var(--studio), var(--studio-floor));
  color: #fff;
  overflow: clip;
}
.studio__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 46% 22%, #e5d7f5 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 11%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 78% 26%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 91% 14%, #d7bbfa 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 8% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 94% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 70% 92%, #e5d7f5 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 35% 88%, #fff 50%, transparent 51%);
  opacity: .55;
  animation: stars 5s var(--ease-soft) infinite alternate;
}
@keyframes stars { to { opacity: 1; } }
.studio__head { position: relative; }
.studio__head h2 { color: #fff; max-width: 20ch; }
.studio__head p { margin-top: 1.1rem; color: var(--lilac-200); font-size: var(--fs-lead); max-width: 52ch; }

.studio__pin { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.studio__sticky { position: relative; }
.studio__track {
  display: flex;
  gap: 1rem;
  padding: 1rem var(--gutter) 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  align-items: flex-start;
}
.studio__track::-webkit-scrollbar { display: none; }
.step {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  align-content: start;
  width: min(84vw, 360px);
  scroll-snap-align: center;
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.js .step { opacity: .45; transform: scale(.94); }
.js .step[data-active] { opacity: 1; transform: none; }
.phone--step { --w: min(60vw, 250px); }
.step__text { width: 100%; }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  font-size: var(--fs-note);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step[data-active] .step__num { border-color: transparent; background: var(--violet); }
.step h3 { margin-top: .8rem; color: #fff; font-size: var(--fs-h4); }
.step__text p { margin-top: .55rem; color: var(--lilac-200); font-size: var(--fs-sm); }
.models { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.models li {
  padding: .22rem .6rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: var(--fs-label);
}
.studio__progress {
  position: relative;
  height: 2px;
  margin: 0 var(--gutter);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .14);
}
.studio__progress span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lilac-200), #fff);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
.studio__guide { position: absolute; display: none; }

/* Pinned: the steps pass horizontally while the page scrolls vertically.
   Desktop only, and only with motion: the fallback is the swipeable row. */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .js .studio__pin[data-pinned] .studio__sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    padding-top: 64px;
    overflow: hidden;
  }
  .js .studio__pin[data-pinned] + .studio__facts { margin-top: 0; }
  .js .studio__pin[data-pinned] .studio__track {
    gap: clamp(3rem, 6vw, 6rem);
    padding: 0 max(var(--gutter), calc((100vw - 1220px) / 2)) 2rem;
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
  }
  .js .studio__pin[data-pinned] .step {
    grid-template-columns: auto minmax(0, 17rem);
    align-items: center;
    justify-items: start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width: auto;
  }
  .js .studio__pin[data-pinned] .phone--step { --w: clamp(210px, calc((100vh - 270px) / 2.12), 280px); }
  .js .studio__pin[data-pinned] .studio__progress { margin-inline: max(var(--gutter), calc((100vw - 1220px) / 2)); }
  .js .studio__pin[data-pinned] .studio__guide {
    display: block;
    right: max(var(--gutter), calc((100vw - 1220px) / 2));
    bottom: 6px;
    width: 118px;
    aspect-ratio: 320 / 342;
  }
}

.studio__facts {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.quota {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .17);
}
.quota div { padding: 1.1rem 1rem 0 0; }
.quota div + div { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .17); }
.quota dt { color: var(--lilac-200); font-size: var(--fs-label); font-weight: 500; }
.quota dd { margin: .35rem 0 0; color: #fff; font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.studio__notes { display: grid; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .17); }
.studio__notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .65rem; color: var(--lilac-100); font-size: var(--fs-note); }
.studio__notes svg { width: 18px; height: 18px; margin-top: .15em; color: var(--lilac-200); }

@media (max-width: 860px) {
  .studio__facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .quota { grid-template-columns: 1fr; }
  .quota div,
  .quota div + div { padding: .9rem 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
}

/* ---------------- Portal: the client's side, in cream ---------------- */

.portal {
  margin: clamp(1rem, 2vw, 1.5rem) var(--panel-inset) 0;
  border-radius: var(--panel-r);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}
.portal__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.portal__copy { grid-row: span 2; align-self: center; }
.portal__copy p { margin-top: 1.1rem; color: var(--mocha-deep); font-size: var(--fs-lead); }
.portal__steps { display: grid; gap: 1.1rem; margin-top: 2rem; counter-reset: step; }
.portal__steps li {
  position: relative;
  display: grid;
  gap: .15rem;
  padding-left: 3rem;
  counter-increment: step;
  font-size: var(--fs-sm);
}
.portal__steps li::before {
  content: counter(step);
  position: absolute;
  top: -.1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cream-2);
  border-radius: 50%;
  background: #fff;
  color: var(--mocha-deep);
  font-weight: 700;
  font-size: var(--fs-note);
}
.portal__steps span { color: var(--mocha-deep); }

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(70px, 9vw, 130px) minmax(0, 1fr);
  align-items: center;
  align-self: end;
  justify-items: center;
}
.duo__side { display: grid; justify-items: center; gap: .9rem; margin: 0; }
.duo__who {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 700;
}
.duo__who svg { width: 16px; height: 16px; }
.duo__side--client .duo__who { background: #fff; color: var(--mocha-deep); box-shadow: 0 0 0 1px var(--cream-2); }
.duo__side--you .duo__who { background: var(--lilac-50); color: var(--violet-deep); }
.phone--duo { --w: clamp(150px, 15.5vw, 236px); }
.duo__wire { position: relative; width: 100%; height: 100%; min-height: 80px; }
.wire { position: absolute; top: calc(50% - 30px); left: -8%; width: 116%; height: 60px; overflow: visible; }
.wire__path {
  fill: none;
  stroke: var(--mocha);
  stroke-width: 1.6;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.wire__dot {
  position: absolute;
  top: calc(50% - 7px);
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(145, 83, 223, .22), 0 4px 10px rgba(110, 50, 188, .45);
  opacity: 0;
}
.duo__guide {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(118px, 100%);
  aspect-ratio: 320 / 342;
  transform: translateX(-50%);
}

.tap {
  position: absolute;
  top: 92.9%;
  z-index: 5;
  width: 40%;
  height: 5.2%;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  display: none;
}
.tap--approve { left: 29%; }
.tap--reject { left: 71%; }
.duo[data-state='ready'] .tap { display: block; animation: tap-ring 2s var(--ease-out) infinite; }
.duo[data-state='ready'] .tap--reject { animation-delay: 1s; }
.tap:hover { box-shadow: 0 0 0 3px rgba(145, 83, 223, .55); }
@keyframes tap-ring {
  0% { box-shadow: 0 0 0 0 rgba(145, 83, 223, .55); }
  80%, 100% { box-shadow: 0 0 0 12px rgba(145, 83, 223, 0); }
}

.duo__panel { grid-column: 2; align-self: start; display: grid; justify-items: center; text-align: center; margin-top: .6rem; }
.duo__ask { color: var(--mocha-deep); font-size: var(--fs-note); font-weight: 500; }
/* Without scripting the demo cannot play: its controls step aside, the two
   real screens and the status line still tell the story. */
html:not(.js) .duo__ask,
html:not(.js) .duo__controls,
html:not(.js) .feed__hint { display: none; }
.duo__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .8rem; }
.btn--quiet {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.btn--quiet:hover { --btn-bg: #fff; --btn-fg: var(--violet-deep); border-color: var(--lilac-200); }
.duo__controls .btn { min-height: 48px; }
.duo__controls .btn[disabled] { cursor: progress; opacity: .6; transform: none; }
.duo__status {
  min-height: 3em;
  max-width: 44ch;
  margin-top: 1rem;
  color: var(--ink);
  font-size: var(--fs-note);
}
.duo__status { display: grid; justify-items: center; gap: .45rem; }

/* ---------------- Feed ---------------- */

.feedband { background: var(--surface); }
.feedband__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feedband__copy p { margin-top: 1.1rem; color: var(--ink-2); font-size: var(--fs-lead); }
.feedband__demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
}
.phone--feed {
  --w: clamp(210px, 19vw, 268px);
  position: absolute;
  left: -3%;
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
}
.feed {
  position: relative;
  z-index: 2;
  width: min(100%, 390px);
  margin-left: auto;
  padding: .9rem .9rem 1.1rem;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-3), 0 0 0 1px var(--line-soft);
}
.feed__bar { display: flex; align-items: center; gap: .7rem; padding: .2rem .2rem .8rem; }
.feed__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lilac-50);
  color: var(--violet);
}
.feed__icon svg { width: 22px; height: 22px; }
.feed__title { color: var(--violet-strong); font-weight: 700; letter-spacing: -.02em; }
.feed__count {
  margin-left: auto;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.feed__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  overflow: hidden;
  border-radius: var(--r-sm);
  touch-action: pan-y;
}
.feed__grid li { position: relative; aspect-ratio: 3 / 4; }
.feed__tile {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .2s var(--ease-out), filter .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.feed__tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.feed__tile:hover { filter: brightness(1.04); }
.feed__tile:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: -3px; border-radius: 0; }
.feed__tile[aria-pressed='true'] { box-shadow: inset 0 0 0 3px var(--violet); transform: scale(.94); }
.feed__tile[data-target] { box-shadow: inset 0 0 0 3px var(--violet); filter: brightness(.9); }
.feed__tile[data-lifted] { opacity: .35; }
.feed__ghost {
  position: fixed;
  z-index: 70;
  border-radius: var(--r-sm);
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 0 0 3px var(--violet), 0 24px 40px -10px rgba(33, 19, 61, .55);
  transform: rotate(-3deg) scale(1.06);
}
.feed__ghost img { width: 100%; height: 100%; object-fit: cover; }
.feed__free { background: var(--surface-2); }
.feed__add { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.feed__add svg { width: 26px; height: 26px; }
.feed__hint { margin-top: .9rem; color: var(--ink-2); font-size: var(--fs-label); text-align: center; }
.feed__guide {
  /* Siyai perches on the card's top edge */
  position: absolute;
  top: -104px;
  right: 6px;
  width: 104px;
  aspect-ratio: 320 / 342;
}

/* The tiles fly into the grid the first time it scrolls in. */
.js .feed__grid li { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.7); }
.js .feed[data-shown] .feed__grid li {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-out);
}
.feed__grid li:nth-child(1) { --fx: -60px; --fy: -40px; --fr: -12deg; transition-delay: .05s; }
.feed__grid li:nth-child(2) { --fx: 10px;  --fy: -70px; --fr: 8deg;   transition-delay: .12s; }
.feed__grid li:nth-child(3) { --fx: 70px;  --fy: -30px; --fr: 14deg;  transition-delay: .19s; }
.feed__grid li:nth-child(4) { --fx: -80px; --fy: 0;     --fr: -8deg;  transition-delay: .26s; }
.feed__grid li:nth-child(5) { --fx: 0;     --fy: 30px;  --fr: 5deg;   transition-delay: .33s; }
.feed__grid li:nth-child(6) { --fx: 80px;  --fy: 10px;  --fr: 10deg;  transition-delay: .4s; }
.feed__grid li:nth-child(7) { --fx: -60px; --fy: 60px;  --fr: -14deg; transition-delay: .47s; }
.feed__grid li:nth-child(8) { --fx: 20px;  --fy: 80px;  --fr: 9deg;   transition-delay: .54s; }
.feed__grid li:nth-child(9) { --fx: 60px;  --fy: 60px;  --fr: 12deg;  transition-delay: .61s; }

.js .phone--feed { opacity: 0; transform: translateY(-40%) rotate(-12deg); transition: opacity .8s var(--ease-out), transform 1.1s var(--ease-out); }
.js .feedband__demo[data-live] .phone--feed { opacity: 1; transform: translateY(-50%) rotate(-5deg); }

/* ---------------- Flow: five statuses ---------------- */

.flow { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.flow__card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas: 'icon title title' 'time time chip';
  gap: .7rem .8rem;
  align-items: center;
  width: min(100%, 320px);
  padding: 1rem 1.05rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-3), 0 0 0 1px var(--line-soft);
  will-change: transform;
}
.flow__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 110%, #f9b233 0%, #e2336b 45%, #7a2fbd 100%);
  color: #fff;
}
.flow__icon svg { width: 24px; height: 24px; }
.flow__title { grid-area: title; min-width: 0; }
.flow__title b { display: block; font-size: var(--fs-sm); letter-spacing: -.015em; line-height: 1.25; }
.flow__title span { display: block; color: var(--ink-2); font-size: var(--fs-label); }
.flow__time { grid-area: time; color: var(--ink-2); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.flow__chips { grid-area: chip; display: grid; justify-items: end; }
.flow__chips .st { grid-area: 1 / 1; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s var(--ease-out), transform .45s var(--ease-out); }
.flow__chips .st[data-on] { opacity: 1; transform: none; }

.flow__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
  padding-top: 2.4rem;
  counter-reset: stop;
}
.flow__rail::before,
.flow__rail::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--r-xs);
  background: var(--line);
}
.flow__rail::after {
  background: linear-gradient(90deg, var(--st-draft), var(--st-review), var(--st-approved), var(--st-scheduled), var(--st-published));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
.flow__stop { position: relative; }
.flow__stop::before {
  content: '';
  position: absolute;
  top: calc(-2.4rem + 1px);
  left: 0;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--ground);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .4s var(--ease-out);
}
.flow__stop[data-reached]::before { border-color: var(--violet); background: var(--violet); transform: scale(1.15); }
.flow__stop p { margin-top: .75rem; color: var(--ink-2); font-size: var(--fs-note); transition: color .3s var(--ease-out); }
.flow__stop[data-reached] p { color: var(--ink); }

@media (max-width: 860px) {
  .flow__rail { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 0; padding-left: 2.4rem; }
  .flow__rail::before,
  .flow__rail::after { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .flow__rail::after { background: linear-gradient(180deg, var(--st-draft), var(--st-review), var(--st-approved), var(--st-scheduled), var(--st-published)); transform: scaleY(var(--p, 0)); transform-origin: center top; }
  .flow__stop::before { top: .3rem; left: calc(-2.4rem); }
  .flow__card {
    position: sticky;
    top: 86px;
    margin-inline: auto;
  }
}

.wrap--guided { position: relative; }
.head__guide {
  position: absolute;
  top: 0;
  right: var(--gutter);
  width: 128px;
  aspect-ratio: 320 / 342;
}
.flow__client { display: inline-block; width: 16px; height: 16px; margin-left: .2rem; vertical-align: -2px; color: var(--violet); }

/* ---------------- Team ---------------- */

.team {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(4.5rem, 9vw, 8rem);
}
.team__phones { position: relative; display: flex; justify-content: center; min-height: 500px; }
.phone--fan { --w: clamp(170px, 15vw, 214px); position: absolute; top: 50%; left: 50%; transition: transform 1.1s var(--ease-out); }
.phone--fan:nth-child(1) { transform: translate(-50%, -50%) translateX(var(--fan-x, -64%)) rotate(var(--fan-r, -9deg)) scale(.9); }
.phone--fan:nth-child(2) { z-index: 2; transform: translate(-50%, -52%); }
.phone--fan:nth-child(3) { transform: translate(-50%, -50%) translateX(calc(var(--fan-x, -64%) * -1)) rotate(calc(var(--fan-r, -9deg) * -1)) scale(.9); }
.js .team__phones:not([data-live]) .phone--fan { --fan-x: 0%; --fan-r: 0deg; }
.team__copy { display: grid; gap: 2rem; }
.team__copy h3 { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-h4); }
.team__copy h3 svg { width: 26px; height: 26px; flex: none; color: var(--violet); }
.team__copy p { margin-top: .6rem; color: var(--ink-2); }
.team__guide { display: block; width: 116px; aspect-ratio: 320 / 342; }

/* ---------------- Plans ---------------- */

.plansband { background: var(--surface); }
.plans__frame { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.plans__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.plans {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: var(--fs-sm);
}
.plans caption { padding-bottom: 1rem; color: var(--ink-2); font-size: var(--fs-note); text-align: left; }
.plans th,
.plans td {
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}
.plans thead th { border-bottom: 1px solid var(--line); vertical-align: bottom; }
.plans tbody th { color: var(--ink-2); font-weight: 500; }
.plans td { font-variant-numeric: tabular-nums; }
.plans tbody tr { transition: background-color .2s var(--ease); }
.plans tbody tr:hover { background: var(--lilac-mist); }
.plans tbody .plans__row--new th { color: var(--violet-deep); }
.plans__name { display: block; font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.02em; }
.plans__hint { display: block; margin-top: .25rem; color: var(--ink-2); font-size: var(--fs-label); font-weight: 400; }
.plans__sub { display: block; margin-top: .25rem; color: var(--ink-2); font-size: var(--fs-label); }
.plans__col--featured { background: var(--lilac-mist); }
.plans thead .plans__col--featured { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.plans tfoot .plans__col--featured { border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.plans__col--featured .plans__name { color: var(--violet-deep); }
.plans tfoot td { padding-top: 1.3rem; border-bottom: 0; }
.plans__note { margin-top: 1.5rem; color: var(--ink-2); font-size: var(--fs-note); }

@media (max-width: 720px) {
  .plans { min-width: 560px; font-size: var(--fs-note); }
  .plans th,
  .plans td { padding: .85rem .75rem; }
  .plans tbody th,
  .plans thead th:first-child,
  .plans tfoot td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 9rem;
    background: var(--surface);
    border-right: 1px solid var(--line-soft);
  }
  .plans__name { font-size: var(--fs-body); }
}
@media (max-width: 600px) {
  .plans__frame::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 78%);
  }
}

.plancards { display: none; }
.plancards__caption { color: var(--ink-2); font-size: var(--fs-note); }
.plancards__row {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 1rem calc(var(--gutter) * -1) 0;
  padding: .3rem var(--gutter) 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.plancards__row::-webkit-scrollbar { display: none; }
.plancard {
  flex: 0 0 min(84%, 330px);
  display: grid;
  align-content: start;
  padding: 1.2rem 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  scroll-snap-align: center;
}
.plancard--featured { border-color: var(--lilac-200); background: var(--lilac-mist); }
.plancard h3 { font-size: var(--fs-h4); }
.plancard--featured h3 { color: var(--violet-deep); }
.plancard__hint { margin-top: .2rem; color: var(--ink-2); font-size: var(--fs-label); }
.plancard dl { display: grid; margin: 1rem 0 1.2rem; }
.plancard dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.plancard dt { color: var(--ink-2); font-size: var(--fs-label); }
.plancard dd { margin: 0; font-size: var(--fs-note); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.plancard dd .plans__sub { font-weight: 400; }
.plancard .u-tick { display: inline-block; }
.plancard .btn { width: 100%; }
@media (max-width: 700px) {
  .plans__frame { display: none; }
  .plancards { display: block; margin-top: 1.6rem; }
}

/* ---------------- FAQ ---------------- */

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq__side { position: sticky; top: 110px; }
.faq__guide { display: block; width: 150px; aspect-ratio: 320 / 342; margin-top: 7rem; }
.faq__list { display: grid; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
  transition: color .18s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background:
    linear-gradient(var(--violet), var(--violet)) center / 12px 1.75px no-repeat,
    linear-gradient(var(--violet), var(--violet)) center / 1.75px 12px no-repeat,
    var(--lilac-50);
  transition: transform .35s var(--ease-out), background-color .2s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__item summary:hover { color: var(--violet-deep); }
.faq__answer { overflow: hidden; }
.faq__answer p { padding-bottom: 1.3rem; color: var(--ink-2); font-size: var(--fs-sm); max-width: 62ch; }

@media (max-width: 900px) {
  .faq__inner { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .faq__guide { display: none; }
}

/* ---------------- Close ---------------- */

.close {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  border-radius: var(--panel-r) var(--panel-r) 0 0;
  color: #fff;
}
.close__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 2rem;
  align-items: center;
}
.close h2 { max-width: 20ch; color: #fff; font-size: var(--fs-h2); }
.close p { margin-top: 1.2rem; max-width: 46ch; color: rgba(255, 255, 255, .94); font-size: var(--fs-lead); }
.close__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.close__fine { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin-top: 1.5rem; color: rgba(255, 255, 255, .88); font-size: var(--fs-note); }
.close__stage { display: flex; justify-content: center; }
.close__guide { width: clamp(180px, 20vw, 260px); aspect-ratio: 320 / 342; }

/* ---------------- Footer ---------------- */

.footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--violet-ink);
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-note);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
}
.footer .wordmark { width: 92px; height: 48px; color: #fff; }
.footer__tag { margin-top: .6rem; max-width: 30ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; max-width: 34rem; }
.footer__links a { color: #fff; text-decoration: none; }
.footer__links a:hover { color: var(--lilac-200); text-decoration: underline; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .62);
  font-size: var(--fs-label);
}
.footer__legal a { color: rgba(255, 255, 255, .8); }
.footer__legal a:hover { color: #fff; }

@media (max-width: 700px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { gap: 0 1.6rem; }
  .footer__links a,
  .footer__legal a { display: inline-block; padding-block: .45rem; }
}

/* ---------------- The guide: Siyai, following the scroll ----------------
   One fixed object. site.js moves it between the anchors each section offers
   (and a dock in the corner when a section has none), hopping in an arc when
   the anchor changes. It is drawn at its largest size and only ever scaled
   down, so the sprite never softens. Decorative: aria-hidden, and every word
   it says is already on the page. */

.guide { display: none; }
.js .guide {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55;
  width: 0;
  height: 0;
  pointer-events: none;
}
.guide__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  aspect-ratio: 320 / 342;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  will-change: transform;
  cursor: pointer;
  pointer-events: auto;
}
.guide[data-on] .guide__body { opacity: 1; }
.guide__body::after {
  content: '';
  position: absolute;
  bottom: 1%;
  left: 24%;
  width: 52%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 16, 80, .32), transparent);
  z-index: -1;
}
.guide__float { position: absolute; inset: 0; animation: bob 3.2s var(--ease-soft) infinite; }
.guide__pose {
  position: absolute;
  inset: 0;
  background: url('../img/siyai/poses.webp') 0 0 / 400% 400% no-repeat;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.guide__pose[data-on] { opacity: 1; }
.guide__bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(300px, calc(100vw - 140px));
  will-change: transform;
}
.guide__text {
  display: block;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-note);
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--sh-float), 0 0 0 1px rgba(51, 25, 94, .06);
  opacity: 0;
  transform: scale(.7);
  position: relative;
  transform-origin: var(--tail, 50%) 100%;
  transition: opacity .25s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: auto;
  cursor: pointer;
}
.guide[data-talk] .guide__text { opacity: 1; transform: none; }
.guide__text::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: calc(var(--tail, 50%) - 7px);
  width: 14px;
  height: 14px;
  border-radius: 0 0 var(--r-xs) 0;
  background: #fff;
  transform: rotate(45deg);
}
.guide__sizer { visibility: hidden; }
.guide__typed { position: absolute; inset: .75rem 1rem; }
@media (max-width: 700px) {
  .guide__bubble { max-width: min(250px, calc(100vw - 120px)); }
  .guide__text { padding: .6rem .8rem; border-radius: var(--r-md); font-size: var(--fs-label); }
  .guide__typed { inset: .6rem .8rem; }
}
@media (hover: none) {
  /* On touch the docked guide would sit on top of whatever is in the corner:
     there it only talks, it does not take taps. */
  .guide__body,
  .guide__text { pointer-events: none; }
}

/* On phones the fixed guide would always sit on something someone is
   reading, so it steps off the page: Siyai speaks inline instead, at the end
   of each stop, in the pose that stop gives it. */
.guide-line { display: none; }
@media (max-width: 699px) {
  .js .guide { display: none; }
  .js .guide-line {
    position: relative;
    display: block;
    width: fit-content;
    max-width: min(30ch, calc(100% - 68px));
    margin: 1.6rem 0 .4rem 68px;
    padding: .7rem .95rem;
    border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
    background: #fff;
    color: var(--ink);
    font-size: var(--fs-note);
    font-weight: 500;
    line-height: 1.4;
    box-shadow: var(--sh-float), 0 0 0 1px rgba(51, 25, 94, .06);
  }
  .js .guide-line::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: -66px;
    width: 58px;
    aspect-ratio: 320 / 342;
    background: url('../img/siyai/poses.webp') var(--pose, 0 0) / 400% 400% no-repeat;
  }
  .js .guide-line[data-line]:not([data-current]) { display: none; }
  .js [data-reveal] .guide-line,
  .js .guide-line { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
  .js .guide-line:not([data-shown]) { opacity: 0; transform: translateY(14px); }
  .close__guide {
    background: url('../img/siyai/poses.webp') 33.333% 0 / 400% 400% no-repeat;
    animation: bob 3.2s var(--ease-soft) infinite;
  }
}

/* ---------------- Reveal ---------------- */

.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal][data-shown] {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.js [data-reveal] h2 { clip-path: inset(0 0 100% 0); transform: translateY(.35em); }
.js [data-reveal][data-shown] h2 {
  clip-path: inset(-15% -3% -20% -3%);
  transform: none;
  transition: clip-path 1s var(--ease-out) .05s, transform 1s var(--ease-out) .05s;
}

/* ---------------- Toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .65rem;
  max-width: min(92vw, 30rem);
  margin-bottom: env(safe-area-inset-bottom);
  padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--violet-ink);
  color: #fff;
  font-size: var(--fs-note);
  line-height: 1.4;
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 1.5rem);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
}
.toast[data-open] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { width: 19px; height: 19px; flex: none; color: var(--lilac-200); }

/* ---------------- Responsive ---------------- */

@media (max-width: 1100px) {
  .float--notice { left: -34%; max-width: 15rem; }
  .float--tags { display: none; }
}

@media (max-width: 1000px) {
  .head__guide,
  .team__guide { display: none; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { max-width: 40rem; }
  .hero__stage { width: min(100%, 520px); padding-top: 4rem; }
  .hero__rig { margin-right: 4%; }
  .tour__inner { grid-template-columns: 1fr; }
  .portal__inner,
  .feedband__inner,
  .team { grid-template-columns: 1fr; }
  .portal__copy { grid-row: auto; }
  .duo__panel { grid-column: auto; margin-top: 0; }
  .feedband__demo { min-height: 0; padding-block: 1rem 2rem; }
  .team__phones { order: 2; min-height: 460px; }
  .close__inner { grid-template-columns: 1fr; }
  .close__stage { justify-content: center; padding-top: 4.5rem; }
}

@media (max-width: 700px) {
  .hero { min-height: 0; padding-top: 104px; }
  /* The copy's children join the hero's own column so the phone can come up
     between the lead and the store buttons: the post with its AI image is in
     the first screen, and the nav's "Scarica l'app" keeps the action there. */
  .hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { display: contents; }
  .hero h1 { order: 1; font-size: clamp(2rem, 9.2vw, 2.4rem); }
  .hero__lead { order: 2; margin-top: .9rem; font-size: var(--fs-body); }
  .hero__lead-aside { display: none !important; }
  .hero__new { order: 3; margin-top: 1rem; }
  .hero__stage { order: 4; width: 100%; padding-top: 8.4rem; padding-bottom: 1rem; }
  .hero__actions { order: 5; margin-top: 1.4rem; }
  .hero__reassure { order: 6; }
  .hero__rig { margin-inline: auto; }
  .float--notice,
  .float--badge { display: none; }
  .hero__siyai { top: .6rem; bottom: auto; left: 0; width: min(30vw, 140px); }
  .bubble--hero { top: 12%; bottom: auto; left: 100%; width: min(15rem, 56vw); }
  .bubble--hero::after { top: 20px; bottom: auto; left: -6px; border-radius: 0 0 0 var(--r-xs); }
  .js .bubble--hero { transform-origin: 0 30%; }
  .phone--hero { --w: min(62vw, 270px); }
  .bubble--hero { font-size: var(--fs-label); }
  .float--notice { top: -2%; left: -30%; width: 12.75rem; max-width: none; font-size: var(--fs-micro); padding: .6rem .75rem; }
  .float--notice b { font-size: var(--fs-label); }
  .float--badge { right: -8%; top: 52%; font-size: var(--fs-micro); }
  .float--chip { right: -6%; top: 26%; }
  .duo { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .phone--duo { --w: min(39vw, 200px); }
  .duo__guide { display: none; }
  .feedband__demo { display: grid; justify-items: center; gap: 1.5rem; }
  .phone--feed { display: none; }
  .feed { margin: 0 auto; }
  .feed__guide { display: none; }
  .team__phones { min-height: 380px; }
  .phone--fan { --w: min(36vw, 170px); }
}

@media (max-width: 520px) {
  .hero__actions .btn { flex: 1 1 100%; justify-content: flex-start; }
  .hero__reassure { gap: .55rem 1rem; }
  .station h3 { grid-template-columns: 28px minmax(0, 1fr); gap: .6rem; }
  .station__glyph { width: 26px; height: 26px; }
  .close__actions .btn { flex: 1 1 100%; justify-content: flex-start; }
}

/* ---------------- Reduced motion ----------------
   Fewer and gentler, never nothing: content is visible at once, the phone
   still changes screen (by crossfade), the approval demo still plays its
   states, Siyai still changes pose and speaks, but nothing travels. */

@media (prefers-reduced-motion: reduce) {
  .hero.aurora::after,
  .hero__avatar,
  .guide__float,
  .studio__stars,
  .hero__new a::after,
  .hero__new svg,
  .develop { animation: none !important; }
  .js .hero__line,
  .js .hero__lead,
  .js .hero__actions,
  .js .hero__reassure,
  .js .phone--hero,
  .js .float,
  .js .hero__siyai,
  .js .bubble--hero { animation: none; }
  .hero__rig { transform: none; transition: none; }
  .ribbon { -webkit-mask: none; mask: none; }
  .ribbon__track { width: auto; animation: none; justify-content: center; }
  .ribbon__list { flex-wrap: wrap; justify-content: center; row-gap: .6rem; }
  .ribbon__list[aria-hidden='true'] { display: none; }
  .js [data-reveal],
  .js [data-reveal] h2 { opacity: 1; transform: none; clip-path: none; }
  .phone__screen > [data-shot],
  .phone__screen > .scr { transform: none !important; transition: opacity .3s linear; }
  .long__body { transition: none; }
  .js .station__phone .phone,
  .js .step,
  .js .phone--feed { transform: none; opacity: 1; transition: none; }
  .js .phone--feed { transform: translateY(-50%) rotate(-5deg); }
  .js .feed__grid li { opacity: 1; transform: none; }
  [data-live] .spot::after,
  .duo[data-state='ready'] .tap { animation: none; }
  .spot__label { transform: translate(-50%, -50%); }
  [data-developed] .develop { transition: opacity .2s linear; transform: none; }
  .js .team__phones:not([data-live]) .phone--fan { --fan-x: -64%; --fan-r: -9deg; }
  .phone--fan { transition: none; }
  .flow__card { display: none; }
  .guide__body,
  .guide__text { transition: opacity .25s linear; }
  .js .guide-line:not([data-shown]) { opacity: 1; transform: none; }
  .close__guide { animation: none; }
  .spot::before { transform: none; }
  .spot__line { scale: 1 1; transition: none; }
  .spot__label { transition: opacity .2s linear; }
  .guide__text { transform: none; }
  .nav__bar { transition: none; }
}