/* Tokens. One deliberate evening look, every color set here.
   The red and green come from the camera lights in the product and mean
   the same thing on this page. Nothing else may use them. */
@font-face{font-family:"Caprasimo";src:url("/fonts/caprasimo-latin-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sofia Sans";src:url("/fonts/sofia-sans-latin-wght.woff2") format("woff2");font-weight:1 1000;font-display:swap}
@font-face{font-family:"Sofia Sans Condensed";src:url("/fonts/sofia-sans-condensed-latin-wght.woff2") format("woff2");font-weight:1 1000;font-display:swap}
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("/fonts/sofia-sans-extra-condensed-latin-wght.woff2") format("woff2");font-weight:1 1000;font-display:swap}

:root{
  color-scheme:dark;
  --ground:#2e1228;
  --cell:#401c38;
  --cell-2:#4e2645;
  --cell-3:#5e3154;
  --milk:#fcefe8;
  --soft:#e5cdd6;
  --ink:#260c20;
  --apricot:#ffa867;
  --on-air:#ff4f3f;
  --up-next:#5fe0a0;
  --rose:#f8a4bd;
  --aqua:#7fd6d2;
  --lilac:#cbb9f4;

  --slot:var(--apricot);       /* the state's color */
  --slab:var(--slot);          /* the block around the player */
  --on-slab:var(--ink);
  --cta:var(--ink);
  --on-cta:var(--milk);
  --action:var(--slot);        /* buttons on the plum ground */
  --gap:3px;
  --gutter:clamp(16px,1.6vw,24px);
  --head:clamp(350px,31vw,460px);
  --pad:clamp(16px,1.9vw,28px);

  --fat:"Caprasimo","Cooper Black","Rockwell Extra Bold",Georgia,serif;
  --sans:"Sofia Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
  --cond:"Sofia Sans Condensed","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;
  --xcond:"Sofia Sans Extra Condensed","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;
}
html[data-tone="next"]{--slot:var(--up-next)}
/* Lights down for a live show. Red stays on the player frame, the marker and the ruler. */
html[data-tone="live"]{--ground:#1d0a19;--slot:var(--on-air);--slab:var(--cell);--on-slab:var(--milk);--cta:var(--apricot);--on-cta:var(--ink);--action:var(--apricot)}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
body{background:var(--ground);color:var(--milk);font:400 17px/1.5 var(--sans);overflow-x:clip;transition:background-color .3s}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
h1,h2,h3{text-wrap:balance}
ul,ol{list-style:none}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px}
button,input,select{font:inherit;color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--milk);outline-offset:2px}
.slot :focus-visible,.ask :focus-visible,.t.now :focus-visible{outline-color:var(--on-slab)}
.demo :focus-visible,.ask-form :focus-visible{outline-color:var(--milk)}
main:focus{outline:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--milk);color:var(--ink);padding:10px 16px;z-index:9;font-weight:700}
.skip:focus{top:8px}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.nb{white-space:nowrap}

/* Status bar and nav */
.status{background:var(--milk);color:var(--ink);padding:6px var(--gutter);font:600 15px/1.35 var(--sans)}
.status b{font-family:var(--cond);font-weight:800;letter-spacing:.01em}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;padding:12px var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand svg{width:36px;height:36px;flex:none}
.brand .lit{fill:var(--slot);transition:fill .3s}
.word{font:400 27px/1 var(--fat);letter-spacing:.002em}
.word i{font-style:normal;color:var(--slot);transition:color .3s}
.links{display:flex;flex-wrap:wrap;gap:4px 22px;font:700 17px/1.2 var(--cond)}
.links a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.links a:hover{border-bottom-color:currentColor}
.links .go{background:var(--action);color:var(--ink);padding:8px 14px}
.links .go:hover{border-bottom-color:transparent;background:var(--milk)}

/* The guide. Everything below the nav sits on this one grid. */
.guide{padding:0 var(--gutter) var(--gutter);display:grid;gap:var(--gap)}
.guide>*{min-width:0}

/* The time ruler. It reads the visitor's own clock. */
.ruler{display:grid;grid-template-columns:var(--head) minmax(0,1fr);align-items:end;min-height:30px;font:700 19px/1 var(--xcond);letter-spacing:.05em;color:var(--soft)}
.today{text-transform:uppercase;color:var(--milk);font-weight:800;padding:0 0 7px var(--pad)}
.today-time{display:none}
.track{position:relative;height:30px;margin-left:var(--pad);overflow:hidden}
.track span{position:absolute;bottom:0;height:22px;padding:2px 0 0 6px;border-left:2px solid var(--cell-3);white-space:nowrap}
.track b{position:absolute;bottom:0;height:26px;padding:6px 8px 0;background:var(--slot);color:var(--ink);font-weight:800;white-space:nowrap;z-index:1}

/* The slot in focus */
.slot{background:var(--slab);color:var(--on-slab);display:grid;grid-template-columns:var(--head) minmax(0,1fr);transition:background-color .3s}
.pitch{padding:var(--pad) 0 var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:flex-start;gap:14px;min-width:0}
.pitch h1{font:400 clamp(30px,2.75vw,42px)/1.08 var(--fat);letter-spacing:-.003em}
.pitch .sub{font-size:17.5px;line-height:1.42;font-weight:500;text-wrap:pretty}
.cta{display:inline-block;background:var(--cta);color:var(--on-cta);font:800 20px/1.1 var(--cond);padding:15px 20px;text-decoration:none;border:0;cursor:pointer;text-align:center}
.cta:hover{background:#000;color:var(--milk);box-shadow:inset 0 -4px 0 var(--slot)}
.under{font-size:15px;line-height:1.4;font-weight:500;text-wrap:pretty}
.push{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.stage{padding:var(--pad) var(--pad) 14px;min-width:0}
.caption{font:600 14.5px/1.3 var(--sans);margin-top:8px}

/* While a show or replay plays, the show leads and the promise steps back. */
.show-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.show-title{font:400 clamp(28px,2.7vw,40px)/1.1 var(--fat);text-wrap:balance}
html[data-watch="1"] .pitch .sub{order:1;font-size:18px}
html[data-watch="1"] .pitch h1{order:2;font:700 16.5px/1.35 var(--sans);letter-spacing:0}
html[data-watch="1"] .pitch .push{order:3}
html[data-watch="1"] .pitch .under{font-size:14.5px}

/* The real player */
.player{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
html[data-tone="live"] .player{box-shadow:0 0 0 4px var(--on-air)}
.player mux-player{display:block;width:100%;height:100%;--media-object-fit:contain;--controls-backdrop-color:rgb(38 12 32 / .55)}
.oops{position:absolute;inset:0;display:grid;place-items:center;background:#1b0917;color:var(--milk);text-align:center;padding:24px;font:400 clamp(20px,2.4vw,30px)/1.2 var(--fat);pointer-events:none}

/* The demo */
.demo{background:var(--ink);color:var(--milk);padding:8px}
.demo-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:4px 4px 9px;align-items:baseline}
.demo-flag{font:800 17px/1.2 var(--cond);background:var(--milk);color:var(--ink);padding:3px 8px}
.demo-event{font:600 15px/1.25 var(--sans);color:var(--soft)}
.demo-room{display:grid;grid-template-columns:minmax(0,1fr) 19.4%;gap:8px;position:relative}
.air{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.air svg{width:100%;height:100%}
.air-tag{position:absolute;left:10px;top:10px;background:var(--on-air);color:var(--ink);font:800 16px/1 var(--cond);padding:5px 9px}
.lower{position:absolute;left:5%;bottom:7%;background:var(--milk);color:var(--ink);padding:7px 14px 7px 12px;border-left:7px solid var(--aqua);line-height:1.1}
.lower b{display:block;font:800 clamp(16px,1.6vw,24px)/1.1 var(--cond)}
.lower span{font:600 clamp(13px,1.1vw,16px)/1.2 var(--sans)}
.phones{display:grid;grid-template-rows:repeat(4,1fr);gap:8px;position:relative;min-width:0}
.phone{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--milk);touch-action:manipulation}
.phone .body{display:block;position:relative;padding:5px 9px 5px 5px;background:#120510;border-radius:9px;box-shadow:inset 0 0 0 1px var(--cell-3)}
.phone .body::after{content:"";position:absolute;right:3px;top:50%;width:3px;height:16px;margin-top:-8px;border-radius:2px;background:var(--cell-3)}
.phone .shot{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#000}
.phone .shot svg{width:100%;height:100%}
.phone:hover .body{box-shadow:inset 0 0 0 2px var(--milk)}
.phone .tag{position:absolute;left:5px;right:9px;bottom:5px;padding:2px 6px;background:rgb(18 5 16 / .86);font:700 14px/1.2 var(--cond);border-radius:0 0 4px 4px}
.phone .tag b{font-weight:800}
.redframe{position:absolute;left:0;top:0;width:0;height:0;border:4px solid var(--on-air);border-radius:9px;pointer-events:none;z-index:2;transition:transform .2s cubic-bezier(.3,.9,.3,1)}
.demo-talk{display:flex;align-items:center;gap:12px;padding:9px 4px 3px;min-height:46px}
.demo-line{font:600 16px/1.35 var(--sans);flex:1;min-width:0}
.demo-line b{font-family:var(--cond);font-weight:800;font-size:22px;color:var(--apricot)}
.demo-arrow{order:2;flex:none;width:calc(19.4% + 40px);min-width:90px;height:30px;color:var(--apricot)}
.demo.tapped .demo-arrow{display:none}

/* The guide row, time reading left to right */
.times{display:grid;grid-template-columns:var(--head) minmax(0,1fr) minmax(240px,.5fr);gap:var(--gap);grid-template-areas:"earlier now next"}
.t{background:var(--cell);padding:12px var(--pad) 16px;min-width:0}
.t.earlier{grid-area:earlier}
.t.next{grid-area:next}
.t.now{grid-area:now;background:var(--slab);color:var(--on-slab);margin-top:calc(-1 * var(--gap));padding-top:calc(4px + var(--gap));transition:background-color .3s}
.t.open{background:repeating-linear-gradient(135deg,var(--cell) 0 9px,#381832 9px 18px)}
html[data-watch="1"] .times{grid-template-columns:var(--head) minmax(0,1fr);grid-template-areas:"earlier next"}
html[data-watch="1"] .t.now{display:none}
.when-label{display:block;font:800 19px/1.1 var(--xcond);letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin-bottom:5px}
.t p,.t a{font-size:17px;line-height:1.35}
.t .big,.t a.big{display:block;font:800 21px/1.18 var(--cond);text-decoration:none}
.t a.big:hover{text-decoration:underline}
.t .sm{font-size:16px;color:var(--soft)}
.marker{display:inline-block;background:var(--ink);color:var(--milk);font:800 19px/1 var(--xcond);letter-spacing:.07em;text-transform:uppercase;padding:6px 9px 5px}
html[data-tone="live"] .marker{background:var(--on-air);color:var(--ink)}
html[data-tone="live"] .marker::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:1px}
.now-title{font:400 clamp(24px,2.2vw,31px)/1.1 var(--fat);margin:8px 0 4px}
.t .now-when{font:800 clamp(21px,1.8vw,25px)/1.1 var(--cond);margin-bottom:3px}
.t .now-desc{font-size:16.5px;max-width:62ch}
.t .now-line{font-size:17px;line-height:1.35;font-weight:500;max-width:62ch;text-wrap:pretty}
.btn-2{display:inline-block;margin-top:8px;font:800 17px/1.1 var(--cond);padding:9px 13px;text-decoration:none;box-shadow:inset 0 0 0 2px currentColor}
.btn-2:hover{background:var(--milk);color:var(--ink);box-shadow:none}
.t .btn-2{font:800 17px/1.1 var(--cond)}

/* Rows: a heading cell on the left, like a channel name, and slots of
   uneven length on the right, like shows. */
.row{display:grid;grid-template-columns:var(--head) minmax(0,1fr);gap:var(--gap)}
.head{background:var(--cell-2);color:var(--ink);padding:var(--pad);display:flex;flex-direction:column;min-width:0}
.head.plain{color:var(--milk)}
.tint-apricot{background:var(--apricot)}
.tint-rose{background:var(--rose)}
.tint-aqua{background:var(--aqua)}
.tint-lilac{background:var(--lilac)}
.tint-milk{background:var(--milk)}
.head .art{margin-top:auto;padding-top:20px;width:100%;height:auto}
.head.crowd{padding-bottom:0}
.head.crowd .art{width:calc(100% + 2 * var(--pad));margin-left:calc(-1 * var(--pad));max-width:none}
.head .art-hand{width:170px}
.head .art-tripod{width:96px}
.eyebrow{font:800 19px/1.1 var(--xcond);letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}
.head h2{font:400 clamp(27px,2.4vw,35px)/1.1 var(--fat)}
.head p:not(.eyebrow){margin-top:10px;font-weight:500;font-size:17px;line-height:1.4}
.slots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);min-width:0}
.c{background:var(--cell);padding:var(--pad);min-width:0;grid-column:span 6}
.w3{grid-column:span 3}.w4{grid-column:span 4}.w5{grid-column:span 5}.w6{grid-column:span 6}.w7{grid-column:span 7}.w12{grid-column:span 12}
.c h3{font:800 23px/1.15 var(--cond);margin-bottom:6px}
.c p{color:var(--milk)}
.row>.c{grid-column:auto;padding:12px}
.row>.c .caption{margin-top:8px;color:var(--milk)}

/* The no. This one row runs the full width, because it's the reason for the page. */
.row.wide .head{grid-column:1/-1}
.row.wide .head h2{font-size:clamp(38px,6.1vw,92px);line-height:1.03;letter-spacing:-.005em}
.row.wide>.problem-words{grid-column:auto;padding:var(--pad);display:flex;flex-direction:column;gap:14px;font-size:18px;line-height:1.45}
.gear{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);min-width:0}
.gear-cell{grid-column:auto;padding:14px var(--pad) var(--pad)}
.gear-cell figcaption{font:800 19px/1.1 var(--xcond);letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.gear-cell svg{width:100%;height:auto;overflow:visible}
.lab{font:700 17px var(--cond);fill:var(--milk)}
.big-lab{font:800 22px var(--cond)}
.ink{fill:var(--ink);color:var(--ink)}
.lab.ink{fill:var(--ink)}
.milk{color:var(--milk)}
.url{font:600 13px var(--sans);fill:var(--ink)}

/* Studio cards */
.card{display:grid;grid-template-columns:clamp(150px,13vw,190px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px;align-items:start}
.card .pic{grid-row:1 / span 2}
.card .pic svg{width:100%;height:auto}

/* Event site */
.site-cell{margin:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:center}
.site-pic svg{width:100%;height:auto;box-shadow:0 0 0 3px var(--ink)}
.site-pic figcaption{font:600 14.5px/1.3 var(--sans);margin-top:8px;color:var(--soft)}

/* Coming later */
.slots.dashed{gap:0;padding:var(--gap);background-image:repeating-linear-gradient(90deg,var(--soft) 0 10px,transparent 10px 18px),repeating-linear-gradient(90deg,var(--soft) 0 10px,transparent 10px 18px),repeating-linear-gradient(0deg,var(--soft) 0 10px,transparent 10px 18px),repeating-linear-gradient(0deg,var(--soft) 0 10px,transparent 10px 18px);background-size:100% 2px,100% 2px,2px 100%,2px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}
.slots.dashed .c{background:none}

/* Steps */
.step .num{font:400 44px/1 var(--fat);color:var(--apricot);margin-bottom:8px}

/* What you'll need */
.need .c{grid-column:span 4;line-height:1.4}
.need .key{grid-column:span 12;background:var(--ink);font-size:18px;line-height:1.42}
.need .key strong{display:block;font:400 clamp(25px,2.4vw,34px)/1.1 var(--fat);color:var(--apricot);margin-bottom:8px}
.note{grid-column:1/-1;background:var(--cell-2);padding:14px var(--pad);font-weight:500}

/* Clips and listings */
.clip{padding:0;display:flex;flex-direction:column;text-align:left;border:0;cursor:pointer;background:var(--cell);color:var(--milk);grid-column:span 3}
.clip:hover .meta b{text-decoration:underline}
.clip .thumb{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:#000;width:100%}
.clip .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.clip .thumb::before{content:"";position:absolute;left:0;bottom:0;width:38px;height:38px;background:var(--ink);z-index:1}
.clip .thumb::after{content:"";position:absolute;left:14px;bottom:10px;border-left:15px solid var(--milk);border-top:9px solid transparent;border-bottom:9px solid transparent;z-index:2}
.clip .meta{display:block;padding:11px 14px 14px}
.clip b{display:block;font:800 19px/1.18 var(--cond)}
.clip .meta span{font:700 18px/1.3 var(--xcond);letter-spacing:.04em;color:var(--soft)}
.clip.long{grid-column:span 6}
.clip.long .thumb{aspect-ratio:2.5/1}
.listing .day{font:800 26px/1.05 var(--xcond);letter-spacing:.012em;margin-bottom:7px}
.listing h3{font:800 21px/1.18 var(--cond)}

/* Early access */
.ask{background:var(--slot);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
html[data-tone="live"] .ask{background:var(--apricot)}
.ask-words{padding:clamp(24px,3vw,44px) var(--pad)}
.ask-words h2{font:400 clamp(35px,3.6vw,54px)/1.05 var(--fat);margin-bottom:14px}
.ask-words p{font-weight:500;font-size:18px;line-height:1.42;max-width:50ch;margin-top:10px}
.ask-form{margin:var(--pad);margin-left:0;background:var(--ink);color:var(--milk);padding:var(--pad);align-self:start}
label{display:block;font:700 18px/1.2 var(--cond);margin:0 0 5px}
.field{margin-bottom:15px}
input,select{display:block;width:100%;min-height:48px;background:var(--milk);color:var(--ink);border:0;border-radius:0;padding:10px 12px;font-size:17px}
input::placeholder{color:#6d5563}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 13px) 50%;background-size:7px 7px;background-repeat:no-repeat}
.err,.form-err{color:var(--rose);font:600 15.5px/1.3 var(--sans);margin-top:5px}
.form-err{margin-top:12px}
.check iframe{display:block;width:100%;height:2px;border:0;color-scheme:light;background:transparent}
.check{margin-bottom:6px}
.send{width:100%;background:var(--apricot);color:var(--ink);font:800 20px/1.1 var(--cond);padding:15px;border:0;cursor:pointer}
.send:hover{background:var(--milk)}
.send[aria-busy="true"]{background:var(--soft);cursor:progress}
.okay{font:800 19px/1.25 var(--cond);margin-top:12px}
.okay:empty{margin:0}
.okay:focus{outline:0}
.ask-form.sent #form{display:none}
.ask-form.sent .okay{margin-top:0;font-size:23px}
.priv{font-size:14.5px;line-height:1.4;margin-top:12px;color:var(--soft)}

/* A clip or replay opened from a card */
.viewer{margin:auto;padding:0;border:0;background:var(--ink);color:var(--milk);width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.viewer::backdrop{background:rgb(18 5 16 / .8)}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 14px}
.viewer-bar h2{font:800 22px/1.15 var(--cond)}
.viewer-close{background:var(--milk);color:var(--ink);border:0;font:800 17px/1 var(--cond);padding:10px 14px;cursor:pointer}
.viewer-host{background:#000;aspect-ratio:16/9;max-height:calc(100dvh - 110px);margin:auto}
.viewer.tall{width:min(440px,calc(100vw - 32px))}
.viewer.tall .viewer-host{aspect-ratio:9/16}
.viewer-host mux-player{display:block;width:100%;height:100%;--media-object-fit:contain}
.viewer-oops{padding:16px}

/* Footer */
.foot{padding:var(--pad) var(--gutter) 28px;display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:flex-end}
.foot p{font-size:16px;color:var(--soft)}
.foot .word{font-size:25px;color:var(--milk)}
.foot .first{color:var(--milk);font-weight:600}

.stick{display:none}

/* Plain pages: privacy notice and not found */
.plain-page{max-width:720px;padding:clamp(24px,5vw,56px) var(--gutter) 40px;margin:0 auto}
.plain-page h1{font:400 clamp(34px,5vw,54px)/1.06 var(--fat);margin-bottom:12px}
.plain-page h2{font:800 25px/1.2 var(--cond);margin:28px 0 6px}
.plain-page p,.plain-page ul{margin-bottom:10px;max-width:62ch}
.plain-page ul{list-style:square;padding-left:22px}
.plain-page .dated{color:var(--soft);font-size:16px}
.lost{max-width:760px;padding:clamp(40px,10vw,110px) var(--gutter);margin:0 auto}
.lost .marker{background:var(--apricot);color:var(--ink);margin-bottom:16px}
.lost h1{font:400 clamp(38px,6vw,72px)/1.05 var(--fat);margin-bottom:14px}
.lost p{font-size:19px;max-width:48ch;margin-bottom:22px}
.lost .cta{background:var(--apricot);color:var(--ink)}
.lost .cta:hover{background:var(--milk);color:var(--ink);box-shadow:none}

/* Narrower screens: the guide folds into one column */
@media (max-width:1179px){
  .slot{display:flex;flex-direction:column}
  .ruler{grid-template-columns:auto minmax(0,1fr)}
  .today{padding-left:0;padding-right:16px}
  .track{margin-left:0}
  .pitch{display:contents}
  .pitch h1{order:1;padding:var(--pad) var(--pad) 12px}
  .stage{order:2;padding:0 var(--pad) 14px}
  .pitch .sub{order:3;padding:0 var(--pad)}
  .pitch .push{order:4;padding:14px var(--pad) var(--pad)}
  html[data-watch="1"] .stage{order:0;padding-top:var(--pad)}
  html[data-watch="1"] .show-head{order:1;padding:0 var(--pad)}
  html[data-watch="1"] .pitch .sub{order:2;padding-top:10px}
  html[data-watch="1"] .pitch h1{order:3;padding:10px var(--pad) 0}
  html[data-watch="1"] .pitch .push{order:4;padding-top:12px}
  .times{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"now now" "earlier next"}
  html[data-watch="1"] .times{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr)}
  .row.wide>.problem-words{grid-column:1/-1}
  .row.wide .head{grid-column:auto}
  .head .art{display:none}
  .head.crowd{padding-bottom:var(--pad)}
  .ask{grid-template-columns:minmax(0,1fr)}
  .ask-form{margin:0 var(--pad) var(--pad)}
  .demo-room{grid-template-columns:minmax(0,1fr)}
  .phones{grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .phone .body{padding:3px 6px 3px 3px;border-radius:7px}
  .phone .tag{position:static;display:block;background:none;padding:4px 1px 0;font-size:14px;line-height:1.12}
  .phone .tag b{display:block}
  .phone .tag span{display:block;font-weight:600}
  .redframe{border-width:3px;border-radius:7px}
  .demo-arrow{order:0;width:44px;min-width:44px;height:24px;transform:scaleX(-1)}
}
@media (max-width:759px){
  html{scroll-padding-top:6px}
  .status{font-size:14px;padding:4px 16px}
  .nav{padding-top:7px;padding-bottom:6px;gap:2px 12px}
  .brand{margin-right:auto;gap:7px}
  .brand svg{width:28px;height:28px}
  .word{font-size:22px}
  .links{display:contents}
  .links a{font-size:16.5px;padding:5px 0}
  .links .go{order:1;padding:7px 11px;font-size:16.5px}
  .links a:not(.go){order:2;padding:4px 0}
  .links a:not(.go)+a:not(.go){margin-left:10px}
  .nav::after{content:"";order:1;flex-basis:100%;height:0}
  .track{display:none}
  .today{letter-spacing:.04em;font-size:17px;padding-bottom:5px}
  .today-time{display:inline}
  .ruler{min-height:22px}
  .pitch h1{font-size:clamp(27px,7.6vw,38px);padding-top:13px;padding-bottom:10px}
  .pitch .sub{font-size:17px}
  .times,html[data-watch="1"] .times{grid-template-columns:minmax(0,1fr);grid-template-areas:"now" "next" "earlier"}
  html[data-watch="1"] .times{grid-template-areas:"next" "earlier"}
  .slots{grid-template-columns:minmax(0,1fr)}
  .c,.w3,.w4,.w5,.w6,.w7,.w12,.need .c,.need .key{grid-column:1/-1}
  .c{padding:14px 16px 16px;font-size:16.5px;line-height:1.42}
  .c h3{font-size:22px;margin-bottom:4px}
  .slots.clips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clip,.clip.long{grid-column:span 1}
  .clip.long .thumb{aspect-ratio:5/3}
  .demo-bar{padding-bottom:7px;gap:3px 10px}
  .demo-flag{font-size:16px}
  .demo-event{font-size:14px}
  .lower{padding:4px 9px 4px 8px;border-left-width:5px;left:3%;bottom:5%}
  .lower b{font-size:15px}
  .lower span{font-size:12.5px}
  .air-tag{left:6px;top:6px;font-size:15px;padding:4px 7px}
  .demo-line{font-size:15.5px}
  .demo-line b{font-size:21px}
  .gear{grid-template-columns:minmax(0,1fr)}
  .row.wide .head h2{font-size:clamp(36px,10.6vw,60px)}
  .row.wide>.problem-words{font-size:17px}
  .card{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px}
  .card .pic{grid-row:1}
  .card h3{align-self:center;margin:0}
  .card p{grid-column:1/-1;margin-top:8px}
  .site-cell{grid-template-columns:minmax(0,1fr);gap:12px}
  .slots.dashed .c{padding:12px 14px}
  .steps .c{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 8px;padding:10px 14px 12px}
  .steps .num{font-size:30px;margin:0}
  .steps h3{font-size:21px;margin-bottom:2px}
  .need .c{padding:11px 16px}
  .need .key{padding:15px 16px}
  .who .c{padding:10px 16px 12px}
  .who h3{font-size:21px;margin-bottom:2px}
  .foot{padding-bottom:20px}
  html[data-tone="live"] .links .go,html[data-tone="live"] .pitch .cta{display:none}
  html[data-tone="live"] .stick{display:block;position:sticky;bottom:0;z-index:5;background:var(--ink);padding:8px 16px}
  .stick a{display:block;background:var(--apricot);color:var(--ink);text-align:center;text-decoration:none;font:800 20px/1.1 var(--cond);padding:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,.slot,.t.now,.word i,.brand .lit,.redframe{transition:none}
}