/* Audience pages show the product in use, with the same palette as the home page. */
.audience-hero { display:grid; grid-template-columns:1.25fr 1fr; gap:7%; align-items:center; max-width:1540px; margin:auto; min-height:780px; padding:150px var(--gutter) 85px; }
.audience-hero h1 { font-size:clamp(3.5rem,5.8vw,6.7rem); line-height:1.04; max-width:13ch; text-wrap:balance; }
.audience-eyebrow { font-size:.8125rem; margin-bottom:24px; color:var(--muted); }
.audience-lead { max-width:39ch; margin-top:28px; font-size:clamp(1rem,1.25vw,1.15rem); color:var(--muted); }
.audience-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.audience-hero-visual { width:100%; min-width:0; display:flex; justify-content:center; }
.audience-hero-visual>.audience-phone { width:min(100%,270px); }
.audience-shot { margin:0; min-width:0; width:100%; }
.audience-screen { overflow:hidden; }
.audience-shot img { width:100%; height:auto; }
.audience-shot figcaption { margin-top:17px; font-size:.75rem; line-height:1.5; text-align:center; color:var(--muted); }
.audience-phone { max-width:270px; margin-inline:auto; }
.audience-phone .audience-screen { padding:5px; border:3px solid #526472; border-radius:32px; background:var(--ink); box-shadow:0 18px 30px -20px #0e1b2a60; }
.audience-phone img { border-radius:23px; }
.audience-detail .audience-screen { border-radius:24px; }
.audience-detail { max-width:400px; margin-inline:auto; }
.audience-family-hero .audience-detail { max-width:365px; }
.audience-feature-band { background:var(--ink); color:var(--paper); --muted:#b6c5d1; }
.audience-light { background:var(--paper); color:var(--ink); }
.audience-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:9%; max-width:1420px; padding:90px var(--gutter); margin:auto; }
.audience-story-copy { max-width:480px; min-width:0; }
.audience-story h2,.audience-duo h2,.audience-family-close h2,.audience-section-heading h2 { font-size:clamp(2.7rem,4.3vw,4.8rem); line-height:1.06; text-wrap:balance; }
.audience-story-copy>p:not(.audience-eyebrow) { max-width:39ch; margin-top:26px; font-size:1rem; line-height:1.8; }
.audience-story-copy .v2-link { margin-top:26px; }
.audience-story-copy .audience-note,.audience-note { font-size:.75rem; line-height:1.7; color:var(--muted); }
.audience-story-visual { min-width:0; width:100%; }
.audience-story-reverse>.audience-story-copy { grid-column:2; grid-row:1; }
.audience-story-reverse>.audience-story-visual { grid-column:1; grid-row:1; }
.audience-proof { max-width:330px; margin:auto; }
.audience-proof .proof-handset { box-shadow:0 0 0 1px #a9b7be,3px 3px 0 2px #526878,0 18px 30px -20px #0005; }
.audience-feature-band .phone-proof { --proof-ink:#b4e9d3; }
.audience-feature-band .proof-ring .ink-circle { stroke:var(--proof-ink); }
.audience-feature-band .audience-story+.audience-story { border-top:1px solid #ffffff1a; }
.audience-apps { max-width:1300px; padding:22px var(--gutter) 60px; margin:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:25px; }
.audience-apps>p { font-size:.8125rem; color:var(--muted); }
.audience-apps>div { display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.audience-apps>div>a { display:grid; place-items:center; min-width:32px; min-height:44px; }
.audience-apps img { filter:brightness(0) invert(1); width:25px; }
.audience-pair { display:grid; grid-template-columns:.85fr 1fr; align-items:center; gap:20px; }
.audience-pair .audience-phone { max-width:235px; }
.audience-pair .audience-detail { max-width:285px; }
.audience-pair .audience-detail .audience-screen { box-shadow:0 10px 25px -15px #0e1b2a40; border-radius:16px; }
.audience-family-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.audience-family-pair .audience-phone { max-width:235px; }
.audience-family-pair .audience-phone:nth-child(2) { margin-top:65px; }
.audience-duo { max-width:1420px; margin:auto; padding:90px var(--gutter); display:grid; grid-template-columns:1fr 1fr; gap:9%; }
.audience-duo>article { min-width:0; border-top:1px solid #c4d1ca; padding-top:45px; }
.audience-duo .audience-shot { margin-top:38px; max-width:none; }
.audience-duo .audience-screen { min-height:205px; display:grid; align-items:center; }
.audience-duo .audience-note { margin-top:20px; }
.audience-controls-top .audience-screen { aspect-ratio:1 / 1; min-height:0; display:block; }
.audience-controls-top .audience-shot img { height:auto; max-height:none; }
.audience-companion { display:flex; flex-direction:column; gap:32px; align-items:center; }
.audience-companion>.audience-shot:first-child { max-width:290px; }
.audience-companion>.audience-shot:last-child { max-width:380px; }
.audience-footnote { max-width:1100px; padding:20px var(--gutter) 65px; margin:auto; color:var(--muted); font-size:.8125rem; text-align:center; }
.audience-ending { padding:95px var(--gutter); text-align:center; background:var(--paper); }
.audience-ending h2 { max-width:18ch; margin:auto; font-size:clamp(3rem,5.8vw,6.5rem); line-height:1.06; text-wrap:balance; }
.audience-ending>p { max-width:40ch; margin:25px auto 30px; }
.audience-ending>span { display:block; margin-top:18px; font-size:.75rem; color:var(--muted); }
.audience-family-close { display:grid; grid-template-columns:1fr .8fr; gap:10%; align-items:center; max-width:1250px; margin:auto; padding:90px var(--gutter); }
.audience-family-close>div>p:last-child { margin-top:28px; max-width:38ch; }
.audience-family-close .audience-shot { max-width:290px; }
.audience-anchor { scroll-margin-top:30px; }
.audience-story[id],.desktop-downloads[id],.audience-duo[id] { scroll-margin-top:30px; }
.audience-desktop-hero { grid-template-columns:1.05fr 1.2fr; gap:5%; }
.audience-desktop-hero h1 { font-size:clamp(3.3rem,5.1vw,5.8rem); }
.audience-browser { max-width:1100px; margin:auto; }
.browser-chrome { display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid #bdcbc5; border-bottom:0; padding:12px 18px; border-radius:14px 14px 0 0; background:#e7ede9; color:var(--ink); }
.browser-dots { display:flex; gap:5px; }
.browser-dots i { width:7px; height:7px; border:1px solid #81938a; border-radius:50%; }
.browser-address { flex:1; max-width:470px; border-radius:5px; background:var(--paper); padding:4px 12px; font-size:.6875rem; text-align:center; }
.browser-menu { font-size:.625rem; letter-spacing:2px; }
.browser-screen { border:1px solid #bdcbc5; border-top:0; border-radius:0 0 12px 12px; overflow:hidden; background:#f1e7d1; aspect-ratio:16 / 11; }
.browser-screen img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.audience-desktop-hero .browser-screen { aspect-ratio:5 / 4; }
.desktop-showcase { max-width:1400px; margin:auto; padding:85px var(--gutter); }
.audience-section-heading { display:grid; grid-template-columns:1fr 1fr; gap:12%; align-items:end; margin-bottom:45px; }
.audience-section-heading>p { max-width:41ch; color:var(--muted); }
.desktop-downloads { padding:85px var(--gutter); max-width:1420px; margin:auto; }
.desktop-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.desktop-option { border-top:1px solid #bdcbc5; padding:35px 0 25px; min-width:0; }
.desktop-platform-mark { display:grid; place-items:center; width:45px; height:45px; border:1px solid #b1c3b8; border-radius:12px; margin-bottom:25px; font-family:var(--display); font-size:1.5rem; }
.desktop-platform-mark img { width:28px; height:28px; object-fit:contain; }
.desktop-option h3 { font-size:2.4rem; }
.desktop-option>p { margin:15px 0 25px; color:var(--muted); font-size:.875rem; }
.desktop-option .v2-button { width:100%; max-width:270px; }
.desktop-link-pending { opacity:.55; cursor:default; }
.desktop-link-pending:hover { transform:none; background:var(--ink); }
.desktop-pending { display:block; margin-top:14px; font-size:.75rem; color:var(--muted); }
.desktop-distinction { max-width:1250px; margin:0 auto; padding:50px var(--gutter) 70px; border-top:1px solid #c4d1ca; }
.desktop-distinction h2 { font-size:clamp(2rem,3.6vw,3.5rem); }
.desktop-distinction>p { max-width:55ch; color:var(--muted); margin:24px 0; }
.v2-large-text .audience-hero,.v2-large-text .audience-story,.v2-large-text .audience-duo,.v2-large-text .audience-family-close,.v2-large-text .audience-section-heading { grid-template-columns:1fr; }
.v2-large-text .audience-hero-visual { margin-top:45px; }
.v2-large-text .audience-story-visual { margin-top:35px; }
.v2-large-text .audience-story-reverse>.audience-story-copy,.v2-large-text .audience-story-reverse>.audience-story-visual { grid-column:auto; grid-row:auto; }
.v2-large-text .desktop-options { grid-template-columns:1fr; }
@media(min-width:1700px) { .audience-hero { min-height:850px; } }
@media(max-width:1023px) {
 .audience-hero { padding-top:145px; min-height:720px; gap:5%; }
 .audience-hero h1 { font-size:clamp(3rem,6vw,4.8rem); }
 .audience-hero-visual>.audience-phone { max-width:230px; }
 .audience-story { gap:6%; padding-block:75px; }
 .audience-story h2,.audience-duo h2,.audience-family-close h2,.audience-section-heading h2 { font-size:clamp(2.6rem,4.8vw,3.9rem); }
 .audience-story-copy>p:not(.audience-eyebrow) { font-size:.9375rem; }
 .audience-pair { grid-template-columns:1fr; gap:30px; }
 .audience-pair .audience-detail { max-width:300px; }
 .audience-family-pair { gap:12px; }
 .desktop-options { gap:20px; }
 .desktop-option .v2-button { padding-inline:18px; gap:15px; }
 .audience-desktop-hero { grid-template-columns:1fr; min-height:0; gap:45px; }
 .audience-desktop-hero .audience-hero-visual { max-width:760px; }
 .audience-desktop-hero .browser-screen { aspect-ratio:16 / 10; }
}
@media(max-width:767px) {
 .audience-hero { grid-template-columns:1fr; min-height:0; padding:130px var(--gutter) 55px; gap:42px; }
 .audience-hero h1 { font-size:clamp(2.8rem,11.5vw,4.6rem); max-width:13ch; }
 .audience-eyebrow { margin-bottom:20px; font-size:.75rem; }
 .audience-lead { font-size:.9375rem; margin-top:23px; }
 .audience-actions { gap:17px; margin-top:25px; }
 .audience-actions .v2-link { font-size:.75rem; gap:13px; }
 .audience-hero-visual>.audience-phone { max-width:245px; }
 .audience-family-hero .audience-detail { max-width:310px; }
 .audience-story { grid-template-columns:1fr; padding:55px var(--gutter); gap:38px; }
 .audience-story-reverse>.audience-story-copy,.audience-story-reverse>.audience-story-visual { grid-column:auto; grid-row:auto; }
 .audience-story-copy { max-width:480px; }
 .audience-story h2,.audience-duo h2,.audience-family-close h2,.audience-section-heading h2 { font-size:clamp(2.35rem,9.5vw,3.5rem); }
 .audience-story-copy>p:not(.audience-eyebrow) { font-size:.9375rem; margin-top:22px; }
 .audience-story-copy .audience-note { font-size:.75rem; }
 .audience-phone { max-width:245px; }
 .audience-proof { max-width:300px; }
 .audience-apps { display:block; padding:10px var(--gutter) 45px; }
 .audience-apps>div { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:20px 0; }
 .audience-pair { gap:30px; }
 .audience-pair .audience-phone { max-width:245px; }
 .audience-family-pair { grid-template-columns:1fr; gap:35px; }
 .audience-family-pair .audience-phone:nth-child(2) { margin-top:0; }
 .audience-duo { grid-template-columns:1fr; gap:50px; padding:45px var(--gutter); }
 .audience-duo>article { padding-top:32px; }
 .audience-duo .audience-shot { margin-top:28px; }
 .audience-duo .audience-screen { min-height:0; }
 .audience-companion>.audience-shot:first-child { max-width:245px; }
 .audience-footnote { padding:15px var(--gutter) 45px; font-size:.75rem; }
 .audience-ending { padding:65px var(--gutter); }
 .audience-ending h2 { font-size:clamp(2.6rem,10.5vw,4rem); }
 .audience-ending>p { font-size:.9375rem; }
 .audience-family-close { grid-template-columns:1fr; padding:55px var(--gutter); gap:35px; }
 .audience-family-close .audience-shot { max-width:245px; }
 .desktop-showcase,.desktop-downloads { padding:55px var(--gutter); }
 .audience-section-heading { grid-template-columns:1fr; gap:23px; margin-bottom:30px; }
 .audience-section-heading>p { font-size:.9375rem; }
 .browser-chrome { padding:9px 10px; gap:8px; }
 .browser-dots { gap:3px; }
 .browser-dots i { width:5px; height:5px; }
 .browser-address { font-size:.5rem; padding:4px; }
 .browser-menu { display:none; }
 .browser-screen,.audience-desktop-hero .browser-screen { aspect-ratio:5 / 4; }
 .desktop-options { grid-template-columns:1fr; gap:20px; }
 .desktop-option { padding-top:28px; }
 .desktop-option h3 { font-size:2.1rem; }
 .desktop-platform-mark { margin-bottom:20px; }
 .desktop-distinction { padding:40px var(--gutter) 50px; }
 .desktop-distinction>p { font-size:.9375rem; }
}
