/* The illustration stays still; one speaker state controls all overlays. */
.hero-visual[data-conversation]{width:100%;margin-bottom:0;min-width:0}
.hero-scene{position:relative}
.hero-scene img{max-height:none;object-fit:contain}
.speech-bubble{position:absolute;top:4%;width:30%;height:auto;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .28s ease,transform .28s ease}
.speech-man{left:18%}
.speech-woman{left:60%}
[data-speaker="man"] .speech-man,[data-speaker="woman"] .speech-woman{opacity:1;transform:translateY(0)}
.hero-visual[data-conversation] .visual-note{position:relative;left:auto;right:auto;bottom:auto;z-index:1;margin:-28px 24px 0;padding:18px 20px;gap:14px;min-height:88px}
.hero-visual[data-conversation] .note-icon{display:flex;width:36px;height:36px;background:var(--coral);color:var(--ink);transition:background .28s ease,color .28s ease}
.hero-visual[data-speaker="woman"] .note-icon{background:var(--teal);color:white}
.conversation-lines{display:grid;min-width:0;flex:1}
.conversation-line{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.conversation-line strong{display:block;line-height:1.4}
.conversation-line p{line-height:1.5;margin-top:5px}
[data-speaker="man"] [data-line="man"],[data-speaker="woman"] [data-line="woman"]{opacity:1;visibility:visible}
.conversation-toggle{position:absolute;top:12px;left:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ivory);color:var(--teal);border:1px solid #0f5e5a26;border-radius:50%;padding:0}
.conversation-toggle:hover{background:white}
.conversation-toggle svg{display:none;width:20px;height:20px}
.conversation-toggle[aria-pressed="false"] .pause-mark,.conversation-toggle[aria-pressed="true"] .play-mark{display:block}
.idea-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.idea-visual{width:100%;max-width:480px}
.idea-visual img{display:block;width:100%;height:auto;border-radius:24px}
.idea-copy{max-width:500px}
.idea-copy h2{margin-bottom:24px}
.idea-copy p{font-size:1.125rem;line-height:1.7;margin-bottom:0;max-width:470px}
#idea .principles{margin-top:48px;padding-top:40px}
.formats .eyebrow{margin-bottom:12px}
.formats-art{display:block;width:min(86%,300px);height:auto;aspect-ratio:3/1;margin:0 0 16px;border-radius:12px}
.formats h2{max-width:none;font-size:clamp(1.5rem,2.55vw,2.25rem)}
@supports(font-size:1cqi){
  .formats > div:first-child{container-type:inline-size}
  .formats h2{font-size:min(2.625rem,8.5cqi)}
}
.format-item h3{display:flex;align-items:center;gap:10px}
.format-icon{display:block;width:22px;height:22px;flex:0 0 22px;color:var(--teal)}
.format-item h3 span{min-width:0}
.formats .format-item:last-child{grid-column:auto}
.principle-art{display:block;width:112px;height:96px;margin-bottom:24px}
.help-strip{background:rgba(255,122,102,.12);border:1px solid rgba(255,122,102,.16);border-radius:16px;padding:24px 28px;margin-block:32px 48px;gap:28px}
.help-strip p{color:var(--ink);font-size:0.875rem;line-height:1.7;max-width:680px;min-width:0}
.help-strip strong{color:var(--teal)}
.help-strip .text-link{color:var(--teal);font-size:0.875rem;flex-shrink:0}
@media(max-width:1100px){.idea-grid{gap:48px}.idea-copy p{font-size:1.0625rem}}
@media(max-width:860px){
  .hero-visual[data-conversation] .visual-note{margin-inline:16px;padding:14px;gap:12px}
  .idea-grid{gap:32px}
  .idea-copy h2{font-size:2rem}
  .idea-copy p{font-size:1rem}
}
@media(max-width:700px){
  .idea-grid{grid-template-columns:1fr;gap:32px}
  .idea-visual{max-width:440px;margin-inline:auto}
  .idea-copy{max-width:560px}
}
@media(max-width:600px){
  .formats-art{margin-bottom:14px}
  .help-strip{padding:20px 24px;margin-block:24px 36px}
  .hero-visual[data-conversation] .note-icon{width:34px;height:34px}
  .hero-visual[data-conversation] .visual-note{min-height:92px}
  .conversation-toggle{top:8px;left:8px}
  .idea-copy h2{font-size:1.875rem}
  #idea .principles{margin-top:40px;padding-top:32px;gap:36px}
  .principle-art{width:98px;height:84px;margin-bottom:20px}
}
@media(max-width:380px){.hero-visual[data-conversation] .visual-note{margin-inline:12px;padding:12px;gap:10px}}