/* ReelStyles: a board of films. Dark plum ground so the loops carry the colour; tiles separated by tone and 8px gaps, never lines.
   Brand: plum #1A1423, coral #FF5A36, yellow #FFD23F, cream #FFF4E8. Type: Inter (SIL OFL, fonts/Inter-OFL.txt), self-hosted variable latin subset; Switzer dropped 2026-10-16 (ITF FFL unclear on self-hosting). */
@font-face{font-family:Inter;src:url(fonts/inter-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#120d18;--s1:#1b1424;--s2:#241b2f;--s3:#30263d;
  --ink:#fff4e8;--muted:#cbc0cf;--plum:#1a1423;--coral:#ff5a36;--coral-2:#ff7552;--yellow:#ffd23f;--cream:#fff4e8;
  --r:8px;--gap:8px;--m:clamp(8px,1.1vw,16px);--sec:clamp(80px,10vw,168px);
  --t-small:clamp(.875rem,.85rem + .1vw,.9375rem);--t-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);--t-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --t-sub:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);--t-head:clamp(2rem,1.3rem + 3vw,4rem);--t-disp:clamp(2.6rem,1rem + 5.6vw,6rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-padding-top:4.5rem;scrollbar-color:var(--s3) var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--t-body)/1.55 Inter,system-ui,sans-serif;letter-spacing:-.005em;color:var(--ink);background:var(--bg);font-variant-numeric:tabular-nums}
::selection{background:var(--coral);color:var(--plum)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
/* light panels (coral, yellow, cream): plum ring, yellow would be ~2:1 or invisible */
.t-lead :focus-visible,.x-main :focus-visible,.t-studio :focus-visible,.t-facts :focus-visible,.c-text :focus-visible,.c-rows .us :focus-visible,.p-main :focus-visible,.acc details[open] :focus-visible,.vs .us :focus-visible,.vs-cards .us :focus-visible,.stages :focus-visible{outline-color:var(--plum)}
a{color:var(--yellow);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--ink)}
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:.98;text-wrap:balance;margin:0}
h1{font-size:var(--t-disp)}
h2{font-size:var(--t-head);margin-bottom:.4em}
h3{font-size:var(--t-lead);letter-spacing:-.02em;line-height:1.1}
p{margin:0 0 .9em}
.small,.meta,.count{font-size:var(--t-small);color:var(--muted)}
pre,code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
pre{background:var(--plum);color:var(--cream);padding:.9rem 1rem;border-radius:var(--r);overflow-x:auto;font-size:.9375rem;white-space:pre-wrap;margin:0 0 1em}
code{font-size:.9em}
.skip,.sr{position:absolute;left:-9999px}
.skip:focus{left:var(--m);top:var(--m);z-index:9;background:var(--yellow);color:var(--plum);padding:.5rem .9rem;border-radius:var(--r)}

/* bar, header, buttons */
header{position:sticky;top:0;z-index:5;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.6rem var(--m);background:var(--bg)}
.logo,.mark{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:1.25rem;letter-spacing:-.03em}
.logo b,.mark b{font-weight:600}.logo span,.mark span{color:var(--coral)}
.logo img,.mark img{display:block}
header nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem)}
header nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:var(--t-small);padding:.6rem 0}
header nav a:hover{color:var(--ink)}
header nav .cta,.buy{display:inline-block;text-align:center;background:var(--coral);color:var(--plum);font-weight:600;text-decoration:none;border-radius:var(--r);transition:background-color .16s var(--ease),transform .16s var(--ease)}
header nav .cta{padding:.55rem .95rem;white-space:nowrap}
.vs-cards{display:none}
.buy{padding:.95rem 1.4rem;font-size:var(--t-body);margin:0 0 .8rem}
.buy:hover,header nav .cta:hover{background:var(--coral-2);color:var(--plum)}
.buy:active,header nav .cta:active{transform:scale(.98)}
.bar{margin:0 calc(-1 * var(--m)) var(--gap);padding:.6rem var(--m);background:var(--coral);color:var(--plum);font-weight:600;font-size:var(--t-small)}
.buy[hidden],.soon[hidden],[data-left-line][hidden],.social a[hidden],.card[hidden]{display:none}
.buy.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--s3)}
.buy.ghost:hover{background:var(--s2);color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:clamp(24px,3vw,40px)}
.cta-row .buy{margin:0}
.cta-row .small{flex-basis:100%;margin:0;color:var(--muted)}

main{max-width:1680px;margin:0 auto;padding:0 var(--m)}
main>section{margin-top:var(--sec)}
main>section.hero{margin-top:var(--gap)}
.intro{font-size:var(--t-lead);line-height:1.35;max-width:38ch;color:var(--ink)}

/* tiles with loops */
.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--s2)}
.tile{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--s2);color:var(--ink);text-decoration:none}
.tile video{height:100%;transition:transform .6s var(--ease)}
.tile:hover video{transform:scale(1.035)}
.tile.v video,video.vert{aspect-ratio:9/16}
.tile span{position:absolute;left:8px;bottom:8px;padding:.2rem .6rem;border-radius:6px;background:rgba(26,20,35,.88);font-size:var(--t-small);font-weight:500}
.tile:hover span{background:var(--coral);color:var(--plum)}
.soon-card{display:grid;place-items:center;aspect-ratio:16/9;background:var(--s2);color:var(--muted);font-weight:500;border-radius:var(--r)}

/* hero */
.hero>*{border-radius:var(--r)}
.t-head{grid-column:1/8;background:var(--s1);padding:clamp(20px,2.4vw,36px);display:flex;flex-direction:column;justify-content:flex-end}
.t-head h1{max-width:14ch}
.eyebrow{margin:0 0 .9rem;color:var(--coral);font-weight:600;font-size:var(--t-small);letter-spacing:.02em}
.t-lead{grid-column:8/13;background:var(--coral);color:var(--plum);padding:clamp(20px,2vw,32px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.t-lead>p:first-child{font-size:clamp(1.125rem,1rem + .45vw,1.375rem);line-height:1.4;font-weight:500;max-width:40ch}
.t-lead .buy{background:var(--plum);color:var(--cream);margin:.4rem 0 .7rem}
.t-lead .buy:hover{background:#000;color:var(--cream)}
.t-lead .small{color:var(--plum);margin:0;font-weight:500}
.t-lead .small a{color:var(--plum);font-weight:700;text-decoration-thickness:2px}
.t-big{grid-column:1/10;grid-row:2}
.t-tall{grid-column:10/13;grid-row:2}
.fill{position:relative}.fill video{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.t-facts{grid-column:10/13;grid-row:3;list-style:none;margin:0;padding:clamp(16px,1.6vw,24px);background:var(--cream);color:var(--plum);display:grid;gap:.35rem;font-size:var(--t-small);align-content:end}
.t-facts b{font-size:1.5em;letter-spacing:-.03em;margin-right:.25rem}
.t-s{grid-column:span 3;grid-row:3}
.proof{margin:1rem 0 0;color:var(--ink);font-size:var(--t-small);max-width:110ch}

/* marquee: the one loud move */
.marquee{overflow:hidden;margin:var(--sec) calc(-1 * var(--m)) 0;white-space:nowrap;font-size:var(--t-disp);font-weight:600;letter-spacing:-.04em;line-height:1.1;color:#8a7b98}
.marquee div{display:inline-block;animation:mq 80s linear infinite}
.marquee:hover div{animation-play-state:paused}
.still .marquee div{animation:none}
header nav .pause{font:inherit;font-weight:500;font-size:var(--t-small);color:var(--muted);background:none;border:0;padding:.6rem 0;cursor:pointer}
header nav .pause:hover,header nav .pause[aria-pressed="true"]{color:var(--ink)}
header nav .pause[hidden]{display:none}
.h1-sub{display:block;font-size:var(--t-small);font-weight:500;letter-spacing:0;color:var(--muted);margin-top:.3rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* why */
.why>div{border-radius:var(--r);padding:clamp(24px,3vw,48px)}
.t-problem{grid-column:1/8;background:var(--s1)}
.t-studio{grid-column:8/13;background:var(--yellow);color:var(--plum)}
.why p{max-width:52ch}
.why h2{font-size:var(--t-sub);margin-bottom:.8em;max-width:16ch}

/* use cases */
.uses>h2{margin-bottom:.6em}
.use{margin-top:clamp(28px,3.4vw,56px);grid-auto-flow:dense}
.use .u-text{grid-column:1/5;grid-row:1/3;background:var(--s1);border-radius:var(--r);padding:clamp(20px,2.4vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.use .u-text h3{font-size:var(--t-sub);letter-spacing:-.03em}
.use .u-text p{margin:0;color:var(--muted);max-width:34ch}
.use .tile{grid-column:span 4}
.use.flip .u-text{grid-column:9/13;background:var(--s2)}
.use.vrow .u-text{grid-row:1}
.use.vrow .tile{grid-column:span 2}

/* how: one bar */
.stages{display:flex;gap:var(--gap);list-style:none;padding:0;margin:0}
.stages li{border-radius:var(--r);padding:clamp(20px,2vw,32px);min-height:clamp(220px,22vw,320px);display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.stages li:nth-child(1){flex:1;background:var(--cream);color:var(--plum)}
.stages li:nth-child(2){flex:1.4;background:var(--yellow);color:var(--plum)}
.stages li:nth-child(3){flex:1.2;background:var(--s2)}
.stages b{font-size:var(--t-lead);font-weight:600;letter-spacing:-.02em}
.stages p,.stages pre{margin:0}

/* tables */
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{text-align:left;vertical-align:top;padding:1rem 1.1rem}
th{font-weight:600}
.vs .scroll{overflow-x:auto;border-radius:var(--r);margin:1.6rem 0 .8rem}
.vs table{min-width:860px;font-size:var(--t-body)}
.vs thead th{font-size:var(--t-lead);letter-spacing:-.02em;line-height:1.15;background:var(--s2)}
.vs thead th a{color:var(--ink);text-decoration:none}.vs thead th a:hover{color:var(--yellow)}
.vs tbody th{color:var(--muted);font-weight:500;width:14%}
.vs tbody tr:nth-child(odd)>*{background:var(--s1)}
.vs .us,.vs tbody tr>.us{background:var(--coral);color:var(--plum)}
.vs thead .us a{color:var(--plum)}
.vs th:first-child{position:sticky;left:0;z-index:1;background:var(--s2)}
.vs tbody tr:nth-child(even) th:first-child{background:var(--bg)}

/* cost: split */
.cost>*{border-radius:var(--r)}
.c-text{grid-column:1/7;background:var(--cream);color:var(--plum);padding:clamp(24px,3vw,48px)}
.c-text h2{max-width:12ch;margin-bottom:.7em}
.c-text p{max-width:46ch}.c-text .small{color:#5b4f63}
.c-text a{color:var(--plum)}
.c-rows{grid-column:7/13;background:var(--s1);overflow:hidden;font-size:var(--t-lead);letter-spacing:-.01em}
.c-rows th{font-size:var(--t-small);color:var(--muted);font-weight:500;padding-top:1.4rem}
.c-rows td{padding:1.3rem 1.2rem}
.c-rows tbody tr:nth-child(odd) td{background:var(--s2)}
.c-rows a{color:var(--ink)}
.c-rows .us td{background:var(--yellow);color:var(--plum);font-weight:600}

/* price ladder */
.ladder{display:flex;gap:var(--gap);list-style:none;padding:0;margin:1.6rem 0}
.ladder li{flex:1;background:var(--s1);border-radius:var(--r);padding:clamp(16px,1.8vw,28px);min-height:clamp(140px,14vw,200px);display:flex;flex-direction:column;justify-content:space-between}
.ladder b{font-size:var(--t-head);font-weight:600;letter-spacing:-.04em;line-height:1}
.ladder span{color:var(--muted);font-size:var(--t-small)}
.ladder li:first-child{background:var(--s2)}
.ladder .now{background:var(--coral);color:var(--plum)}.ladder .now span{color:var(--plum)}
.ladder .now span::after{content:" · open now";font-weight:600}
.ladder .closed{background:var(--bg);color:var(--muted)}
.ladder .closed span::after{content:" · sold out"}

/* FAQ accordion */
.qa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.qa>h2{grid-column:1/5;align-self:start;position:sticky;top:88px}
.acc{grid-column:5/13}
.acc details{background:var(--s1);border-radius:var(--r);margin-bottom:var(--gap);transition:background-color .2s var(--ease)}
.acc summary{list-style:none;cursor:pointer;position:relative;padding:1.3rem 3.6rem 1.3rem 1.4rem;font-weight:500;font-size:var(--t-body);line-height:1.35;min-height:64px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before,.acc summary::after{content:"";position:absolute;right:1.5rem;top:50%;width:16px;height:3px;margin-top:-1.5px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease)}
.acc summary::after{transform:rotate(90deg)}
.acc details[open]{background:var(--coral);color:var(--plum)}
.acc details[open] summary::after{transform:rotate(0)}
.acc details>div{padding:0 1.4rem 1.4rem;max-width:62ch}
.acc details a{color:inherit}
.acc>p{margin-top:1rem}

/* catalog */
.catalog>h2{margin-bottom:.5em}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap);margin-bottom:1rem}
.filters select{padding:.75rem 2.2rem .75rem .9rem;min-height:48px;font:inherit;font-size:var(--t-small);color:var(--ink);background:var(--s2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff4e8' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .9rem center;border:0;border-radius:var(--r);appearance:none}
.filters .count{margin:0 0 0 .5rem}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--s1);border-radius:var(--r);overflow:hidden;transition:background-color .2s var(--ease)}
.card video{transition:transform .6s var(--ease)}
.card:hover{background:var(--s3)}
.card .name{display:block;font-weight:600;padding:.75rem .9rem 0;letter-spacing:-.01em}
.card .meta{display:block;padding:0 .9rem .8rem}

/* closing action */
.close{grid-template-rows:clamp(260px,26vw,380px)}
.close>*{border-radius:var(--r);overflow:hidden}
.x-side{grid-column:span 2;background:var(--s2)}
.x-fill{background:var(--yellow)}
.x-main{grid-column:span 8;background:var(--coral);color:var(--plum);padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.x-main h2{max-width:14ch}
.x-main .buy{background:var(--plum);color:var(--cream)}
.x-main .small,.x-main .small a{color:var(--plum);font-weight:600}
.x-main .buy:hover{background:#000;color:var(--cream)}

/* style pages */
.back{margin:1rem 0}
.back a{color:var(--muted);text-decoration:none}.back a:hover{color:var(--ink)}
.style>*{border-radius:var(--r);overflow:hidden}
.style{align-items:start}
.s-main{grid-column:1/10}
.s-info{grid-column:10/13;background:var(--s1);padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;justify-content:flex-end}
.s-info h1{font-size:clamp(2rem,1.2rem + 1.9vw,3.25rem);margin-bottom:.3em;overflow-wrap:break-word}
.has-v .s-info h1{font-size:clamp(2.2rem,1.4rem + 2.6vw,4rem)}
.has-v{align-items:stretch}.has-v .s-v{grid-column:10/13}
.has-v .s-info{grid-column:1/13;display:grid;grid-template-columns:5fr 7fr;gap:0 clamp(24px,4vw,64px);align-items:end}
.has-v .s-info>h1,.has-v .s-info>.meta{grid-column:1}.has-v .s-info>p:not(.meta){grid-column:2}.has-v .s-info>h1{grid-row:1}.has-v .s-info>.meta{grid-row:2}
.s-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--gap);margin-top:var(--gap)}
.s-detail>div{background:var(--s1);border-radius:var(--r);padding:clamp(20px,2.2vw,32px)}
.s-detail h2,.more h2{font-size:var(--t-lead);letter-spacing:-.02em}
.s-detail ul{padding-left:1.1rem;margin:0}.s-detail li{margin-bottom:.5rem}
.credit{color:var(--muted);margin:0}
.more{margin-top:var(--sec)}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}

/* reading pages */
.doc{max-width:46rem;padding:clamp(24px,4vw,64px) 0 0}
.doc>h1{font-size:var(--t-head);margin-bottom:.5em}
.doc h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);margin:2.2em 0 .6em}
.doc h3{font-size:1.25rem;margin:1.6em 0 .5em}
.doc .lead{font-size:var(--t-lead);line-height:1.4}
.doc li{margin-bottom:.45rem}
.doc dt{font-weight:600;margin-top:1.2rem}.doc dd{margin:0;color:var(--muted)}
.doc .acc{margin-top:2rem}
.doc.wide{max-width:none}
.doc.wide>p,.doc.wide>ul,.doc.wide>.acc{max-width:46rem}
/* blog posts */
.post img{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:var(--r);margin:1.6rem 0}
.post .scroll{overflow-x:auto;border-radius:var(--r);margin:1.4rem 0}
.post table{min-width:560px}.post thead th{background:var(--s2)}.post tbody tr:nth-child(odd)>*{background:var(--s1)}.post tbody th{color:var(--muted);font-weight:500}
.post-item{margin-top:2.4rem}.post-item h2{margin:0 0 .2em}.post-item h2 a{color:var(--ink);text-decoration:none}.post-item h2 a:hover{color:var(--yellow)}.post-item p{margin:.3em 0}
.tiers{margin:2rem 0}
.tiers article{border-radius:var(--r);padding:clamp(20px,2.4vw,40px)}
.p-main{grid-column:1/6;background:var(--cream);color:var(--plum)}
.p-main h2,.p-steps h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);margin:0 0 .4em}
.p-main .small,.p-main .soon{color:#5b4f63}
.p-main .buy{background:var(--coral)}
.price{font-size:var(--t-head);font-weight:600;letter-spacing:-.04em;line-height:1;margin:.2em 0 .5em}
.p-steps{grid-column:6/13;background:var(--s1)}
.p-steps .ladder{flex-wrap:wrap}.p-steps .ladder li{flex:1 1 40%;background:var(--s2)}.p-steps .ladder li:first-child{background:var(--s3)}
.format{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);background:var(--s1);border-radius:var(--r);padding:clamp(20px,2.4vw,40px);margin-top:var(--gap)}
.format h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem)}
.format ol{padding-left:1.2rem}.format li{margin-bottom:.4rem}
.format dt{font-weight:600;margin-top:.8rem}.format dd{margin:0;color:var(--muted)}

/* footer: the mark, large */
footer{max-width:1680px;margin:var(--sec) auto 0;padding:clamp(32px,4vw,64px) var(--m) 2rem;background:var(--s1)}
footer .mark{font-size:clamp(3rem,1rem + 8vw,9rem);letter-spacing:-.045em;gap:clamp(.6rem,1.5vw,1.6rem);line-height:1}
footer .mark img{width:clamp(56px,7vw,120px);height:auto}
footer nav{display:flex;flex-wrap:wrap;gap:1rem 3rem;margin:2.4rem 0 1.6rem}
footer nav p{display:flex;flex-direction:column;gap:.2rem;margin:0}
footer nav a{color:var(--ink);text-decoration:none;font-size:var(--t-small);padding:.35rem 0}
footer nav a:hover{color:var(--yellow)}

/* motion: rise in once; the default is visible (app.js only adds .pre below the fold) */
.rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.pre{opacity:0;transform:translateY(24px)}

@media (max-width:1099px){
  .grid,.row4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .use .u-text{grid-column:1/-1!important;grid-row:auto!important}
  .use .tile{grid-column:span 6!important;grid-row:auto}
  .use.vrow .tile{grid-column:span 3!important}
}
@media (max-width:859px){
.cta-row .buy{flex:1 1 100%}
  header nav .wide,header nav .pr{display:none}
  .vs .scroll{display:none}
  .vs-cards{display:grid;gap:var(--gap);margin:1.4rem 0 .8rem}
  .vs-cards article{background:var(--s1);border-radius:var(--r);padding:20px}
  .vs-cards article.us{background:var(--coral);color:var(--plum)}
  .vs-cards h3 a{color:inherit;text-decoration:none}
  .vs-cards dt{font-size:var(--t-small);margin-top:.8rem;font-weight:600}.vs-cards dd{margin:0}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board>*{grid-column:1/-1!important;grid-row:auto!important}
  .t-head{min-height:0;padding-top:28px}
  .hero .t-big{order:1}.hero .t-lead{order:2}
  .t-lead .buy{order:-1;width:100%;margin:0 0 .5rem}.t-lead .small{order:-1;margin-bottom:1rem}
  .hero .t-tall{order:4;grid-column:1!important;grid-row:span 3!important}
  .hero .t-s{order:5;grid-column:2!important}
  .hero .t-facts{order:6}
  .use .tile,.use.vrow .tile{grid-column:span 1!important}
  .stages,.ladder{flex-direction:column}
  .stages li{min-height:0}
  .qa{display:block}.qa>h2{position:static}
  .grid,.row4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .close{grid-template-rows:auto}
  .x-main{order:-1}.x-side{grid-column:span 1!important;height:120px}
  .s-detail,.format{grid-template-columns:1fr}
  .has-v .s-v{grid-column:1!important;position:static}.has-v .s-v video{position:static}.has-v .s-info{display:block}
  .p-steps .ladder li{flex:auto}
  .vs th:first-child{width:auto}
}
@media (max-width:420px){.tile span{font-size:.8125rem;left:6px;bottom:6px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .tile:hover video{transform:none}
}