/* torchdeck storyboard (docs/design/torchdeck-site.md). The way of drawing is the template's
   (storyboards/_template.html): a desktop frame .d is 1920x1080, a phone frame .p is 390x844, scaled to fit.
   Inside a frame every size is written in real pixels of that screen through --u (one real pixel):
   style="--x:96;--y:180;--w:900" on .a places a thing, .t with --s sets a type size. */

:root {
  --night: #030714; --white: #ffffff; --torch: #FC6F18; --slate: #A3ACC2; --mist: #F3F4F8;
  --burnt: #C2410C; --muted: #4B5570; --line: #D9DCE6; --soft: #E6E8EF; --raise: rgba(255,255,255,.14);
  --page: #e8e9ec; --note: #1d2230;
  --display: "Golos Text", "Inter", system-ui, sans-serif; --text: "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #15171c; --note: #d6d9e0; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--note); font: 16px/1.5 var(--text); }
.wrap { max-width: 1500px; margin: 0 auto; padding: 32px 16px 96px; }
h1.doc { font: 600 40px/1.1 var(--display); margin: 0 0 12px; }
.lede { max-width: 78ch; margin: 0 0 14px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 8px; padding: 0; list-style: none; }
.toc a { color: inherit; }
h2.page { font: 600 28px/1.2 var(--display); margin: 72px 0 8px; border-top: 1px solid currentColor; padding-top: 16px; }
p.pagenote { max-width: 90ch; margin: 0 0 8px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.24fr); gap: 24px; align-items: start; margin: 28px 0 8px; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; } .row .p { max-width: 320px; } }
.num { font: 600 14px/1 ui-monospace, monospace; margin: 0 0 6px; }
.moves { margin: 10px 0 0; max-width: 92ch; font-size: 15px; }
.moves b { font-weight: 600; }
.replay { font: 500 13px/1 var(--text); margin-left: 10px; padding: 4px 8px; border: 1px solid currentColor; border-radius: 4px; background: none; color: inherit; cursor: pointer; }

/* Frames */
.d, .p { position: relative; overflow: hidden; background: var(--night); color: var(--white); font-family: var(--text); container-type: inline-size; }
.d { aspect-ratio: 1920 / 1080; --u: calc(100cqw / 1920); }
.p { aspect-ratio: 390 / 844; border-radius: 10px; --u: calc(100cqw / 390); }
.d.light, .p.light { background: var(--white); color: var(--night); }
.d.mist, .p.mist { background: var(--mist); color: var(--night); }
.d *, .p * { --x: 0; --y: 0; }
.a { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); }
.w { width: calc(var(--w) * var(--u)); }
.h { height: calc(var(--h) * var(--u)); }
.t { font-size: calc(var(--s) * var(--u)); line-height: 1.5; margin: 0; }
.g { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.04; }
.tight { line-height: 1.12; }
.sl { color: var(--slate); } .so { color: var(--soft); } .mu { color: var(--muted); } .bu { color: var(--burnt); }
.to { color: var(--torch); } .ni { color: var(--night); }
.b6 { font-weight: 600; }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: inline-block; }
img { display: block; }
svg.over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cover { object-fit: cover; object-position: top center; width: 100%; height: 100%; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; height: calc(64 * var(--u)); padding: 0 calc(30 * var(--u));
  border-radius: calc(8 * var(--u)); background: var(--torch); color: var(--night); font: 600 calc(19 * var(--u))/1 var(--text); white-space: nowrap; }
.btn.dark { background: var(--night); color: var(--white); }
.p .btn { height: calc(52 * var(--u)); font-size: calc(17 * var(--u)); padding: 0 calc(20 * var(--u)); }
.lk { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }

/* Header, desktop and phone */
.hdr { position: absolute; left: 0; right: 0; top: 0; height: calc(96 * var(--u)); display: flex; align-items: center; gap: calc(40 * var(--u)); padding: 0 calc(96 * var(--u)); z-index: 9; }
.hdr .logo { height: calc(36 * var(--u)); width: auto; }
.hdr nav { margin-left: auto; display: flex; gap: calc(38 * var(--u)); font: 500 calc(17 * var(--u))/1 var(--text); color: var(--soft); }
.hdr nav .on { color: var(--white); text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--torch); text-decoration-thickness: 2px; }
.hdr .cta { display: flex; flex-direction: column; justify-content: center; height: calc(60 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--torch); color: var(--night); }
.hdr .cta b { font: 600 calc(17 * var(--u))/1.1 var(--text); }
.hdr .cta small { font: 500 calc(13 * var(--u))/1.3 var(--text); }
.light .hdr nav, .mist .hdr nav { color: var(--muted); }
.light .hdr nav .on, .mist .hdr nav .on { color: var(--night); }
.p .hdr { height: calc(64 * var(--u)); padding: 0 calc(20 * var(--u)); }
.p .hdr .logo { height: calc(24 * var(--u)); }
.p .hdr .menu { margin-left: auto; font: 600 calc(16 * var(--u))/1 var(--text); padding: calc(10 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--raise); border-radius: calc(8 * var(--u)); }
.pbar { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(10 * var(--u));
  background: var(--torch); color: var(--night); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font: 600 calc(17 * var(--u))/1 var(--text); z-index: 9; }
.pbar small { font-weight: 500; font-size: calc(14 * var(--u)); }

/* Devices and windows */
.win { background: #0b1022; border: 1px solid var(--raise); border-radius: calc(12 * var(--u)); overflow: hidden; box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0,0,0,.5); }
.win .bar { height: calc(38 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font: 500 calc(14 * var(--u))/1 var(--text); color: var(--slate); border-bottom: 1px solid var(--raise); }
.win .bar i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--torch); }
.win .view { position: absolute; left: 0; right: 0; bottom: 0; top: calc(38 * var(--u)); overflow: hidden; }
.win .view img { width: 100%; }
.light .win, .mist .win { background: #fff; border-color: var(--line); box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(3,7,20,.16); }
.phone { border-radius: calc(var(--pr, 40) * var(--u)); border: calc(var(--pb, 8) * var(--u)) solid #1b2133; overflow: hidden; background: #000; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.45); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen { border-radius: calc(12 * var(--u)); border: calc(10 * var(--u)) solid #1b2133; overflow: hidden; background: #fff; box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0,0,0,.5); }
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* The deck: cards dealt on the dark table, lit by the torch */
.card { border-radius: calc(14 * var(--u)); overflow: hidden; border: 1px solid var(--raise); background: #0b1022; transform: rotate(var(--r, 0deg)); box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,.6); }
.card img { width: 100%; height: calc(100% - var(--capH, 52) * var(--u)); object-fit: cover; object-position: top; }
.card .cap { height: calc(var(--capH, 52) * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(18 * var(--u)); background: var(--night); font: 600 calc(var(--cs, 16) * var(--u))/1 var(--text); }
.card .cap span { color: var(--slate); font-weight: 500; }
.pool { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--lx, 62%) var(--ly, 62%), rgba(252,111,24,.13), rgba(252,111,24,0) 30%); }

/* Facts, lists, panels */
.facts { display: flex; border-top: 1px solid var(--raise); }
.light .facts, .mist .facts { border-color: var(--line); }
.facts > div { flex: 1; padding: calc(var(--fp, 20) * var(--u)) calc(24 * var(--u)) 0 0; }
.facts b { display: block; font: 600 calc(var(--fb, 22) * var(--u))/1.2 var(--display); }
.facts span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(var(--fs, 16) * var(--u)); color: var(--slate); }
.light .facts span, .mist .facts span { color: var(--muted); }
.list > div { border-top: 1px solid var(--raise); padding: calc(var(--lp, 18) * var(--u)) 0; }
.light .list > div, .mist .list > div { border-color: var(--line); }
.panel { background: rgba(255,255,255,.04); border: 1px solid var(--raise); border-radius: calc(12 * var(--u)); }
.light .panel, .mist .panel { background: #fff; border-color: var(--line); }
.chip { display: inline-flex; align-items: center; height: calc(var(--ch, 44) * var(--u)); padding: 0 calc(16 * var(--u)); border: 1px solid var(--raise); border-radius: calc(8 * var(--u)); font: 500 calc(var(--cf, 16) * var(--u))/1 var(--text); margin: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0; }
.chip.on { background: var(--torch); color: var(--night); border-color: var(--torch); font-weight: 600; }
.field { border: 1px solid var(--raise); border-radius: calc(8 * var(--u)); height: calc(var(--fh, 56) * var(--u)); padding: 0 calc(16 * var(--u)); display: flex; align-items: center; font-size: calc(var(--ff, 17) * var(--u)); color: var(--slate); }
.field.lab::before { content: attr(data-l); position: absolute; transform: translateY(calc(-40 * var(--u))); font-size: calc(14 * var(--u)); color: var(--soft); }
.ph { background: #1b2133; border: 1px dashed rgba(255,255,255,.3); display: flex; align-items: flex-end; }
.ph i { font: normal calc(14 * var(--u))/1.4 ui-monospace, monospace; color: var(--slate); padding: calc(12 * var(--u)); }

/* Tabs (product stage) and steps (pinned stages) */
.tabs { display: flex; gap: calc(44 * var(--u)); }
.tab { font: 600 calc(var(--tf, 30) * var(--u))/1.2 var(--display); color: var(--slate); padding-bottom: calc(12 * var(--u)); border-bottom: calc(4 * var(--u)) solid transparent; cursor: pointer; }
.tab.on { color: var(--white); border-color: var(--torch); }
.pan { display: none; } .pan.on { display: block; }
.scr { opacity: 0; transition: opacity .5s; } .scr.on { opacity: 1; }
.step { color: var(--slate); border-left: calc(3 * var(--u)) solid var(--raise); padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(20 * var(--u)); transition: color .3s, border-color .3s; }
.step.on { color: var(--white); border-color: var(--torch); }
.step b { display: block; font: 600 calc(var(--sb, 22) * var(--u))/1.25 var(--display); }
.step span { display: block; font-size: calc(var(--ss, 16) * var(--u)); margin-top: calc(4 * var(--u)); }
.step .tm { display: inline; font: 600 calc(15 * var(--u))/1 ui-monospace, monospace; color: var(--torch); margin: 0 0 calc(4 * var(--u)); }

/* Comparison tables (on white) */
.cmp { display: grid; grid-template-columns: var(--cols, 1.05fr 1.25fr 1fr 1fr); font-size: calc(var(--cf, 17) * var(--u)); color: var(--night); }
.cmp > div { padding: calc(var(--cp, 15) * var(--u)) calc(20 * var(--u)); border-top: 1px solid var(--line); line-height: 1.4; }
.cmp .hd { font: 600 calc(var(--hf, 19) * var(--u))/1.25 var(--display); border-top: 0; padding-top: calc(22 * var(--u)); color: var(--muted); }
.cmp .rl { font-weight: 600; }
.cmp .us { background: var(--night); color: var(--white); border-top-color: rgba(255,255,255,.14); }
.cmp .us.hd { color: var(--white); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; }
.cmp .us.end { border-radius: 0 0 calc(12 * var(--u)) calc(12 * var(--u)); }
.cmp .us b { color: var(--torch); font-weight: 600; }
.src { font-size: calc(13 * var(--u)); color: var(--muted); }

/* The nav's Products menu */
.hdr nav span { display: inline-flex; align-items: center; gap: .35em; }
.chev { width: .62em; height: .4em; }
.hdr nav .open .chev { transform: rotate(180deg); }
.mrow { display: flex; gap: calc(20 * var(--u)); align-items: center; padding: calc(16 * var(--u)) 0; border-top: 1px solid var(--raise); }
.mrow:first-child { border-top: 0; }
.mrow img { width: calc(132 * var(--u)); height: calc(74 * var(--u)); object-fit: cover; border-radius: calc(8 * var(--u)); flex: none; }
.mrow b { display: block; font: 600 calc(22 * var(--u))/1.2 var(--display); }
.mrow span { display: block; font-size: calc(16 * var(--u)); color: var(--slate); margin-top: calc(4 * var(--u)); }

/* The band of brands we built for, under the opening */
.band { background: var(--night); border-top: 1px solid var(--raise); overflow: hidden; }
.marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.track { display: flex; align-items: center; height: 100%; width: max-content; }
.li { display: inline-flex; align-items: center; }
.li img { width: auto; }
.pause { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 1px solid var(--raise); border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); }
.pause i { display: block; width: calc(3 * var(--u)); height: calc(12 * var(--u)); background: var(--slate); }

/* Frame 5: a label beside each device */
.dot { display: inline-block; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--torch); margin-right: calc(10 * var(--u)); vertical-align: .12em; }

/* Footer mark: only the flame paths move */
.flame-t { transform-origin: 50% 100%; transform-box: fill-box; }
.mark svg { width: 100%; height: 100%; }

/* Pictures that answer in turn (the court finder) */
.cyc img + img { opacity: 0; }
.pl { display: inline-block; height: .86em; width: 1.62em; border-radius: .43em; object-fit: cover; vertical-align: -.1em; margin: 0 .04em; }

/* Motion: only while a frame is in view (.play); without it every frame stands at its end state */
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(calc(30 * var(--u))); } }
@keyframes deal { from { transform: translateY(calc(760 * var(--u))) rotate(0deg); } }
@keyframes lightup { from { filter: brightness(.38); } }
@keyframes film { to { transform: translateY(var(--end, -60%)); } }
@keyframes lit { from { color: var(--off, #c5cad6); } }
@keyframes rowin { from { opacity: 0; transform: translateY(calc(24 * var(--u))); } }
@keyframes stamp { from { background: transparent; color: inherit; } }
@keyframes draw { from { stroke-dashoffset: var(--len, 2000); } }
@keyframes ride { from { left: calc(var(--x0) * var(--u)); } }
@keyframes strike { to { opacity: .35; text-decoration: line-through; } }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(calc(-40 * var(--u))) rotate(var(--r, 0deg)); } }
@keyframes flick { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(1.06) skewX(-2deg); } 70% { transform: scaleY(.97) skewX(1deg); } }
@keyframes cyc { 0% { opacity: 0; } 4%, 33% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes pooldrift { 0% { --lx: 30%; } 100% { --lx: 62%; } }
@property --lx { syntax: "<percentage>"; inherits: true; initial-value: 62%; }

.play .rise > .line > span { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.play .up { animation: fadeup .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms + 200ms); }
.play .deal .card { animation: deal 1s cubic-bezier(.2,.8,.2,1) both, lightup .6s ease-out both; animation-delay: calc(var(--i) * 90ms + 300ms), calc(var(--i) * 140ms + 1200ms); }
.play .pool { animation: pooldrift 2.2s ease-in-out 1.1s both; }
.play .film img { animation: film 26s ease-in-out 1s infinite alternate; }
.play [data-light] .wd { animation: lit .35s ease-out both; animation-delay: calc(var(--i) * 70ms + 300ms); }
.play .feed > div { animation: rowin .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 380ms + 300ms); }
.play .feed .live { animation: stamp .4s ease-out both; animation-delay: calc(var(--i) * 380ms + 650ms); }
.play .tl-line { animation: draw 2.6s ease-in-out .3s both; }
.play .tl-flame { animation: ride 2.6s ease-in-out .3s both; }
.play .tl-stop { animation: fadeup .5s ease-out both; animation-delay: calc(var(--i) * 520ms + 300ms); }
.play .todo > div { animation: strike .4s ease-out both; animation-delay: calc(var(--i) * 450ms + 500ms); }
.play .done > div { animation: rowin .45s ease-out both; animation-delay: calc(var(--i) * 450ms + 700ms); }
.play .print { animation: print 1.4s steps(14) .6s both; }
.play .cyc img { animation: cyc 7.5s linear infinite both; animation-delay: calc(var(--i) * 2.5s); }
.play .track { animation: marq 40s linear infinite; }
.play .flame-t { animation: flick 2.4s ease-in-out infinite; }
.play .cmp > div { animation: fadeup .5s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .play * { animation: none !important; }
}