/* The box: one chat box that reads the day. The box column is sticky while the six beats scroll past it on the right.
   day.mjs picks the beat from the scroll position and sets which layers show. Phones stack the sticky box above the
   beat text, so the box state for each beat stays in view while its text reads underneath. */
.day{--od-paper:#f4f7fc;--od-ink:#132e39;--od-muted:#53687a;--od-line:#cbd7e4;--od-blue:#235a86;--od-teal:#006274;--od-brass:#8a4f14;background:var(--mish-deep,#050607);color:#fbf7ff;padding:88px 0 0;font-family:Montserrat,system-ui,sans-serif;isolation:isolate}
.day,.day *{box-sizing:border-box}
.day :is(h2,h3,h4,p,ul,ol){margin:0}
.day :is(ul,ol){padding:0;list-style:none}
.day :is(button){font:inherit;cursor:pointer}
.day :focus-visible{outline:3px solid #ffb16b;outline-offset:4px}
.day .od-box :focus-visible{outline-color:var(--od-brass)}
.day [hidden]{display:none!important}
.day .d-intro{max-width:2200px;margin:0 auto;padding:0 clamp(18px,4vw,64px) 50px;display:grid;grid-template-columns:1.25fr 1fr;gap:20px 55px;align-items:end}
.day .d-eyebrow{grid-column:1/-1;color:#ded7ea;font-size:14px}
.day h2{font-size:clamp(36px,4.3vw,68px);line-height:1.08;letter-spacing:-.055em;font-weight:600}
.day .d-lede{font-size:17px;line-height:1.8;color:#ded7ea;max-width:47ch}
.day .d-note,.day .d-credit{font-size:12px;line-height:1.7;color:#c1b4d0}
.day .d-credit{max-width:2200px;margin:0 auto;padding:40px clamp(18px,4vw,64px) 75px}
.owner-day-demo{max-width:2200px;margin:0 auto;padding:0 clamp(18px,4vw,64px);scroll-margin-top:90px}
.day .od-split{display:grid;grid-template-columns:minmax(0,min(46%,661px)) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start}
.day .od-box-col{position:sticky;top:calc(var(--mish-header-h,64px) + 24px);min-width:0;display:flex;flex-direction:column;max-height:calc(100vh - var(--mish-header-h,64px) - 48px)}
.day .od-box-col .d-note{margin-top:14px}
.day .od-beats{min-width:0}
.day .od-beat,.day .d-after{display:grid;align-content:center;min-height:min(74vh,700px);padding:clamp(40px,7vh,80px) 0;border-top:1px solid #9883af40}
.day :is(.od-beat,.d-after) h3{font-size:clamp(26px,2.7vw,38px);line-height:1.15;letter-spacing:-.04em;font-weight:600}
.day :is(.od-beat,.d-after) p{font-size:clamp(16px,1.05vw,22px);line-height:1.75;color:#ded7ea;max-width:72ch;margin-top:14px}
.day :is(.od-beat,.d-after) h4{font-size:19px;line-height:1.3;letter-spacing:-.02em;font-weight:600;margin-top:40px}
.day :is(.od-beat,.d-after) .d-consent{font-size:13px;color:#c1b4d0}
.day .od-box{overflow:hidden;display:flex;flex-direction:column;background:var(--od-paper);color:var(--od-ink);border-radius:16px;box-shadow:0 30px 60px #02060c99,0 0 0 1px #9883af55}
.day .od-bar{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;background:#e3ebf3;border-bottom:1px solid #bfd0de;font-size:13px;font-weight:600}
.day .od-bar::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--od-teal);box-shadow:0 0 0 4px #00627422}
.day .od-bar small{margin-left:auto;font-size:11px;font-weight:500;color:var(--od-muted)}
.day .od-box p{max-width:none}
.day .od-body{display:flex;flex-direction:column;gap:12px;min-height:clamp(340px,44vh,420px);padding:20px 18px 22px;overflow:hidden auto}
.day .od-biz{display:flex;flex-direction:column;gap:12px}
.day .od-say{max-width:90%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 1px 3px #1d3e4914;font-size:14px;line-height:1.55}
.day .od-ask[data-typing] [data-typed]::after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-3px;background:currentColor}
.day .od-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The notifications pour in as the morning beat scrolls: day.mjs sets --pour, and each one slides in from the side. */
.day .od-notes{display:grid;gap:8px}
.day .od-notes li{padding:11px 14px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1d3e4912;font-size:13.5px;line-height:1.45;--lk:clamp(0,calc((var(--pour,1) - var(--k,0) * .15) * 2.5),1);opacity:var(--lk);transform:translate3d(calc((1 - var(--lk)) * 48px),0,0)}
.day .od-rows{display:grid;gap:8px}
.day .od-row{display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1d3e4912;transition:opacity .6s ease,transform .6s ease}
.day .od-row[data-hold]{opacity:0;transform:translateY(8px)}
.day .od-row p{font-size:13.5px;line-height:1.5}
.day .od-row[data-kind="done"] p{color:var(--od-muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.day .od-tag{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:4px;background:#e0f1f5;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.6;text-transform:uppercase;color:var(--od-teal)}
.day .od-row[data-kind="ready"] .od-tag{background:#fbeedd;color:var(--od-brass)}
.day .od-choose{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.day .od-choose button{min-height:48px;padding:0 16px;border:1px solid #839ca8;border-radius:10px;background:transparent;color:var(--od-ink);font-size:14px;font-weight:600}
.day .od-choose [data-answer="approve"]{background:var(--od-blue);border-color:var(--od-blue);color:#fff}
.day .od-choose [aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--od-teal)}
.day .od-result{font-size:12.5px;color:var(--od-teal)}
/* The call: the four steps light in turn, and the transcript wipes on as it is written down. */
.day .od-flow{display:grid;gap:10px}
.day .od-flow li{padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1d3e4912;transition:opacity .5s ease,transform .5s ease}
.day .od-flow li[data-hold]{opacity:.3;transform:translateX(-8px)}
.day .od-step{display:block;margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--od-blue)}
.day .od-flow p{font-size:13.5px;line-height:1.5}
.day .od-quote{font-style:italic;clip-path:inset(0);transition:clip-path 1.1s ease}
.day .od-flow li[data-hold] .od-quote{clip-path:inset(0 100% 0 0)}
/* The stored view: the desk, the machine in the office, then the phone reaching it. */
.day .od-stored{display:grid;justify-items:center;gap:16px}
.day .od-node{position:relative;display:grid;justify-items:center;gap:8px;transition:opacity .6s ease,transform .6s ease}
.day .od-node[data-hold]{opacity:0;transform:translateY(8px)}
.day .od-node:not(:first-child)::before{content:'';position:absolute;top:-17px;left:50%;width:2px;height:17px;background:#7fb0c6}
.day .od-node-name{padding:9px 16px;border:1px solid var(--od-line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--od-ink)}
.day .od-node-machine .od-node-name{background:var(--od-blue);border-color:var(--od-blue);color:#fff}
.day .od-phone{width:min(100%,300px);margin:0}
.day .bo-phone-art{margin:0}
.day .od-phone figcaption{padding:6px 0 0;border:0;background:none;color:var(--od-muted);font-size:11px;line-height:1.5;text-align:center}
/* Chooser tabs: a real tab list, 48px targets, the selected business filled. */
.day .od-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.day .od-tab{min-height:48px;padding:10px 14px;border:1px solid #839ca8;border-radius:10px;background:transparent;color:#ded7ea;font-size:14px;font-weight:600;line-height:1.3;text-align:left}
.day .od-tab:hover{box-shadow:inset 0 0 0 1px #8eb1bf}
.day .od-tab[aria-selected="true"]{background:#205e83;border-color:#205e83;color:#fff}
.day .od-phone-text .bo-phone-requests{margin:22px 0;color:var(--mish-signal,#63d7e3);font-size:clamp(17px,1.12vw,23px);line-height:1.5}
.day .od-phone-text .bo-phone-requests li+li{margin-top:12px}
.day .od-phone-text .bo-phone-scope{font-size:clamp(14px,.9vw,18px)}
.day .od-phone-text strong{color:#fbf7ff}
.day .od-phone-text .mish-link{display:inline-flex;align-items:center;min-height:44px;margin-top:20px}
/* Short laptop screens (up to 860px tall): tighter rows and gaps, so the whole box, chooser included, fits without an inner scroll. */
@media (min-width:901px) and (max-height:860px){
 .day .od-body{min-height:0;gap:10px;padding:14px 14px 16px}
 .day .od-biz{gap:10px}
 .day .od-notes{gap:6px}
 .day .od-notes li{padding:8px 12px}
 .day .od-rows{gap:6px}
 .day .od-row{padding:9px 12px}
}
@media (max-width:900px){
 .day{padding-top:56px}
 .day .d-intro{grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:28px}
 .day .od-split{grid-template-columns:minmax(0,1fr);gap:0}
 /* The box alone sticks, so the note stays under it at the top of the section and scrolls away beneath the box. */
 .day .od-box-col{display:contents}
 .day .od-box{position:sticky;top:var(--mish-header-h,64px);z-index:2}
 .day .od-box-col .d-note{margin:22px 0 0;font-size:11px}
 .day .od-bar{min-height:36px;font-size:12px;line-height:1.3;flex-wrap:wrap;row-gap:0}
 .day .od-body{min-height:0;max-height:33vh;gap:8px;padding:6px 10px}
 .day .od-beat,.day .d-after{min-height:64vh;align-content:start;padding:28px 0 44px}
 .day .od-say{padding:9px 11px;font-size:13px;line-height:1.45}
 .day .od-notes{gap:6px}
 .day .od-notes li{padding:8px 11px;font-size:12.5px}
 .day .od-rows{gap:6px}
 .day .od-row{padding:8px 10px;gap:4px}
 .day .od-choose{margin-top:0}
 .day .od-row p,.day .od-flow p{font-size:12.5px;line-height:1.42}
 .day .od-flow{gap:6px}
 .day .od-flow li{padding:7px 10px}
 .day .od-step{margin-bottom:2px}
 /* Each phone beat fits the box above the beat text, so about 55% of the screen stays readable: the ask shows the done rows
    (the ready rows come in the last beat), and the chooser shows the picked business's greeting and notes. */
 .owner-day-demo[data-beat="ask"] :is(.od-greet,.od-row[data-kind="ready"]),.owner-day-demo[data-beat="chooser"] .od-rows{display:none}
 .day .od-phone{width:min(100%,180px)}
 .day .od-node{align-self:start}
 .day .od-node-name{padding:6px 12px;font-size:12px;white-space:nowrap}
 .day .od-phone figcaption{padding-top:4px;line-height:1.45}
 .day .od-stored{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
 .day .od-stored .od-phone{flex:0 0 100%;max-width:180px}
 .day .od-node:not(:first-child)::before{display:none}
}
@media (max-width:520px){
 .day .d-intro h2{font-size:clamp(32px,9vw,40px)}
 .day .od-tabs{gap:8px}
 .day .od-tab{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.day *,.day *::before,.day *::after{animation:none!important;transition:none!important}}
html[data-motion="paused"] .day *{transition:none!important;animation-play-state:paused!important}
.day .d-eyebrow{display:flex;align-items:center;gap:10px}
.day .d-eyebrow::before{content:'';flex:none;width:18px;height:9px;background:linear-gradient(90deg,#ded7ea 0 50%,#ffb03f 56%,#ff7f3a 75%,#ff3f86 90%,#f2167c);-webkit-mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat;mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat}
/* The examples in the chooser. Her text is a bubble with a tail; the box thinks, then fills in the answer in the format that
   business would use. day.mjs sets data-biz and, while a window plays, data-phase and data-swap; with neither set, as with
   motion off, everything shows. */
.day :is(.od-demo,.od-answer){display:flex;flex-direction:column;gap:8px}
.day .od-who{font-size:11px;font-weight:600;line-height:1.3;color:var(--od-muted)}
.day .od-who-she{align-self:flex-end;margin-right:11px}
.day :is(.od-ask,.od-said){position:relative;align-self:flex-end;max-width:84%;margin-right:11px;background:var(--od-blue);color:#fff;border-radius:18px}
.day :is(.od-ask,.od-said)::after{content:'';position:absolute;right:-9px;bottom:0;width:24px;height:23px;background:inherit;clip-path:path('M15 2C15 10 18 18 24 22C17 23.5 10 22.5 5 18Z')}
.day .od-dots{display:none;align-self:flex-start;gap:5px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 1px 3px #1d3e4914}
.day .od-dots i{width:7px;height:7px;border-radius:50%;background:var(--od-muted);animation:od-dot .8s ease-in-out infinite}
.day .od-dots i:nth-child(2){animation-delay:.13s}
.day .od-dots i:nth-child(3){animation-delay:.26s}
.owner-day-demo[data-phase="think"] .od-dots{display:flex}
.owner-day-demo:is([data-phase="fly"],[data-phase="think"]) .od-answer{display:none}
.owner-day-demo[data-phase="fly"] .od-who:not(.od-who-she){visibility:hidden}
.day .od-box .od-lead{font-size:13.5px;font-weight:600;line-height:1.45}
.day .od-top{display:grid;gap:6px;counter-reset:top}
.day .od-top li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1px 10px;align-items:baseline;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1d3e4912;font-size:13px;line-height:1.35;counter-increment:top}
.day .od-top li::before{content:counter(top);grid-row:span 2;font-weight:700;color:var(--od-blue)}
.day .od-top b{font-weight:600}
.day .od-top span{grid-column:2/-1;grid-row:2;color:var(--od-muted)}
.day .od-top small{font-size:12px;text-align:right;color:var(--od-muted)}
/* The calendar, one window's other tab. */
.day .od-wintabs{display:flex;gap:4px;align-self:flex-start}
.day .od-wintabs span{padding:3px 11px;border-radius:7px;font-size:12px;font-weight:600;color:var(--od-muted)}
.day .od-wintabs span:last-child,.owner-day-demo:is([data-phase="fly"],[data-phase="think"]) .od-wintabs span:first-child{background:var(--od-blue);color:#fff}
.owner-day-demo:is([data-phase="fly"],[data-phase="think"]) .od-wintabs span:last-child{background:none;color:var(--od-muted)}
.day .od-cal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:start}
.day .od-cal>.od-say{grid-column:1/-1}
.day .od-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:8px 10px;border-radius:10px;background:#fff;box-shadow:0 1px 3px #1d3e4912;font-size:12px;line-height:1.75;text-align:center}
.day .od-box .od-month p{grid-column:1/-1;font-weight:700;text-align:left}
.day .od-month i{font-style:normal;font-weight:600;color:var(--od-muted)}
.day .od-day-on{border-radius:50%;background:var(--od-blue);color:#fff;font-weight:700}
.day .od-marks{display:grid;gap:6px;font-size:12.5px;line-height:1.3}
.day .od-marks li{padding:7px 10px;border-left:3px solid var(--od-blue);border-radius:4px;background:#fff;white-space:nowrap}
/* Each business's window. */
.owner-day-demo[data-biz="claims"] .od-box{--od-paper:#f7f4ee;--od-blue:#a34c15;--od-teal:#a34c15;--od-line:#d9cfbf;--od-muted:#5e5549}
.owner-day-demo[data-biz="claims"] .od-bar{background:#2a3238;border-color:#2a3238;color:#fff}
.owner-day-demo[data-biz="claims"] .od-top li{border-left:3px solid var(--od-blue);border-radius:4px}
.owner-day-demo[data-biz="realty"] .od-box{--od-paper:#faf8f1;--od-blue:#14453a;--od-teal:#d3b25e;--od-line:#ddd5bf;--od-muted:#5a5a4c;border-radius:6px}
.owner-day-demo[data-biz="realty"] .od-bar{background:#14453a;border-color:#14453a;color:#fff;font:600 15px/1.2 Georgia,'Times New Roman',serif}
.owner-day-demo[data-biz="realty"] .od-top li{border-radius:3px}
.owner-day-demo[data-biz="realty"] .od-top b{font-family:Georgia,'Times New Roman',serif;font-size:14px}
.owner-day-demo[data-biz="realty"] .od-top small{padding:1px 8px;border-radius:999px;background:#efe6cf;color:#4f4011;font-weight:600}
.owner-day-demo[data-biz="dental"] .od-box{--od-paper:#effaf7;--od-blue:#0d756e;--od-teal:#0d756e;--od-line:#bfe6df;--od-muted:#44645f;border-radius:26px}
.owner-day-demo[data-biz="dental"] .od-bar{background:#d3f0ea;border-color:#b7e3da}
.owner-day-demo[data-biz="dental"] :is(.od-top li,.od-row,.od-say){border-radius:18px}
.owner-day-demo[data-biz="law"] .od-box{--od-paper:#f5f5f8;--od-blue:#2a3578;--od-teal:#8e97d6;--od-line:#d5d6e2;--od-muted:#54566b;border-radius:4px}
.owner-day-demo[data-biz="law"] .od-bar{background:#1c2148;border-color:#1c2148;color:#fff;font-family:var(--mish-font-mono)}
.owner-day-demo[data-biz="law"] :is(.od-month,.od-marks){font-family:var(--mish-font-mono)}
.owner-day-demo:is([data-biz="claims"],[data-biz="realty"],[data-biz="law"]) .od-bar small{color:#d9dee2}
.day .od-tab:last-child{grid-column:1/-1}
@keyframes od-dot{50%{opacity:.3;transform:translateY(-3px)}}
@keyframes od-text-in{from{transform:translate3d(calc(100% + 56px),0,0)}}
@keyframes od-win-out{to{opacity:0;transform:translate3d(-46px,0,0) scale(.97)}}
@keyframes od-win-in{from{opacity:0;transform:translate3d(64px,0,0) scale(.97)}}
@keyframes od-pop{from{opacity:0;transform:scale(.3)}}
/* One window. Everything above is the plain stack, for reduced motion, a screen too short to hold a slide, or a page whose
   script never ran. effects.mjs sets data-live; with motion allowed the stage then pins for the length of .od-stops (one
   stop per slide in day.mjs) while day.mjs slides the words and day-grains.mjs pours the picture behind them. */
.day :is(.d-stage,.d-intro-copy,.od-page){display:contents}
.day :is(.d-grains,.od-art,.od-rail,.od-stops){display:none}
@media (prefers-reduced-motion:no-preference){
 .day[data-live]{--d-text:clamp(15px,min(1.2vw,2.2vh),24px);--d-slide:clamp(56px,7vw,150px);padding:0;scroll-margin-top:calc(-1*var(--mish-space-4,16px))}
 .day[data-live]>.mish-background{display:none}
 .day[data-live][data-measure] *{transition:none!important}
 .day[data-live] :is(.d-intro,.owner-day-demo,.od-split,.od-beats,.od-phone-text){display:contents}
 .day[data-live] .d-stage{position:sticky;top:var(--mish-header-h);display:grid;grid-template:"eye eye eye" auto "words art box" minmax(0,1fr) "foot foot foot" auto/minmax(0,1.14fr) minmax(0,.7fr) minmax(0,1.16fr);gap:clamp(8px,1.6vh,20px) clamp(20px,2.6vw,64px);height:calc(100svh - var(--mish-header-h));padding:clamp(12px,2.2vh,28px) max(clamp(18px,3.4vw,96px),calc((100% - 2500px)/2));overflow:hidden;background:var(--mish-deep,#050607)}
 .day[data-live] .d-grains{display:block;position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
 .day[data-live] .d-eyebrow{grid-area:eye}
 .day[data-live] .od-art{display:block;grid-area:art;visibility:hidden}
 /* The slides share one cell. Each slide's children carry its shift and opacity, further the lower they sit, so the words arrive in a stagger. */
 .day[data-live] :is(.d-intro-copy,.od-beat,.d-after){display:block;grid-area:words;align-self:center;min-width:0;min-height:0;padding:0;border:0;pointer-events:none}
 .day[data-live] .od-beat:has(.od-page){display:grid;align-self:stretch;align-items:center}
 .day[data-live] .od-page{display:block;grid-area:1/1;min-width:0;pointer-events:none}
 .day[data-live] :is(.d-intro-copy,.od-beat:not(:has(.od-page)),.d-after,.od-page)>*{opacity:var(--a,0);transform:translate3d(calc(var(--s,1)*var(--d-slide)*(1 + var(--i,0)*.35)),0,0)}
 .day[data-live] :is(.d-intro-copy,.od-beat:not(:has(.od-page)),.d-after,.od-page)>:nth-child(2){--i:1}
 .day[data-live] :is(.d-intro-copy,.od-beat:not(:has(.od-page)),.d-after,.od-page)>:nth-child(3){--i:2}
 .day[data-live] :is(.d-intro-copy,.od-beat:not(:has(.od-page)),.d-after,.od-page)>:nth-child(n+4){--i:3}
 .day[data-live] [data-on]{pointer-events:auto}
 .day[data-live] h2{font-size:clamp(30px,min(3.4vw,6.2vh),72px)}
 .day[data-live] .d-lede{margin-top:clamp(12px,2vh,26px);font-size:var(--d-text);line-height:1.62;max-width:72ch}
 .day[data-live] :is(.od-beat,.d-after) h3{font-size:clamp(26px,min(2.9vw,5.4vh),60px)}
 .day[data-live] :is(.od-beat,.d-after) h4{margin:0;font-size:clamp(22px,min(2.2vw,4.2vh),44px);letter-spacing:-.03em}
 .day[data-live] :is(.od-beat,.d-after) p{margin-top:clamp(10px,1.6vh,18px);font-size:var(--d-text);line-height:1.62;max-width:72ch}
 .day[data-live] :is(.od-beat,.d-after) .d-consent{font-size:calc(var(--d-text)*.82)}
 .day[data-live] .od-tabs{margin-top:clamp(12px,2.4vh,26px)}
 .day[data-live] .od-phone-text .bo-phone-requests{margin:0;font-size:calc(var(--d-text)*1.08)}
 .day[data-live] .od-phone-text .bo-phone-scope{font-size:calc(var(--d-text)*.82)}
 .day[data-live] .od-page>p:first-child{margin-top:0}
 .day[data-live] .od-phone-text .mish-link{margin-top:clamp(6px,1.2vh,14px)}
 .day[data-live] .od-box-col{position:relative;top:auto;grid-area:box;justify-content:center;min-height:0;max-height:none}
 .day[data-live] .od-box{flex:0 1 680px;min-height:0}
 .day[data-live] .od-body{flex:1 1 0;gap:10px;min-height:0;padding:14px 16px}
 .day[data-live] .od-biz{gap:10px}
 .day[data-live] :is(.od-notes,.od-rows){gap:6px}
 .day[data-live] .od-notes li{padding:8px 12px;transform:translate3d(calc((1 - var(--lk))*-48px),0,0)}
 .day[data-live] .od-row{padding:9px 12px}
 .day[data-live] .od-box-col .d-note{flex:none;margin-top:clamp(8px,1.2vh,14px)}
 /* What a beat opens in the box slides in, the way the words do. */
 html:not([data-motion="paused"]) .day[data-live] [data-beats]:not([hidden]){animation:od-arrive .45s ease-out backwards}
 /* Her text comes in from outside the window, so nothing clips it while it crosses the edge. Then the answer fills in. */
 html:not([data-motion="paused"]) .day[data-live] :is(.od-ask,.od-said):not([hidden]){animation:od-text-in .45s cubic-bezier(.2,.85,.3,1.06) .2s backwards}
 .day[data-live] .owner-day-demo[data-phase="fly"] :is(.od-box,.od-body){overflow:visible}
 html:not([data-motion="paused"]) .day[data-live] .od-top li{animation:od-arrive .35s ease-out calc(var(--k)*.11s) backwards}
 html:not([data-motion="paused"]) .day[data-live] .od-day-on{animation:od-pop .45s ease-out .35s backwards}
 html:not([data-motion="paused"]) .day[data-live] .od-marks li{animation:od-arrive .35s ease-out calc(.6s + var(--k)*.22s) backwards}
 html:not([data-motion="paused"]) .day[data-live] .od-cal>.od-say{animation:od-arrive .35s ease-out 1.4s backwards}
 .day[data-live] .owner-day-demo[data-swap="out"] .od-box{animation:od-win-out .3s ease-in forwards}
 .day[data-live] .owner-day-demo[data-swap="in"] .od-box{animation:od-win-in .35s ease-out backwards}
 .day[data-live] .od-rail{display:flex;grid-area:foot;justify-self:start;align-items:center;gap:0 clamp(8px,1vw,26px)}
 .day[data-live] .od-rail button{min-height:44px;padding:0;border:0;background:none;color:#fbf7ffa8;font:700 clamp(12px,min(.9vw,1.7vh),17px)/1.2 var(--mish-font-mono)}
 .day[data-live] .od-rail button:hover{color:#fbf7ff}
 .day[data-live] .od-rail [aria-current]{color:#fbf7ff;box-shadow:inset 0 -3px 0 #ff7f3a}
 .day[data-live] .d-credit{grid-area:foot;justify-self:end;align-self:center;max-width:none;margin:0;padding:0;text-align:right}
 .day[data-live] .od-stops{display:block}
 .day[data-live] .od-stops>*{display:block;height:calc(var(--n)*550px)}
}
@keyframes od-arrive{from{opacity:0;transform:translate3d(-22px,0,0)}}
/* A big window gives the picture more room and keeps the box in proportion with the words beside it. */
@media (prefers-reduced-motion:no-preference) and (min-width:1500px) and (min-height:1000px){
 .day[data-live] .d-stage{grid-template-columns:minmax(0,1.2fr) minmax(0,.76fr) minmax(0,1.12fr)}
 .day[data-live] .od-box{zoom:1.12}
}
/* A short window keeps the phone picture from pushing past the box. */
@media (prefers-reduced-motion:no-preference) and (min-width:901px) and (max-height:860px){
 .day[data-live] .od-phone{width:min(100%,250px)}
}
/* Narrower: the picture sits over the words in their column, and the steps become ticks that keep their names for screen readers. */
@media (prefers-reduced-motion:no-preference) and (max-width:1240px){
 .day[data-live] .d-stage{grid-template:"eye eye" auto "words box" minmax(0,1fr) "foot foot" auto/minmax(0,1fr) minmax(0,1.12fr)}
 .day[data-live] .od-art{grid-area:words}
 .day[data-live] :is(.d-intro-copy,.od-beat:not(:has(.od-page)),.d-after){align-self:end}
 .day[data-live] .od-beat:has(.od-page){align-content:end;align-items:end}
 .day[data-live] .od-rail{gap:4px;width:min(100%,340px)}
 .day[data-live] .od-rail button{position:relative;flex:1 1 0;max-width:44px}
 .day[data-live] .od-rail span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .day[data-live] .od-rail button::after{content:'';position:absolute;inset:50% 4px auto;height:3px;border-radius:2px;background:#fbf7ff55}
 .day[data-live] .od-rail [aria-current]{box-shadow:none}
 .day[data-live] .od-rail [aria-current]::after{background:#ff7f3a}
}
/* Phones: the box on top, the words below it and the sand in the room between them. While a slide has a lot to say, the box folds down to its name. */
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
 .day[data-live]{--d-text:clamp(14px,min(3.7vw,1.95vh),17px);--d-slide:44px}
 .day[data-live] .d-stage{grid-template:"eye" auto "box" auto "words" minmax(0,1fr) "rail" auto "note" auto "credit" auto/minmax(0,1fr);gap:6px;padding:10px 16px calc(4px + env(safe-area-inset-bottom))}
 .day[data-live] .d-eyebrow{font-size:12px}
 .day[data-live] .od-box-col{display:contents}
 .day[data-live] .od-box{position:relative;top:auto;grid-area:box;flex:none}
 .day[data-live] .od-body{flex:none;height:35vh;max-height:none;transition:height .35s ease,padding .35s ease}
 .day[data-live]:is([data-slide="0"],[data-slide="6"],[data-slide="7"],[data-slide="8"]) .od-body{height:0;padding-block:0}
 .day[data-live][data-slide="3"] .od-body{height:max(110px,calc(100svh - var(--mish-header-h) - 440px))}
 .day[data-live] .od-tab{min-height:44px;padding-block:6px}
 .day[data-live] .od-top li{padding:6px 10px;font-size:12.5px}
 .day[data-live] .od-cal{grid-template-columns:minmax(0,1fr);gap:6px}
 .day[data-live] .od-month{padding:4px 8px;font-size:11px;line-height:1.5}
 .day[data-live] .od-marks{display:flex;flex-wrap:wrap;gap:4px;font-size:11px}
 .day[data-live] .od-marks li{padding:3px 7px}
 .day[data-live] .od-box-col .d-note{grid-area:note;display:none;margin:0;font-size:11px;line-height:1.45}
 .day[data-live]:is([data-slide="0"],[data-slide="1"],[data-slide="9"]) .od-box-col .d-note{display:block}
 .day[data-live] .od-rail{grid-area:rail;justify-self:stretch;width:auto}
 .day[data-live] .d-credit{grid-area:credit;justify-self:start;font-size:11px;text-align:left}
 .day[data-live] h2{font-size:clamp(28px,min(8vw,4.6vh),40px)}
 .day[data-live] :is(.od-beat,.d-after) h3{font-size:clamp(23px,min(6.4vw,3.4vh),30px)}
 .day[data-live] :is(.od-beat,.d-after) h4{font-size:clamp(20px,min(5.6vw,3vh),26px)}
 .day[data-live] :is(.od-beat,.d-after) p{line-height:1.5}
 .day[data-live] .d-lede{line-height:1.5}
 .day[data-live] .od-tabs{gap:6px}
 .day[data-live] .od-rail{gap:2px;justify-content:space-between}
 .day[data-live] .od-stops>*{height:calc(var(--n)*680px)}
 .day[data-live] .od-notes li{transform:translate3d(calc((1 - var(--lk))*48px),0,0)}
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px) and (max-height:700px){
 .day[data-live] .od-body{height:27vh}
}