/* Scroll is the timeline, not an entrance trigger. Approved logo paths stay intact. */
.hero-scattered { display: none; }
.scroll-story-ready .hero-scattered { display: block; position: absolute; z-index: 4; inset: 139px 30px 22px; pointer-events: none; }
.scattered-title { position: absolute; top: 2px; left: 12px; color: #dddcd3; font-size: 20px; line-height: 1.2; letter-spacing: -.03em; }
.scattered-title b { color: var(--green); }
.hero-scattered > div:not(.scattered-title) { position: absolute; width: 75%; padding: 24px; border: 1px solid #fff3; border-radius: 18px; background: #f4f1e8; color: #111; box-shadow: 8px 12px 0 #0004; }
.hero-scattered span, .hero-scattered small { display: block; font-size: 10px; line-height: 1.5; }
.hero-scattered span { font-size: 8px; letter-spacing: .08em; }
.hero-scattered b { display: block; font-size: 24px; margin: 8px 0; line-height: 1.1; }
.hero-scattered .scattered-mail { top: 85px; left: 3%; rotate: -8deg; }
.hero-scattered > div.scattered-cash { top: 185px; right: 0; rotate: 7deg; background: var(--purple); }
.hero-scattered > div.scattered-meeting { top: 295px; left: 0; rotate: -4deg; background: var(--green); }
.motion-on .hero-scattered { opacity: calc(1 - var(--chaos)); translate: 0 calc(var(--chaos) * -80px); scale: calc(1 - var(--chaos) * .24); }
.motion-on .scattered-mail { translate: calc(var(--chaos) * 140px) 0; rotate: calc(-8deg + var(--chaos) * 15deg); }
.motion-on .scattered-cash { translate: calc(var(--chaos) * -150px) 0; rotate: calc(7deg - var(--chaos) * 22deg); }
.motion-on .scattered-meeting { translate: calc(var(--chaos) * 100px) calc(var(--chaos) * -65px); }
.motion-on .hero .morning-card { opacity: var(--assemble); translate: 0 calc((1 - var(--assemble)) * 110px); scale: calc(.75 + var(--assemble) * .25); rotate: calc((1 - var(--assemble)) * 7deg); }
.motion-on .hero .decision-card { opacity: var(--approval); translate: 0 calc((1 - var(--approval)) * 75px); scale: calc(.84 + var(--approval) * .16); }
.motion-on .hero .companion-wrap { translate: 0 calc((1 - var(--assemble)) * -15px); scale: calc(.75 + var(--assemble) * .25); }
.motion-on .hero .hero-visual { scale: calc(.96 + var(--hero-progress) * .04); }
.motion-on .hero .hero-inputs { opacity: calc(1 - var(--assemble)); }
.motion-paused .hero-scattered { display: none; }
.motion-paused .hero .morning-card, .motion-paused .hero .decision-card { opacity: 1; }
.experience-track { position: relative; min-width: 0; margin-bottom: 48px; }
.experience-panel { position: relative; --scene-p: 1; }
.motion-on .experience-panel.reveal, .motion-on .experience-panel .reveal { opacity: 1; transform: none; transition: none; }
.motion-on .experience-panel .motion-word { opacity: 1; transform: none; transition: none; }
.motion-on .experience-panel .demo-panel .signal-card,
.motion-on .experience-panel .demo-panel .metric-grid article,
.motion-on .experience-panel .demo-panel .brief-list article { animation: none; }
.motion-on .experience-panel .cash-line i { animation: none; transform: scaleY(calc(.25 + var(--phase-p, 1) * .75)); }
.motion-on .experience-panel .signal-orbit { animation: none; rotate: calc(var(--scene-p) * 450deg); }
.motion-on .experience-panel .prepare-spark { animation: none; rotate: calc(var(--scene-p) * 360deg); }
.motion-on .experience-panel .principle-mark--decide path { animation: none; stroke-dashoffset: calc(1 - var(--check-p, 1)); }
.experience-caption { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding-bottom: 14px; font-size: 10px; letter-spacing: .05em; margin-bottom: 0; }
.experience-caption b { font-weight: 600; }
.experience-caption > i { position: absolute; bottom: 10px; left: 0; width: 100%; height: 2px; background: currentColor; opacity: .45; transform: scaleX(var(--scene-p, 0)); transform-origin: left; }
.experience-count { font-size: 9px; white-space: nowrap; opacity: .7; }
.experience-sticky { position: relative; display: flow-root; }
.is-pinned > .experience-sticky { position: sticky; top: var(--scene-top, 82px); }
.experience-sticky > .experience-caption { position: relative; z-index: 1; min-height: 50px; }
.demo-section, .trust, .final-cta { overflow: clip; }
.demo-section > .experience-track, .trust > .experience-track, .final-cta > .experience-track { width: var(--container); margin-inline: auto; }
.experience-sticky > .container { width: 100%; }
.demo-section .experience-caption, .trust .experience-caption { color: var(--ivory); }
.demo-section .is-pinned > .experience-caption, .trust .is-pinned > .experience-caption { background: var(--ink); }
.final-cta .is-pinned > .experience-caption { background: var(--green); }
.module-suite { display: block; }
.module-suite > .experience-track { margin-bottom: 64px; }
.suite-card--prospect, .suite-card--studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'label art' 'title art' 'copy art' 'outcome art'; column-gap: 60px; }
.suite-card > .suite-label { grid-area: label; }
.suite-card > h3 { grid-area: title; }
.suite-card > p { grid-area: copy; }
.suite-card > .suite-outcome { grid-area: outcome; margin-top: 28px; }
.suite-card > .prospect-art, .suite-card > .studio-art { grid-area: art; margin: 0; min-height: 310px; }
.suite-card > .prospect-art { padding-right: 40px; }
.module-suite .suite-card { min-height: 470px; }
.experience-track--crm .experience-caption { color: var(--ink); }
.principle-detail { display: block; margin-top: 25px; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.motion-on .principles .principle { transition: background .25s, box-shadow .25s; }
.motion-on .principles .principle.scene-current { box-shadow: inset 0 -8px 0 #111; }
.motion-on .principles .principle-mark { animation: none; scale: .8; translate: 0 15px; transition: scale .35s var(--spring), translate .35s var(--spring); }
.motion-on .principles .scene-current .principle-mark { scale: 1.2; translate: 18px -8px; }
.motion-on .principle-detail { opacity: .35; translate: 0 8px; transition: opacity .3s, translate .3s; }
.motion-on .scene-current .principle-detail { opacity: 1; translate: 0 0; }
.motion-on .experience-panel .prospect-radar i { animation: none; rotate: calc(var(--scene-p) * 540deg); }
.motion-on .experience-panel .prospect-radar { scale: calc(1.2 - var(--scene-p) * .2); }
.motion-on .experience-panel .prospect-result { animation: none; translate: calc((1 - var(--scene-p)) * 45px) 0; rotate: calc((1 - var(--scene-p)) * 8deg); }
.motion-on .experience-panel .studio-sheet--front { animation: none; transform: rotate(calc(-15deg + var(--scene-p) * 15deg)) translateY(calc((1 - var(--scene-p)) * 55px)); }
.motion-on .experience-panel .studio-sheet--back { transform: rotate(calc(18deg - var(--scene-p) * 12deg)) translate(calc((1 - var(--scene-p)) * 50px), 3px); }
.motion-on .experience-panel .studio-ink { animation: none; transform: scaleX(var(--scene-p)); }
.motion-on .experience-panel .studio-star { animation: none; rotate: calc(var(--scene-p) * 180deg); scale: calc(.6 + var(--scene-p) * .4); }
.motion-on .experience-panel .crm-contacts article { opacity: calc(.55 + var(--contact-p, 1) * .45); translate: 0 calc((1 - var(--contact-p, 1)) * 18px); }
.crm-preview { overflow: clip; }
.crm-preview.scroll-connected .crm-next { background: var(--green); color: var(--ink); border-color: var(--green); }
.crm-preview.scroll-connected .crm-next > span { color: var(--ink); }
.crm-preview.scroll-connected .crm-contacts article { border-color: #a6ff0080; }
.motion-on .experience-panel .crm-sources i { animation: none; translate: calc(var(--crm-p, 1) * 16px - 8px) 0; }
.motion-on .experience-panel .orbit { translate: 0 0; scale: calc(.6 + var(--scene-p) * .4); rotate: calc((1 - var(--scene-p)) * -20deg); }
.motion-on .experience-panel .orbit--one { translate: calc((1 - var(--scene-p)) * 40px) calc((1 - var(--scene-p)) * -45px); }
.motion-on .experience-panel .orbit--three { translate: calc((1 - var(--scene-p)) * -40px) 0; }
.motion-on .experience-panel .trust-visual > img { translate: 0 0; scale: calc(.7 + var(--scene-p) * .3); }
.trust-points article { transition: background .3s, padding-left .3s; }
.trust-points .scene-current { background: #a6ff0015; padding-left: 12px; border-color: #a6ff0055; }
.motion-on .experience-panel .price-card { translate: calc((1 - var(--scene-p)) * -30px) 0; rotate: calc((1 - var(--scene-p)) * -3deg); scale: calc(.9 + var(--scene-p) * .1); }
.motion-on .experience-panel .price-card:nth-child(2) { translate: calc((1 - var(--scene-p)) * 30px) 0; rotate: calc((1 - var(--scene-p)) * 3deg); }
.motion-on .experience-panel .price-card.scene-current { box-shadow: 0 7px 0 var(--ink); }
.motion-on .experience-panel .cta-character img { animation: none; transform: none; scale: calc(.5 + var(--scene-p) * .5); rotate: calc((1 - var(--scene-p)) * -45deg); }
.motion-on .experience-panel .cta-character { translate: calc((1 - var(--scene-p)) * 65px) 0; }
.motion-on .experience-panel .hand-note { opacity: var(--scene-p); }
.motion-on .section-heading h2 .motion-word { opacity: calc(.35 + var(--heading-p, 1) * .65); transform: translateY(calc((1 - var(--heading-p, 1)) * 35px)); transition: none; }
.motion-on .footer-grid > div:first-child img { transform-origin: left; scale: calc(.7 + var(--footer-p, 1) * .3); }
.motion-on .footer-action .round-link { rotate: calc((1 - var(--footer-p, 1)) * -45deg); }
/* CSS animations never compete with the scroll transform. Paused stays complete. */
.motion-paused .experience-panel *, .motion-paused .footer-grid img { translate: none !important; scale: 1 !important; rotate: none !important; }
.motion-paused .principle-detail { opacity: 1; }
@media (min-width: 921px) and (max-height: 850px) {
  .scroll-story-ready .hero-scattered { inset: 132px 30px 20px; }
  .hero-scattered > div:not(.scattered-title) { padding: 17px 22px; }
  .hero-scattered .scattered-mail { top: 66px; }
  .hero-scattered > div.scattered-cash { top: 150px; }
  .hero-scattered > div.scattered-meeting { top: 231px; }
  .hero-scattered b { font-size: 21px; }
  .experience-panel.product-frame { min-height: 560px; }
  .demo-grid .product-frame { min-height: 555px; }
  .demo-grid .demo-panel { padding: 24px; }
  .trust-grid .trust-visual { min-height: 470px; }
  .trust-grid .trust-copy h2 { font-size: 42px; }
  .trust-grid .trust-points { margin-top: 24px; margin-bottom: 20px; }
  .trust-grid .trust-points article { padding-block: 16px; }
}
@media (max-width: 920px) {
  .suite-card--prospect, .suite-card--studio { display: flex; }
  .suite-card > .prospect-art, .suite-card > .studio-art { min-height: 250px; margin-block: 24px; }
  .suite-card > .prospect-art { flex-direction: row; }
  .suite-card > .prospect-art { padding-right: 0; }
  .experience-track { margin-bottom: 24px; }
  .experience-caption { font-size: 9px; }
  .experience-track--trust .experience-caption, .experience-track--demo .experience-caption { max-width: 100%; }
  .motion-on .experience-panel .price-card { translate: 0 calc((1 - var(--scene-p)) * 35px); rotate: 0deg; }
  .motion-on .experience-panel .price-card:nth-child(2) { translate: 0 calc((1 - var(--scene-p)) * 60px); rotate: 0deg; }
  .motion-on .experience-panel .prospect-result { translate: 0 calc((1 - var(--scene-p)) * 35px); rotate: calc((1 - var(--scene-p)) * 4deg); }
  .motion-on .experience-panel .cta-character { translate: 0 0; }
  .scroll-story-ready .hero-scattered { inset: 142px 24px 20px; }
  .hero-scattered > div:not(.scattered-title) { padding: 20px; width: 85%; }
  .hero-scattered b { font-size: 22px; }
  .hero-scattered .scattered-mail { top: 80px; }
  .hero-scattered > div.scattered-cash { top: 190px; }
  .hero-scattered > div.scattered-meeting { top: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scattered { display: none; }
  .experience-panel *, .section-heading .motion-word { animation: none !important; transition: none !important; }
}

/* CRM first: surveyed satisfaction and relationship health are distinct signals. */
.crm-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.crm-metrics > div { padding: 15px; border: 1px solid #55554b; border-radius: 12px; background: #30302b; min-width: 0; }
.crm-metrics > div > span { display: block; min-height: 24px; font-size: 8px; letter-spacing: .08em; color: #cfcec7; }
.crm-metrics > div > b { display: block; color: var(--green); font-size: 42px; line-height: 1.15; letter-spacing: -.05em; margin-bottom: 6px; }
.crm-metrics small { display: block; color: #cfcec7; font-size: 9px; line-height: 1.5; }
.crm-metrics b small { display: inline; font-size: 15px; color: #e5e4db; }
.nps-distribution { display: flex; height: 5px; border-radius: 99px; overflow: hidden; margin: 10px 0 6px; transform-origin: left; }
.nps-distribution i:nth-child(1) { width: 62%; background: var(--green); }
.nps-distribution i:nth-child(2) { width: 18%; background: #ddd2a6; }
.nps-distribution i:nth-child(3) { width: 20%; background: #ff996e; }
.health-meter { margin-top: 16px; height: 6px; border-radius: 99px; background: #55554b; overflow: hidden; }
.health-meter i { display: block; width: 76%; height: 100%; background: var(--green); transform-origin: left; }
.crm-preview .crm-preview-top { padding-bottom: 16px; }
.crm-preview .crm-sources { margin-bottom: 16px; }
.crm-preview .crm-contacts article { padding: 10px; }
.crm-preview .account-score { text-align: right; line-height: 1.3; color: var(--green); }
.crm-preview .account-score b { font-size: 18px; color: inherit; }
.crm-preview .account-score b small { display: inline; font-size: 8px; color: #bcbcb4; margin: 0; }
.crm-preview .account-score--watch { color: #ffcc85; }
.motion-on .experience-panel .nps-distribution,
.motion-on .experience-panel .health-meter i { scale: calc(.15 + var(--crm-p, 1) * .85) 1; }

/* Professional-network palette, explicitly an Obvius demonstration. */
.suite-card--prospect { background: #edf4fa; color: #142536; border-color: #b8ccdd; }
.suite-card--prospect .suite-label { color: #075397; }
.suite-card--prospect .suite-outcome { color: #075397; border-color: #b8ccdd; }
.suite-card--prospect > .prospect-art { padding: 0; display: block; width: 100%; }
.lead-console { width: 100%; border: 1px solid #c7d5e0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 14px 35px #123d6112; }
.lead-console-header { display: flex; align-items: center; gap: 10px; padding: 17px; background: #0a66c2; color: white; }
.network-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; color: #0a66c2; background: white; font-size: 23px; font-weight: 800; }
.lead-console-header b { flex: 1; font-size: 14px; }
.lead-console-header > small { font-size: 8px; letter-spacing: .1em; }
.lead-signals { display: grid; gap: 8px; padding: 17px 17px 0; }
.lead-signals > span { padding: 10px 12px; border: 1px solid #b9d5ed; background: #edf6ff; color: #064d91; border-radius: 8px; font-size: 11px; }
.lead-console .prospect-result { margin: 15px 17px; padding: 15px 0; border: 0; border-block: 1px solid #dce4ea; border-radius: 0; box-shadow: none; background: transparent; }
.lead-console .prospect-result > small { color: #526372; font-size: 8px; }
.lead-person { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 15px 0; }
.lead-person > i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #dceafa; color: #064d91; font-size: 11px; font-style: normal; }
.lead-person > div { flex: 1; min-width: 135px; }
.lead-person b { display: block; font-size: 16px; margin-bottom: 5px; }
.lead-person div > span { font-size: 10px; color: #526372; }
.lead-person em { display: block; color: #126344; background: #e4f5ed; padding: 5px 8px; border-radius: 99px; font-size: 9px; font-style: normal; }
.lead-console .prospect-message { border: 0; padding-top: 0; min-height: 3em; color: #435564; }
.campaign-preview { margin: 0 17px 15px; padding: 14px; background: #f3f6f8; border: 1px solid #d9e3eb; border-radius: 10px; }
.campaign-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.campaign-preview b { font-size: 12px; }
.campaign-preview > div > span { font-size: 8px; color: #075397; }
.campaign-preview ol { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.campaign-preview li { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.campaign-preview li i { display: grid; place-items: center; width: 20px; height: 20px; background: #dceafa; border-radius: 50%; color: #075397; font-style: normal; font-size: 9px; }
.campaign-preview > small { color: #526372; font-size: 9px; }
.network-disclaimer { display: block; padding: 0 17px 14px; font-size: 8px; line-height: 1.5; color: #526372; }
.motion-on .experience-panel .lead-console .prospect-result { translate: 0 0; rotate: 0deg; }
.motion-on .experience-panel .lead-signals span { translate: calc((1 - var(--scene-p)) * 12px) 0; }
.motion-on .experience-panel .lead-person { opacity: calc(.45 + var(--scene-p) * .55); translate: 0 calc((1 - var(--scene-p)) * 12px); }
.motion-on .experience-panel .campaign-preview { opacity: .4; translate: 0 16px; transition: opacity .3s, translate .3s, border-color .3s; }
.motion-on .experience-panel[data-scene-phase="2"] .campaign-preview { opacity: 1; translate: 0 0; border-color: #0a66c2; }

/* Instagram-format preview: identifiable frame, not a live connected account. */
.suite-card--studio > .studio-art { display: flex; justify-content: center; align-items: center; }
.instagram-frame { width: min(370px, 100%); border: 1px solid #ddd; border-radius: 18px; overflow: hidden; background: white; color: #171717; box-shadow: 8px 10px 0 #1113; }
.instagram-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-bottom: 1px solid #eee; }
.instagram-top b { font-family: Georgia, serif; font-size: 23px; font-style: italic; letter-spacing: -.05em; }
.instagram-top > span { font-size: 8px; color: #717171; letter-spacing: .1em; }
.instagram-profile { display: flex; align-items: center; gap: 9px; padding: 11px 14px; }
.instagram-profile > i { width: 33px; height: 33px; padding: 3px; border: 2px solid #d64195; border-radius: 50%; }
.instagram-profile img { width: 100%; height: 100%; }
.instagram-profile > div { flex: 1; }
.instagram-profile b { display: block; font-size: 12px; }
.instagram-profile small { display: block; font-size: 8px; color: #666; margin-top: 2px; }
.instagram-profile > span { font-size: 12px; }
.instagram-post { position: relative; padding: 24px; aspect-ratio: 4 / 3; background: var(--green); display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }
.instagram-post > span:first-child { font-size: 8px; letter-spacing: .13em; }
.instagram-post > b { font-size: clamp(26px, 2.5vw, 36px); line-height: .98; letter-spacing: -.06em; margin: 20px 0 8px; position: relative; z-index: 1; }
.instagram-post .studio-ink { background: var(--purple); width: 62%; }
.instagram-post > img { position: absolute; width: 94px; height: 94px; right: 20px; bottom: 14px; }
.instagram-post > small { font-size: 8px; letter-spacing: .1em; margin-top: auto; padding-top: 20px; }
.instagram-actions { display: flex; align-items: center; gap: 13px; padding: 12px 15px 7px; }
.instagram-actions span { font-size: 26px; line-height: 1; }
.instagram-actions svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.instagram-actions svg:last-child { margin-left: auto; }
.instagram-frame .instagram-caption { padding: 0 15px 12px; font-size: 11px; line-height: 1.5; }
.instagram-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-top: 1px solid #eee; gap: 8px; }
.instagram-status > small { font-size: 7px; letter-spacing: .03em; color: #717171; }
.instagram-status .studio-ready { margin: 0; font-size: 9px; white-space: nowrap; }
.motion-on .experience-panel .instagram-post > img { translate: 0 calc((1 - var(--scene-p)) * 50px); rotate: calc((1 - var(--scene-p)) * -22deg); }
.motion-on .experience-panel .instagram-post > b { translate: 0 calc((1 - var(--scene-p)) * 18px); }
.motion-on .experience-panel[data-scene-phase="2"] .studio-ready { background: var(--green); }
@media (max-width: 1120px) {
  .crm-metrics > div { padding: 12px; }
  .crm-metrics > div > b { font-size: 35px; }
}
@media (max-width: 650px) {
  .crm-metrics { gap: 8px; }
  .crm-metrics > div { padding: 10px; }
  .crm-metrics > div > span { font-size: 7px; min-height: 26px; }
  .crm-metrics small { font-size: 8px; }
  .crm-preview .crm-contacts article { flex-wrap: nowrap; gap: 7px; }
  .crm-preview .crm-contacts .account-score { margin-left: 0; font-size: 7px; }
  .crm-preview .crm-contacts article > i { width: 25px; height: 25px; flex-basis: 25px; }
  .crm-preview .crm-contacts b { font-size: 10px; }
  .crm-preview .crm-contacts .account-score b { font-size: 16px; }
  .crm-preview .crm-contacts small { font-size: 8px; }
  .suite-card--prospect > .prospect-art { display: block; }
  .lead-console-header { padding: 13px; }
  .lead-console-header b { font-size: 12px; }
  .lead-signals { padding-inline: 12px; }
  .lead-console .prospect-result, .campaign-preview { margin-inline: 12px; }
  .lead-person em { margin-left: 46px; }
  .instagram-post { padding: 20px; }
  .instagram-post > img { width: 72px; height: 72px; right: 14px; bottom: 9px; }
  .instagram-post > b { font-size: 29px; }
}