/* Audience landing page template, layered on ../style.css.
   Only the pieces the homepage does not already have live here.
   Everything else (hero, tiles, why field, steps and mocks, bcards, lcards, work, cta, footer) comes from ../style.css. */

.nav-links a[aria-current="page"]{background:rgba(30,28,25,.07)}
.nav-links a{white-space:nowrap}
@media (max-width:1100px){.nav-links a{padding:10px 11px}}

/* section rhythm, same as the homepage */
.lp-sec{padding:120px 0;position:relative}
.lp-sec.tight{padding:60px 0 120px}
.lp-head .h2{margin:0 auto;max-width:980px}
.lp-head .lead-p{margin-left:auto;margin-right:auto}

/* ---------- hero ---------- */
.lp-hero{padding-bottom:120px;min-height:760px}
.lp-hero .hero-title{font-size:clamp(40px,6vw,88px);max-width:900px;margin:0 auto;text-wrap:balance}
.lp-hero .hero-sub{max-width:640px}
.lp-hero .eyebrow{margin-bottom:22px}
.lp-hero .tile .pill{margin-top:2px}

/* founder tiles */
.lp-post p{font-size:13.5px;color:#2c2a27;line-height:1.4}
.lp-post .t-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lp-post .t-foot small{font-size:11px;color:var(--gray)}
.lp-dm{display:flex;flex-direction:column;gap:8px}
.lp-dm .bub{background:#f1eee8;border-radius:16px 16px 16px 5px;padding:9px 12px;font-size:13.5px;color:#2c2a27}
.lp-dm .who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray)}
.lp-dm .who i{width:22px;height:22px;border-radius:50%;background:var(--pink);flex:none}
.lp-cal b{display:block;font-size:14.5px;font-weight:500;line-height:1.25;margin-bottom:6px}
.lp-cal .when{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray);margin-bottom:10px}
.lp-cal .when i{width:30px;height:30px;border-radius:9px;background:var(--sky);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;color:var(--night);flex:none}
.lp-chart{padding:14px 16px 16px;overflow:hidden}
.lp-chart .mono{margin-bottom:2px;display:block}
.lp-chart .bm-row{display:flex;align-items:baseline;gap:8px}
.lp-chart .bm-row b{font-size:26px;font-weight:500;letter-spacing:-.02em}
.lp-chart .bm-row em{font-style:normal;font-weight:500;color:var(--tiffd);font-size:12px}
.lp-chart .mbars{height:40px;margin-top:8px}
@media (max-width:1180px){.lp-hero{min-height:0}}
@media (max-width:640px){.lp-hero{padding-bottom:84px}.lp-hero .hero-title{font-size:10.6vw}}

/* ---------- why section: the left column stays in view next to the list ---------- */
.lp-why .why-left{align-self:start;position:sticky;top:110px}
@media (max-width:1000px){.lp-why .why-left{position:static}}

/* ---------- step mocks (intake, research feed, draft) ---------- */
.lp-mock{width:min(88%,500px);padding:20px 22px}
.step-mock .lp-mock{position:relative}
.lp-mock .rep-h{margin-bottom:12px}

/* voice call / voice note */
.vn-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vn-head .av{width:38px;height:38px;border-radius:50%;background:var(--coral);color:var(--night);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.vn-head b{display:block;font-weight:500;font-size:14px}
.vn-head span{font-size:12px;color:#8f8b85}
.vn-head .rec{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--coral)}
.vn-head .rec i{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:ping 2s infinite}
.wv{display:flex;align-items:center;gap:3px;height:44px;background:#242220;border-radius:14px;padding:0 14px;margin-bottom:12px}
.wv i{flex:1;max-width:5px;height:var(--h);min-height:4px;border-radius:3px;background:var(--tiff);transform-origin:center;animation:wvb 1.3s ease-in-out var(--dl,0s) infinite alternate}
.wv i:nth-child(3n){background:var(--sun)}
@keyframes wvb{from{scale:1 .35}to{scale:1 1}}
.is-paused .wv i,.is-paused .rec i{animation-play-state:paused}
.vn-t{font-size:13px;line-height:1.55;color:#d9d5cf;margin:0 0 12px}
.vn-t mark{background:var(--sun);color:var(--night);border-radius:6px;padding:0 4px}
.lp-mock.dk .chips{margin-top:2px}

/* research feed */
.rf-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #eeeae4}
.rf-row>i{width:34px;height:34px;border-radius:50%;background:var(--c);flex:none}
.rf-row b{display:block;font-weight:500;font-size:13.5px;line-height:1.25}
.rf-row span{font-size:12px;color:var(--gray)}
.rf-row .gchip{font-size:12px}
.rf-row.pick{background:color-mix(in srgb,var(--sun) 22%,#fff);margin:0 -12px;padding:11px 12px;border-radius:14px;border-top-color:transparent}

/* draft with the Approve button */
.dr-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.dr-top .av{width:36px;height:36px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.dr-top b{display:block;font-weight:500;font-size:14px}
.dr-top span{font-size:12px;color:var(--gray)}
.dr-top .gchip{margin-left:auto}
.dr-body{font-size:13.5px;line-height:1.5;color:#2c2a27;margin:0 0 14px}
.dr-act{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.dr-act .ed{border-radius:99px;padding:8px 16px;background:#f1eee8;font-size:13px;font-weight:500}
.dr-act .appr{position:relative;border-radius:99px;padding:8px 20px;background:var(--tiff);color:var(--night);font-size:13px;font-weight:500;display:inline-grid;place-items:center;min-width:104px}
.dr-act .appr span{grid-area:1/1}
.dr-act .appr .a2{opacity:0}
.step-mock.in .appr{animation:apprb 5s var(--ease) 1.8s both}
.step-mock.in .appr .a1{animation:apprx 5s var(--ease) 1.8s both}
.step-mock.in .appr .a2{animation:apprx2 5s var(--ease) 1.8s both}
@keyframes apprb{0%{scale:1}8%{scale:.93}16%,100%{scale:1;background:var(--mint)}}
@keyframes apprx{0%,10%{opacity:1}16%,100%{opacity:0}}
@keyframes apprx2{0%,10%{opacity:0}16%,100%{opacity:1}}
.dr-sent{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--gray)}

/* monthly report: three counters */
.lp-kp b{font-size:24px}
.lp-fl{right:26px;top:34px;rotate:4deg;max-width:210px}
.lp-fl .mono{display:block;margin-bottom:2px}
.lp-fl b{display:block;font-size:14.5px;font-weight:500;line-height:1.25}
.lp-fl .gchip{margin-top:8px}

/* ---------- your voice ---------- */
.lp-split{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
.lp-split .h2{font-size:clamp(38px,4.2vw,60px)}
.lp-split .lead-p{margin-top:22px;max-width:460px}
.lp-vmock{position:relative;border-radius:44px;background:color-mix(in srgb,var(--sky) 26%,#fff);overflow:hidden;isolation:isolate;padding:48px 0 52px;display:flex;flex-direction:column;align-items:center;gap:12px}
.lp-vmock>.shape{width:360px;height:360px;right:-90px;bottom:-110px;opacity:.9;z-index:0}
.lp-vmock .lp-mock{position:relative;z-index:1;width:min(88%,500px)}
.lp-vmock .vn-t{margin:0}
.lp-vmock .wv{margin-bottom:12px}
.vflow{position:relative;z-index:2;display:flex;align-items:center;gap:8px;background:var(--night);color:#fff;border-radius:99px;padding:8px 16px 8px 10px;font-size:12.5px;box-shadow:0 14px 26px -12px rgba(30,28,25,.55)}
.vflow svg{width:18px;height:18px;flex:none}
.lp-vmock .dr-body{margin:0}
.lp-vmock .dr-body mark{background:color-mix(in srgb,var(--sun) 75%,#fff);border-radius:6px;padding:0 4px}
.lp-vmock .pause{bottom:14px;right:14px;z-index:6;height:30px;font-size:10px}

/* ---------- what you get: a few small mocks need a list ---------- */
.bm .mrow li{font-size:12px}
.bm .mrow{margin-top:6px}

/* ---------- proof: typographic cards share the lcard look ---------- */
.lart{position:absolute;inset:0;z-index:0;background:var(--bg);overflow:hidden}
.lart .shape{opacity:.95}
.lart .la1{width:300px;height:300px;right:-70px;top:60px}
.lart .la2{width:240px;height:120px;left:-40px;top:200px}
.lcard-t:hover .lart .la1{rotate:calc(var(--r) + 30deg)}
.lart .la1{transition:rotate 1.2s var(--ease)}

/* ---------- how we work ---------- */
.lp-work-card{position:relative;max-width:820px;margin:56px auto 0;background:#fff;border-radius:36px;padding:44px 40px 44px 190px;overflow:hidden;box-shadow:0 30px 50px -36px rgba(30,28,25,.3)}
.lp-work-card .kshape{width:110px;height:110px;left:40px;top:50%;margin-top:-55px}
.lp-work-card p{font-size:clamp(17px,1.6vw,20px);color:var(--gray);line-height:1.5}
.lp-work-card:hover .kshape{rotate:calc(var(--r) + 45deg)}

/* ---------- FAQ accordion ---------- */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.faq-grid .h2{font-size:clamp(38px,4.2vw,60px)}
.faq-grid .faq-l{position:sticky;top:110px}
.faq{list-style:none;display:flex;flex-direction:column;gap:12px}
.faq li{background:#fff;border-radius:28px;box-shadow:0 30px 50px -40px rgba(30,28,25,.35),0 0 0 1px rgba(30,28,25,.04);transition:background .5s var(--ease)}
.faq li.open{background:color-mix(in srgb,var(--mint) 30%,#fff)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;text-align:left;padding:22px 26px;font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.3;border-radius:28px}
.faq-q:focus-visible{outline-offset:-3px}
.faq-ic{position:relative;width:34px;height:34px;border-radius:50%;background:var(--canvas);flex:none;transition:background .4s,rotate .6s var(--ease)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--night);border-radius:2px}
.faq-ic::after{rotate:90deg;transition:rotate .5s var(--ease)}
.faq li.open .faq-ic{background:#fff;rotate:180deg}
.faq li.open .faq-ic::after{rotate:0deg}
.faq-a{display:grid;grid-template-rows:1fr}
.faq-a>div{overflow:hidden;min-height:0}
.faq-a p{padding:0 26px 24px;font-size:16.5px;line-height:1.55;color:var(--gray);max-width:640px}
.js .faq-a{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease),visibility 0s .55s}
.js .faq li.open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease),visibility 0s}
.faq li.open .faq-a p{color:#2f3c37}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .lp-split,.faq-grid{grid-template-columns:1fr;gap:40px}
  .faq-grid .faq-l{position:static}
  .lp-sec{padding:100px 0}
  .lp-sec.tight{padding:60px 0 100px}
}
@media (max-width:640px){
  .lp-sec{padding:80px 0}
  .lp-sec.tight{padding:40px 0 80px}
  .lp-mock{width:90%;padding:16px 16px}
  .lp-vmock{border-radius:32px;padding:36px 0 60px}
  .lp-vmock .lp-mock{width:90%}
  .lp-fl{right:12px;top:14px;max-width:170px}
  .step-mock.has-fl{padding-top:96px}
  .faq-q{padding:18px 18px;font-size:17px}
  .faq-a p{padding:0 18px 20px;font-size:16px}
  .lp-work-card{padding:150px 24px 32px;border-radius:32px}
  .lp-work-card .kshape{left:24px;top:28px;margin-top:0;width:96px;height:96px}
  .rf-row{grid-template-columns:30px 1fr auto;gap:10px}
  .rf-row>i{width:30px;height:30px}
  .lp-kp b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .wv i,.rec i{animation:none!important}
  .lp-pause{display:none!important}
  .js .faq-a,.js .faq li.open .faq-a{transition:none}
}

/* the intake mock in the steps is a still frame; only the voice section waveform loops (and has a Pause button) */
.step-mock .wv i{animation:none}
.step-mock .rec i{animation:none}

/* Mid-size screens (861-1379px): the headline is too wide for tiles beside it.
   Hide the top pair and drop the lower pair down beside the buttons. */
@media (min-width:861px) and (max-width:1379px){
  .lp-hero .t1,.lp-hero .t2{display:none}
  .lp-hero .t3,.lp-hero .t4{top:auto;bottom:36px;width:190px}
  .lp-hero .t3{left:2.5%}
  .lp-hero .t4{right:2.5%}
}

/* Step 4: keep the month label clear of the floating "Post that started it" tile */
.step-mock.has-fl .rep-h{justify-content:flex-start;align-items:baseline;gap:10px}