/* Creative-studio refinement: color, authentic app imagery and controlled motion. */
:root {
  --joy-lilac: #eae4ff;
  --joy-lilac-ink: #30205c;
  --joy-peach: #ffe9dc;
  --joy-peach-ink: #512719;
  --joy-yellow: #ffe38a;
  --joy-violet: #5b36cc;
  --joy-display: clamp(42px, 4.4vw, 60px);
  --joy-section-space: clamp(64px, 7vw, 100px);
}
/* Campaign materials retain their color on paper and violet-ink pages. */
.hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  column-gap: 35px;
  padding-top: 72px;
}
.hero h1 {
  font-size: clamp(58px, 6.1vw, 88px);
  max-width: 650px;
}
.hero-lede {
  max-width: 480px;
  font-size: 19px;
}
.hero-copy {
  align-self: center;
}
.creative-stage {
  position: relative;
  min-width: 0;
  height: 550px;
  margin: 0;
  isolation: isolate;
}
.creative-orbit {
  position: absolute;
  width: 440px;
  height: 440px;
  left: 45px;
  top: 45px;
  border-radius: 50%;
  background: var(--joy-lilac);
  z-index: -1;
}
.creative-card {
  position: absolute;
  box-shadow: 0 14px 26px -15px #29102a66;
  border-radius: 13px;
  overflow: hidden;
  transform-origin: 50% 65%;
}
.photo-creative {
  width: 290px;
  right: 12px;
  top: 20px;
  background: #fff;
  color: #211725;
  transform: rotate(8deg);
  z-index: 2;
}
.creative-account {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}
.creative-account > span:last-child {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
}
.creative-photo {
  position: relative;
  height: 335px;
  background: #ff5c38;
}
.creative-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.creative-photo > strong {
  position: absolute;
  top: 20px;
  left: 19px;
  font: 800 38px/0.98 var(--display);
  letter-spacing: -0.035em;
  color: #35101a;
}
.creative-caption {
  font-size: 12px;
  padding: 13px 14px;
}
.type-creative {
  width: 245px;
  left: 0;
  top: 185px;
  z-index: 3;
  background: var(--joy-yellow);
  color: #392714;
  padding: 23px 23px 9px;
  transform: rotate(-9deg);
}
.type-creative > span {
  font-size: 11px;
  letter-spacing: 0.055em;
}
.type-creative > strong {
  font: 800 38px/0.98 var(--display);
  letter-spacing: -0.035em;
  display: block;
  margin-top: 19px;
}
.type-creative em {
  font-style: normal;
  color: #692b18;
}
.type-creative .creative-account {
  padding: 13px 0 5px;
  border-top: 1px solid #c7a962;
  gap: 9px;
}
.type-creative .creative-account > span:last-child {
  font-size: 11px;
}
.creative-swoop {
  width: 114px;
  height: 51px;
  display: block;
  margin: 3px 0 0 65px;
  fill: none;
  stroke: #bc4323;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.creative-note {
  position: absolute;
  left: 0;
  top: 29px;
  z-index: 4;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 17px;
  background: var(--joy-peach);
  color: var(--joy-peach-ink);
  border: 1px solid #edc9b3;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  transform: rotate(-4deg);
}
.creative-network {
  display: flex;
  gap: 17px;
  position: absolute;
  bottom: 37px;
  right: 32px;
  padding: 13px 20px;
  background: var(--purple);
  color: var(--paper);
  border-radius: 40px;
  z-index: 4;
}
.creative-stage > figcaption {
  position: absolute;
  bottom: 0;
  left: 4px;
  font-size: 12px;
  color: var(--muted);
}
/* An open campaign spread: source idea to channel-specific creative. */
.campaign-story { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 70px; margin-top: 100px; padding-block: 32px; min-width: 0; }
.campaign-intro { padding-top: 60px; position: relative; }
.campaign-intro h2 { font: 800 clamp(48px, 5.5vw, 76px)/.98 var(--display); letter-spacing: -.035em; }
.campaign-intro h2 span { color: var(--purple); }
.campaign-intro > p { font-size: 18px; line-height: 1.6; margin-top: 28px; color: var(--body); }
.campaign-source { margin-top: 44px; padding: 25px 28px; background: var(--joy-lilac); color: #30205c; border-radius: 20px 20px 20px 3px; width: fit-content; transform: rotate(-3deg); }
.campaign-source blockquote { margin: 15px 0 12px; font: 500 20px/1.45 var(--font); }
.campaign-source > span:last-child { font-size: 12px; }
.campaign-arrow { width: 150px; height: 65px; margin: 15px 0 0 65%; fill: none; stroke: #ff5c38; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.campaign-output { min-width: 0; }
.campaign-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.campaign-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; min-height: 44px; border: 0; border-radius: 100px; background: transparent; color: var(--body); font: 500 14px/1 var(--font); cursor: pointer; transition: background .18s ease, color .18s ease; }
.campaign-tabs button[aria-selected="true"] { background: #5b4dff; color: #fff; }
.campaign-tabs button:hover:not([aria-selected="true"]) { background: var(--wash); color: var(--ink); }
.campaign-tabs .network-icon { width: 18px; height: 18px; }
.campaign-piece { position: relative; min-height: 520px; padding: 34px 38px; border: 0; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.campaign-piece[hidden] { display: none; }
.piece-linkedin { background: #5b4dff; color: #fff; }
.piece-byline { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.piece-byline .network-icon { width: 25px; height: 25px; }
.campaign-piece h3 { font: 800 clamp(38px, 4.1vw, 56px)/1.02 var(--display); letter-spacing: -.035em; margin-top: 40px; }
.campaign-piece p { font-size: 16px; line-height: 1.65; margin-top: 24px; max-width: 42ch; }
.piece-payoff { display: flex; justify-content: space-between; align-items: center; margin-block: 28px; font: 600 22px/1.15 var(--font); color: #ffe38a; }
.piece-payoff svg { width: 100px; height: 90px; fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-9deg); }
.piece-format { margin-top: auto; padding-top: 20px; font-size: 12px; }
.piece-instagram { background: #ff5c38; color: #281821; }
.piece-instagram h3 { max-width: 340px; }
.piece-sticker { align-self: flex-end; margin-top: -44px; padding: 18px 23px; border-radius: 50%; background: #ffe38a; font: 700 20px/1.1 var(--display); transform: rotate(12deg); }
.piece-x { background: #ffe38a; color: #281821; }
.piece-x h3 { font-size: clamp(32px, 3.5vw, 46px); }
.piece-x s { text-decoration-color: #b93016; text-decoration-thickness: 4px; }
.campaign-caption { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; margin-top: 16px; }
.campaign-caption > span:last-child { display: flex; align-items: center; gap: 6px; }
.campaign-caption .ui-icon { width: 15px; height: 15px; }
.campaign-signoff { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.campaign-signoff p { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.campaign-signoff p .ui-icon { color: var(--purple); flex-shrink: 0; }
.campaign-signoff a { font-size: 15px; }
@media (max-width: 800px) {
  .campaign-story { grid-template-columns: 1fr; margin-top: 55px; gap: 32px; }
  .campaign-intro { padding-top: 0; }
  .campaign-intro h2 span { display: block; }
  .campaign-intro h2 { max-width: 540px; }
  .campaign-source { margin-top: 28px; }
  .campaign-arrow { display: none; }
  .campaign-output { max-width: 560px; width: 100%; justify-self: center; }
  .campaign-signoff { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .campaign-intro h2 { font-size: 48px; }
  .campaign-intro > p { font-size: 16px; }
  .campaign-source { padding: 20px 22px; }
  .campaign-source blockquote { font-size: 18px; }
  .campaign-tabs { gap: 2px; }
  .campaign-tabs button { padding: 12px; font-size: 13px; }
  .campaign-piece { padding: 26px; min-height: 485px; }
  .campaign-piece h3 { font-size: 42px; }
  .piece-x h3 { font-size: 34px; }
  .campaign-piece p { font-size: 15px; }
  .piece-sticker { margin-top: -22px; font-size: 17px; padding: 15px 20px; }
  .campaign-caption { flex-direction: column; gap: 6px; }
  .campaign-signoff p { align-items: flex-start; line-height: 1.5; }
}
.responsibilities {
  background: var(--joy-lilac);
  color: var(--joy-lilac-ink);
  padding-block: var(--joy-section-space);
}
.flow-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
}
.flow-heading h2 {
  max-width: 720px;
  font-size: var(--joy-display);
}
.flow-heading h2 span {
  color: var(--joy-violet);
}
.flow-heading p {
  font-size: 17px;
  margin-top: 19px;
}
.flow-diagram {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 57px;
}
.flow-connections {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 210px;
  fill: none;
  stroke: #b7a5df;
  stroke-width: 2;
}
.flow-signal {
  stroke: #7651c8;
  stroke-width: 3;
  stroke-dasharray: 9 22;
}
.flow-node {
  position: relative;
  min-width: 0;
}
.flow-visual {
  height: 210px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-node h3 {
  font-size: 25px;
  line-height: 1.15;
  margin-top: 24px;
}
.flow-node p {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 13px;
  max-width: 250px;
}
.context-paper {
  background: #fff;
  color: #372848;
  border: 1px solid #d7c7ea;
  border-radius: 10px;
  padding: 18px;
  width: 175px;
  transform: rotate(-6deg);
  box-shadow: 0 7px 15px -10px #37284866;
}
.context-paper > .ui-icon {
  color: #7958a4;
  width: 25px;
  height: 25px;
}
.context-paper strong {
  display: block;
  font: 700 25px/1.02 var(--display);
  margin-top: 10px;
  letter-spacing: -0.025em;
}
.context-paper > span {
  font-size: 11px;
  display: block;
  margin-top: 15px;
}
.voice-line {
  position: absolute;
  bottom: 11px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 45px;
  background: #ff835e;
  padding: 8px 15px;
  border-radius: 40px;
  transform: rotate(5deg);
}
.voice-line i {
  height: 12px;
  width: 4px;
  background: #542516;
  border-radius: 3px;
}
.voice-line i:nth-child(2n) {
  height: 25px;
}
.voice-line i:nth-child(3n) {
  height: 19px;
}
.agent-disc {
  width: 125px;
  height: 125px;
  background: #5b4dff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 1;
}
.agent-ring {
  width: 163px;
  height: 163px;
  border: 1px dashed #9b80d1;
  border-radius: 50%;
  position: absolute;
}
.agent-word {
  position: absolute;
  background: #fff;
  color: #49305e;
  border: 1px solid #d3bfe7;
  border-radius: 30px;
  padding: 7px 12px;
  font-size: 12px;
  z-index: 2;
}
.word-one {
  top: 7px;
  left: 0;
  transform: rotate(-6deg);
}
.word-two {
  bottom: 9px;
  right: 0;
  transform: rotate(5deg);
}
.review-sheet {
  width: 164px;
  height: 179px;
  position: absolute;
  border-radius: 10px;
}
.sheet-back {
  background: #ffb291;
  transform: rotate(-10deg);
}
.sheet-front {
  background: #fff;
  padding: 12px;
  transform: rotate(5deg);
  box-shadow: 0 6px 15px -10px #37284866;
}
.review-art {
  display: block;
  background: #ffde86;
  color: #452d16;
  padding: 12px;
  font: 750 24px/1 var(--display);
  border-radius: 5px;
}
.review-line {
  display: block;
  height: 5px;
  background: #e1d9eb;
  width: 90%;
  margin-top: 11px;
  border-radius: 4px;
}
.review-line.short {
  width: 60%;
  margin-top: 6px;
}
.review-approval {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #355e30;
  margin-top: 11px;
}
.review-approval .ui-icon {
  width: 15px;
  height: 15px;
}
.publish-visual {
  display: grid;
  grid-template-columns: repeat(2, 58px);
  grid-template-rows: repeat(2, 58px);
  align-content: center;
  gap: 12px;
  transform: rotate(5deg);
}
.publish-channel {
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #fff;
  color: #45346c;
  box-shadow: 0 6px 15px -12px #37284866;
}
.publish-channel:nth-child(1) {
  color: #0a66c2;
  transform: rotate(-12deg);
}
.publish-channel:nth-child(2) {
  color: #be2053;
  transform: rotate(7deg);
}
.publish-channel:nth-child(3) {
  color: #211b2d;
  transform: rotate(-7deg);
}
.publish-channel:nth-child(4) {
  color: #086aaf;
  transform: rotate(9deg);
}
.publish-channel .network-icon {
  width: 26px;
  height: 26px;
}
.publish-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #5b4dff;
  color: #fff;
  font-size: 12px;
  padding: 7px 13px;
  border-radius: 30px;
}
.flow-footnote {
  font-size: 12px;
  text-align: center;
  margin-top: 44px;
  max-width: none;
}
.interface-layout {
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 35px;
}
#panel-web {
  padding: 18px;
  background: #c8b9f3;
  border: 0;
  min-height: 0;
  transform: rotate(1deg);
  transition: transform 0.3s var(--ease);
}
#panel-web:hover {
  transform: rotate(0deg);
}
.app-screenshot {
  margin: 0;
}
.app-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
  border: 1px solid #aa99d3;
}
.app-screenshot figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #35244f;
  font-size: 12px;
  padding: 13px 3px 0;
  line-height: 1.5;
}
.app-screenshot figcaption a,
.strategy-screenshot figcaption a {
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app-screenshot .ui-icon,
.strategy-screenshot .ui-icon {
  width: 13px;
  height: 13px;
}
/* Network stickers: keep this bright in both themes, with each network's identity. */
.coverage-section {
  background: #ffe38a;
  color: #24182e;
  padding-block: 90px;
  overflow: hidden;
}
.coverage-layout {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 70px;
}
.coverage-layout h2 { font-size: clamp(48px, 4.9vw, 68px); letter-spacing: -.045em; }
.coverage-layout h2 > span { color: #5b36cc; }
.coverage-layout p { color: #3b2940; font-size: 18px; max-width: 360px; }
.coverage-layout .coverage-note { color: #5b4555; font-size: 13px; max-width: 300px; margin-top: 24px; }
.channel-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 13px;
  border: 0;
  padding: 18px 4px;
  align-items: center;
}
.channel-directory > .network-sticker {
  --sticker-turn: -4deg;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 82px;
  padding: 16px 10px;
  border: 2px solid #ffffff;
  border-radius: 20px;
  background: #fffdf7;
  color: #251b30;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 5px 9px -5px #251b3066;
  transform: rotate(var(--sticker-turn));
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.channel-directory > .network-sticker:nth-child(3n + 2) { --sticker-turn: 5deg; transform: translateY(-10px) rotate(var(--sticker-turn)); }
.channel-directory > .network-sticker:nth-child(3n) { --sticker-turn: -2deg; }
.channel-directory .network-icon { width: 32px; height: 32px; flex-shrink: 0; }
.channel-directory > .sticker-linkedin { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.channel-directory > .sticker-instagram { background: #ffd5e7; color: #9b174d; border-color: #ffd5e7; border-radius: 40px; }
.channel-directory > .sticker-x { background: #17151a; color: #fff; border-color: #17151a; border-radius: 40px; }
.channel-directory > .sticker-bluesky { color: #087bdf; }
.channel-directory > .sticker-threads { border-radius: 40px; }
.channel-directory > .sticker-facebook { color: #0866ff; }
.channel-directory > .sticker-telegram { color: #1684bc; border-radius: 40px; }
.channel-directory > .sticker-pinterest { background: #e60023; color: #fff; border-color: #e60023; }
.channel-directory > .sticker-mastodon { color: #6153cb; }
.channel-directory > .sticker-reddit { color: #d93900; }
.channel-directory > .sticker-wordpress { color: #21759b; border-radius: 40px; }
.channel-directory > .sticker-more { background: #5b36cc; color: #fff; border-color: #5b36cc; white-space: normal; }
.channel-directory > .network-sticker:hover,
.channel-directory > .network-sticker:focus-visible {
  transform: translateY(-7px) rotate(0deg) scale(1.04);
  box-shadow: 0 10px 15px -8px #251b3070;
  z-index: 1;
}
.channel-directory > a:focus-visible { outline: 3px solid #24182e; outline-offset: 5px; }
@media (max-width: 1100px) {
  .coverage-layout { gap: 40px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .channel-directory > .network-sticker { flex-direction: column; gap: 7px; }
}
@media (max-width: 800px) {
  .coverage-layout { grid-template-columns: 1fr; gap: 34px; }
  .coverage-layout p { max-width: 440px; }
  .channel-directory { max-width: 620px; width: 100%; margin-inline: auto; }
  .channel-directory > .network-sticker { flex-direction: row; }
}
@media (max-width: 560px) {
  .coverage-section { padding-block: 55px; }
  .coverage-layout { gap: 27px; }
  .coverage-layout h2 { font-size: 52px; }
  .coverage-layout p { font-size: 16px; max-width: 320px; }
  .coverage-layout .coverage-note { margin-top: 16px; }
  .channel-directory { gap: 17px 10px; padding-inline: 5px; }
  .channel-directory > .network-sticker { flex-direction: column; min-height: 96px; gap: 8px; padding: 12px 4px; font-size: 12px; border-radius: 17px; }
  .channel-directory .network-icon { width: 32px; height: 32px; }
  .channel-directory > .sticker-instagram,
  .channel-directory > .sticker-threads,
  .channel-directory > .sticker-wordpress { border-radius: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .channel-directory > .network-sticker { transition: none; }
  .channel-directory > .network-sticker:hover { transform: rotate(var(--sticker-turn)); }
}
.control-section {
  grid-template-columns: 0.75fr 1.25fr;
  gap: 45px;
  align-items: center;
}
.strategy-story h2 {
  font-size: var(--joy-display);
}
.strategy-story > p {
  font-size: 17px;
  color: var(--body);
  margin-top: 23px;
}
.strategy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 23px;
}
.strategy-tags span {
  background: var(--joy-lilac);
  color: var(--joy-lilac-ink);
  font-size: 12px;
  padding: 7px 11px;
  border-radius: 6px;
}
.strategy-story .strategy-boundary {
  font-size: 12px;
  margin-top: 21px;
  color: var(--muted);
}
.strategy-screenshot {
  margin: 0;
  padding: 17px;
  background: var(--joy-yellow);
  border-radius: 13px;
  transform: rotate(-1.5deg);
}
.strategy-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
  border: 1px solid #d1b572;
}
.strategy-screenshot figcaption {
  font-size: 12px;
  color: #483817;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
/* The plans are a clear decision point, with Pro carrying the primary emphasis. */
.pricing-section { padding-block: var(--joy-section-space); }
.pricing-section h2, .section-heading h2, .faq-section h2 { font-size: var(--joy-display); }
.plans { gap: 22px; margin-top: 56px; align-items: stretch; }
.plan {
  --plan-ink: #30205c;
  --plan-body: #544371;
  --plan-line: #cfbfdf;
  color: var(--plan-ink);
  background: #fffdf7;
  border: 0;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 28px -22px #21142b66;
}
.plan:last-child { background: var(--joy-lilac); }
.plan.featured {
  --plan-ink: #fff;
  --plan-body: #eee8ff;
  --plan-line: #9380df;
  background: var(--joy-violet);
  box-shadow: 0 18px 32px -24px #2c135e99;
  transform: translateY(-12px);
}
.plan-title { align-items: flex-start; flex-wrap: wrap; min-height: 34px; }
.plan-title h3 { font-size: 32px; }
.plan-title > span { color: #35244f; background: var(--joy-yellow); padding: 6px 9px; border-radius: 6px; transform: rotate(3deg); }
.plan-description { color: var(--plan-body); font-size: 14px; min-height: 42px; }
.price { font-size: clamp(58px, 5.5vw, 78px); margin-top: 28px; }
.price > span { color: var(--plan-body); font-size: 13px; }
.plan ul { color: var(--plan-body); border-color: var(--plan-line); font-size: 14px; padding-block: 22px; }
.plan li strong { color: var(--plan-ink); }
.plan .button { color: #fff; background: #30205c; border-color: #30205c; font-size: 14px; min-height: 52px; }
.plan .button:hover { background: #49316d; border-color: #49316d; }
.plan.featured .button { color: #35244f; background: var(--joy-yellow); border-color: var(--joy-yellow); }
.plan.featured .button:hover { background: #ffd357; border-color: #ffd357; }
.plan .button:focus-visible { outline-color: var(--plan-ink); }
.pricing-note { margin-top: 32px; max-width: 720px; font-size: 13px; }
.faq-list summary { font-size: 17px; padding-block: 25px; padding-right: 44px; }
.faq-indicator { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--purple-tint); color: var(--purple); }
.faq-list details[open] summary { color: var(--purple); }
.faq-list details p { font-size: 15px; max-width: 65ch; }
.faq-list summary:hover { color: var(--purple); }
.closing {
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  padding: 64px;
  background: #5b4dff;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The enlarged brand waveform carries the closing invitation. */
.closing-brand { width: 56px; height: 56px; display: block; }
.closing h2 { font-size: clamp(38px, 4.2vw, 58px); max-width: 560px; }
.closing h2 > span {
  color: #ffe38a;
}
.closing > div > p,
.signup label,
.signup small {
  color: #eeeaff;
}
.signup input {
  background: #fffdf7;
  color: #30205c;
  border: 2px solid #fffdf7;
  min-height: 56px;
  font-size: 16px;
}
.signup input:focus-visible { outline: 3px solid var(--joy-yellow); outline-offset: 4px; }
.signup input::placeholder {
  color: #756489;
}
.signup .button {
  min-height: 56px;
  font-size: 16px;
  background: #ffe38a;
  color: #392c18;
}
.signup .button:hover {
  background: #ffd357;
}
#waitlist-error {
  color: #fff0c4;
}
#waitlist-done > p {
  color: #eeeaff;
}
.motion-scene .creative-card,
.motion-scene .creative-note,
.motion-scene .agent-ring,
.motion-scene .flow-signal,
.motion-scene .voice-line i {
  animation-play-state: paused;
}
.motion-scene.is-in-view .creative-card,
.motion-scene.is-in-view .creative-note,
.motion-scene.is-in-view .agent-ring,
.motion-scene.is-in-view .flow-signal,
.motion-scene.is-in-view .voice-line i {
  animation-play-state: running;
}
.motion-paused .motion-scene *,
.motion-suspended .motion-scene * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: no-preference) {
  .photo-creative {
    animation: photo-drift 7s ease-in-out infinite;
  }
  .type-creative {
    animation: poster-drift 8s ease-in-out infinite;
  }
  .creative-note {
    animation: note-drift 6s ease-in-out infinite;
  }
  .agent-ring {
    animation: ring-travel 22s linear infinite;
  }
  .flow-signal {
    animation: signal-travel 2s linear infinite;
  }
  .voice-line i {
    animation: voice-breathe 1.4s ease-in-out infinite alternate;
  }
  .voice-line i:nth-child(2n) {
    animation-delay: -0.6s;
  }
  .voice-line i:nth-child(3n) {
    animation-delay: -1s;
  }
  .workspace {
    animation: none;
  }
  @keyframes photo-drift {
    0%,
    100% {
      transform: translateY(0) rotate(8deg);
    }
    50% {
      transform: translateY(-11px) rotate(5deg);
    }
  }
  @keyframes poster-drift {
    0%,
    100% {
      transform: translateY(0) rotate(-9deg);
    }
    50% {
      transform: translateY(9px) rotate(-6deg);
    }
  }
  @keyframes note-drift {
    0%,
    100% {
      transform: translateY(0) rotate(-4deg);
    }
    50% {
      transform: translateY(-6px) rotate(-1deg);
    }
  }
  @keyframes ring-travel {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes signal-travel {
    to {
      stroke-dashoffset: -62;
    }
  }
  @keyframes voice-breathe {
    from {
      transform: scaleY(0.55);
    }
    to {
      transform: scaleY(1);
    }
  }
}
@media (max-width: 1100px) {
  .hero {
    gap: 25px;
  }
  .hero h1 {
    font-size: 64px;
  }
  .creative-stage {
    height: 470px;
  }
  .photo-creative {
    width: 225px;
    right: 3px;
  }
  .creative-photo {
    height: 270px;
  }
  .creative-photo > strong {
    font-size: 32px;
  }
  .type-creative {
    width: 210px;
    top: 150px;
    padding: 20px 20px 9px;
  }
  .type-creative > strong {
    font-size: 34px;
  }
  .creative-orbit {
    width: 310px;
    height: 310px;
    left: 25px;
  }
  .creative-note {
    left: -10px;
    font-size: 12px;
  }
  .creative-network {
    bottom: 28px;
    right: 0;
  }
  .flow-diagram {
    gap: 20px;
  }
  .flow-node h3 {
    font-size: 20px;
  }
  .context-paper {
    width: 155px;
    padding: 15px;
  }
  .agent-disc {
    width: 106px;
    height: 106px;
  }
  .agent-ring {
    width: 145px;
    height: 145px;
  }
  .review-sheet {
    width: 145px;
    height: 174px;
  }
  .review-art {
    font-size: 22px;
  }
  .review-approval {
    font-size: 11px;
  }
  .word-one {
    left: -5px;
  }
  .word-two {
    right: -5px;
  }
  .interface-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 25px;
  }
  .control-section {
    gap: 30px;
  }
  .strategy-story h2 {
    font-size: 37px;
  }
  .strategy-story > p {
    font-size: 16px;
  }
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 48px;
  }
  .hero h1 {
    font-size: 51px;
  }
  .hero-lede {
    font-size: 16px;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
  .creative-stage {
    height: 440px;
  }
  .photo-creative {
    width: 195px;
    right: 0;
    top: 37px;
  }
  .creative-photo {
    height: 241px;
  }
  .creative-caption {
    font-size: 11px;
  }
  .creative-account {
    padding: 10px;
    font-size: 11px;
    gap: 6px;
  }
  .creative-account > span:last-child {
    font-size: 11px;
  }
  .creative-photo > strong {
    font-size: 30px;
  }
  .type-creative {
    width: 180px;
    top: 171px;
    padding: 16px 16px 7px;
  }
  .type-creative > strong {
    font-size: 28px;
  }
  .type-creative > span {
    font-size: 9px;
  }
  .creative-swoop {
    height: 40px;
    margin-left: 35px;
  }
  .type-creative .creative-account > span:last-child {
    font-size: 11px;
  }
  .creative-orbit {
    width: 260px;
    height: 260px;
    left: 15px;
    top: 70px;
  }
  .creative-note {
    top: 8px;
    left: 0;
    padding: 10px;
    gap: 9px;
    font-size: 11px;
  }
  .creative-network {
    bottom: 25px;
    padding: 10px 14px;
    gap: 11px;
  }
  .creative-network .network-icon {
    width: 16px;
    height: 16px;
  }
  .creative-stage > figcaption {
    font-size: 11px;
  }
  .workspace {
    grid-column: 1/-1;
    margin-top: 30px;
  }
  .network-ribbon {
    grid-column: 1/-1;
  }
  .responsibilities {
    padding: 64px 0;
  }
  .flow-diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }
  .flow-connections {
    display: none;
  }
  .flow-node {
    display: grid;
    grid-template-columns: 1fr;
  }
  .flow-node h3 {
    font-size: 23px;
  }
  .flow-node p {
    max-width: 280px;
  }
  .flow-node:nth-of-type(2) {
    border-bottom: 1px solid #b6a4d4;
    padding-bottom: 28px;
  }
  .flow-heading {
    align-items: start;
  }
  .interface-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  #panel-web {
    padding: 17px;
  }
  .interface-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .control-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .strategy-story {
    max-width: 600px;
  }
  .strategy-story h2 {
    font-size: 43px;
  }
  .strategy-screenshot {
    transform: rotate(-1deg);
  }
}
@media (max-width: 560px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 38px;
    gap: 0;
  }
  .hero h1 {
    font-size: clamp(44px, 11.4vw, 62px);
  }
  .hero-actions {
    flex-wrap: nowrap;
    gap: 23px;
  }
  .creative-stage {
    height: 445px;
    margin: 27px auto 0;
    width: min(100%, 365px);
  }
  .photo-creative {
    width: 213px;
    top: 25px;
    right: 5px;
  }
  .creative-photo {
    height: 263px;
  }
  .creative-photo > strong {
    font-size: 32px;
  }
  .creative-orbit {
    width: 290px;
    height: 290px;
    left: 17px;
    top: 53px;
  }
  .type-creative {
    width: 186px;
    top: 166px;
    left: 1px;
  }
  .creative-note {
    top: 5px;
    padding: 11px 12px;
    font-size: 12px;
  }
  .creative-network {
    bottom: 25px;
    right: 4px;
  }
  .creative-account,
  .creative-account > span:last-child,
  .creative-caption {
    font-size: 11px;
  }
  .type-creative > span {
    font-size: 11px;
  }
  .creative-stage > figcaption {
    font-size: 12px;
  }
  .workspace {
    margin-top: 28px;
  }
  .flow-heading {
    display: block;
  }
  .flow-heading h2 {
    font-size: 40px;
  }
  .flow-heading p {
    font-size: 16px;
  }
  .flow-diagram {
    margin-top: 20px;
    grid-template-columns: 1fr;
    gap: 23px;
  }
  .flow-node {
    grid-template-columns: 155px minmax(0, 1fr);
    column-gap: 21px;
    align-items: center;
  }
  .flow-visual {
    grid-row: 1/3;
    height: 188px;
  }
  .flow-node h3 {
    margin: 0;
    align-self: end;
    font-size: 22px;
  }
  .flow-node p {
    margin-top: 10px;
    align-self: start;
    font-size: 13px;
  }
  .flow-node:nth-of-type(2) {
    border: 0;
    padding: 0;
  }
  .context-paper {
    width: 140px;
    padding: 14px;
  }
  .context-paper strong {
    font-size: 24px;
  }
  .context-paper > span {
    font-size: 11px;
  }
  .voice-line {
    right: -5px;
    bottom: 4px;
    gap: 4px;
    padding: 7px 12px;
  }
  .agent-disc {
    width: 100px;
    height: 100px;
  }
  .agent-ring {
    width: 135px;
    height: 135px;
  }
  .agent-disc img {
    width: 58px;
    height: 58px;
  }
  .agent-word {
    font-size: 11px;
    padding: 6px 9px;
  }
  .word-one {
    top: 5px;
    left: 0;
  }
  .word-two {
    right: -5px;
    bottom: 4px;
  }
  .review-sheet {
    width: 128px;
    height: 164px;
  }
  .sheet-front {
    padding: 10px;
  }
  .review-art {
    font-size: 22px;
    padding: 10px;
  }
  .review-approval {
    font-size: 11px;
    gap: 3px;
  }
  .publish-visual {
    grid-template-columns: repeat(2, 49px);
    grid-template-rows: repeat(2, 49px);
    gap: 10px;
  }
  .publish-label {
    font-size: 11px;
    padding: 6px 9px;
    bottom: 3px;
  }
  .flow-footnote {
    text-align: left;
    margin-top: 28px;
    font-size: 12px;
  }
  .app-screenshot picture {
    display: block;
    border-radius: 7px;
    overflow: hidden;
  }
  .app-screenshot img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: top;
  }
  .app-screenshot figcaption {
    flex-wrap: wrap;
    font-size: 12px;
    gap: 7px;
  }
  #panel-web {
    padding: 13px;
    transform: rotate(0);
  }
  .strategy-story h2 {
    font-size: 38px;
  }
  .strategy-screenshot {
    padding: 12px;
  }
  .strategy-screenshot figcaption {
    font-size: 12px;
  }
  .closing h2 {
    font-size: 40px;
  }
}
@media (max-width: 370px) {
  .photo-creative {
    width: 195px;
  }
  .creative-photo {
    height: 249px;
  }
  .type-creative {
    width: 170px;
  }
  .type-creative > strong {
    font-size: 27px;
  }
  .creative-stage {
    height: 432px;
  }
  .flow-node {
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 17px;
  }
  .flow-node h3 {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .creative-card,
  .creative-note,
  .agent-ring,
  .flow-signal,
  .voice-line i {
    animation: none !important;
  }
  #panel-web,
  .strategy-screenshot {
    transform: none;
    transition: none;
  }
}

/* Final composition: generous targets and fully contained mobile artwork. */
.publish-channel {
  width: 58px;
  height: 58px;
}
.review-art {
  font-size: 20px;
}
@media (max-width: 800px) {
  .review-art {
    font-size: 18px;
  }
}
@media (max-width: 560px) {
  .photo-creative {
    width: 195px;
    right: 25px;
  }
  .type-creative {
    width: 175px;
    left: 18px;
  }
  .type-creative > strong {
    font-size: 27px;
  }
  .creative-orbit {
    width: 270px;
    height: 270px;
  }
  .review-sheet {
    width: 140px;
    height: 174px;
  }
  .review-art {
    font-size: 19px;
    padding: 8px;
  }
  .publish-channel {
    width: 49px;
    height: 49px;
  }
}
@media (max-width: 370px) {
  .photo-creative {
    width: 185px;
    right: 23px;
  }
  .type-creative {
    width: 166px;
    left: 14px;
  }
  .review-sheet {
    width: 128px;
  }
  .review-art {
    font-size: 17px;
  }
}

/* Whole-page scale: preserve readable previews without shrinking the marketing. */
@media (max-width: 1100px) {
  .plan { padding: 26px; }
  .plan-title { min-height: 68px; }
  .plan-description { min-height: 63px; }
  .closing { padding: 40px; gap: 38px; }
}
@media (max-width: 800px) {
  .plan { padding: 22px 18px; }
  .plan-title h3 { font-size: 28px; }
  .plan-title > span { font-size: 12px; }
  .plan ul { font-size: 13px; }
  .closing { grid-template-columns: 1fr; gap: 32px; }
  .closing h2 { max-width: 620px; }
  .signup { max-width: 540px; width: 100%; }
}
@media (max-width: 560px) {
  .hero { padding-top: 35px; }
  .hero h1 { font-size: clamp(46px, 12.1vw, 64px); }
  .hero-lede { font-size: 17px; }
  .flow-node h3 { font-size: 22px; }
  .plans { gap: 20px; margin-top: 32px; }
  .plan { padding: 28px; }
  .plan.featured { transform: none; }
  .plan-title { min-height: 0; align-items: center; }
  .plan-description { min-height: 0; }
  .price { font-size: 66px; margin-top: 24px; }
  .plan ul { font-size: 14px; margin-top: 22px; padding-block: 20px; }
  .pricing-note { font-size: 12px; }
  .faq-list summary { font-size: 16px; }
  .closing { padding: 30px 24px; }
  .closing h2 { font-size: 40px; }
}

@media (min-width: 561px) and (max-width: 800px) {
  .photo-creative { right: 24px; }
}