/* Shared audience-page styling, with readable links for the overview pages. */
.marketing-story p a{color:inherit;text-decoration:underline;text-underline-offset:4px}.marketing-story .eyebrow{font-size:12px;letter-spacing:.1em}.marketing-story .audience-steps p{margin-bottom:0}
/* Overview headings scale down before they can crowd smaller screens. */
html body .marketing-story .audience-hero h1{font-size:120px;line-height:1.04;max-width:1200px}
.marketing-story .paragraph-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 28px}.marketing-story .paragraph-actions .btn{white-space:normal;text-align:center;line-height:1.4;height:auto;max-width:100%}
@media(max-width:1199px){html body .marketing-story .audience-hero h1{font-size:clamp(64px,9vw,108px)}}
@media(max-width:600px){html body .marketing-story .audience-hero h1{font-size:clamp(40px,10vw,60px)}.marketing-story .paragraph-actions{flex-direction:column;align-items:stretch}}

/* Compact paragraph CTAs inherit the shared primary and secondary interactions. */
body.design-refresh .marketing-story .paragraph-actions .btn{font-size:14px;padding:10px 14px;min-height:44px;gap:10px;line-height:1.2}

/* Reuse the auth artwork in the homepage hero without cropping the composition. */
.marketing-story .home-hero-image{margin:52px 0 0;width:100%;min-width:0;border-radius:22px;overflow:hidden}
.marketing-story .home-hero-image img{display:block;width:100%;height:auto}
@media(max-width:600px){.marketing-story .home-hero-image{border-radius:14px}}

/* Homepage step illustrations share the site Lottie player and reduced-motion handling. */
.marketing-story .home-step-animation{width:100%;max-width:260px;aspect-ratio:1;margin:0 auto 24px;overflow:hidden;pointer-events:none}
.marketing-story .home-step-animation svg{display:block;width:100%;height:100%}
@media(max-width:600px){.marketing-story .home-step-animation{max-width:220px;margin-bottom:20px}}

/* Light outlines for the three animated homepage steps. */
.marketing-story .audience-steps>li:has(>.home-step-animation){border:1px solid #d6d3ca;border-radius:20px;padding:24px;min-width:0;box-sizing:border-box}
@media(max-width:900px){.marketing-story .audience-steps>li:has(>.home-step-animation){padding:20px}}

/* Hide the card outline on hover without changing its dimensions. */
.marketing-story .audience-steps>li:has(>.home-step-animation):hover{background:#fff;border-color:transparent}

/* Scrolling audience stories with a sticky, changing brand-library illustration. */
.audience-page.marketing-story,.audience-page.audience-has-reveal{overflow:visible}
.audience-reveal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.audience-reveal-sticky{position:sticky;top:120px;min-width:0}
.audience-reveal-panel{display:none}.audience-reveal-panel.is-active{display:block}
.audience-visual-card{background:#e7eadf;border:1px solid #d6d3ca;border-radius:24px;padding:clamp(20px,3vw,44px);overflow:hidden}
.audience-visual-small{background:#f2e4cc}.audience-visual-large{background:#e3e4ef}.audience-visual-studio{background:#eaded5}
.audience-visual-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.08em}
.audience-visual-copy{display:grid;gap:12px;margin:32px 0}
.audience-visual-copy>span{font-size:10px;letter-spacing:.1em}
.audience-visual-copy>strong{font-size:clamp(24px,2.8vw,40px);font-weight:500;line-height:1.12;letter-spacing:-.03em}
.audience-portal-art{background:#fff;border:1px solid #00000018;border-radius:14px;padding:20px;box-shadow:0 16px 32px #00000008}
.audience-portal-top{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e9e7df;padding-bottom:12px;font-size:12px}
.audience-portal-brand{display:flex;align-items:center;gap:24px;padding:22px 0}
.audience-portal-brand>strong{font-size:clamp(36px,4vw,64px);letter-spacing:-.06em;line-height:1}
.audience-portal-brand>span{font-size:12px;line-height:1.5;max-width:155px}
.audience-portal-swatches{display:flex;gap:8px;margin-bottom:18px}
.audience-portal-swatches i{height:22px;flex:1;background:#20231f;border-radius:4px}
.audience-portal-swatches i:nth-child(2){background:#798769}.audience-portal-swatches i:nth-child(3){background:#cbd1bc}.audience-portal-swatches i:nth-child(4){background:#eeeae0}
.audience-visual-small .audience-portal-swatches i:nth-child(2){background:#bd9364}.audience-visual-large .audience-portal-swatches i:nth-child(2){background:#8a89b5}.audience-visual-studio .audience-portal-swatches i:nth-child(2){background:#b78370}
.audience-portal-files{display:grid;gap:0}.audience-portal-files>span{display:flex;align-items:center;gap:10px;border-top:1px solid #eeece6;padding:10px 0;font-size:11px}
.audience-portal-files b{font-weight:400;color:#777}.audience-portal-files em{font-style:normal;margin-left:auto}
.audience-reveal-progress{display:flex;gap:8px;margin-top:18px}.audience-reveal-progress>span{height:3px;flex:1;background:#d6d3ca}.audience-reveal-progress>span.is-active{background:#222}
.audience-reveal-story{min-height:70vh;min-height:70svh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid #d6d3ca;padding:52px 0;box-sizing:border-box}
.audience-reveal-story h3{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.16;letter-spacing:-.025em;margin:0 0 20px}
.audience-reveal-story p{margin:0}
.audience-reveal-mobile{display:none}
@media(prefers-reduced-motion:no-preference){.audience-reveal.is-enhanced .audience-reveal-story{opacity:.45;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}.audience-reveal.is-enhanced .audience-reveal-story.is-active{opacity:1;transform:none}.audience-reveal.is-enhanced .audience-reveal-panel.is-active{animation:audience-panel-in .4s ease both}}
@keyframes audience-panel-in{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-height:780px) and (min-width:901px){.audience-reveal-sticky{top:96px}.audience-visual-card{padding:20px}.audience-visual-copy{margin:18px 0}.audience-portal-brand{padding:16px 0}.audience-portal-files>span{padding:7px 0}}
@media(max-width:900px){.audience-reveal-layout{display:block}.audience-reveal-sticky{display:none}.audience-reveal-mobile{display:block;margin-bottom:28px}.audience-reveal-story{min-height:0;padding:32px 0}.audience-reveal.is-enhanced .audience-reveal-story{opacity:1;transform:none}.audience-visual-card{max-width:560px;margin:0 auto}.audience-reveal-story h3{font-size:30px}}

/* Audience images: square artwork replaces mockup illustrations without changing scroll layout. */
.audience-reveal .audience-visual-card:has(.audience-section-artwork){
  padding:0;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:1 / 1;
  background:transparent;
}
.audience-reveal .audience-section-artwork{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:inherit;
}

/* Homepage two-column photography */
.marketing-story .audience-placeholder.audience-photo{overflow:hidden;aspect-ratio:1/1;border-radius:20px;padding:0;background:transparent}
.marketing-story .audience-placeholder.audience-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Homepage imagery: remove all placeholder frame outlines, retain image geometry. */
.marketing-story .audience-placeholder,
.marketing-story .audience-placeholder.audience-photo,
.marketing-story .audience-reveal .audience-visual-card,
.marketing-story .home-feature-stack .feature-stack-visual,
.marketing-story .home-feature-stack .feature-stack-visual img,
.marketing-story .audience-reveal .audience-section-artwork,
.marketing-story .home-hero-image,
.marketing-story .site-prefooter-cta .cta-preview-image {
  border:0;
  outline:none;
  box-shadow:none;
}

/* About hero photo: clean, responsive, borderless */
.marketing-story .audience-hero .about-hero-photo{padding:0;border:0;outline:0;overflow:hidden;background:transparent;border-radius:20px;box-shadow:none}
.marketing-story .audience-hero .about-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Homepage hero video: original 16:9 proportions */
.marketing-story .home-hero-image video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:0;border-radius:inherit}

/* About page: embedded Why We Built It video, without placeholder framing. */
.marketing-story .audience-placeholder.about-purpose-video{padding:0;border:0;outline:0;background:transparent;overflow:hidden;aspect-ratio:16/9;border-radius:20px;box-shadow:none}
.marketing-story .audience-placeholder.about-purpose-video video{display:block;width:100%;height:100%;min-width:100%;min-height:100%;object-fit:cover;border:0;border-radius:inherit}

/* About page studio photo */
.marketing-story .audience-placeholder.about-studio-photo{padding:0;border:0;outline:0;overflow:hidden;background:transparent;border-radius:20px;box-shadow:none}
.marketing-story .audience-placeholder.about-studio-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Solopreneurs key benefits: natural image dimensions, no placeholder frames. */
body.marketing .audience-reveal .audience-visual-card:has(> .solopreneurs-benefit-image){
  display:block;align-self:start;width:100%;height:auto;min-height:0;
  aspect-ratio:auto!important;padding:0;border:0!important;outline:0!important;
  background:transparent!important;box-shadow:none!important;overflow:hidden;
  border-radius:20px;
}
body.marketing .audience-reveal .audience-visual-card > .solopreneurs-benefit-image{
  display:block;width:100%;height:auto!important;max-width:100%;min-height:0;
  aspect-ratio:auto!important;object-fit:contain!important;
  border:0!important;outline:0!important;box-shadow:none!important;
  border-radius:inherit;
}