@font-face{font-family:STHeroInter;src:url("/assets/runtime/dd8a4575be9806105ac3decd02805cd2782fe7c05abb02c582316bc436ce03ae/font.woff2") format('woff2');font-weight:100 900;font-display:swap}
@scope (.homepage-jules) {
/* Standalone marketing-film study: scoped to this directory, no product styles. */

:scope{--ink:#fffaf4;--night:#17100c;--quiet:#d4c8bd;--line:#ffffff40;--film-width:calc(100svh * 4 / 3)}
*{box-sizing:border-box}:scope{background:var(--night);color:var(--ink);font-family:STHeroInter,Arial,sans-serif}:scope{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}[hidden]{display:none!important}
.study-header{height:64px;padding:0 32px;display:flex;justify-content:space-between;align-items:center;background:var(--night);font-size:12px;color:var(--quiet)}.study-header a{color:var(--ink);font-weight:600;font-size:18px;letter-spacing:-.6px}.study-header a span{font-size:14px;margin-left:8px}
.jules-scroll{position:relative;height:280svh}.jules-stage{position:sticky;top:0;height:100svh;display:flex;justify-content:center;background:var(--night);overflow:hidden}.jules-frame{height:100%;width:min(100%,var(--film-width));position:relative;isolation:isolate;overflow:hidden;background:#25180f}.jules-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block}.jules-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#110c087a 0%,#110c081c 30%,transparent 45%,transparent 77%,#110c089c 100%)}
.jules-copy{position:absolute;top:clamp(28px,5svh,56px);left:5%;right:5%;text-align:center;pointer-events:none}.jules-copy h2{font-size:clamp(40px,5.1vw,72px);line-height:1.02;letter-spacing:-.055em;font-weight:720;margin:0 auto 20px;max-width:19ch;text-wrap:balance}.jules-copy p{font-size:18px;line-height:1.45;font-weight:400;margin:0 auto;max-width:42ch;text-wrap:balance;color:var(--ink)}sup{font-size:.65em}
/* Figma Winter 2026 5:178 / 5:182. User-requested background blur = 40px;
   preserve the reference's 30% white fill. This is a scoped film-control treatment. */
.jules-bottom{position:absolute;bottom:calc(max(24px,env(safe-area-inset-bottom)) + var(--controls-viewport-inset,0px));left:20px;right:20px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;--control-fill:rgb(255 255 255 / .3);--control-hover:rgb(255 255 255 / .4);--control-blur:40px;--control-ink:#fff}
.jules-controls{display:flex;justify-content:center;align-items:center;gap:8px}
.jules-controls button{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;padding:14px;border:0;border-radius:9999px;background:var(--control-fill);-webkit-backdrop-filter:blur(var(--control-blur));backdrop-filter:blur(var(--control-blur));color:var(--control-ink);cursor:pointer;transition:background-color 180ms ease}
.jules-controls button:hover{background:var(--control-hover)}
.jules-controls button:active{background:var(--control-fill)}
.jules-controls button img{grid-area:1/1;display:block;width:20px;height:20px;object-fit:contain;pointer-events:none}
.jules-controls .icon-library{filter:brightness(0) invert(1)}
.jules-controls [data-state="paused"] .icon-pause,.jules-controls [data-state="playing"] .icon-play,.jules-controls [aria-pressed="false"] .icon-volume,.jules-controls [aria-pressed="true"] .icon-muted{display:none}
.compatibility{font-size:11px;font-weight:400;line-height:13px;color:var(--control-ink);margin:0;max-width:100%;text-wrap:balance}
.jules-status{position:absolute;left:10%;right:10%;top:36%;text-align:center;font-size:13px;margin:0}.jules-status:empty{display:none}
.jules-after{min-height:65svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;background:#f9f6f1;color:#211711}.after-kicker{font-size:17px;margin:0 0 24px}.jules-after h2{font-size:clamp(40px,5vw,72px);line-height:1.05;font-weight:650;letter-spacing:-.05em;margin:0 0 36px;text-wrap:balance}.jules-after a{font-size:14px;text-decoration:underline;text-underline-offset:5px}.study-footer{padding:24px;text-align:center;color:var(--quiet);font-size:11px;line-height:1.5}
@media(max-width:700px){.study-header{height:52px;padding:0 20px}.study-header>span{font-size:10px;max-width:130px;text-align:right}.jules-copy{top:5svh;left:20px;right:20px}.jules-copy h2{font-size:clamp(36px,8.9vw,52px);max-width:18ch;margin-bottom:16px;line-height:1.04}.desktop-break{display:none}.jules-copy p{font-size:16px;line-height:1.45}.jules-scroll{height:250svh}.jules-film{object-position:50% 50%}}
@media(max-height:600px) and (min-width:701px){.jules-copy{top:20px}.jules-copy h2{font-size:40px;margin-bottom:10px}.jules-copy p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.jules-scroll{height:100svh}.jules-stage{position:relative}}

/* Second-act copy shares the same space; no layout movement. */
.jules-headline{display:contents}.jules-picture{position:relative;width:100%;height:100%;isolation:isolate}.jules-copy{z-index:2}
.jules-copy{transition:opacity 650ms ease}.jules-copy-play{opacity:0}.jules-copy-play h2{font-size:clamp(40px,5.1vw,72px);line-height:1.02;letter-spacing:-.055em;font-weight:720;margin:0 auto 20px;max-width:19ch;text-wrap:balance}.is-playing-together .jules-copy-reading{opacity:0}.is-playing-together .jules-copy-play{opacity:1}
/* Dad's closer entrance occupies more of the upper-right set in this take. */
@media(min-width:1101px){.jules-copy-play{top:clamp(14px,2svh,24px)}}
@media(max-width:700px){.jules-copy-play h2{font-size:clamp(36px,8.9vw,52px);max-width:18ch;margin-bottom:16px;line-height:1.04}}
@media(max-height:600px) and (min-width:701px){.jules-copy-play h2{font-size:40px;margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.jules-copy{transition:none}}

/* Same 35mm source as studio hero; grain affects the image, never the UI. */
.jules-grain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:overlay;opacity:.65;pointer-events:none}
@media(prefers-reduced-motion:reduce){.jules-grain{display:none}}

/* The animated second-act benefit is also available without visual playback. */
.jules-accessible-summary{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Keep the reference frame calm while the film loads. */
.jules-controls button:disabled{opacity:.55;cursor:default}

.jules-after a:focus-visible{outline-color:currentColor}

/* The foreground chase spans the entire set. Portrait screens retain all 4:3
   picture information; copy and controls occupy the surrounding theatre space. */
@media(max-width:1100px) and (orientation:portrait){
 .jules-frame{background:var(--night)}
 .jules-film,.jules-grain,.speaker-waves{top:50%;bottom:auto;height:auto;aspect-ratio:4/3;transform:translateY(-50%);object-fit:contain}
 .jules-shade{display:none}
 .jules-copy{top:clamp(22px,5svh,44px)}
 .jules-copy h2,.jules-copy-play h2{font-size:clamp(30px,5.2vw,54px)}
 .jules-copy p{font-size:16px}
}
@media(max-width:700px) and (orientation:portrait){.jules-copy h2,.jules-copy-play h2{font-size:clamp(30px,8.2vw,42px)}}

/* Small diegetic speaker signals, driven by the film clock and scaled with its picture. */
.speaker-waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.speaker-waves [data-wave]{opacity:0}
@media(max-width:1100px) and (orientation:portrait){.speaker-waves{top:50%;bottom:auto;height:auto;aspect-ratio:4/3;transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.speaker-waves{display:none}.jules-controls button{transition:none}}

/* Natural-height comparison. Same finished 4:3 film, with no letterboxing,
   cropping, viewport-height stage, or empty scroll-pinning spacer. */
.jules-scroll[data-fullscreen]{height:auto}
[data-fullscreen] .jules-stage{position:relative;top:auto;height:auto;display:block;overflow:visible}
[data-fullscreen] .jules-frame{width:100%;height:auto;overflow:visible;background:transparent}
[data-fullscreen] .jules-picture{width:100%;height:auto;aspect-ratio:4/3;overflow:hidden}
[data-fullscreen] .jules-film,[data-fullscreen] .jules-grain,[data-fullscreen] .speaker-waves{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;object-fit:cover}
[data-fullscreen] .jules-shade{display:block}
/* 36px visible circles, with 44px touch targets. The inset leaves an 8px
   visual gap and 16px picture-edge clearance without shrinking the hit area. */
[data-fullscreen] .jules-bottom{inset:0;display:block;pointer-events:none}
[data-fullscreen] .jules-controls{position:absolute;right:12px;bottom:12px;gap:0;pointer-events:auto}
[data-fullscreen] .jules-controls button{width:44px;height:44px;flex-basis:44px;padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-fullscreen] .jules-controls button::before{content:"";box-sizing:border-box;position:absolute;inset:4px;border:1.5px solid white;border-radius:50%;background:rgb(0 0 0 / .18);transition:background-color 180ms ease}
[data-fullscreen] .jules-controls button:hover::before{background:rgb(0 0 0 / .32)}
[data-fullscreen] .jules-controls button:active::before{background:rgb(0 0 0 / .4)}
[data-fullscreen] .jules-controls button img{position:relative;width:16px;height:16px}
[data-fullscreen] .jules-frame>.compatibility{position:absolute;left:16px;bottom:16px;z-index:3;max-width:calc(100% - 132px);color:var(--ink);line-height:1.4}
/* Preserve the established centered headline treatment on tablet/desktop.
   Only its containing picture changed; no condensed caption treatment. */
@media(min-width:701px) and (max-width:1100px){
 [data-fullscreen] .jules-copy{top:32px;bottom:auto;left:20px;right:20px;text-align:center}
 [data-fullscreen] .jules-copy h2,[data-fullscreen] .jules-copy h2{font-size:clamp(30px,5.2vw,54px);margin-bottom:16px}
 [data-fullscreen] .jules-copy p{font-size:16px;line-height:1.45}
}
@media(max-width:700px){
 [data-fullscreen] .jules-copy{top:auto;bottom:16px;left:16px;right:auto;width:calc(100% - 132px);text-align:left}
 [data-fullscreen] .jules-copy h2,[data-fullscreen] .jules-copy h2{font-size:clamp(18px,4.6vw,26px);line-height:1.08;letter-spacing:-.04em;max-width:none;margin:0 0 6px;text-wrap:balance}
 [data-fullscreen] .jules-copy p{font-size:12px;line-height:1.35;max-width:none;margin:0;text-wrap:pretty}
 [data-fullscreen] .jules-copy br{display:none}
 [data-fullscreen] .jules-frame>.compatibility{position:static;max-width:none;padding:10px 16px;margin:0;color:var(--quiet);background:var(--night)}
}
@media(prefers-reduced-motion:reduce){[data-fullscreen] .jules-controls button::before{transition:none}}

/* Homepage-only theatre. Scrolling remains native through a brief native scroll span. */
.jules-scroll[data-fullscreen]{height:165svh;position:relative}
[data-fullscreen] .jules-stage{position:sticky;top:0;height:100svh;display:block;overflow:hidden}
[data-fullscreen] .jules-frame,[data-fullscreen] .jules-picture{width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
[data-fullscreen] .jules-film,[data-fullscreen] .jules-grain,[data-fullscreen] .speaker-waves{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;object-fit:cover}
[data-fullscreen] .jules-shade{display:block}
[data-fullscreen] .jules-copy{top:var(--homepage-copy-top,clamp(92px,13svh,128px));bottom:auto;left:5%;right:5%;width:auto;text-align:center}
[data-fullscreen] .jules-copy h2{font-size:clamp(40px,5.1vw,72px);line-height:1.04;margin:0 auto 20px;max-width:19ch;text-wrap:balance}
[data-fullscreen] .jules-copy p{font-size:18px;line-height:1.45;margin:auto;max-width:42ch;text-wrap:balance}
[data-fullscreen] .jules-frame>.compatibility{position:absolute;left:16px;bottom:18px;padding:0;background:none;max-width:calc(100% - 132px);color:var(--ink);font-size:11px;line-height:1.4;z-index:3}
[data-fullscreen] .jules-controls{right:var(--video-controls-right,12px);bottom:var(--video-controls-bottom,12px)}
@media(max-width:1100px){[data-fullscreen] .jules-copy h2{font-size:clamp(34px,5.2vw,54px)}[data-fullscreen] .jules-copy p{font-size:16px}}
@media(max-width:700px){
 [data-fullscreen] .jules-copy{top:var(--homepage-copy-top,104px);left:20px;right:20px}
 [data-fullscreen] .jules-copy h2{font-size:clamp(30px,8.2vw,42px);line-height:1.06;margin-bottom:16px}
 [data-fullscreen] .jules-copy p{font-size:16px;line-height:1.45}
 [data-fullscreen] .jules-copy br{display:initial}
 [data-fullscreen] .jules-frame>.compatibility{font-size:10px;max-width:calc(100% - 164px);bottom:calc(var(--film-controls-bottom,12px) + 10px)}
}
@media(max-height:600px) and (min-width:701px){[data-fullscreen] .jules-copy{top:var(--homepage-copy-top,86px)}[data-fullscreen] .jules-copy h2{font-size:34px;margin-bottom:8px}[data-fullscreen] .jules-copy p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.jules-scroll[data-fullscreen]{height:100svh}[data-fullscreen] .jules-stage{position:relative}}

/* Repeat the arrival only on a fresh downward pass. Keep the native sticky
   span in both directions so reversing scroll cannot resize the whole page. */
[data-fullscreen] .jules-copy{transition:opacity 1200ms cubic-bezier(.16,1,.3,1),translate 1200ms cubic-bezier(.16,1,.3,1)}
[data-fullscreen].has-scroll-entrance:not(.is-introduced) .jules-copy{opacity:0;translate:0 22px}
[data-fullscreen] .jules-copy{translate:0 0}
@media(prefers-reduced-motion:reduce){[data-fullscreen].has-scroll-entrance:not(.is-introduced) .jules-copy-reading{opacity:1;translate:none}[data-fullscreen] .jules-copy{transition:none}}

}