/* Character Maker uses the live marketing site's tokens, header, hero and footer.
   Gallery geometry and the owner-requested bounded reaction
   are local component exceptions. Source artwork is unchanged. */
body[data-audience="home"] .audience-copy{top:clamp(112px,15svh,136px)}
.audience-hero{--st-hero-control-color:var(--guest-paper);--st-hero-scrim-color:var(--studio-ink)}
.maker-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.mk-wrap{max-width:1216px;margin-inline:auto;padding-inline:48px;color:var(--studio-ink)}
.mk-gallery{padding-top:112px;padding-bottom:112px}
.mk-eyebrow{font-size:14px;line-height:1.5;margin:0 0 22px}
.mk-section-head{display:grid;grid-template-columns:1.4fr 1fr;gap:10%;align-items:end;margin-bottom:48px}
.mk-section-head h2{font:650 clamp(38px,4.7vw,68px)/1.03 Inter,sans-serif;letter-spacing:-.055em;margin:0;text-wrap:balance}
.mk-section-head>p{max-width:440px;font-size:17px;line-height:1.65;margin:0 0 3px;color:var(--guest-muted)}
.mk-gallery-layout{display:grid;grid-template-columns:minmax(0,1fr)112px;gap:24px;align-items:stretch}
.mk-pair{aspect-ratio:3/2;overflow:hidden;border:1px solid #D5D7DA;border-radius:26px;background:var(--guest-paper)}
.mk-pair>img{display:block;width:100%;height:100%;object-fit:contain}
.mk-thumbnails{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:12px;min-height:0}
.mk-thumbnails button{min-height:0;min-width:0;border:3px solid transparent;border-radius:18px;background:transparent;padding:3px;cursor:pointer;overflow:hidden}
.mk-thumbnails img{display:block;width:100%;height:100%;object-fit:cover;border-radius:11px}
.mk-thumbnails button[aria-pressed="true"]{border-color:var(--studio-blue)}
.mk-thumbnails button:not([aria-pressed="true"]):hover{border-color:var(--studio-ink)}
.mk-button:focus-visible,.mk-link:focus-visible,summary:focus-visible{outline:3px solid var(--studio-blue);outline-offset:4px}
.mk-gallery-caption{display:flex;justify-content:space-between;gap:24px;margin:22px 0 8px;font-size:15px;line-height:1.5}
.mk-gallery-caption p{margin:0}.mk-gallery-caption p:last-child{color:var(--guest-muted);font-size:13px;flex-shrink:0}
.mk-fine{font-size:12px;line-height:1.5;color:var(--guest-muted);margin:0}
.mk-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:32px}
.mk-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 24px;border-radius:30px;color:var(--guest-paper);background:var(--studio-ink);text-decoration:none;font-size:16px;line-height:1.5}
.mk-button:hover{background:var(--studio-blue)}
.mk-link{display:inline-flex;align-items:center;min-height:44px;color:var(--studio-blue);font-size:15px;line-height:1.5;text-decoration:underline;text-underline-offset:4px}
.mk-link:hover{text-decoration-thickness:2px}
/* Owner explicitly requested a bounded reaction presentation on this page.
   The completed homepage remains untouched. */
body.audience-landing .reaction-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 32px);max-width:460px;padding:20px;margin:auto;border-radius:20px}
body.audience-landing .reaction-dialog::backdrop{background:rgb(0 0 0 / .65)}
body.audience-landing .reaction-dialog[open]{display:grid;gap:16px;grid-template-rows:auto minmax(0,1fr)}
body.audience-landing #ava-reaction{width:auto;max-width:100%;height:min(64dvh,640px);max-height:calc(100dvh - 170px);border-radius:10px;justify-self:center}
@media(max-width:900px){.mk-gallery-layout{grid-template-columns:minmax(0,1fr)86px;gap:16px}.mk-thumbnails{gap:8px}}
@media(max-width:700px){body[data-audience="home"] .audience-copy{top:112px}.mk-wrap{padding-inline:24px}.mk-gallery{padding-block:72px}.mk-section-head{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.mk-section-head h2{font-size:42px}.mk-section-head>p{font-size:16px}.mk-section-head>p br+br{display:none}.mk-gallery-layout{grid-template-columns:1fr;gap:14px}.mk-pair{border-radius:18px}.mk-thumbnails{grid-template-columns:repeat(5,1fr);grid-template-rows:1fr;gap:5px}.mk-thumbnails button{aspect-ratio:1;padding:2px;border-radius:12px}.mk-thumbnails img{border-radius:6px}.mk-gallery-caption{display:block;margin:18px 0 8px}.mk-actions{gap:12px;margin-top:24px}.mk-button{font-size:15px}}

body.audience-landing .reaction-dialog{border:0;background:var(--guest-paper);color:var(--studio-ink)}
body.audience-landing .reaction-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px}
body.audience-landing .reaction-dialog h2{font:600 18px/1.3 Inter,sans-serif;letter-spacing:-.02em;margin:0 0 6px}
body.audience-landing .reaction-dialog header p{font:400 13px/1.5 Inter,sans-serif;color:var(--guest-muted);margin:0}
body.audience-landing .close-reaction{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;flex-shrink:0;color:var(--studio-ink)}
body.audience-landing .close-reaction svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Selection and keyboard focus use the thumbnail border, never an outer ring. */
.mk-thumbnails button:focus{outline:none}
.mk-thumbnails button:focus-visible{border-color:var(--studio-ink)}

/* One hero control here leaves room for the complete invitation on mobile. */
@media(max-width:700px){.audience-hero .plans-cta{max-width:calc(100% - 88px);white-space:nowrap;gap:10px}}

/* The introduction, feature and FAQ use the same shared components as Care/Educators. */
.maker-intro-dek{max-width:680px;font-size:20px;line-height:1.6;color:var(--guest-muted);margin:28px 0 0}
.maker-feature{background:var(--guest-soft)}
.maker-close-eyebrow{font-size:14px!important;margin-bottom:24px!important}
.audience-close .mk-link{margin-top:18px}
@media(max-width:700px){.maker-intro-dek{font-size:18px}}

.audience-close a.mk-link{background:none;color:var(--studio-blue);padding:0;text-decoration:underline;min-height:44px}

.maker-film-note{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--guest-muted)}
/* Fill both scene panels edge to edge, per the owner’s framing correction. */
#character-maker .benefits-scene img,.maker-feature .benefits-scene img{object-fit:cover}
@media(max-width:900px){#character-maker .benefits-scene,.maker-feature .benefits-scene{aspect-ratio:4/5}}
.audience-close a,.mk-button,.mk-link{font-weight:400}

/* Original source files are unchanged; media uses the shared card’s cover framing.
   Only its media reveal layers are added; the shared link remains the interaction. */
.maker-child-stories .home-story-card{background:var(--guest-soft)}
.maker-child-stories .maker-child-drawing{height:100%;object-fit:cover;object-position:center top}
.maker-story-result{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 240ms ease;pointer-events:none}
.maker-child-stories .home-story-card:is(:focus-visible,.show-cover) .maker-story-result{opacity:1}
@media(hover:hover){.maker-child-stories .home-story-card:hover .maker-story-result{opacity:1}}
.audience-faq{background:var(--guest-soft)}
@media(prefers-reduced-motion:reduce){.maker-story-result{transition:none}}


/* Clip horizontal painting outside the mobile rail without restricting its scroll. */
.maker-child-stories{overflow-x:clip}

/* The shared composer uses its usual invitation in the hero and the owner’s upload link at the ending. */
.composer-offer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(hover:none){.maker-child-stories .home-story-card:focus .maker-story-result{opacity:1}}


.maker-feature{--st-hero-control-color:var(--guest-paper);--st-hero-scrim-color:var(--studio-ink)}

/* Inline player reuses the shared grain class; isolate its blend within the film. */
.maker-feature .feature-film{isolation:isolate}

/* Balance the owner’s playful product name and invitation at both breakpoints. */
.audience-copy h1{max-width:19ch;text-wrap:balance}
.audience-copy p{max-width:58ch;text-wrap:balance}
@media(max-width:700px){.audience-copy h1{max-width:18ch}.audience-copy p{max-width:32ch;font-size:16px}}

/* Retain the audience hero’s copy scrim after selecting the homepage prompt intent. */
body[data-audience="home"] .audience-copy{--copy-top:clamp(112px,15svh,136px)}
body[data-audience="home"] .audience-copy::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;width:100vw;transform:translateX(-50%);top:calc(-1 * var(--copy-top));bottom:-32px;background:linear-gradient(to bottom,rgba(66,62,46,.34) 0%,rgba(66,62,46,.30) 72%,rgba(66,62,46,0) 100%)}
@media(max-width:700px){body[data-audience="home"] .audience-copy{--copy-top:112px}}
.maker-feature .feature-controls::before{content:none}

/* Gallery controls share the image on desktop and follow the caption on mobile. */
.mk-gallery-stage{display:grid;grid-template-columns:minmax(0,1fr)}
.mk-gallery-layout{grid-area:1/1}
.mk-gallery-caption{grid-area:2/1}
.mk-carousel-controls{grid-area:1/1;z-index:1;align-self:end;justify-self:center;display:flex;align-items:center;justify-content:center;gap:12px;margin:0 136px 24px 0;--carousel-ease:cubic-bezier(.22,1,.36,1)}
.mk-carousel-controls[hidden]{display:none}
.mk-carousel-dots{display:flex;align-items:center;padding:0 10px;border-radius:99px;background:var(--guest-soft)}
.mk-carousel-dot,.mk-carousel-play{position:relative;display:grid;place-items:center;border:0;padding:0;width:44px;min-width:44px;height:44px;cursor:pointer;color:var(--studio-ink);background:transparent;border-radius:99px;transition:width 420ms var(--carousel-ease),background-color 180ms ease,color 180ms ease,transform 180ms var(--carousel-ease)}
.mk-carousel-dot[aria-pressed="true"]{width:64px}
.mk-carousel-dot>span{display:block;width:8px;height:8px;border-radius:99px;background:var(--guest-muted);overflow:hidden;transition:width 420ms var(--carousel-ease),background-color 320ms ease,transform 220ms var(--carousel-ease)}
.mk-carousel-dot[aria-pressed="true"]>span{width:40px;background:color-mix(in srgb,var(--studio-blue) 20%,var(--guest-soft))}
.mk-carousel-dot i{display:block;width:100%;height:100%;background:var(--studio-blue);transform:scaleX(var(--progress,0));transform-origin:left;opacity:0;transition:opacity 220ms ease}
.mk-carousel-dot[aria-pressed="true"] i{opacity:1}
.mk-carousel-controls[data-playing="false"] .mk-carousel-dot[aria-pressed="true"] i{transform:scaleX(1)}
.mk-carousel-play{background:var(--guest-soft);flex-shrink:0}
.mk-carousel-play svg{position:absolute;width:18px;height:18px;fill:currentColor;transition:opacity 180ms ease,transform 300ms var(--carousel-ease)}
.mk-carousel-play-icon{opacity:0;transform:scale(.7) rotate(-12deg)}
.mk-carousel-pause-icon{opacity:1;transform:scale(1) rotate(0)}
.mk-carousel-controls[data-playing="false"] .mk-carousel-play-icon{opacity:1;transform:scale(1) rotate(0)}
.mk-carousel-controls[data-playing="false"] .mk-carousel-pause-icon{opacity:0;transform:scale(.7) rotate(12deg)}
.mk-carousel-controls button:hover{color:var(--studio-blue);background:color-mix(in srgb,var(--studio-blue) 8%,var(--guest-soft))}
.mk-carousel-controls button:active{transform:scale(.94)}
.mk-carousel-controls button:focus-visible{outline:2px solid var(--studio-blue);outline-offset:3px}
@media(max-width:900px){.mk-carousel-controls{margin-right:102px}}
@media(max-width:700px){.mk-carousel-controls{grid-area:3/1;margin:14px 0 0}.mk-gallery-caption{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.mk-carousel-controls button,.mk-carousel-dot>span,.mk-carousel-dot i,.mk-carousel-play svg{transition:none}}

@media(max-width:380px){.mk-carousel-controls{gap:8px}.mk-carousel-dots{padding:0}.mk-carousel-dot[aria-pressed="true"]{width:44px}.mk-carousel-dot[aria-pressed="true"]>span{width:32px}}