/* Approved September 22 landing redesign. All page rules are landing-scoped. */
body:has(main[data-page="landing"]){background:#fdfdff}
main[data-page="landing"]{max-width:1320px;padding-top:30px;--muted:#706b9b}
main[data-page="landing"] .hero{grid-template-columns:1fr 1fr;gap:34px;padding:12px 0 32px;align-items:center}
main[data-page="landing"] .hero>*{min-width:0}
main[data-page="landing"] .hero h1{font-size:clamp(40px,4.4vw,64px);letter-spacing:-2.8px;line-height:1.04}
main[data-page="landing"] .hero .lead{font-size:22px;line-height:1.45;margin:22px 0 0;max-width:570px}
main[data-page="landing"] .actions{gap:16px;margin-top:30px}
main[data-page="landing"] .actions .btn{min-width:180px;font-size:18px;font-weight:600;padding:14px 24px}
main[data-page="landing"] .proof{gap:24px;margin-top:28px;font-size:13px;color:#625d8c;flex-wrap:wrap}
.proof-check{display:inline-grid;place-items:center;background:#eee5ff;color:#7634ff;border-radius:50%;height:30px;width:30px;font-size:19px;font-weight:700}
.audience-visual{text-align:center}
.audience-visual h2{font-size:27px;letter-spacing:-.8px;line-height:1.2}
.audience-brief{display:inline-block;border:1px solid #e3dcfa;border-radius:12px;background:#fff;margin-top:18px;padding:12px 24px}
.audience-brief>span{text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:700;color:#77709d}
.audience-brief p{color:var(--ink);margin:8px 0 0;font-size:15px;white-space:nowrap}
.audience-brief b{font-weight:400;padding:0 8px}
.audience-arrow{font-size:30px;color:#ae84ee;line-height:32px;height:36px}
.creator-portraits{display:flex;align-items:flex-end;justify-content:center;padding:4px 8px 12px;isolation:isolate}
.hero-portrait{position:relative;width:35%;aspect-ratio:1 / 1.55;background-image:url('assets/landing-creator-triptych-v2.png');background-size:300% 100%;border:4px solid white;border-radius:15px;box-shadow:0 6px 20px #30205b18;flex-shrink:0}
.hero-portrait-0{background-position:left center;transform:rotate(-5deg);margin-right:-4%;margin-bottom:8px}
.hero-portrait-1{background-position:center;z-index:2;width:40%;aspect-ratio:1 / 1.6}
.hero-portrait-2{background-position:right center;transform:rotate(5deg);margin-left:-4%;margin-bottom:8px}
.hero-portrait>span{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fffffff5;border-radius:24px;padding:6px 14px;font-size:12px;color:var(--ink);font-weight:600}
.audience-visual .audience-caption{font-size:15px;line-height:1.4;margin:14px 0 0}
main[data-page="landing"] .steps{padding:24px 30px;gap:24px;border-radius:12px;box-shadow:none}
main[data-page="landing"] .step{gap:20px}
main[data-page="landing"] .step+.step{border-left:1px solid var(--line);padding-left:24px}
main[data-page="landing"] .step .num{width:48px;height:48px;flex:0 0 48px;font-size:25px}
main[data-page="landing"] .step h4{font-size:20px}
main[data-page="landing"] .step p{font-size:14px;line-height:1.4;margin:6px 0 0}
main[data-page="landing"] .audiences{gap:18px;margin:18px 0}
main[data-page="landing"] .audience{display:block;padding:24px 28px;background:#f0eaff;border:1px solid #dfd3ff;border-radius:12px}
main[data-page="landing"] .audience h3{font-size:26px}
main[data-page="landing"] .audience p{margin:10px 0 12px;font-size:16px;line-height:1.45}
main[data-page="landing"] .audience>a{font-size:17px;font-weight:500}
main[data-page="landing"] .features{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
main[data-page="landing"] .feature{padding:22px 20px;gap:18px;border-radius:12px;box-shadow:none;align-items:center}
main[data-page="landing"] .feature .icon{background:none;flex:0 0 40px;width:40px;height:40px;color:var(--purple)}
main[data-page="landing"] .feature .icon svg{max-width:100%;max-height:100%;width:34px;height:34px}
main[data-page="landing"] .feature h4{font-size:17px;letter-spacing:-.4px;line-height:1.2}
main[data-page="landing"] .feature p{font-size:14px;line-height:1.4;margin:6px 0 0}
@media(max-width:1100px) and (min-width:721px){main[data-page="landing"] .hero{gap:24px}main[data-page="landing"] .hero h1{font-size:46px}main[data-page="landing"] .hero .lead{font-size:19px}main[data-page="landing"] .actions .btn{min-width:0;padding:12px 16px;font-size:16px}.audience-visual h2{font-size:23px}main[data-page="landing"] .proof{gap:12px}.hero-portrait>span{font-size:10px;padding:5px 9px}main[data-page="landing"] .feature{padding:18px 14px;gap:12px}}
@media(max-width:850px){main[data-page="landing"] .hero{grid-template-columns:1fr;gap:36px}.hero-copy{max-width:620px}.audience-visual{width:100%;max-width:570px;margin:auto}main[data-page="landing"] .steps{padding:22px;gap:16px}main[data-page="landing"] .step{gap:12px}main[data-page="landing"] .step+.step{padding-left:16px}main[data-page="landing"] .step h4{font-size:18px}main[data-page="landing"] .step p{font-size:13px}main[data-page="landing"] .features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){main[data-page="landing"]{padding-top:14px}main[data-page="landing"] .hero h1{font-size:clamp(34px,8.2vw,52px);letter-spacing:-1.6px}main[data-page="landing"] .hero .lead{font-size:19px;margin-top:18px}main[data-page="landing"] .actions .btn{min-width:0;font-size:16px;padding:12px 10px}main[data-page="landing"] .proof{font-size:11px;gap:8px}.audience-visual h2{font-size:23px}.audience-brief{padding:10px 18px}.audience-brief p{font-size:14px}.audience-brief b{padding:0 5px}.hero-portrait{border-width:3px;border-radius:12px}.hero-portrait>span{font-size:10px;padding:5px 9px;bottom:9px}.audience-visual .audience-caption{font-size:14px}main[data-page="landing"] .steps{grid-template-columns:1fr;gap:18px}main[data-page="landing"] .step+.step{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}main[data-page="landing"] .step p{font-size:14px}main[data-page="landing"] .audiences{grid-template-columns:1fr;gap:14px;margin:14px 0}main[data-page="landing"] .audience{padding:22px}main[data-page="landing"] .audience h3{font-size:24px}}
@media(max-width:480px){main[data-page="landing"] .features{grid-template-columns:1fr}main[data-page="landing"] .feature{padding:20px}main[data-page="landing"] .proof{justify-content:space-between;gap:5px}.proof-check{width:25px;height:25px;font-size:16px}}
/* Preserve photographic proportions and the approved navy feature headings. */
.hero-portrait{background-size:300% auto}
main[data-page="landing"] .feature h4{color:var(--ink)}
main[data-page="landing"] .proof>span>.proof-check{display:inline-grid;place-items:center;line-height:1}