/* A day in your business (ADR 0021), ported from the approved prototype. Prefix d-. */
#day b,#day strong{font-weight:700}
/* MWA.goto('day-stage') lands with the stage pinned on the day's first beat, not under the page's header padding */
#day-stage{scroll-margin-top:-80px}
#day{position:relative;background:var(--paper);color:var(--ink)}
.d-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.d-skip{position:absolute;left:var(--gutter);top:12px;z-index:30;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;text-decoration:none;border-radius:2px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.d-skip:focus{opacity:1;pointer-events:auto;clip-path:none}

/* Intro */
.d-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px;padding-top:clamp(80px,10vw,160px);padding-bottom:clamp(12px,1.6vw,24px)}
.d-h2{font-size:var(--fs-h2);max-width:22ch}
.d-h2 span{display:block}
.d-h2 .beacon{margin-top:.12em}
.d-note{max-width:330px;font-size:var(--fs-small);line-height:1.5;color:var(--muted-2)}
.d-note b{color:var(--ink);font-weight:700}
/* "Show another business": the six businesses as a row of buttons under the intro, and as a small sheet inside the stage */
.d-pick{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin-top:clamp(8px,1.4vw,20px)}
.d-pick-l{margin-right:8px;font-size:15px;font-weight:700}
.d-picks{position:relative;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.d-pdot{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--beacon);pointer-events:none;opacity:0;z-index:1}
.d-pdot.is-on{opacity:1}
.d-opt{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:2px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow 160ms var(--mwa-ease),background-color 160ms,color 160ms}
.d-opt::before{content:"";width:3px;height:14px;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform 220ms var(--mwa-ease);margin-left:-6px}
.d-opt:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.d-opt:hover::before{transform:scaleY(.6)}
.d-opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.d-opt[aria-pressed="true"]::before{background:var(--paper);transform:scaleY(1)}
.d-opt:active{transform:translateY(1px)}
@media (max-width:759px){
  .d-intro{grid-template-columns:minmax(0,1fr)}
  .d-h2{font-size:32px}
  .d-pick{gap:8px}
  .d-pick-l{flex-basis:100%}
  .d-opt{flex:none;padding:0 13px;font-size:14px}
  /* phones: the six businesses run as one row that scrolls, its ends fading out, so no lone button sits on a row of its own */
  .d-picks{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
  .d-picks::-webkit-scrollbar{display:none}
  .d-picks::after{content:"";flex:none;width:1px}
}

/* Copy and devices (shared by the live stage and the static panels) */
.d-h3{font-size:clamp(32px,2.9vw,46px)}
.d-h3 span{display:block}
.d-h3 .beacon{margin-top:.14em}
.d-lines{margin:clamp(18px,2.6vh,30px) 0 0;display:grid;gap:0;max-width:34em}
.d-line{display:grid;grid-template-columns:8.6em minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.d-line:last-child{border-bottom:1px solid var(--line)}
.d-line dt{display:flex;align-items:center;gap:8px;align-self:start;font-size:15px;font-weight:700;line-height:1.55}
.d-line dt .dot{width:9px;height:9px}
.d-line dd{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--muted-2)}
.d-chip{margin-top:clamp(14px,2.2vh,24px);display:flex;align-items:center;gap:12px;font-size:15px;color:var(--muted-2)}
.d-chip strong{color:var(--ink);font-weight:700}
.d-faces{display:flex;flex:none}
.d-faces img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--paper)}
.d-faces img+img{margin-left:-10px}
.d-time{display:none}

.d-scene{margin:0;display:flex;flex-direction:column;min-height:0;min-width:0}
.d-box{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:0;container-type:size}
.d-cap{flex:none;margin-top:12px;text-align:center}

/* Phone frame */
.d-phone{position:relative;flex:none;height:min(100cqh,640px);aspect-ratio:300/616;background:#111111;border-radius:46px;padding:9px;box-shadow:0 30px 60px -30px rgba(17,17,17,.45)}
.d-screen{position:relative;height:100%;background:#FFFFFF;border-radius:37px;overflow:hidden;display:flex;flex-direction:column;container-type:size}
.d-app{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 18px 11px;border-bottom:1px solid var(--line)}
.d-app-name{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.d-app-sub{margin-top:1px;font-size:12px;font-weight:500;color:var(--muted-2);line-height:1.3}
.d-app-time{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 7px;border:1px solid var(--line-strong);border-radius:2px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.d-app-time svg{width:12px;height:12px}
@container (max-width:240px){ .d-app .d-app-time{display:none} .d-list .d-item{grid-template-columns:minmax(0,1fr);gap:1px} }
@container (max-width:270px){ .d-call{padding:10px 12px;gap:10px} .d-callsub{display:none} .d-speaker{font-size:13px} .d-wrote-r{grid-template-columns:minmax(0,1fr);gap:0} }
/* the call: the logo's bars speak as a waveform beside who is talking and a running call timer */
.d-call{flex:none;display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.d-meter{display:block;flex:none;width:auto;height:clamp(30px,6cqh,42px);overflow:visible}
.d-meter rect{transform-box:fill-box;transform-origin:50% 100%}
.d-callinfo{flex:1 1 auto;min-width:0}
.d-speaker{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;min-height:18px}
.d-callsub{margin-top:2px;font-size:12px;font-weight:500;color:var(--muted-2);line-height:1.3}
.d-timer{flex:none;align-self:flex-start;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.d-wrote{flex:none;margin:0 14px 12px;padding:10px 12px 8px;background:var(--surface-2)}
.d-wrote-h{font-size:12px;font-weight:800;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.d-wrote-r{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid var(--line-strong);font-size:12.5px;line-height:1.35}
.d-wrote-r:last-child{border-bottom:0}
.d-wrote-r span{color:var(--muted-2)}
.d-wrote-r b{font-weight:700}
.d-hint{flex:none;margin:0;padding:10px 18px;font-size:13px;line-height:1.4;color:var(--muted-2);border-bottom:1px solid var(--line)}
.d-hint b{font-size:13px;color:var(--ink)}
@media (max-width:599px){.d-hint{display:none}}
/* a conversation reads from the top and every line keeps its place before it is typed, so the card never shows a blank top or a half-typed bubble */
.d-thread{flex:0 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:14px 14px 12px}
.d-bub[data-type]{position:relative}
.d-ty-g{visibility:hidden}
.d-ty-l{position:absolute;inset:0;padding:inherit}
.d-body[data-type]{position:relative}
.d-result{margin-top:auto}
.d-msg{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.d-msg.d-ai{align-items:flex-end}
.d-who{font-size:12px;font-weight:700;color:var(--muted-2);line-height:1.3}
.d-bub{max-width:90%;min-height:1.4em;padding:8px 11px;border-radius:4px;border:1px solid var(--line-strong);background:#FFFFFF;color:var(--ink);font-size:14px;line-height:1.4}
.d-ai .d-bub{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.d-gloss{max-width:90%;font-size:12px;line-height:1.35;color:var(--muted-2)}
.d-ai .d-gloss{text-align:right}
.d-tight .d-msg:not(.d-ai) .d-gloss,.d-tighter .d-gloss{display:none}
.d-src{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:3px 7px;border:1px solid var(--line-strong);border-radius:2px;font-size:12px;font-weight:700;color:var(--ink)}
.d-src svg{width:10px;height:12px}
.d-result{flex:none;display:flex;align-items:center;gap:10px;padding:13px 16px 16px;background:var(--ink);color:#FFFFFF;font-size:13.5px;font-weight:700;line-height:1.3}
.d-result .dot{width:11px;height:11px}
.d-list{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:4px 16px 10px}
.d-item{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.d-item b{font-weight:700;font-variant-numeric:tabular-nums}
.d-item span{color:var(--muted-2)}
.d-item.d-wait{border-bottom:0;margin-top:6px;padding:10px 10px;background:var(--surface-2)}
.d-item.d-wait span{color:var(--ink);font-weight:600}
.d-list.d-tight{padding-top:0;padding-bottom:6px}
.d-list.d-tight .d-item{padding:6px 0;line-height:1.32}
.d-list.d-tight .d-item.d-wait{margin-top:4px;padding:7px 8px}
.d-list.d-tight2 .d-item{padding:4px 0;font-size:12.5px;line-height:1.28;grid-template-columns:4.3em minmax(0,1fr);gap:8px}
.d-sum.d-tight .d-pt{padding:4px 0;line-height:1.32}
.d-sum.d-tight .d-approve{margin-top:5px;padding:6px 8px}

/* Laptop frame */
.d-laptop{position:relative;flex:none;width:min(100cqw,calc((100cqh - 30px) * 1.5),720px)}
.d-lid{background:#111111;border-radius:12px 12px 0 0;padding:10px 10px 12px;box-shadow:0 30px 60px -30px rgba(17,17,17,.45)}
.d-display{position:relative;aspect-ratio:16/10.2;background:#FFFFFF;border-radius:2px;overflow:hidden;display:flex;flex-direction:column;container-type:inline-size}
.d-base{position:relative;height:12px;margin:0 -5%;background:#111111;border-radius:0 0 8px 8px}
.d-base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:5px;transform:translateX(-50%);background:var(--muted-2);border-radius:0 0 4px 4px}
.d-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.d-bar .d-app-name{font-size:14px}
.d-panes{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 36%}
.d-pane{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.d-pane+.d-pane{border-left:1px solid var(--line);background:var(--surface)}
.d-mail{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;padding:6px 14px 10px}
.d-mm{padding:8px 0 9px;border-bottom:1px solid var(--line)}
.d-mm:last-child{border-bottom:0}
.d-from{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted-2)}
.d-from b{color:var(--ink);font-weight:700}
/* the AI hire signs with the logo's three bars in ink; the orange dot belongs to the street and travels */
.d-ai .d-from b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:0;background:linear-gradient(#111,#111) 0 0/2.6px 100% no-repeat,linear-gradient(#111,#111) 3.2px 100%/2.6px 68% no-repeat,linear-gradient(#111,#111) 6.4px 0/2.6px 100% no-repeat}
.d-body{margin-top:3px;min-height:1.4em;font-size:13px;line-height:1.42;color:var(--ink)}
.d-ph{padding:10px 12px 6px;font-size:12px;font-weight:800}
.d-row{display:grid;grid-template-columns:minmax(3.2em,auto) minmax(0,1fr);gap:4px 8px;padding:8px 12px;border-top:1px solid var(--line);font-size:12px;line-height:1.35}
.d-row b{font-weight:700;font-variant-numeric:tabular-nums}
.d-row span{color:var(--muted-2)}
.d-row .d-st{grid-column:2;position:relative;font-weight:700;color:var(--ink)}
.d-st i{font-style:normal}
.d-st .d-paid{position:absolute;left:0;top:0;color:var(--beacon-text)}
.d-sum{flex:1 1 auto;min-height:0;overflow:hidden;padding:8px 14px 10px}
.d-sum-h{font-size:12.5px;font-weight:800;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.d-pt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.4}
.d-cite{font-size:12px;font-weight:700;padding:1px 6px;border:1px solid var(--line-strong);border-radius:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.d-approve{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 10px;background:var(--surface-2);font-size:12px;font-weight:600}
.d-approve em{font-style:normal;flex:none;padding:5px 9px;border:1.5px solid var(--ink);border-radius:2px;font-weight:700}
.d-pages{position:relative;margin:4px 12px 0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.d-pages i{display:block;aspect-ratio:1/1;background:var(--line)}
.d-pages-ink{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;clip-path:inset(0 0 0 0)}
.d-pages-ink i{background:var(--ink)}
.d-count{padding:8px 12px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.d-count-n{display:none}
@container (max-width:470px){
  .d-panes{grid-template-columns:minmax(0,1fr)}
  .d-pane+.d-pane{display:none}
  .d-count-n{display:inline}
}

/* Asides beside the device */
.d-aside{flex:none;position:relative;z-index:2;align-self:flex-end;margin-bottom:9%;margin-left:clamp(14px,3cqw,28px);width:min(250px,40cqw);background:#FFFFFF;color:var(--ink);box-shadow:0 24px 48px -24px rgba(17,17,17,.38);border:1px solid var(--line)}
.d-sheet-h{display:flex;justify-content:space-between;gap:10px;padding:12px 14px 10px;border-bottom:2px solid var(--ink);font-size:13px;font-weight:800}
.d-sheet-h span{font-weight:600;color:var(--muted-2)}
.d-srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.35}
.d-srow:last-child{border-bottom:0}
.d-srow b{font-weight:700;font-variant-numeric:tabular-nums}
.d-srow.is-cited{background:var(--surface-2)}
.d-srow.is-cited>span{display:flex;align-items:center;gap:7px}
.d-mk{flex:none;width:3px;height:14px;background:var(--ink)}
.d-new b,.d-new span{color:var(--beacon-text)}
.d-ring{padding:14px}
.d-ring-top{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800}
.d-ring-top svg{width:30px;height:auto;flex:none}
.d-ring p{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--muted-2)}
.d-cup{flex:none;align-self:flex-end;order:-1;width:min(150px,17cqw);margin:0 4% 7% 0}
.d-cup svg{width:100%;height:auto;overflow:visible}
.d-steam rect{transform-box:fill-box;transform-origin:50% 100%}
@container (max-width:519px){ .d-aside,.d-cup{display:none} }

/* Night beat: the brand pattern holds on black. The ink sentence is white and the beacon sentence is #FF4D00 (6.4:1 on void) at every width. */
.d-beat-night .d-h3 .ink,.d-beat-night .d-line dt,.d-beat-night .d-chip strong{color:#FFFFFF}
.d-beat-night .d-h3 .beacon{color:var(--beacon)}
.d-beat-night .d-line,.d-beat-night .d-line:last-child{border-color:var(--night-line)}
.d-beat-night .d-line dd,.d-beat-night .d-chip{color:var(--night-muted)}
.d-beat-night .d-faces img{border-color:var(--void)}
.d-beat-night .d-phone{box-shadow:0 0 0 1px var(--night-line),0 30px 60px -30px rgba(0,0,0,.6)}
.d-beat-night .d-aside{border-color:var(--night-line)}
.d-off{display:none !important}

/* Static panels: reduced motion, or before the script runs */
#day:not(.d-live) .d-skin,#day:not(.d-live) .d-city{display:none}
#day:not(.d-live) .d-railnav{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter) 24px}
#day:not(.d-live) .d-railol{display:flex;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--line);padding-top:16px}
#day:not(.d-live) .d-railbtn{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none}
#day:not(.d-live) .d-railbtn .d-rbs{display:none}
#day:not(.d-live) .d-beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy scene";gap:48px;align-items:center;max-width:var(--wrap);margin-inline:auto;padding:clamp(48px,6vw,88px) var(--gutter);border-top:1px solid var(--line);scroll-margin-top:72px}
#day:not(.d-live) .d-beat-night{max-width:none;background:var(--void);border-top:0;padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))}
#day:not(.d-live) .d-copy{grid-area:copy}
#day:not(.d-live) .d-scene{grid-area:scene;height:560px}
#day:not(.d-live) .d-time{display:block;margin-bottom:16px;font-size:clamp(48px,6vw,96px);font-weight:800;letter-spacing:-.035em;line-height:.95;font-variant-numeric:tabular-nums}
#day:not(.d-live) .d-time small{font-size:.32em;font-weight:700;letter-spacing:0;margin-left:.15em}
#day:not(.d-live) .d-beat-night .d-time{color:#FFFFFF}
@media (max-width:759px){
  #day:not(.d-live) .d-beat{grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "copy";gap:28px}
  #day:not(.d-live) .d-scene{height:520px}
}

#day:not(.d-live) .d-wrote{display:none}
#day:not(.d-live) .d-sw,#day:not(.d-live) .d-hits,#day:not(.d-live) .d-fly{display:none}

/* Live stage. Every scene is either fully on or fully off: a beat fades in over a few hundred milliseconds of real time once scroll reaches it,
   so a reader who stops anywhere sees finished text, never a half-faded line. */
#day.d-live .d-pin{position:relative;height:700vh}
#day.d-live .d-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper);
  --d-top:84px;--d-bar:0px;--d-rail:58px;--d-clock:clamp(56px,6vw,96px);--d-street:clamp(220px,max(30vh,16vw),390px);--d-lab:30px}
#day.d-live .d-grid{position:absolute;top:0;left:0;right:0;bottom:calc(var(--d-street) + var(--d-bar));max-width:var(--wrap);margin-inline:auto;
  padding:var(--d-top) var(--gutter) clamp(12px,2.4vh,30px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  grid-template-rows:var(--d-rail) calc(var(--d-clock) * .9 + 10px) minmax(0,1fr);grid-template-areas:"rail rail" "clock scene" "copy scene";column-gap:clamp(32px,5vw,96px)}
#day.d-live .d-rail,#day.d-live .d-railol{grid-area:rail}
#day.d-live .d-clock{grid-area:clock}
#day.d-live .d-copy{grid-area:copy;align-self:start;padding-top:clamp(12px,2.2vh,28px)}
#day.d-live .d-scene{grid-area:scene;padding-top:clamp(8px,1.6vh,20px)}
#day.d-live .d-skin{position:absolute;inset:0}
#day.d-live .d-day{background:var(--paper);color:var(--ink)}
#day.d-live .d-night{color:#FFFFFF;pointer-events:none}
#day.d-live .d-beats{position:absolute;inset:0;z-index:2;pointer-events:none}
/* the beat that leaves clears in 90ms and the next one's lines arrive just after, so two beats' words never overlap */
#day.d-live .d-beat{opacity:0;visibility:hidden;transition:opacity 90ms linear,visibility 0s linear 90ms}
#day.d-live .d-beat.is-on .d-lines,#day.d-live .d-beat.is-on .d-chip,#day.d-live .d-beat.is-on .d-act{animation:d-in 380ms var(--mwa-ease) 130ms both}
#day.d-dusking .d-beat.is-on .d-lines,#day.d-dusking .d-beat.is-on .d-chip,#day.d-dusking .d-beat.is-on .d-act{animation-delay:640ms}
#day.d-dawning .d-beat.is-on .d-lines,#day.d-dawning .d-beat.is-on .d-chip,#day.d-dawning .d-beat.is-on .d-act{animation-delay:1060ms}
#day.d-live .d-beat.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 1ms linear,visibility 0s}
/* the device assembles: it rises out of a wipe from its own baseline, then its lines arrive one by one */
#day.d-live .d-beat .d-scene{opacity:0;transition:opacity 160ms linear}
#day.d-live .d-beat.is-on .d-scene{opacity:1;transition:opacity 1ms linear;animation:d-rise 600ms var(--mwa-ease) 40ms both}
#day.d-dusking .d-beat.is-on .d-scene{animation-delay:540ms}
#day.d-dawning .d-beat.is-on .d-scene{animation-delay:920ms}
/* the morning beat appears once the sky has turned to paper (the dawn ends at 850ms), so ink text never sits on a half-faded black */
#day.d-dawning .d-beat.is-on{transition:opacity 1ms linear 880ms,visibility 0s linear 880ms}
/* a new beat writes its headline in: each sentence wipes up from its own baseline, like the logo's bars rising */
#day.d-live .d-beat.is-on .d-h3>span{animation:d-wipe 440ms var(--mwa-ease) both}
#day.d-live .d-beat.is-on .d-h3>span+span{animation-delay:110ms}
#day.d-dawning .d-beat.is-on .d-h3>span{animation-delay:880ms}
#day.d-dawning .d-beat.is-on .d-h3>span+span{animation-delay:990ms}
#day.d-dusking .d-beat.is-on .d-h3>span{animation-delay:460ms}
#day.d-dusking .d-beat.is-on .d-h3>span+span{animation-delay:570ms}
@keyframes d-wipe{from{clip-path:inset(0 0 100% 0);transform:translateY(.28em)}to{clip-path:inset(0 0 -12% 0);transform:none}}
/* switching business: the old beat's copy and device wipe down into the street, the camera pans along the street, the new day assembles */
/* both go down together: an animation, because the device's own entrance animation would hold it in place against a transition */
#day.d-swap-out .d-beat.is-on .d-copy,#day.d-swap-out .d-beat.is-on .d-scene{animation:d-sink 260ms var(--ease-move) both}
@keyframes d-sink{from{clip-path:inset(-60px -60px -60px -60px);transform:none}to{clip-path:inset(100% -60px -60px -60px);transform:translateY(22px)}}
#day.d-swap-in .d-beat.is-on .d-scene{animation:d-rise 640ms var(--mwa-ease) 180ms both}
#day.d-swap-in .d-beat.is-on .d-lines,#day.d-swap-in .d-beat.is-on .d-chip,#day.d-swap-in .d-beat.is-on .d-act{animation:d-in 420ms var(--mwa-ease) 380ms both}
/* the new headline writes in once the old one has gone into the street, while the camera is still travelling */
#day.d-swap-in .d-beat.is-on .d-h3>span{animation-delay:200ms}
#day.d-swap-in .d-beat.is-on .d-h3>span+span{animation-delay:310ms}
@keyframes d-rise{from{clip-path:inset(100% 0 0 0);transform:translateY(40px)}to{clip-path:inset(-60px -60px -60px -60px);transform:none}}
/* the orange dot: one dot for the whole stage. It stands over the business, flies to the owner's device when the work is done, and comes home. */
.d-fly{position:absolute;left:0;top:0;z-index:8;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--beacon);pointer-events:none;opacity:0;will-change:transform}
.d-fly.is-on{opacity:1}
#day.d-live .d-result .dot.d-await{opacity:0}
#day.d-live .d-result .dot.d-land{animation:d-land 260ms var(--mwa-ease) both}
@keyframes d-land{from{transform:translateY(-5px) scale(1.15,.8)}to{transform:none}}
/* at dusk the first night line waits until the sky is nearly black, so white text never sits on grey */
#day.d-dusking .d-beat.is-on{transition:opacity 1ms linear 500ms,visibility 0s linear 500ms}
#day.d-live .d-railnav{position:absolute;inset:0;z-index:3;pointer-events:none}
#day.d-live .d-railol{position:relative;margin:0;padding:0}
#day.d-live .d-railbtn{position:absolute;top:-6px;bottom:4px;left:calc(var(--i) * 20% - 8%);width:16%;pointer-events:auto;border-radius:2px}
#day.d-live .d-railbtn:focus-visible{outline:2px solid var(--beacon);outline-offset:0}
#day.d-live .d-railbtn .d-rbt,#day.d-live .d-railbtn .d-rbs{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#day.d-live .d-step:not(.is-on):not([data-keep]){visibility:hidden}
#day.d-live .d-step[data-keep]:not(.is-on):not([data-act]){opacity:0}
#day.d-live .d-step.is-on{animation:d-in 380ms var(--mwa-ease) both}
#day.d-live .d-result.is-on{animation:d-up 480ms var(--mwa-ease) both}
#day.d-live .d-step.is-snap{animation:none}
/* every line holds its place from the first frame: before it arrives a message, a mail or a summary row is a quiet block in
   the brand's surface tone at its final size, so a card is never a blank screen; when it arrives the block fills and types */
#day.d-live .d-msg.d-step:not(.is-on):not(.d-off),#day.d-live .d-mm.d-step:not(.is-on):not(.d-off),#day.d-live .d-item.d-step:not(.is-on):not(.d-off),#day.d-live .d-pt.d-step:not(.is-on):not(.d-off){visibility:visible}
#day.d-live .d-msg.d-step:not(.is-on)>*,#day.d-live .d-mm.d-step:not(.is-on) .d-from{visibility:hidden}
#day.d-live .d-msg.d-step:not(.is-on) .d-bub{visibility:visible;color:transparent;background:var(--surface-2);border-color:var(--surface-2)}
#day.d-live .d-mm.d-step:not(.is-on) .d-body{color:transparent;background:var(--surface-2)}
#day.d-live .d-item.d-step:not(.is-on)>*,#day.d-live .d-pt.d-step:not(.is-on)>*{color:transparent;background:var(--surface-2);border-color:transparent}
#day.d-live .d-msg.d-step.is-on{animation:none}
#day.d-live .d-msg.d-step.is-on>.d-who,#day.d-live .d-msg.d-step.is-on>.d-gloss,#day.d-live .d-msg.d-step.is-on>.d-src{animation:d-in 320ms var(--mwa-ease) both}
#day.d-live .d-msg.d-step.is-snap>*{animation:none}
#day.d-live .d-bub,#day.d-live .d-mm .d-body,#day.d-live .d-item>*,#day.d-live .d-pt>*{transition:background-color 260ms var(--mwa-ease),border-color 260ms var(--mwa-ease),color 200ms linear}
#day.d-live .d-mm.d-step.is-on,#day.d-live .d-item.d-step.is-on,#day.d-live .d-pt.d-step.is-on{animation:none}
#day.d-live .d-mm.d-step.is-on .d-from{animation:d-in 320ms var(--mwa-ease) both}
#day.d-live .d-st:has(.d-paid.is-on) .d-due{opacity:0}
#day:not(.d-live) .d-st:has(.d-paid) .d-due{visibility:hidden}
.d-due{transition:opacity 200ms}
@keyframes d-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes d-up{from{transform:translateY(100%)}to{transform:none}}

/* "Show another business" inside the stage: it sits at the end of the clock row and opens a small sheet of the six businesses */
.d-sw{grid-area:clock;justify-self:end;align-self:end;position:relative;z-index:4;display:flex;align-items:center;gap:12px;margin:0 0 4px;pointer-events:auto;background:var(--paper);transition:background-color 400ms linear}
#day.is-night .d-sw{background:var(--void)}
.d-swnow{font-size:14px;font-weight:600;color:var(--muted-2);white-space:nowrap;transition:color 400ms linear}
.d-swbtn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border:0;border-radius:2px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--ink);transition:box-shadow 160ms,background-color 160ms,color 300ms linear}
.d-swbtn svg{width:14px;height:12px;flex:none}
.d-swbtn svg rect{transform-box:fill-box;transform-origin:50% 100%;transition:transform 260ms var(--mwa-ease)}
.d-swbtn:hover svg rect:nth-child(2),.d-swbtn[aria-expanded="true"] svg rect:nth-child(2){transform:scaleY(1.7)}
.d-swbtn:hover{background:var(--surface-2)}
#day.is-night .d-swnow{color:var(--night-muted)}
#day.is-night .d-swbtn{color:#FFFFFF;box-shadow:inset 0 0 0 1.5px #FFFFFF}
#day.is-night .d-swbtn:hover{background:#1A1A1A}
#day.is-night .d-sw :focus-visible{outline-color:#FFFFFF}
.d-swpop{position:absolute;right:0;top:calc(100% + 8px);z-index:9;width:250px;padding:6px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(17,17,17,.38);clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;transition:clip-path 260ms var(--mwa-ease),opacity 120ms linear,visibility 0s linear 260ms}
.d-swpop.is-open{clip-path:inset(-2px -2px -60px -60px);opacity:1;visibility:visible;transition:clip-path 300ms var(--mwa-ease),opacity 120ms linear,visibility 0s}
.d-swpop .d-opt{display:flex;width:100%;justify-content:flex-start;box-shadow:none;padding:0 12px}
.d-swpop .d-opt:hover{background:var(--surface-2);box-shadow:none}
.d-swpop .d-opt[aria-pressed="true"]{background:var(--ink)}
/* tap a business on the street to see its day: invisible buttons over the six buildings; the building lifts on hover */
.d-hits{position:absolute;inset:0;z-index:2;pointer-events:none}
.d-hit{position:absolute;left:0;top:0;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;border-radius:2px}
.d-hit:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#day.is-night .d-hit:focus-visible{outline-color:#FFFFFF}
.d-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:clamp(16px,2.4vh,26px)}
.d-act .btn{min-height:52px}
.d-act-call{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.d-act-call:hover{color:var(--beacon-text)}

/* Clock */
.d-clock{display:flex;align-items:baseline;gap:.14em;font-size:var(--d-clock);font-weight:800;letter-spacing:-.035em;line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.d-ampm{font-size:.3em;font-weight:700;letter-spacing:0}
.d-nextday{font-size:max(13px,.15em);font-weight:600;letter-spacing:0;color:var(--mwa-muted);opacity:0;transition:opacity 300ms}
.d-nextday.is-on{opacity:1}
.d-night .d-nextday{color:var(--night-muted)}

/* Rail */
.d-rail{position:relative}
/* the overnight stretch, 9:12 pm to 7:00 am, is a broken line: the day jumps to the next morning there */
.d-rail-line{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--line-strong);
  -webkit-mask:linear-gradient(90deg,#000 80%,transparent 80%),repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 9px);mask:linear-gradient(90deg,#000 80%,transparent 80%),repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 9px)}
.d-rail-fill{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
/* each time is a small bar on the line; the one the clock has reached stands up like the logo's tall bar */
.d-rail-tick{position:absolute;top:3px;left:calc(var(--i) * 20%);width:3px;height:12px;margin-left:-1.5px;background:var(--line-strong)}
.d-rail-tick.is-past{background:var(--ink)}
.d-rail-tick{transition:transform 260ms var(--mwa-ease),background-color 160ms;transform-origin:50% 100%}
.d-rail-tick.is-now{transform:scaleY(1.75);background:var(--ink)}
.d-rail-tick.is-hover{transform:scaleY(1.9);background:var(--ink)}
.d-rail-lab.is-hover{color:var(--ink)}
.d-night .d-rail-tick.is-hover{background:#FFFFFF}
.d-night .d-rail-lab.is-hover{color:#FFFFFF}
.d-rail-lab{position:absolute;top:22px;left:calc(var(--i) * 20%);transform:translateX(-50%);font-size:14px;font-weight:600;color:var(--muted-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.d-rail-lab.d-first{transform:none}
.d-rail-lab.d-last{transform:translateX(-100%)}
.d-rail-lab.is-on{color:var(--ink);font-weight:800}
.d-rail-lab .d-s{display:none}
.d-rail-dot{position:absolute;left:0;top:3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--beacon)}
.d-night .d-rail-line{background:var(--night-line)}
.d-night .d-rail-fill{background:#FFFFFF}
.d-night .d-rail-tick{background:var(--night-line)}
.d-night .d-rail-tick.is-past,.d-night .d-rail-tick.is-now{background:#FFFFFF}
.d-night .d-rail-lab{color:var(--night-muted)}
.d-night .d-rail-lab.is-on{color:#FFFFFF}

/* Dusk and dawn. #day.is-night starts a timed sequence, so no scroll position rests half-way.
   Dusk: the sky darkens, the windows go dark building by building from the business of the hour outward, then the lights come on in a stagger.
   Dawn plays it backward: the lights go out in a stagger, then the sky and the windows turn back to paper, then the morning text arrives. */
.d-nbg{position:absolute;inset:0;background:var(--void);opacity:0;transition:opacity 560ms ease-in-out 260ms}
#day.is-night .d-nbg{opacity:1;transition:opacity 600ms ease-in-out 0ms}
.d-night .d-grid{opacity:0;transition:opacity 260ms linear 240ms}
#day.is-night .d-night .d-grid{opacity:1;transition:opacity 320ms linear 200ms}
.d-day .d-grid{opacity:1;transition:opacity 240ms linear 600ms}
#day.is-night .d-day .d-grid{opacity:0;transition:opacity 240ms linear}

/* The city: the hero's own street, built with the hero's CSS 3D engine (boxes on the 20px logo unit, three faces each),
   seen by a camera in front elevation. Each south face carries its night layers: dark windows, three groups of lit windows and, on a business, every window lit. The one orange mark on the street is the dot. */
.d-city{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.d-cscene{position:absolute;inset:0}
.d-cworld{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0}
.d-cworld .d-cg,.d-cworld .d-bx,.d-cworld .d-cdot{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0}
.d-f{position:absolute;left:0;top:0;display:block;transform-origin:0 0;backface-visibility:hidden}
.d-f>i{position:absolute;inset:0;display:block;background-size:100% 100%;background-repeat:no-repeat}
/* at dawn the street turns to paper with the sky (650ms in, 900ms long), in a short wave from the east, so no dark block ever stands on a white sky */
.d-f>.d-n{inset:-.75px;opacity:0;transition:opacity 520ms ease-in-out calc(240ms + var(--k,0) * 3ms)}
#day.is-night .d-f>.d-n{opacity:1;transition:opacity 420ms linear calc(40ms + var(--k,0) * 16ms)}
.d-f>.d-l{opacity:0;transition:opacity 200ms linear var(--lo,0ms)}
#day.is-night .d-f>.d-l{opacity:1;transition:opacity 260ms linear var(--ld,1000ms)}
#day.is-late .d-f>.d-l.d-l0{opacity:0;transition:opacity 320ms linear var(--lz,0ms)}
.d-cdot i{position:absolute;left:0;top:0;display:block;border-radius:50%;background:var(--beacon);opacity:0;transition:opacity 120ms linear}
/* a business lifts half a unit under the pointer; at night the visitor's business lights every window */
.d-cworld .d-cg{transition:transform 300ms var(--mwa-ease)}
.d-cworld .d-cg.is-lift{transform:translate3d(0,0,10px)}
.d-f>.d-lb{opacity:0;transition:opacity 200ms linear}
#day.is-night .d-cg.is-biz .d-f>.d-lb{opacity:1;transition:opacity 200ms linear calc(560ms + var(--lbi,0) * 210ms)}
/* at night the neighbors keep only a few soft lights, so the visitor's business is the brightest thing on the street */
#day.is-night .d-cg:not(.is-biz):not(.is-mwa) .d-f>.d-l{opacity:.8}
#day.is-night .d-cg:not(.is-biz):not(.is-mwa) .d-f>.d-l.d-l2{opacity:0}
/* our own building keeps the logo's shape after dark but stays a quiet grey, so the visitor's lit business is the light on the street */
#day.is-night .d-cg.is-mwa .d-f>.d-l{opacity:.3}
#day.is-night .d-cg.is-biz .d-f>.d-l{opacity:0}
/* a car crosses the street after dark, its headlights two white bars */
.d-cg.d-car{opacity:0;transition:opacity 300ms linear}
#day.is-night .d-cg.d-car.is-go{opacity:1}
.d-cdot.is-on i{opacity:1}
.d-cground{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);opacity:0;transition:background-color 400ms linear 350ms,opacity 300ms linear}
.d-cground.is-on{opacity:1}
#day.is-night .d-cground{background:#FFFFFF;transition:background-color 500ms linear 150ms,opacity 300ms linear}
.d-clab{position:absolute;left:0;top:0;margin:0;font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap;color:var(--ink);transition:color 300ms linear 450ms}
#day.is-night .d-clab{color:#FFFFFF;transition:color 300ms linear 250ms}
.d-clab span{display:block;transform:translateX(-50%);opacity:0;transition:opacity 220ms linear}
.d-cband{position:absolute;left:0;right:0;bottom:calc(var(--d-bar) + var(--d-lab));height:calc(var(--d-street) - var(--d-lab) - 10px);visibility:hidden;pointer-events:none}
.d-clab.is-on span{opacity:1}

@media (max-width:1023px){
  #day.d-live .d-stage{--d-top:74px;--d-bar:calc(84px + env(safe-area-inset-bottom,0px));--d-rail:54px;--d-clock:58px;--d-street:170px;--d-lab:24px}
  /* one order at every width: clock, headline, then the device */
  #day.d-live .d-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--d-rail) calc(var(--d-clock) * .9 + 8px) auto minmax(0,1fr);grid-template-areas:"rail" "clock" "copy" "scene"}
  #day.d-live .d-clock{align-self:end}
  #day.d-live .d-copy{padding-top:10px}
  #day.d-live .d-act{display:none}
  .d-clab{font-size:12px}
  /* tablet and phone: the device is a whole card that fits its row, never a cropped phone */
  .d-box{align-items:flex-end}
  .d-phone{flex:0 1 430px;width:auto;min-width:0;height:auto;max-height:100cqh;aspect-ratio:auto;padding:0;border-radius:6px;background:#FFFFFF;border:1px solid var(--line-strong);box-shadow:0 24px 48px -24px rgba(17,17,17,.34)}
  .d-screen{height:auto;min-height:min(calc(100cqh - 2px),500px);max-height:calc(100cqh - 2px);border-radius:5px;container-type:inline-size}
  .d-laptop{width:min(100%,600px);max-height:100cqh}
  .d-lid{background:transparent;padding:0;border-radius:0;box-shadow:none}
  .d-display{aspect-ratio:auto;min-height:min(calc(100cqh - 2px),440px);max-height:calc(100cqh - 2px);border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 24px 48px -24px rgba(17,17,17,.34)}
  .d-base{display:none}
  .d-beat-night .d-phone,.d-beat-night .d-display{border-color:#FFFFFF;box-shadow:none}
  #day.d-live .d-cup{align-self:flex-end;margin-bottom:0}
  #day.d-live .d-aside{margin-bottom:0}
  /* tablet and phone: both lines run together as one short paragraph, so what your AI hire did and what stays with you both fit above the card */
  .d-lines{display:block;max-width:none;margin-top:8px;font-size:14px;line-height:1.4}
  .d-line,.d-line:last-child{display:inline;border:0;padding:0}
  .d-line dt{display:inline;font-size:14px;line-height:1.4}
  .d-line dt .dot{display:inline-block;width:7px;height:7px;margin-right:5px;vertical-align:1px}
  .d-line dt::after{content:":\00a0"}
  .d-line dd{display:inline;margin:0;font-size:14px;line-height:1.4}
  .d-line+.d-line dt::before{content:" ";white-space:pre}
  .d-chip{display:none}
  .d-screen{position:relative}
  /* the call shrinks into the card's header: the speaking bars and the timer, so the conversation gets the room */
  .d-call{position:absolute;top:8px;right:12px;z-index:2;padding:0;gap:8px;border:0;background:transparent}
  .d-meter{height:30px}
  .d-callinfo{display:none}
  .d-timer{align-self:center}
  .d-wrote{display:none}
  .d-screen:has(.d-call) .d-app-time{display:none}
}
@media (max-width:759px){
  #day.d-live .d-stage{--d-top:62px;--d-rail:42px;--d-clock:40px;--d-street:118px;--d-lab:22px}
  #day.d-live .d-grid{grid-template-rows:var(--d-rail) calc(var(--d-clock) * .9 + 12px) auto minmax(0,1fr)}
  .d-rail-lab{font-size:13px}
  .d-rail-lab .d-l{display:none}
  .d-rail-lab .d-s{display:inline}
  .d-h3{font-size:26px;letter-spacing:-.03em;line-height:1.05}
  .d-inter-t{font-size:26px;letter-spacing:-.03em;line-height:1.05}
  /* phones: both lines run together as one short paragraph, so what your AI hire did and what stays with you both fit above the card */
  .d-lines{display:block;max-width:none;margin-top:8px;font-size:13px;line-height:1.38}
  .d-line,.d-line:last-child{display:inline;border:0;padding:0}
  .d-line dt{display:inline;font-size:13px;line-height:1.38}
  .d-line dt .dot{display:inline-block;width:7px;height:7px;margin-right:5px;vertical-align:1px}
  .d-line dt::after{content:":\00a0"}
  .d-line dd{display:inline;margin:0;font-size:13px;line-height:1.38}
  .d-line+.d-line dt::before{content:" ";white-space:pre}
  .d-chip{display:none}
  /* phones: the device shows what the AI hire did, so the line under the headline keeps only what still comes to you */
  .d-lines .d-line:first-child{display:none}
  .d-cap{margin-top:6px}
  .d-app{padding:9px 14px 7px}
  .d-thread{gap:5px;padding:8px 12px 8px}
  .d-msg{gap:2px}
  .d-bub{font-size:13.5px;line-height:1.35;padding:6px 10px}
  /* under 32px the brand's orange text is beacon-text #C43B00 on paper, so the ink-then-orange headline keeps its signature on phones;
     on the night beat #FF4D00 on black passes at every size */
  #day .d-beat .d-h3 .beacon{color:var(--beacon-text)}
  #day .d-beat-night .d-h3 .beacon{color:var(--beacon)}
  .d-log li{padding:6px 0;font-size:13px}
  .d-gloss{font-size:12px;line-height:1.3}
  .d-who{font-size:12px}
  .d-result{padding:9px 14px;font-size:13px;line-height:1.25}
  .d-bub{max-width:94%}
  .d-item{padding:8px 0;font-size:13px}
  .d-mm{padding:6px 0 7px}
  .d-ph{padding:8px 12px 4px}
  .d-mail{padding:2px 14px 6px}
}
@media (max-width:599px){
  #day.d-live .d-stage{--d-bar:calc(66px + env(safe-area-inset-bottom,0px))}
  /* the call meter moves into the card's header so the conversation gets the room */
  #day .d-more{display:none !important}
  .d-cap{font-size:12px}
}
@media (max-width:599px) and (max-height:760px){
  #day.d-live .d-lines{display:none}
}
@media (min-width:1024px) and (max-height:980px){
  #d-beat-6 .d-chip{display:none}
  .d-hint{display:none}
  /* short desktop screens: a phone frame would be too narrow to read, so the device is a card that takes the column's width */
  .d-box{align-items:flex-end}
  .d-phone{flex:0 1 440px;width:auto;min-width:0;height:auto;max-height:100cqh;aspect-ratio:auto;padding:0;border-radius:6px;background:#FFFFFF;border:1px solid var(--line-strong);box-shadow:0 24px 48px -24px rgba(17,17,17,.34)}
  .d-screen{height:auto;max-height:calc(100cqh - 2px);border-radius:5px;container-type:inline-size}
  .d-beat-night .d-phone{border-color:#FFFFFF;box-shadow:none}
  .d-act{margin-top:14px}
}
/* short desktops (1024x768): the summary card already lists what was handled, so the last beat drops its two lines and
   the button and the call stand clear of the street instead of over its buildings */
@media (min-width:1024px) and (max-height:820px){
  #d-beat-6 .d-lines{display:none}
}
/* desktop: the switcher stands on the street, under the ground line at the content's left edge, and its sheet opens upward */
/* desktop: the street is a full band, a third of the screen, so it reads as the hero's street; the clock steps down a size and the
   two lines tighten to pay for it, and the 7:00 beat lets its summary card carry what was handled */
@media (min-width:1024px){
  #day.d-live .d-stage{--d-street:clamp(240px,max(33vh,17vw),420px);--d-clock:clamp(56px,5vw,84px)}
  .d-line{padding:9px 0}
}
/* the live 7:00 beat lets its summary card carry what was handled and what waits for you, at every width */
#day.d-live #d-beat-6 .d-lines{display:none}
/* short desktops, and any beat whose copy would reach the street (the script measures it and sets .d-cpt): the two lines run as
   one short paragraph; .d-cpt2 also lets the founder line go, so no word ever stands on a building */
@media (min-width:1024px) and (max-height:820px){
  #day.d-live .d-stage{--d-street:clamp(220px,30vh,300px);--d-clock:56px}
  .d-h3{font-size:30px}
}
@media (min-width:1024px){
  .d-cpt .d-lines{display:block;max-width:34em;margin-top:12px;font-size:15px;line-height:1.45}
  .d-cpt .d-line,.d-cpt .d-line:last-child{display:inline;border:0;padding:0}
  .d-cpt .d-line dt{display:inline;font-size:15px;line-height:1.45}
  .d-cpt .d-line dt .dot{display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:1px}
  .d-cpt .d-line dt::after{content:":\00a0"}
  .d-cpt .d-line dd{display:inline;margin:0;font-size:15px;line-height:1.45}
  .d-cpt .d-line+.d-line dt::before{content:" ";white-space:pre}
  .d-cpt .d-chip{margin-top:12px}
  .d-cpt2 .d-chip{display:none}
}
@media (min-width:1024px) and (max-height:820px){
  .d-lines{display:block;max-width:34em;margin-top:12px;font-size:15px;line-height:1.45}
  .d-line,.d-line:last-child{display:inline;border:0;padding:0}
  .d-line dt{display:inline;font-size:15px;line-height:1.45}
  .d-line dt .dot{display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:1px}
  .d-line dt::after{content:":\00a0"}
  .d-line dd{display:inline;margin:0;font-size:15px;line-height:1.45}
  .d-line+.d-line dt::before{content:" ";white-space:pre}
  .d-chip{margin-top:12px}
}
@media (min-width:1024px){
  #day.d-live .d-stage{--d-lab:60px}
  .d-clab{display:none}
  .d-swnow.is-preview{color:var(--ink);font-weight:700}
  #day.is-night .d-swnow.is-preview{color:#FFFFFF}
  .d-sw{grid-area:auto;position:absolute;left:var(--gutter);top:calc(100% - var(--d-bar) - var(--d-lab) + 8px);margin:0;padding-left:10px;white-space:nowrap}
  .d-swpop{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
}
.d-sws{display:none}
@media (max-width:1023px){
  .d-swnow{display:none}
}
/* phones: the button says less, and the clock row (taller at this width) keeps it clear of the rail */
@media (max-width:759px){
  .d-swbtn{font-size:14px;padding:0 12px;gap:8px}
  .d-swl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .d-sws{display:inline}
  .d-nextday{display:none}
}
@media (min-width:1600px){
  #day.d-live .d-stage{--d-top:96px}
  .d-phone{height:min(100cqh,clamp(640px,40vw,780px))}
  .d-laptop{width:min(100cqw,calc((100cqh - 30px) * 1.5),clamp(720px,46vw,900px))}
  .d-aside{width:min(290px,40cqw)}
  .d-cup{width:min(190px,17cqw)}
}