/* Owner-approved studio direction. Tokens are scoped to this independent embed. */
@font-face{font-family:STHeroInter;src:url('/assets/runtime/dd8a4575be9806105ac3decd02805cd2782fe7c05abb02c582316bc436ce03ae/font.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--studio-cherry:#a3321c;--studio-white:#fff;--studio-ink:#101416;--studio-blue:#155eef;--studio-paper:#faf7f2}

/* One measured wrapper carries the invitation, editor, and quiet free offer.
   Caption fades change opacity only: they must never move the landing slot. */
.sth-dock[data-composer-invitation]{background:transparent;border:0;box-shadow:none}
.sth-dock[data-composer-invitation] .dock-editor{background:var(--studio-blue);border:1px solid var(--studio-blue);border-radius:26px}
.sth-dock[data-composer-invitation] .composer-invitation,
.sth-dock[data-composer-invitation] .composer-offer{display:block;color:var(--studio-white);font-family:STHeroInter,Inter,Arial,sans-serif;font-weight:400;text-align:center;line-height:1.5}
.sth-dock[data-composer-invitation] .composer-invitation{margin:0 4px 8px;font-size:12px;opacity:1;transition:opacity 300ms ease;cursor:text}
.sth-dock[data-composer-invitation] .composer-offer{margin:8px 4px 0;font-size:12px}
.sth-dock[data-composer-invitation][data-offer-surface="ending"] .composer-invitation{display:none}
.sth-dock[data-composer-invitation][data-offer-surface="ending"] .composer-offer{color:var(--muted)}
.sth-dock[data-composer-invitation][data-offer-surface="hero"] .composer-offer{display:none}
.sth-dock[data-composer-invitation]:is(.is-collapsed,[data-offer-surface="none"]) :is(.composer-invitation,.composer-offer){display:none}
html[data-film-captions="on"] .sth-dock[data-composer-invitation] .composer-invitation{opacity:0;pointer-events:none}
@media(max-width:1000px){
 .sth-dock[data-composer-invitation] .composer-invitation{display:flex;align-items:center;text-align:left;text-wrap:balance;min-height:44px;max-width:calc(100% - var(--composer-controls-width,148px) - 20px);margin:0 4px 12px}
}
@media(max-width:1000px){body:has(.sth-dock[data-composer-invitation]) .studio-copy{bottom:var(--composer-clearance,248px)}}
@media(prefers-reduced-motion:reduce){.sth-dock[data-composer-invitation] .composer-invitation{transition:none}}
/* Shared hero subheader scale: desktop / tablet / mobile. */
.sth.studio,.sth.audience-hero{--hero-subhead-size:18px}
@media(max-width:1100px){.sth.studio,.sth.audience-hero{--hero-subhead-size:16px}}
@media(max-width:700px){.sth.studio,.sth.audience-hero{--hero-subhead-size:15px}}
*{box-sizing:border-box}body{background:var(--studio-cherry);margin:0;font-family:STHeroInter,Arial,sans-serif}
.sth.studio{position:relative;display:block;height:100svh;min-height:0;max-height:none;isolation:isolate;padding:0;overflow:hidden;background:var(--studio-cherry)}
.studio-stage{position:absolute;inset:0;overflow:hidden}
.studio-poster,.studio-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.studio-film{opacity:0;z-index:1}.studio-film.is-active{opacity:1}.studio-poster{z-index:0}
.studio-screen{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
.studio-stage{isolation:isolate}
.studio-stage.is-painted .studio-poster{opacity:0}
/* Present native video above the fallback canvas. WebKit can freeze frames
   when an invisible video is used only as a canvas source. */
.studio-stage.is-painted .studio-film.is-active{opacity:1;z-index:3;object-fit:cover}
.studio-copy{position:absolute;z-index:3;left:5%;top:clamp(68px,18svh,200px);width:34%;max-width:620px;color:var(--studio-white);opacity:1;transition:none;pointer-events:none}
.studio-copy h1{margin:0 0 24px;font-size:clamp(42px,4.3vw,82px);line-height:1.02;font-weight:700;letter-spacing:-.045em;text-wrap:balance}
.studio-copy p{font-size:var(--hero-subhead-size);max-width:450px;margin:0;line-height:1.5;font-weight:400;text-wrap:pretty;color:var(--studio-white)}
.studio-pause{position:absolute;top:16px;right:16px;z-index:5;transform:translateY(-160%);padding:12px 18px;border:1px solid currentColor;border-radius:99px;color:var(--studio-white);background:var(--studio-cherry);font:500 14px STHeroInter,Arial;cursor:pointer}
.studio-pause:focus-visible{transform:none;outline:2px solid var(--studio-white);outline-offset:4px}
/* The About arrow, placed by the same live-composer geometry as film controls. */
.studio-scroll-cue{width:44px;height:44px;display:grid;place-items:center;color:var(--studio-white);text-decoration:none}
.studio-scroll-cue svg{width:16px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4}
.studio-scroll-cue:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}
html:has(.studio-scroll-cue){scroll-behavior:smooth}
/* Keep the story headline clear of the signed-out navigation on arrival. */
@media(max-width:700px){html:has(.studio-scroll-cue) #stories{padding-block-start:96px}}
@media(prefers-reduced-motion:reduce){html:has(.studio-scroll-cue){scroll-behavior:auto}}
.sth-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* The inherited dock is the actual approved component, not a visual clone. */
.sth-dock{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.sth-dock textarea{font-weight:400}
.sth-dock .sth-feedback{font-weight:400}
@media(min-width:1001px){.sth-dock:not(.is-collapsed){left:5%;transform:none;width:min(435px,34vw);--composer-input-width:calc(min(435px,34vw) - 22px)}.sth-dock{transition:width 720ms cubic-bezier(.22,1,.36,1),left 720ms cubic-bezier(.22,1,.36,1),transform 720ms cubic-bezier(.22,1,.36,1),border-radius 720ms}.studio-stage{bottom:0!important}}
.studio-comparison{position:relative;background:var(--studio-paper);color:var(--studio-ink);min-height:75svh;padding:120px 24px 190px;text-align:center}
.studio-comparison h2{font-size:clamp(36px,5vw,72px);line-height:1.05;letter-spacing:-.04em;margin:18px 0 28px}
.studio-comparison p{font-size:16px;line-height:1.5}.studio-comparison a{display:block;color:var(--studio-blue);text-underline-offset:5px;margin:24px auto}.studio-comparison button{border:0;border-radius:99px;background:var(--studio-blue);color:var(--studio-white);padding:14px 22px;font:500 16px STHeroInter;cursor:pointer}
@media(min-width:1001px) and (max-height:700px){.studio-copy{top:9svh}.studio-copy h1{font-size:clamp(38px,4vw,64px)}.studio-stage{bottom:70px}.studio-poster,.studio-film{object-fit:contain}}
@media(max-width:1000px){.sth.studio{height:max(100svh,1000px)}.studio-copy{top:52px;left:7%;width:86%;max-width:780px}.studio-copy h1{font-size:clamp(48px,7.3vw,72px);max-width:760px;margin-bottom:20px}.studio-copy p{max-width:600px;}.studio-stage{top:260px;bottom:120px}.studio-poster,.studio-film{object-fit:cover;object-position:center}}
@media(max-width:600px){.sth.studio{height:max(100svh,1050px)}.studio-copy{top:40px;left:24px;width:calc(100% - 48px)}.studio-copy h1{font-size:clamp(42px,10.8vw,64px);line-height:1.03}.studio-copy p{line-height:1.45;max-width:36em}.studio-stage{top:330px;bottom:126px}.sth-dock{bottom:calc(14px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.studio-film{display:none}.studio-copy{opacity:1!important}}
@media(max-width:1000px){.sth.studio{height:max(100svh,820px)}.studio-stage{bottom:160px!important}.studio-stage:before{content:'';position:absolute;inset:-60px 0 auto;height:80px;z-index:3;background:linear-gradient(var(--studio-cherry),transparent);pointer-events:none}}
@media(max-width:600px){.sth.studio{height:max(100svh,844px)}.studio-copy{top:30px}.studio-copy h1{margin-bottom:18px}}
/* Full-bleed composition at every size: no masks or stretched boundary pixels. */
.studio-grain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:overlay;opacity:.5;pointer-events:none;z-index:2}
.studio-copy h1{opacity:1!important}
[data-studio-name],[data-studio-ending]{display:inline-block}
.studio-lead{display:block;white-space:nowrap}.studio-copy h1{text-wrap:initial}[data-studio-ending]{text-wrap:balance}
@media(min-width:1001px){.studio-copy{width:43%;max-width:680px}}
.studio-stage{inset:0!important}.studio-screen{mask-image:none!important}.studio-stage:before{display:none!important}
@media(min-width:1001px){.sth-dock:not(.is-collapsed){left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 48px));--composer-input-width:calc(min(680px,100vw - 48px) - 22px)}}
@media(max-width:1000px){.sth.studio{height:100svh;min-height:0}.studio-copy{top:36px;left:6%;width:88%;max-width:none;text-align:center}.studio-copy h1{font-size:clamp(36px,7vw,64px);max-width:none;margin-bottom:16px}.studio-copy p{line-height:1.4;max-width:36em;margin:auto}}
@media(max-width:600px){.studio-copy{top:28px}.studio-copy h1{font-size:clamp(34px,9vw,48px)}.studio-copy p{max-width:29em}.studio-copy{text-shadow:0 1px 14px rgba(70,20,0,.15)}}
@media(max-width:600px){.studio-copy{top:auto;bottom:184px;text-shadow:0 2px 18px rgba(35,10,0,.65)}.studio-copy h1{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.studio-grain{display:none}}
.study-controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.study-controls button[aria-pressed=false]{background:transparent;color:var(--studio-ink);box-shadow:inset 0 0 0 1px currentColor}
.prefooter{position:relative;isolation:isolate;min-height:820px;height:100svh;overflow:hidden;background:white;color:var(--studio-ink)}
.prefooter-copy{position:absolute;left:7%;top:22%;z-index:2;max-width:45%}.prefooter h2{font-size:clamp(48px,6vw,88px);line-height:1.02;letter-spacing:-.05em;margin:0 0 24px}.prefooter p{font-size:20px;line-height:1.5}.prefooter button{border:0;background:var(--studio-blue);color:white;border-radius:99px;padding:18px 24px;font:500 16px STHeroInter;cursor:pointer}
.prefooter .sth-art{position:absolute;right:-10%;bottom:0;width:75%;height:95%;overflow:hidden}.prefooter .sth-poster,.prefooter .sth-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.prefooter .sth-canvas{opacity:0}.prefooter .is-rendering .sth-canvas{opacity:1}.prefooter .is-rendering .sth-poster{opacity:0}
body[data-treatment=portrait] .prefooter-copy{top:8%;left:10%;max-width:80%;width:80%;text-align:center}body[data-treatment=portrait] .prefooter-copy p,body[data-treatment=portrait] .prefooter-copy button{display:none}body[data-treatment=portrait] .prefooter h2 br{display:none}body[data-treatment=portrait] .prefooter .sth-art{width:100%;right:0;height:82%}
.studio-faq{padding:100px max(24px,calc((100vw - 860px)/2)) 180px;background:var(--studio-paper);color:var(--studio-ink)}.studio-faq h2{font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-.035em;margin:0 0 40px}.studio-faq details{border-bottom:1px solid #d5d1cb;padding:24px 0}.studio-faq summary{font-size:19px;cursor:pointer;line-height:1.4}.studio-faq p{font-size:17px;line-height:1.6;max-width:720px;margin-bottom:0}
@media(max-width:700px){.prefooter{min-height:760px}.prefooter-copy{left:6%;top:8%;max-width:88%;text-align:center}.prefooter h2{font-size:48px}.prefooter p{font-size:17px}.prefooter .sth-art{width:135%;right:-17.5%;height:64%}body[data-treatment=portrait] .prefooter .sth-art{width:135%;right:-17.5%;height:80%}}

/* Immersive closing portrait: deliberate overscan, never a small illustration. */
.prefooter .sth-art{width:145%;height:150%;right:-30%;bottom:-32%;overflow:visible}
.prefooter .sth-poster,.prefooter .sth-canvas{object-fit:cover}
.prefooter-copy{color:white;mix-blend-mode:difference;pointer-events:none}
.prefooter-copy button{pointer-events:auto}
.prefooter-cta{position:absolute;z-index:3;left:7%;top:68%;mix-blend-mode:normal}body[data-treatment=portrait] .prefooter-cta{display:none}
body[data-treatment=portrait] .prefooter .sth-art{width:140%;height:150%;right:-20%;bottom:-32%}
body[data-treatment=portrait] .prefooter-copy{top:47%;transform:translateY(-50%);left:5%;max-width:90%;width:90%}
body[data-treatment=portrait] .prefooter h2{font-size:clamp(64px,8.5vw,132px);max-width:1150px;margin:auto}
.studio-faq{background:#f5f5f7;padding:120px max(24px,calc((100vw - 1120px)/2)) 180px}
.studio-faq h2{font-size:clamp(36px,4vw,52px);max-width:760px;margin-bottom:40px;font-weight:650}
.faq-toolbar{display:flex;justify-content:flex-end;margin-bottom:28px}
.faq-toolbar button{border:0;background:none;color:var(--studio-blue);padding:12px 0;font:400 15px STHeroInter;cursor:pointer}
.studio-faq details{border-bottom:1px solid #d2d2d7;padding:28px 0}
.studio-faq summary{display:flex;align-items:center;justify-content:space-between;gap:32px;list-style:none;font-size:clamp(20px,2.15vw,28px);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.studio-faq summary::-webkit-details-marker{display:none}
.studio-faq summary::after{content:'';flex:0 0 14px;height:14px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);margin:0 7px 7px 0;transition:transform .3s ease}
.studio-faq details[open] summary::after{transform:rotate(225deg);margin-top:14px}
.studio-faq p{font-size:17px;line-height:1.55;max-width:920px;margin:22px 48px 0 0}
@media(max-width:700px){.prefooter .sth-art,body[data-treatment=portrait] .prefooter .sth-art{width:245%;height:135%;right:-72.5%;bottom:-20%}.prefooter-copy{top:42%;transform:translateY(-50%)}body[data-treatment=portrait] .prefooter-copy{top:45%}body[data-treatment=portrait] .prefooter h2{font-size:clamp(54px,13vw,84px)}.studio-faq{padding-top:80px}.studio-faq summary{gap:20px}.studio-faq p{margin-right:20px}}
/* Match the source aspect ratio so the morph renderer cannot letterbox it. */
.prefooter .sth-art,body[data-treatment=portrait] .prefooter .sth-art{width:max(150%,200svh);height:auto;aspect-ratio:4/3;left:50%;right:auto;bottom:-32%;transform:translateX(-50%)}
@media(max-width:700px){.prefooter .sth-art,body[data-treatment=portrait] .prefooter .sth-art{width:max(245%,175svh);bottom:-22%}}
/* One frame for the whole cast. Ellie sets the height; no per-character zoom
   or animated layout dimensions that would interrupt the canvas morph. */
.prefooter .sth-art,body[data-treatment=portrait] .prefooter .sth-art{height:112%;width:auto;aspect-ratio:4/3;top:-6%;bottom:auto}
body[data-treatment=portrait] .prefooter h2{max-width:1000px;text-wrap:balance}
body[data-treatment=portrait] .prefooter h2 br{display:block}
.studio-faq summary:focus-visible,.faq-toolbar button:focus-visible{outline:3px solid var(--studio-blue);outline-offset:8px;border-radius:4px}
.studio-faq a{color:var(--studio-blue);text-underline-offset:4px}
@media(max-width:700px){.prefooter-cta{display:none}.prefooter-copy{max-width:88%;width:88%}.prefooter .sth-art,body[data-treatment=portrait] .prefooter .sth-art{height:112%;width:auto;top:-6%;bottom:auto}}
@media(prefers-reduced-motion:reduce){.studio-faq summary::after{transition:none}}
@media(max-width:700px){.studio-faq h2{margin-bottom:20px}.faq-toolbar{margin-bottom:12px}}
/* Tablet follows the mobile composition: leave the face clear above the copy. */
@media(min-width:601px) and (max-width:1000px){.studio-copy{top:auto;bottom:190px;text-shadow:0 2px 18px rgba(35,10,0,.45)}.studio-copy p{max-width:42em}}

/* One closing invitation at every breakpoint; the persistent composer owns CTA. */
.prefooter-copy,body[data-treatment=portrait] .prefooter-copy{left:6%;width:88%;max-width:none;top:42%;transform:translateY(-50%);text-align:center}
.prefooter h2,body[data-treatment=portrait] .prefooter h2{font-size:clamp(48px,7vw,104px);line-height:1.02;max-width:1000px;margin:0 auto;letter-spacing:-.05em;text-wrap:balance}
.prefooter h2 br{display:block}
@media(max-width:700px){.prefooter h2,body[data-treatment=portrait] .prefooter h2{font-size:clamp(44px,11.8vw,72px)}}

/* The composer lands beneath this copy; growing drafts extend downward. */
.prefooter-copy,body[data-treatment=portrait] .prefooter-copy{top:32%;transform:none}
.prefooter-copy p,body[data-treatment=portrait] .prefooter-copy p{display:block;margin:20px 0 0;font-size:clamp(20px,2.4vw,32px);line-height:1.3;font-weight:400}
.prefooter h2,body[data-treatment=portrait] .prefooter h2{max-width:1100px}
.sth-dock.is-landed{bottom:auto}
@media(max-width:700px){.prefooter-copy p{margin-top:16px}}

.sth-dock{scroll-margin-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
@media(max-width:600px){.sth-dock{scroll-margin-bottom:calc(14px + env(safe-area-inset-bottom,0px))}}
/* Homepage FAQ follows the pricing page: quiet split heading and disclosure rows. */
.studio-faq{padding:96px 32px;background:#f5f5f7;color:#1d1d1f}
.studio-faq-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1.45fr;gap:90px}
.studio-faq h2{margin:0;font-size:clamp(32px,4vw,52px);font-weight:650;letter-spacing:-.045em;line-height:1.1;text-wrap:balance}
.studio-faq details{padding:0;border-bottom:1px solid #d4d4da}
.studio-faq summary{padding:25px 0;gap:24px;font-size:17px;font-weight:550;line-height:1.5;letter-spacing:normal}
.studio-faq summary::after,.studio-faq details[open] summary::after{content:'+';font-size:26px;font-weight:350;flex:none;width:auto;height:auto;border:0;margin:0;transform:none;transition:none}
.studio-faq details[open] summary::after{content:'−'}
.studio-faq p{font-size:15px;line-height:1.7;color:#626268;max-width:650px;margin:0;padding:0 0 26px}
@media(max-width:1100px){.studio-faq-grid{gap:48px}}
@media(max-width:760px){.studio-faq{padding:64px 24px}.studio-faq-grid{grid-template-columns:1fr;gap:26px}.studio-faq h2{font-size:36px}.studio-faq summary{font-size:16px}}
@media(min-width:761px) and (max-width:1199px){
  .studio-faq{padding:80px 32px}
  .studio-faq-grid{grid-template-columns:1fr;gap:32px;max-width:820px}
  .studio-faq h2{font-size:44px}
  .studio-faq p{max-width:720px}
}

/* Feedback owns the lower edge; keep the blue outline on the input surface. */
.sth-dock[data-composer-invitation] .dock-editor:has(.sth-feedback:not(:empty)){background:transparent;border-color:transparent}