/* Full-size illustrative scenes beside each service. */
.workflow-diagram {
  position: static;
  align-self: start;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}
.engine-scene {
  --scene-ink: #121512;
  --scene-muted: #6b7482;
  --scene-blue: #1630d3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3cqi, 24px);
  width: 100%;
  color: var(--scene-ink);
  font-size: clamp(13px, 2.7cqi, 16px);
  line-height: 1.4;
}
.engine-scene h4,
.engine-scene p { margin: 0; }
.workflow-diagram .engine-scene img { object-fit: cover; margin: 0; }
.engine-scene strong { font-weight: 700; }
.scene-sample {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
}

/* The same fixed stage shows photos, the finished post, and its schedule. */
.scene-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(260px, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d6deed;
  border-radius: 8px;
}
.studio-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px; border-bottom: 1px solid #e3e9f2; }
.studio-header div > span { display: block; color: #61718a; font-size: .65em; letter-spacing: .12em; }
.studio-header strong { display: block; margin-top: 5px; font-size: 1em; }
.studio-state { max-width: 42%; color: #526b5d; font-size: .72em; text-align: right; }
.studio-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; list-style: none; background: #f3f6fc; }
.studio-steps li { padding: 16px 8px; border-bottom: 3px solid transparent; color: #69768a; text-align: center; font-size: .8em; }
.studio-steps li[data-current] { color: #254ac3; border-bottom-color: #1630d3; font-weight: 750; }
.studio-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 260px; padding: 20px; background: #f8fafe; }
.studio-phase { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; visibility: hidden; }
.content-studio[data-phase='photos'] .studio-phase-photos,
.content-studio[data-phase='create'] .studio-phase-create,
.content-studio[data-phase='schedule'] .studio-phase-schedule { opacity: 1; visibility: visible; }
.studio-phase-photos { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; }
.source-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1.15fr 1fr; gap: 10px; min-height: 0; }
.source-photo { position: relative; overflow: hidden; min-height: 0; border-radius: 4px; }
.source-photo:first-child { grid-column: 1 / -1; }
.source-photo img { width: 100%; height: 100%; position: absolute; inset: 0; }
.source-photo > span { position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; display: grid; place-items: center; background: #1630d3; color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: 12px; }
.phase-title { text-align: center; font-size: .95em; }
.studio-phase-create { display: grid; place-items: center; }
.format-preview { position: relative; grid-area: 1 / 1; height: 100%; width: auto; max-width: 100%; min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; background: #fff; border: 1px solid #d6deed; border-radius: 5px; }
.reel-format { aspect-ratio: 9 / 16; background: #080a08; }
.carousel-format { aspect-ratio: 4 / 5; }
.content-studio[data-format='reel'] .reel-format,
.content-studio[data-format='carousel'] .carousel-format { opacity: 1; visibility: visible; }
.output-photo { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.output-photo-one { visibility: visible; }
.reel-format::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #102032d9); }
.reel-caption { position: absolute; z-index: 1; bottom: 13%; left: 10%; right: 10%; color: #fff; font-size: clamp(22px, 5cqi, 32px); font-weight: 750; line-height: 1.1; letter-spacing: -.04em; }
.reel-playbar { position: absolute; z-index: 1; left: 10%; right: 10%; bottom: 7%; height: 3px; background: #ffffff50; }
.reel-playbar i { display: block; width: 0; height: 100%; background: #fff; }
.carousel-page { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; background: #fff; visibility: hidden; }
.carousel-page-one { visibility: visible; }
.carousel-page img { width: 100%; height: 100%; min-height: 0; }
.carousel-page strong { display: block; padding: 14px 16px 4px; font-size: clamp(17px, 4cqi, 25px); line-height: 1.14; }
.carousel-page > span { padding: 9px 14px 12px; text-align: right; color: #61718a; font-size: 11px; }
.studio-phase-schedule { display: grid; align-items: center; }
.publishing-queue { padding: clamp(18px, 4cqi, 26px); border: 1px solid #d6deed; border-radius: 6px; background: #fff; }
.queue-label { color: #61718a; font-size: .65em; letter-spacing: .09em; }
.scheduled-post { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding-block: 25px; }
.scheduled-post img { width: 74px; height: 92px; border-radius: 4px; }
.scheduled-post div > span { color: #61718a; font-size: .65em; letter-spacing: .07em; }
.scheduled-post strong { display: block; font-size: 1.08em; margin-top: 7px; }
.scheduled-check { color: #347757; font-size: 24px; }
.queue-confirmation { display: flex; gap: 8px; padding-top: 18px; border-top: 1px solid #e3e9f2; color: #347757; font-size: .84em; }
.studio-footer { padding: 18px 20px; border-top: 1px solid #e3e9f2; font-size: .75em; }
.studio-phase-track { height: 4px; margin-top: 13px; background: #e3e9f2; border-radius: 2px; }
.studio-phase-track i { display: block; width: 33.333%; height: 100%; background: #1630d3; border-radius: 2px; }
.content-studio[data-phase='create'] .studio-phase-track i { width: 66.666%; }
.content-studio[data-phase='schedule'] .studio-phase-track i { width: 100%; background: #409572; }

/* Campaign creative and inquiry rows stay in separate cells. */
.campaign-preview {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  height: clamp(360px, 90cqi, 480px);
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d6deed;
  border-radius: 8px;
}
.campaign-brand { display: flex; align-items: center; gap: 10px; padding: 15px 18px; }
.campaign-brand img { width: 32px; height: 32px; border-radius: 50%; object-position: center 30%; }
.campaign-brand strong { display: block; font-size: .86em; }
.campaign-brand span { display: block; font-size: .7em; color: var(--scene-muted); }
.campaign-image { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.campaign-image img { width: 100%; height: 100%; }
.campaign-image::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #0c0e0da1); }
.campaign-image > span { position: absolute; z-index: 1; bottom: 8%; left: 7%; color: #fff; font: 700 clamp(25px, 7.5cqi, 42px)/.97 'Barlow Condensed', sans-serif; }
.campaign-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 18px; }
.campaign-footer strong { font-size: .83em; max-width: 65%; }
.campaign-footer > span { font-size: .72em; color: var(--scene-blue); white-space: nowrap; }
.inquiry-note {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 15px 12px;
  background: #fff;
  border: 1px solid #d6deed;
  border-radius: 8px;
}
.inquiry-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dfe8fc;
  color: #2c50a7;
  font-size: .8em;
  font-weight: 700;
}
.inquiry-note strong { display: block; font-size: .88em; }
.inquiry-note div > span { display: block; font-size: .75em; color: var(--scene-muted); margin-top: 3px; }
.inquiry-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #4a78d7; }

/* Search and website previews follow the same aligned column. */
.site-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #d6deed;
  border-radius: 8px;
  overflow: hidden;
}
.site-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 17px; font-size: .82em; font-weight: 700; }
.site-brand i { width: 18px; height: 9px; border-block: 1px solid #142238; }
.site-hero {
  position: relative;
  height: clamp(205px, 48cqi, 265px);
  overflow: hidden;
}
.site-hero img { width: 100%; height: 100%; }
.site-hero::after { content: ''; position: absolute; inset: 0; background: #11233148; }
.site-hero > span { position: absolute; z-index: 1; top: 17%; left: 7%; right: 7%; color: #fff; font-size: .56em; letter-spacing: .13em; }
.site-hero strong { position: absolute; z-index: 1; left: 7%; top: 31%; color: #fff; font: 400 clamp(25px, 7cqi, 38px)/1.02 Georgia, serif; letter-spacing: -.04em; }
.site-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 7%;
  padding: 14px;
  border: 1px solid #d6deed;
  font-size: .71em;
  color: #687481;
}
.search-symbol { display: block; position: relative; flex: 0 0 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; }
.search-symbol::after { content: ''; position: absolute; width: 5px; height: 1.5px; bottom: -2px; right: -4px; background: currentColor; transform: rotate(45deg); }
.site-listings { display: flex; gap: 10px; padding: 0 7% 5%; }
.site-listings > div { flex: 1; }
.site-listings img { width: 100%; height: 70px; }
.site-listings span { display: block; margin-top: 6px; font-size: .68em; }
.search-result-preview {
  padding: 22px;
  border: 1px solid #d6deed;
  border-radius: 8px;
  background: #fff;
}
.search-query { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #e1e6ee; color: #526176; font-size: .84em; }
.typed-query { white-space: nowrap; overflow: hidden; }
.search-result { margin-top: 17px; }
.search-result small { color: #5d7161; font-size: .63em; letter-spacing: .09em; }
.search-result strong { display: block; margin-top: 6px; color: #2c50bc; font-size: 1.05em; }
.search-result p { margin-top: 7px; color: #626f81; font-size: .76em; }

/* One working inbox, with the conversation visible. */
.inbox-window {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: clamp(390px, 82cqi, 460px);
  background: #fff;
  border: 1px solid #d6deed;
  border-radius: 8px;
  overflow: hidden;
}
.inbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 5%; border-bottom: 1px solid #e5eaf1; }
.inbox-toolbar > strong { font-size: 1.06em; }
.inbox-status { display: flex; align-items: center; gap: 5px; color: #527766; font-size: .63em; }
.inbox-status i, .reply-status i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #4b9b72; }
.inbox-layout {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 31% 69%;
}
.inbox-list { border-right: 1px solid #e5eaf1; padding-top: 10px; }
.inbox-list > div { position: relative; padding: 14px 11px; }
.inbox-list .inbox-selected { background: #edf2ff; }
.inbox-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #dce6f7; color: #4062a7; font-size: .62em; margin-bottom: 7px; }
.inbox-list strong { display: block; font-size: .7em; }
.inbox-list small { display: block; font-size: .58em; margin-top: 3px; color: #748093; }
.inbox-conversation { display: flex; flex-direction: column; padding: 17px 6%; min-width: 0; }
.conversation-title strong { display: block; font-size: .9em; }
.conversation-title small { display: block; font-size: .66em; color: #738095; margin-top: 3px; }
.inbox-messages { display: flex; flex-direction: column; gap: 13px; margin-top: 24px; }
.inbox-message { width: fit-content; max-width: 95%; padding: 12px 13px; border-radius: 10px 10px 10px 2px; font-size: clamp(12px, 2.8cqi, 16px); }
.incoming { background: #edf0f5; }
.outgoing { align-self: flex-end; background: #2b50da; color: #fff; border-radius: 10px 10px 2px 10px; }
.reply-status { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: .65em; color: #5a7566; }
.call-handoff {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px;
  background: #e4edff;
  border: 1px solid #d6deed;
  border-radius: 8px;
}
.call-indicator {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  background: #3c8e72;
}
.call-handoff strong { display: block; font-size: .93em; }
.call-handoff div > span { display: block; margin-top: 4px; color: #61718c; font-size: .74em; }

/* A prepared meeting becomes a clear next step. */
.meeting-calendar {
  min-width: 0;
  padding: clamp(15px, 4cqi, 24px);
  background: #dfe8fc;
  border: 1px solid #c8d7f0;
  border-radius: 8px;
}
.calendar-title strong {
  display: block;
  font: 400 clamp(23px, 4.6cqi, 29px)/1.05 Georgia, serif;
  letter-spacing: -.04em;
}
.calendar-title > span { display: block; margin-top: 24px; font-size: .62em; letter-spacing: .15em; }
.week-days { display: grid; grid-template-columns: repeat(5, 1fr); margin-block: 13px 10px; font-size: .6em; color: #526786; }
.week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 32px) auto;
}
.week-grid i { border-top: 1px solid #b8c7e3; border-right: 1px solid #b8c7e3; }
.week-grid i:nth-child(5n) { border-right: 0; }
.calendar-event {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 12px;
  background: #1630d3;
  color: #fff;
}
.calendar-event b { display: block; font-size: .9em; }
.calendar-event small { display: block; margin-top: 3px; font-size: .68em; color: #dce6ff; }
.meeting-brief {
  min-width: 0;
  padding: clamp(15px, 4cqi, 24px);
  background: #fff;
  border: 1px solid #d6deed;
  border-radius: 8px;
}
.brief-label { font-size: .62em; letter-spacing: .12em; color: #69778b; }
.meeting-brief h4 {
  font: 700 clamp(24px, 5.6cqi, 32px)/.97 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  margin-block: 12px 20px;
}
.brief-line { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: .76em; }
.brief-line i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #8ca9e1; }
.closing-stamp { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e3e9f3; margin-top: 22px; padding-top: 17px; }
.closing-stamp > span { display: grid; place-items: center; width: 36px; height: 36px; flex: none; background: #e1eee6; color: #377854; border-radius: 50%; font-size: 1.5em; }
.closing-stamp strong { font-size: .83em; line-height: 1.3; }

@media (min-width: 901px) {
  .workflow-diagram {
    position: relative;
    align-self: stretch;
    min-height: 0;
  }
  .engine-scene {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
  .scene-content, .scene-visibility, .scene-crm {
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .scene-ads { grid-template-rows: minmax(0, 1fr) auto auto; }
  .scene-visibility { grid-template-rows: minmax(0, 1fr) auto auto; }
  .content-studio { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .studio-stage { min-height: 0; }
  .campaign-preview, .inbox-window { height: auto; min-height: 0; }
  .site-preview { min-height: 0; }
  .site-hero { height: auto; min-height: 0; flex: 1; }
  .site-listings img { height: clamp(85px, 20cqi, 115px); }
  .inbox-list { display: grid; grid-template-rows: repeat(3, 1fr); padding-top: 0; }
  .inbox-list > div { padding-block: 23px; }
  .inbox-messages { flex: 1; justify-content: center; gap: 22px; }
  .scene-close { grid-template-rows: .9fr 1.1fr auto; }
  .meeting-calendar, .meeting-brief { display: flex; flex-direction: column; padding: 30px; min-height: 0; }
  .calendar-title strong { font-size: clamp(31px, 7.2cqi, 41px); }
  .week-grid { flex: 1; grid-template-rows: repeat(2, minmax(26px, 1fr)) auto; }
  .meeting-brief h4 { font-size: clamp(34px, 8cqi, 46px); }
  .brief-line { font-size: .92em; }
  .closing-stamp { margin-top: auto; }
}
@media (max-width: 900px) {
  .premium-page .written-step { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 34px; }
  .premium-page .written-step > .stage-visual,
  .premium-page .written-step > .stage-details { grid-area: auto; }
  .workflow-diagram { max-width: 580px; justify-self: center; }
  .content-studio { min-height: 590px; }
}
@media (max-width: 430px) {
  .scene-ads { grid-template-columns: minmax(0, 1fr); }
  .studio-header, .studio-stage, .studio-footer { padding: 15px; }
  .studio-header strong { font-size: .9em; }
  .studio-state { font-size: .66em; }
  .studio-steps li { font-size: .75em; }
  .scheduled-post { grid-template-columns: 55px minmax(0, 1fr) auto; gap: 10px; }
  .scheduled-post img { width: 55px; height: 74px; }
  .inbox-toolbar { padding-block: 15px; }
  .inbox-list > div { padding: 11px 8px; }
  .inbox-conversation { padding-top: 13px; }
  .inbox-messages { margin-top: 17px; gap: 9px; }
  .inbox-message { padding: 9px 10px; }
  .call-handoff { padding: 17px; }
  .calendar-title > span { margin-top: 17px; }
  .brief-line { margin-top: 8px; }
  .closing-stamp { margin-top: 16px; padding-top: 13px; }
}

/* Animation stays inside the fixed workspace and panels. */
@media (prefers-reduced-motion: no-preference) {
  .studio-phase-track i { transition: width 350ms ease; }
  .is-tracing [data-phase='photos'] .source-photo > span { animation: select-photo 2.2s ease-in-out both; }
  .is-tracing [data-phase='photos'] .source-photo:nth-child(2) > span { animation-delay: 350ms; }
  .is-tracing [data-phase='photos'] .source-photo:nth-child(3) > span { animation-delay: 700ms; }
  .is-tracing [data-phase='create'] .output-photo-one,
  .is-tracing [data-phase='create'] .carousel-page-one { animation: first-frame 3.8s step-end both; }
  .is-tracing [data-phase='create'] .output-photo-two,
  .is-tracing [data-phase='create'] .carousel-page-two { animation: second-frame 3.8s step-end both; }
  .is-tracing [data-phase='create'] .output-photo-three,
  .is-tracing [data-phase='create'] .carousel-page-three { animation: third-frame 3.8s step-end both; }
  .is-tracing [data-phase='create'] .reel-playbar i { animation: reel-progress 3.8s linear both; }
  .is-tracing .inquiry-note-one { animation: first-inquiry 10s ease-in-out infinite; }
  .is-tracing .inquiry-note-two { animation: second-inquiry 10s ease-in-out infinite; }
  .is-tracing .typed-query { animation: query-typing 10s steps(24, end) infinite; }
  .is-tracing .inbox-message.outgoing { animation: reply-arrives 10s ease-in-out infinite; }
  .is-tracing .inbox-message.reply { animation: client-replies 10s ease-in-out infinite; }
  .is-tracing .call-handoff { animation: handoff-arrives 10s ease-in-out infinite; }
  .is-tracing .calendar-event { animation: meeting-arrives 10s ease-in-out infinite; }
  .is-tracing .closing-stamp { animation: next-step 10s ease-in-out infinite; }
}
@keyframes select-photo { from { opacity: 0; } 30%, to { opacity: 1; } }
@keyframes first-frame { 0% { visibility: visible; } 33%, 100% { visibility: hidden; } }
@keyframes second-frame { 0% { visibility: hidden; } 33% { visibility: visible; } 66%, 100% { visibility: hidden; } }
@keyframes third-frame { 0%, 33% { visibility: hidden; } 66%, 100% { visibility: visible; } }
@keyframes reel-progress { from { width: 0; } to { width: 100%; } }
@keyframes first-inquiry { 0%, 8%, 97%, 100% { opacity: .35; } 17%, 90% { opacity: 1; } }
@keyframes second-inquiry { 0%, 35%, 97%, 100% { opacity: .35; } 46%, 90% { opacity: 1; } }
@keyframes query-typing { 0%, 8% { max-width: 0; } 31%, 100% { max-width: 100%; } }
@keyframes reply-arrives { 0%, 15%, 97%, 100% { opacity: .25; } 25%, 89% { opacity: 1; } }
@keyframes client-replies { 0%, 40%, 97%, 100% { opacity: .25; } 50%, 89% { opacity: 1; } }
@keyframes handoff-arrives { 0%, 61%, 98%, 100% { opacity: .4; } 70%, 89% { opacity: 1; } }
@keyframes meeting-arrives { 0%, 9%, 98%, 100% { opacity: .35; } 22%, 89% { opacity: 1; } }
@keyframes next-step { 0%, 43%, 98%, 100% { opacity: .35; } 57%, 89% { opacity: 1; } }