/* Image-led scenes: one landscape material, with product content in front. */
.marketing-app .hero.wrap { padding-top: 80px; padding-bottom: 25px; }
.marketing-app .demo-landscape {
  --dock-curve: 38px; --demo-dock-gap: 64px;
  display: grid; grid-template-columns: minmax(0,1fr); row-gap: var(--demo-dock-gap);
  margin-top: 0; padding: 0 24px;
}
.marketing-app .hero-image-actions {
  position: relative; top: 0; left: auto; transform: none; z-index: 3; grid-row: 1; justify-self: center;
  width: max-content; max-width: min(100%,calc(100vw - 2 * var(--dock-curve))); margin: 0; padding: 18px; padding-top: 4px;
  background: linear-gradient(#fff,#fff) center / calc(100% - 2 * var(--dock-curve) + 1px) 100% no-repeat; border-radius: 0;
}
.marketing-app .hero-image-actions .button { white-space: nowrap; min-height: 46px; font-size: 13px; padding: 12px 20px; }
/* This continuous contour follows the reference; the lower dock mirrors it. */
.marketing-app .hero-image-actions::before,.marketing-app .hero-image-actions::after { content: ''; position: absolute; top: 0; width: calc(2 * var(--dock-curve)); height: 100%; background: url('/newest/assets/dock-curve.svg') center / 100% 100% no-repeat; pointer-events: none; }
.marketing-app .hero-image-actions::before { left: calc(-1 * var(--dock-curve)); }
.marketing-app .hero-image-actions::after { right: calc(-1 * var(--dock-curve)); transform: scaleX(-1); }
.marketing-app .hero-image-actions .button { position: relative; z-index: 1; }
.marketing-app .demo-landscape .landing-demo { grid-row: 2; }
/* The hero's pointillist hills, without the sky, rise behind the closing invitation and run under the footer card. */
.marketing-app .closing-footer { background: #fff; box-shadow: none; --grass-top: 460px; --grass-height: max(150px, 15.5vw); }
.marketing-app .closing-footer::before {
  inset: var(--grass-top) 0 0 0; z-index: 0; opacity: 1; animation: none; transform: none;
  background:
    url('/newest/assets/footer-grass.webp') center top / auto var(--grass-height) no-repeat,
    linear-gradient(#6B9B42, #6B9B42) 0 calc(var(--grass-height) - 2px) / 100% 100% no-repeat;
  mask-image: none; filter: none; box-shadow: none;
}
@media (max-width: 1024px) { .marketing-app .closing-footer { --grass-top: 430px; } }
@media (max-width: 600px) { .marketing-app .closing-footer { --grass-top: 360px; } }
.marketing-app .closing-footer #early-access {
  background: linear-gradient(to bottom,#fff 8%,#fffffff5 32%,#ffffffd9 58%,#ffffff85 85%,transparent);
  box-shadow: none;
}
.marketing-app .closing-footer .early-access-card { background: transparent; box-shadow: none; }
.marketing-app .closing-footer .brand-footer-shell { background: #000036; backdrop-filter: none; }
.marketing-app .closing-footer .offer-notes { color: var(--text); }
.marketing-app #insights .feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px 48px; max-width: 960px; margin: 0 auto; }
.marketing-app #insights .feature-card {
  display: flex; flex-direction: column; gap: 24px; width: auto; height: auto; min-height: 0;
  padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; contain: none;
}
.marketing-app .feature-scene,.marketing-app .approach-scene {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; background: #d5dec4;
  display: flex; align-items: center; justify-content: center;
}
.marketing-app .feature-scene { width: 100%; aspect-ratio: 7 / 8; }
.marketing-app .feature-scene::before,.marketing-app .approach-scene::before {
  content: ''; position: absolute; inset: -28px; z-index: -2;
  background: url('/newest/assets/demo-pointillist-hills.webp') var(--scene-position, 45% 60%) / auto 150% no-repeat;
  filter: blur(22px) saturate(.6); transform: scale(1.05);
}
.marketing-app .feature-scene::after,.marketing-app .approach-scene::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#fff9,#fff1 55%,#182d2418);
}
.marketing-app .traffic-card { --scene-position: 72% 70%; }
.marketing-app .action-card { --scene-position: 24% 65%; }
.marketing-app .audience-card { --scene-position: 95% 58%; }
.marketing-app #insights .feature-copy { padding: 0 2px; margin: 0; }
.marketing-app #insights .feature-copy h3 { font-size: 23px; line-height: 1.25; letter-spacing: -.025em; margin: 10px 0 12px; max-width: 420px; }
.marketing-app #insights .feature-copy p { font-size: 14px; line-height: 1.7; margin: 0; max-width: 420px; }
.marketing-app #insights .feature-label { font-size: 10px; letter-spacing: .04em; }
.marketing-app #insights .feature-scene > :is(.source-visual,.funnel-visual,.action-visual,.shortlist-visual) {
  position: relative; flex: 0 0 auto; width: 78%; min-height: 0; height: auto; max-height: 85%;
  margin: 0; padding: 22px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 12px 35px #13271f22;
}
.marketing-app #insights .feature-scene .source-visual { height: 280px; }
.marketing-app #insights .feature-scene .funnel-visual { height: 282px; }
.marketing-app #insights .feature-scene .action-visual { height: 320px; }
.marketing-app #insights .feature-scene .shortlist-visual { height: 260px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.marketing-app #insights .traffic-card .funnel-stats { gap: 30px; min-height: 62px; }
.marketing-app #insights .traffic-card .funnel-stats strong { font-size: 36px; }
.marketing-app #insights .feature-scene .action-task h4 { font-size: 20px; }
.marketing-app #insights .feature-scene .action-task > p { font-size: 11px; }
.marketing-app #insights .feature-scene .action-checks .choice { font-size: 11px; }
.marketing-app #insights .feature-scene .shortlist-brands { gap: 12px; }
.marketing-app #insights .feature-scene .shortlist-brands > span { width: 48px; height: 48px; }
.marketing-app #insights .feature-scene .shortlist-question { font-size: 12px; padding: 12px; }
.marketing-app #insights .feature-scene .your-brand-caption { font-size: 11px; }
/* The first section after the hero changes one scene at a time. */
.marketing-app #approach .approach-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 36px; padding: 5px; background: var(--subtle); border-radius: 999px; }
.marketing-app #approach .approach-tabs button { padding: 11px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; transition: background 220ms ease-out,color 220ms ease-out; }
.marketing-app #approach .approach-tabs [aria-selected=true] { background: #fff; color: var(--text); box-shadow: 0 2px 5px #00000008; }
.marketing-app #approach .clearer-start-grid { display: block; max-width: 960px; margin: auto; }
.marketing-app #approach .clearer-step { display: grid; grid-template-columns: minmax(0, 400px) minmax(0,1fr); gap: 64px; grid-row: auto; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; contain: none; }
.marketing-app #approach .clearer-step[hidden] { display: none; }
.marketing-app #approach .approach-scene { aspect-ratio: 4 / 5; }
.marketing-app #approach .approach-copy { align-self: center; }
.marketing-app #approach .approach-copy .step-number { padding: 0; margin: 0 0 14px; font-size: 11px; letter-spacing: .02em; }
.marketing-app #approach .approach-copy h3 { margin: 0 0 18px; font-size: 30px; line-height: 1.2; letter-spacing: -.03em; }
.marketing-app #approach .approach-copy > p { margin: 0; max-width: 390px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.marketing-app #approach .approach-points { display: grid; gap: 22px; margin: 30px 0 0; padding: 0; list-style: none; }
.marketing-app #approach .approach-points li { position: relative; padding-left: 25px; font-size: 13px; line-height: 1.65; }
.marketing-app #approach .approach-points li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px; border-left: 1.5px solid var(--accent-text); border-bottom: 1.5px solid var(--accent-text); transform: rotate(-45deg); }
.marketing-app #approach .clearer-step .step-visual {
  width: 80%; height: 340px; min-height: 0; max-height: 88%; margin: 0; padding: 20px;
  background: #fff !important; border: 0; border-radius: 10px; box-shadow: 0 12px 35px #13271f22;
}
.marketing-app #approach .clearer-step .step-visual-heading { font-size: 10px; }
.marketing-app #approach .company-intel-row { min-height: 46px; }
.marketing-app #approach .company-intel-row b { font-size: 11px; }
.marketing-app #approach .company-intel-row small { font-size: 9px; }
.marketing-app #approach .mini-rank-row { font-size: 11px; }
.marketing-app #approach .generated-copy b { font-size: 12px; }
.marketing-app #approach .generated-copy small { font-size: 10px; }
.marketing-app #approach .step-visual-heading,.marketing-app #approach .gap-header { margin-bottom: 14px; }
.marketing-app .approach-exiting { pointer-events: none; }
@media (max-width: 760px) {
  .marketing-app .hero.wrap { padding-top: 56px; padding-bottom: 34px; }
  .marketing-app .demo-landscape { --dock-curve: 28.5px; --demo-dock-gap: 40px; }
  .marketing-app #insights .feature-grid { gap: 48px 24px; }
  .marketing-app #insights .feature-scene > :is(.source-visual,.funnel-visual,.action-visual,.shortlist-visual) { width: 86%; padding: 16px; }
  .marketing-app #insights .feature-copy h3 { font-size: 20px; }
  .marketing-app #approach .clearer-step { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
  .marketing-app #approach .clearer-step .step-visual { width: 88%; padding: 14px; height: 310px; }
  .marketing-app #approach .approach-copy h3 { font-size: 25px; }
}
@media (min-width: 901px) {
  .marketing-app .demo-landscape { padding-inline: 100px; }
}
@media (max-width: 640px) {
  .marketing-app .demo-landscape { padding-inline: 12px; }
}
@media (max-width: 600px) {
  .marketing-app #insights .feature-grid { grid-template-columns: 1fr; max-width: 380px; }
  .marketing-app #approach .clearer-step { grid-template-columns: 1fr; gap: 28px; }
  .marketing-app #approach .approach-scene { max-width: 380px; width: 100%; margin: auto; }
  .marketing-app #approach .approach-copy { max-width: 380px; margin: auto; }
  .marketing-app #approach .approach-tabs button { padding: 10px 12px; font-size: 11px; }
  .marketing-app #approach .approach-points { gap: 16px; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-app #approach .approach-tabs button { transition: none; }
}

.marketing-app #approach { padding-bottom: 96px; }
.marketing-app #insights .traffic-card .funnel-stats strong.rolling-number { font-size: 36px; line-height: 1.2; min-height: 1.2em; }
.marketing-app #insights .traffic-card .funnel-stats strong.rolling-number .number-digit { height: 1.2em; overflow: hidden; }
@media (max-width:760px) {
  .marketing-app #approach { padding-bottom: 56px; }
  .marketing-app #approach .company-intel-row { min-height: 40px; }
}
/* Reset the former subgrid rows before stacking the scene and its caption. */
.marketing-app #approach .clearer-step { grid-template-rows: auto; grid-auto-rows: auto; }
@media (max-width:600px) {
  .marketing-app #approach .clearer-step { grid-template-rows: auto auto; }
  .marketing-app #approach .approach-copy { min-height: 310px; width: 100%; }
}

/* Balanced line breaks keep headings from leaving a single orphaned word on narrow screens. */
.marketing-app :is(h1,h2,h3) { text-wrap: balance; }

/* Card backgrounds: abstract blue ballpoint pointillism, one artwork per card. */
.marketing-app .feature-scene,.marketing-app .approach-scene { background: #f8f6f1; }
.marketing-app .feature-scene::before,.marketing-app .approach-scene::before {
  inset: 0; background: var(--scene-art) center / cover no-repeat; filter: none; transform: none;
}
.marketing-app .feature-scene::after,.marketing-app .approach-scene::after {
  background: none;
}
.marketing-app .clearer-step-company { --scene-art: url('/newest/assets/card-bic-1.webp'); }
.marketing-app .clearer-step-questions { --scene-art: url('/newest/assets/card-bic-2.webp'); }
.marketing-app .clearer-step-action { --scene-art: url('/newest/assets/card-bic-3.webp'); }
.marketing-app .source-card { --scene-art: url('/newest/assets/card-bic-4.webp'); }
.marketing-app .traffic-card { --scene-art: url('/newest/assets/card-bic-5.webp'); }
.marketing-app .action-card { --scene-art: url('/newest/assets/card-bic-6.webp'); }
.marketing-app .audience-card { --scene-art: url('/newest/assets/card-bic-7.webp'); }
@media (max-width:480px) { .marketing-app .closing-footer .early-access-card h2 { font-size:clamp(30px,9.4vw,44px); } }

/* Provider dock: three logos visible, an endless autoplay marquee with faded edges. */
.marketing-app .demo-landscape > .provider-strip {
  --provider-item: 128px;
  width: calc(3 * var(--provider-item) + 24px); max-width: calc(100vw - 2 * var(--dock-curve));
  padding: 18px 12px;
}
.marketing-app .demo-landscape .provider-marquee {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.marketing-app .demo-landscape .provider-track {
  display: flex; width: max-content; justify-content: flex-start;
  animation: provider-marquee 16s linear infinite; animation-play-state: running;
}
.marketing-app .demo-landscape .provider-group,
.marketing-app .demo-landscape .provider-group[aria-hidden] {
  display: flex; width: auto; gap: 0; padding: 0; flex: none; grid-template-columns: none;
}
.marketing-app .demo-landscape .provider-group > span { width: var(--provider-item); flex: none; justify-content: center; }
.marketing-app.motion-paused .demo-landscape .provider-track { animation-play-state: paused; }
@media (max-width: 760px) {
  .marketing-app .demo-landscape > .provider-strip { --provider-item: 104px; width: calc(3 * var(--provider-item) + 16px); padding: 16px 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-app .demo-landscape .provider-track { animation-duration: 40s; }
}
/* Small reassurance notes sit on a soft white pill so the stippled hills never cut through them. */
.marketing-app .closing-footer .offer-notes span { background: #ffffffe6; border-radius: 999px; padding: 3px 9px; }
/* The provider dock is 30% wider than the call-to-action dock above it (262px against 201px; whole and
   even, so it centres on a whole pixel) and only as tall as its logos plus a small top inset; its 30px
   curves keep the upper dock's proportion to the height. Inside, provider logos with their names run in
   a continuous marquee that fades out at both edges. */
.marketing-app .demo-landscape > .provider-strip {
  --dock-inset: 8px; --dock-curve: 30px; --provider-inner: 216px;
  width: calc(var(--provider-inner) + 46px); height: auto; box-sizing: border-box;
  padding: var(--dock-inset) 23px 0;
  display: flex; align-items: center; justify-content: center;
  /* A whole-pixel curve and a 2px overlap on each side, so no browser leaves a hairline where the
     white body meets the curves. */
  background: linear-gradient(#fff,#fff) center / calc(100% - 2 * var(--dock-curve) + 4px) 100% no-repeat;
}
.marketing-app .demo-landscape .provider-marquee {
  width: var(--provider-inner); height: 46px; flex: none; overflow: hidden; background: none; box-shadow: none; border-radius: 0;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.marketing-app .demo-landscape .provider-track {
  display: flex; width: max-content; height: 100%;
  animation: provider-marquee 9s linear infinite; animation-play-state: running;
}
.marketing-app .demo-landscape .provider-group,
.marketing-app .demo-landscape .provider-group[aria-hidden] { display: flex; gap: 26px; padding: 0 26px 0 0; flex: none; }
.marketing-app .demo-landscape .provider-group > span {
  width: auto; height: 46px; flex: none; display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.marketing-app .demo-landscape .provider-strip img { width: 20px; height: 20px; }
.marketing-app .demo-landscape .provider-strip strong { font-size: 12px; font-weight: 500; letter-spacing: -.01em; }
.marketing-app.motion-paused .demo-landscape .provider-track { animation-play-state: paused; }
@media (max-width: 760px) {
  .marketing-app .demo-landscape > .provider-strip { --provider-inner: 212px; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-app .demo-landscape .provider-track { animation-duration: 24s; }
}
/* Tighter space between the product demo and the provider dock. */
.marketing-app .demo-landscape > .provider-strip { --provider-gap: 32px; margin-top: calc(var(--provider-gap) - var(--demo-dock-gap)); }
@media (max-width: 760px) { .marketing-app .demo-landscape > .provider-strip { --provider-gap: 24px; } }
/* All four insight panels share one size; their contents sit centred inside it. */
.marketing-app #insights .feature-scene > :is(.source-visual,.funnel-visual,.action-visual,.shortlist-visual) {
  height: 320px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
}
.marketing-app #insights .feature-scene .shortlist-visual { gap: 26px; }
/* The hero shows the real app's Overview as a screenshot with example data, at its own aspect ratio. */
.marketing-app .demo-landscape .landing-shot {
  display: block; height: auto; max-height: none; aspect-ratio: auto; container-type: normal;
  margin: 0 auto; padding: 0; overflow: hidden; background: #fff;
}
.marketing-app .landing-shot img { display: block; width: 100%; height: auto; }