:root{
  --bg:#07080d; --bg2:#0b0d14; --raise:#12151f;
  --line:rgba(255,255,255,.11);
  --w:#ffffff; --w2:#e9ebf0;
  /* --ok used to be green. Everything that confirms something is now blue,
     one step brighter than the accent so a tick still reads as a tick. */
  --accent:#5b8def; --accent2:#7d6bd8; --ok:#8fb4ff; --glow:#8fb4ff; --orange:#ff8c1a;
  --hfont:'Archivo','Segoe UI',sans-serif;
  --font:'Manrope','Segoe UI',system-ui,sans-serif;
  --shell:min(1720px,93vw);
  --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --sec:64px;
  /* every motion uses one pair: slow to appear, quick to leave */
  --in:.42s cubic-bezier(.2,.7,.2,1);
  --out:.16s ease;
  --bp:#5b8def; --bs:#7d6bd8; --bfont:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The page scrolls; the bar does not show. A stock light scrollbar on a black
   page is the one piece of chrome nobody chose, and a phone has none at all. */
html{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0}
*{scrollbar-width:none}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--w2);
  font-size:clamp(18px,.84vw,24px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.shell{width:var(--shell);margin:0 auto;position:relative}
a{color:inherit;text-decoration:none}
.h1{font-family:var(--hfont);font-weight:800;font-size:clamp(30px,2.45vw,52px);
  line-height:1.06;letter-spacing:-.03em;color:var(--w)}
.h2{font-family:var(--hfont);font-weight:700;font-size:clamp(22px,1.05vw,31px);line-height:1.25;
  letter-spacing:-.015em;color:var(--w)}
#site .kick{display:inline-flex;align-items:center;gap:13px}
#site .kick::before{content:"";width:5px;height:5px;background:currentColor;flex:none;
  box-shadow:10px 0 0 currentColor,5px 5px 0 currentColor;margin-bottom:5px}
.kick{font-family:var(--hfont);font-weight:700;font-size:clamp(13px,.58vw,16px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.lnk{color:var(--accent);font-weight:600;cursor:pointer}
.lnk:hover{text-decoration:underline}
.good{color:var(--ok);font-weight:600}
section{padding:var(--sec) 0;position:relative;scroll-margin-top:68px}
.wide{max-width:78ch}
.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}

/* Liquid glass: a real surface you can press, but made of light rather than paint.
   A translucent pane that blurs and lifts whatever is behind it, a bright top edge
   where light catches, a darker bottom edge, and a soft drop below. */
/* Corners are not rounded off, they have a square removed, the way the mark
   steps. clip-path eats the outer shadow, so it comes back as a filter, which
   follows the clipped silhouette instead of the box. */
.btn{--n:9px;position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--hfont);font-weight:700;font-size:clamp(16px,.6vw,19px);
  letter-spacing:-.006em;line-height:1.2;padding:15px 28px;border:none;border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),
    100% var(--n),100% 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),
    0 calc(100% - var(--n)));
  filter:drop-shadow(0 8px 18px rgba(24,54,120,.45));
  cursor:pointer;user-select:none;color:var(--w);overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,rgba(120,163,247,.92),rgba(72,116,214,.86));
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -1px 0 rgba(0,0,0,.22),
             inset 0 0 0 1px rgba(255,255,255,.16),
             0 10px 26px rgba(24,54,120,.42);
  transition:transform var(--out),box-shadow var(--out),filter var(--out)}
/* Every button on the site obeys the same four rules.
   1. It is as wide as its label, never wider, unless the block it is the single
      action of stretches it. That is the phone rule below, not a default.
   2. It is never shorter than a fingertip. 48px is the floor everywhere; the
      small variant keeps 42, which is still above the 44-with-padding minimum
      that Apple and Google both publish.
   3. Its label stays on one line and inside the button. It can never be wider
      than what holds it, so a long label on a 320px screen shrinks the padding
      rather than pushing the page sideways.
   4. Two buttons side by side are one gap apart, and that gap becomes a wrap
      when the row runs out, not an overflow. */
.btn{min-height:48px;box-sizing:border-box;max-width:100%;white-space:nowrap;
  text-align:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn.sm{min-height:42px}
.btn + .btn{margin-left:var(--s2)}
/* the sheen that makes glass read as glass */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 38%,
    transparent 60%)}
/* a slow highlight that drifts across on hover, the way light moves over a lens */
.btn::after{content:"";position:absolute;top:-60%;left:-30%;width:45%;height:220%;z-index:-1;
  pointer-events:none;transform:translateX(-140%) rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transition:transform var(--out)}
.btn:hover{transform:translateY(-1px);
  filter:brightness(1.07) drop-shadow(0 14px 26px rgba(24,54,120,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -1px 0 rgba(0,0,0,.22),
             inset 0 0 0 1px rgba(255,255,255,.24),
             0 16px 38px rgba(24,54,120,.55);
  transition:transform var(--in),box-shadow var(--in),filter var(--in)}
.btn:hover::after{transform:translateX(320%) rotate(18deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.btn:active{transform:translateY(1px);
  filter:brightness(.97) drop-shadow(0 5px 12px rgba(24,54,120,.4))}

/* the quieter one: clear glass, no tint */
.btn.ghost{color:var(--w);
  background:linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 -1px 0 rgba(0,0,0,.22),
             inset 0 0 0 1px rgba(255,255,255,.14),
             0 8px 22px rgba(0,0,0,.38)}
.btn.ghost:hover{filter:brightness(1.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -1px 0 rgba(0,0,0,.22),
             inset 0 0 0 1px rgba(255,255,255,.22),
             0 14px 32px rgba(0,0,0,.5)}

.btn.sm{--n:7px;font-size:clamp(14.5px,.5vw,16px);padding:11px 20px;min-height:42px}
.btn.big{--n:11px;font-size:clamp(19px,.78vw,23px);padding:19px 36px}



.inp{width:100%;background:none;border:none;border-bottom:1.5px solid var(--line);
  padding:12px 2px;font-family:var(--font);font-size:19px;color:var(--w);
  transition:border-color var(--in)}
.inp:focus{outline:none;border-bottom-color:var(--accent)}
/* The name is the first thing anyone is asked for, and a bare underline did not
   read as somewhere to type. This one gets a box. */
.inp.boxed{border:1.5px solid var(--w);border-radius:11px;padding:15px 16px;
  background:rgba(255,255,255,.03);transition:border-color var(--in),background var(--in)}
.inp.boxed:hover{border-color:var(--w)}
.inp.boxed:focus{border-color:var(--accent);background:rgba(91,141,239,.08)}
.fieldwrap .inp.boxed ~ .ok{right:15px;bottom:17px}
.inp::placeholder{color:rgba(255,255,255,.32)}
.inp:disabled{color:var(--w2);opacity:.75;border-bottom-color:transparent}
textarea.inp{resize:none;overflow:hidden;font-size:clamp(18px,.84vw,24px);line-height:1.55;min-height:56px}
select.inp{cursor:pointer;font-size:clamp(18px,.84vw,24px)}
select.inp option{background:var(--raise)}
/* our own dropdown, since the browser will not let its own be styled */
.sel{position:relative}
.sel select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.selbtn{width:100%;text-align:left;cursor:pointer;font-family:var(--font);
  font-size:clamp(18px,.84vw,24px);color:var(--w);background:rgba(255,255,255,.03);
  border:1.5px solid var(--line);border-radius:11px;padding:15px 46px 15px 16px;
  transition:border-color var(--in),background var(--in)}
.selbtn::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:2px solid var(--w2);border-bottom:2px solid var(--w2);
  transform:rotate(45deg);transition:transform var(--in),border-color var(--in)}
.selbtn:hover{border-color:rgba(233,235,240,.34)}
.sel.open .selbtn{border-color:var(--accent);background:rgba(91,141,239,.08)}
.sel.open .selbtn::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--accent)}
.sellist{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:40;
  background:var(--raise);border:1.5px solid rgba(91,141,239,.4);border-radius:12px;
  padding:6px;max-height:302px;overflow-y:auto;
  opacity:0;transform:translateY(-7px) scale(.985);transform-origin:top center;
  pointer-events:none;
  transition:opacity var(--out),transform var(--out)}
.sel.open .sellist{opacity:1;transform:none;pointer-events:auto;
  transition:opacity var(--in),transform var(--in)}
.selopt{padding:11px 13px;border-radius:8px;cursor:pointer;font-size:17px;color:var(--w2);
  transition:background var(--out),color var(--out)}
.selopt:hover{background:rgba(91,141,239,.16);color:var(--w)}
.selopt.on{color:var(--accent);font-weight:600}
.lbl{font-family:var(--hfont);font-weight:700;font-size:clamp(13px,.58vw,16px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--w);margin-bottom:var(--s1);display:block;position:relative}
.lbl .opt{font-family:var(--font);font-weight:400;letter-spacing:0;text-transform:none;
  font-size:15px;color:var(--accent);margin-left:8px}

header{position:sticky;top:0;z-index:60;background:rgba(7,8,13,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* Three columns: logo, menu in the true centre, account side. Every word in here
   is nowrap — the header has one job, and breaking "How it works" across two
   lines to save eleven pixels is not it. Under 1080 the five words do not fit
   honestly at any size, so the menu folds into a button and drops down. */
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px;
  gap:clamp(14px,1.6vw,30px);position:relative}
/* "by Noisypeak" sits under the name rather than beside it: the same words in
   half the width, and the menu gets what is left over. */
.logo{font-family:var(--hfont);font-weight:800;font-size:clamp(19px,.82vw,24px);
  color:var(--w);letter-spacing:-.035em;text-decoration:none;cursor:pointer;
  display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;
  justify-content:start;justify-self:start;white-space:nowrap}
/* the designer's mark, rebuilt from the vectors in MYFAST_logo_01.pdf */
/* Explicit width, not auto: an auto-width SVG contributes 0 to the grid track,
   which collapsed the column and let the name slide under the mark. The width is
   the mark's aspect (viewBox 6.4149 x 2.0153) times its height, so the column
   always reserves exactly the space the mark occupies, at any size. */
.logo .mk{grid-row:1;grid-column:1;height:1.15em;width:calc(1.15em * 6.4149 / 2.0153);
  fill:currentColor;align-self:center;transition:opacity var(--out)}
.logo:hover .mk{opacity:.78;transition:opacity var(--in)}
.logo .wm{grid-column:2;grid-row:1;line-height:1.05}
.logo b{color:var(--accent)}
/* Centred under the mark and the name together, not tucked under the name. */
.logo small{grid-column:1/3;grid-row:2;justify-self:center;text-align:center;
  font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--w2);
  letter-spacing:0;line-height:1.1;opacity:.62;margin:3px 0 0;white-space:nowrap}
.navlinks{display:flex;justify-self:center;gap:clamp(15px,1.5vw,34px);
  font-size:clamp(15px,.68vw,19px);font-weight:500;white-space:nowrap}
.navlinks a{white-space:nowrap}
.navright{justify-self:end;display:flex;align-items:center;
  gap:clamp(12px,1vw,24px);white-space:nowrap}
nav .btn{white-space:nowrap}
/* People at the stand asked what it costs and had to scroll to the bottom to
   find out. The price now sits in the header beside the button, on every
   screen, and leads to the pricing block. */
.navprice{font-family:var(--hfont);font-weight:700;font-size:14px;letter-spacing:-.005em;
  color:var(--w);white-space:nowrap;text-decoration:none;
  border:1.5px solid rgba(91,141,239,.55);border-radius:100px;padding:8px 14px;
  background:rgba(91,141,239,.12);transition:background var(--out),border-color var(--out)}
.navprice:hover{background:rgba(91,141,239,.24);border-color:var(--accent)}
/* the phone version: one line under the header, not sticky, so it is seen on
   arrival and then gets out of the way */
.pricestrip{display:none}
#loginLink{white-space:nowrap}

.navlinks .inpanel{display:none}
/* three lines, and the panel they open */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:38px;padding:0 9px;background:none;border:0;cursor:pointer;
  border-radius:9px;transition:background var(--out)}
.burger:hover{background:rgba(91,141,239,.12)}
.burger i{display:block;height:2px;background:var(--w);border-radius:2px;
  transition:transform var(--in),opacity var(--in)}
body.menu .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.navlinks a:hover{color:var(--accent)}
.spacer{flex:1}

/* account chip + dropdown */

/* hero */
.hero{padding:var(--sec) 0;overflow:hidden;min-height:82vh;display:flex;align-items:center}
.bgreel{position:absolute;inset:0;z-index:0;pointer-events:none}
.bgreel video{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);
  object-fit:cover;filter:blur(10px) brightness(.82) saturate(1.15);
  opacity:0;transition:opacity 1.6s ease}
.bgreel video.on{opacity:1}
.veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .veil{background:linear-gradient(100deg,rgba(7,8,13,.93) 26%,rgba(7,8,13,.58) 62%,rgba(7,8,13,.34)),
             linear-gradient(180deg,rgba(7,8,13,.4),rgba(7,8,13,.9) 96%)}
/* the signal arriving, one cell at a time, under everything else */
.cellfield{position:absolute;inset:0;z-index:1;display:grid;
  grid-template-columns:repeat(auto-fill,34px);grid-auto-rows:34px;
  pointer-events:none;overflow:hidden}
.cellfield i{background:var(--accent);opacity:0;animation:cellBlip 9s linear infinite}
@keyframes cellBlip{0%,93%{opacity:0}95%{opacity:.34}100%{opacity:0}}
body.nofx .cellfield{display:none}
.hero .shell{z-index:2}
.beat{opacity:0;transform:translateY(16px);animation:beatIn .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes beatIn{to{opacity:1;transform:none}}
.b1{animation-delay:.1s}.b2{animation-delay:.45s}.b3{animation-delay:.95s}.b4{animation-delay:1.4s}
/* Three text styles and one button, which is what every first screen worth
   copying turns out to use: a small label, one headline, one sentence.
   Measured across 20 of them in research/scripts/hero_anatomy.py. */
.hero .hh{font-size:clamp(36px,3.5vw,74px);margin-top:var(--s3);max-width:24ch}
.hero .hsub{font-size:clamp(19px,1.02vw,28px);line-height:1.45;max-width:54ch;
  margin-top:var(--s3);color:var(--w)}
.hero .after{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.hero .after span{font-size:clamp(17px,.8vw,22px)}
.forNew{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.forOwner{display:none;align-items:center;gap:var(--s2);flex-wrap:wrap}
body.hasch .forNew{display:none}
body.hasch .forOwner{display:flex}

.strip{background:#04050a;padding:var(--s4) 0;border-top:1px solid var(--line)}
.strip .cap{text-align:center;margin-bottom:var(--s3);font-size:clamp(17px,.78vw,22px)}
.mwrap + .mwrap{margin-top:2px}
.mwrap{width:var(--shell);margin:0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.track{display:flex;align-items:center;gap:clamp(44px,4vw,72px);width:max-content;
  animation:slide 52s linear infinite}
.mwrap.rev .track{animation-duration:64s;animation-direction:reverse}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* The logos keep the size they always had. What went was the empty space: the
   tile used to be 36 pixels taller than the largest logo in it, and the gap
   between tiles was wider than most of the logos themselves. */
.lchip{flex:none;display:grid;place-items:center;height:166px}
.lchip img{max-width:570px;max-height:162px;object-fit:contain;opacity:.92}
/* Four columns rather than a centred flex row, so the space between them is the
   same everywhere instead of falling out of however wide each label happens to
   be. The same distance above the rule as below it. */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
  margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}
.nums div{text-align:center}
.nums .n{font-family:var(--hfont);font-size:clamp(26px,1.8vw,34px);font-weight:800;
  color:var(--w);letter-spacing:-.03em;line-height:1.05}
.nums .l{font-size:clamp(14.5px,.68vw,18px);margin-top:3px;line-height:1.3}

.band{background:var(--bg2);position:relative}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:6px;
  background:repeating-conic-gradient(rgba(91,141,239,.42) 0 25%,transparent 0 50%) 0 0/12px 12px}
.band::before{top:0}
.band::after{bottom:0}
.flowwrap{position:relative;margin-top:var(--s5)}
.flowsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.flowsvg path{fill:none;stroke:url(#flowgrad);stroke-width:3;
  stroke-linecap:square;stroke-linejoin:miter}
@keyframes draw{to{stroke-dashoffset:0}}
.fgrid{display:grid;gap:calc(var(--sec) + 18px);position:relative;z-index:1}
.fnode{width:46%}
.fnode:nth-child(even){margin-left:54%}
.fnode .num{width:44px;height:44px;display:grid;place-items:center;position:relative;
  font-family:var(--hfont);font-weight:800;font-size:17px;color:var(--w);
  background:linear-gradient(140deg,var(--accent),var(--accent2));margin-bottom:var(--s2)}
.fnode .h2{margin-bottom:var(--s1);font-size:clamp(24px,1.05vw,34px)}
.fnode p{max-width:none;font-size:clamp(18px,.88vw,25px)}

.whogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5);margin-top:var(--s4)}
.who .h2{margin-bottom:6px}
.who p{max-width:none;font-size:clamp(18px,.86vw,24px)}
.who .out{color:var(--ok);font-weight:600}

.chain{display:flex;align-items:stretch;gap:0;margin-top:var(--s5);flex-wrap:wrap}
.clink{flex:1;min-width:170px;position:relative;padding-right:var(--s4)}
.clink:last-child{padding-right:0}
.clink .n{font-family:var(--hfont);font-size:14px;font-weight:700;letter-spacing:.16em;
  color:var(--accent);margin-bottom:var(--s1)}
.clink .h2{margin-bottom:6px}
.clink p{font-size:clamp(17px,.78vw,22px)}
.clink::after{content:"";position:absolute;right:14px;top:9px;width:18px;height:18px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:rotate(45deg);opacity:.55}
.clink:last-child::after{display:none}

.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3) 20px;margin-top:var(--s4)}
/* Four real channels rather than six invented ones: four across on a wide
   screen, two on a laptop, one at a time in a hand. */
.chgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3) 20px;
  margin-top:var(--s4)}
/* The channel's own logo, over its own picture, small and out of the way. */
/* Width and height on the tag as well as in the stylesheet: without them the
   box has no shape until the file arrives, and lazy loading never made it
   arrive at all for something this small. */
.ch .chlogo{position:absolute;right:10px;bottom:10px;display:block;
  width:clamp(38px,3.2vw,54px);height:auto;z-index:3;border-radius:6px;
  /* Two of the four logos have an opaque background of their own and two
     do not. A corner radius and a hairline make all four read as the same
     badge instead of two stickers and two floating marks. */
  box-shadow:0 2px 10px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)}
@media(max-width:1180px){.chgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.chgrid{grid-template-columns:1fr}}
.ch .frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer}
.ch video{width:100%;height:100%;object-fit:cover;display:block}
.ch .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5))}
.livemark{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;
  font-family:var(--hfont);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--w);
  text-shadow:0 1px 6px rgba(0,0,0,.9);z-index:3}
.livemark i{width:6px;height:6px;border-radius:50%;background:#ff4d4d;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ch .cap{padding-top:var(--s2)}
.ch .cap .h2{margin-bottom:2px}
.ch .cap p{font-size:clamp(16px,.7vw,20px)}

.maker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);padding:calc(var(--sec) + 20px) 0}
.blobs{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55}
.blobs i{position:absolute;border-radius:50%;display:block}
.blobs .b-a{width:46%;height:60%;left:6%;top:8%;background:radial-gradient(circle,#5b8def,transparent 68%);
  animation:drift1 22s ease-in-out infinite alternate}
.blobs .b-b{width:42%;height:56%;right:8%;top:22%;background:radial-gradient(circle,#7d6bd8,transparent 68%);
  animation:drift2 26s ease-in-out infinite alternate}
.blobs .b-c{width:38%;height:50%;left:34%;bottom:2%;background:radial-gradient(circle,#4f7fd6,transparent 70%);
  animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(16%,12%) scale(1.18)}}
@keyframes drift2{to{transform:translate(-14%,-10%) scale(1.22)}}
@keyframes drift3{to{transform:translate(8%,-16%) scale(1.1)}}
.maker .shell{z-index:2}
.makergrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s5);margin-top:var(--s3);align-items:start}
.mkfield{margin-bottom:var(--s4)}
.mkfield:last-child{margin-bottom:0}

/* tags: glow grows in, leaves fast */
.tagwrap{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:var(--s2)}
.btn.off{opacity:.42;filter:saturate(.35)}
.btn.off:hover{transform:none}
/* Three flashes on something the page already draws — the frame around the
   field, the word above the tags, the edge of a card. No new outline appears
   anywhere, and nothing moves while it plays. Blue, like everything else. */
@keyframes flashEdge{
  0%,100%,33%,66%{border-color:var(--w)}
  16%,50%,83%{border-color:var(--glow)}}
@keyframes flashWord{
  0%,100%,33%,66%{color:var(--w)}
  16%,50%,83%{color:var(--glow)}}
@keyframes flashCard{
  0%,100%,33%,66%{border-color:rgba(233,235,240,.13)}
  16%,50%,83%{border-color:var(--glow)}}
/* What is missing is said in words as well as drawn: the label of the field, or
   the sentence itself where the thing being asked for is a sentence, goes from
   white to blue and back three times. The box was flashing on its own, which is
   easy to miss on a screen you have just been scrolled to. */
.inp.boxed.missing{animation:flashEdge 1.5s ease-in-out 1}
.lbl.missing{animation:flashWord 1.5s ease-in-out 1}
.terms.missing > span{animation:flashWord 1.5s ease-in-out 1}
/* All three sources answer, not the two in the grid: bringing your own is one
   of the three choices and was the one left out of the flash. Each returns to
   its own resting border, which is not the same colour on the two shapes. */
.libs.missing .lib,.srcall.missing .lib{animation:flashCard 1.5s ease-in-out 1}
.srcall.missing .ownrow{animation:flashOwn 1.5s ease-in-out 1}
@keyframes flashOwn{
  0%,100%,33%,66%{border-color:rgba(91,141,239,.45)}
  16%,50%,83%{border-color:var(--glow)}}
/* The eye sits inside the field rather than beside it, so the row does not grow
   a second column that only exists on one of the two forms. */
.pwwrap{position:relative;display:flex;align-items:center}
.pwwrap .inp{padding-right:58px}
/* Centred on the field, not hung off the bottom of it. */
.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:8px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--w2);opacity:.6;
  transition:opacity var(--out),color var(--out)}
.eye:hover{opacity:1;color:var(--accent)}
.eye svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round}
.eye .e3{opacity:0;transition:opacity var(--in)}
.eye[aria-pressed="true"]{opacity:1;color:var(--accent)}
.eye[aria-pressed="true"] .e3{opacity:1}
/* Grey while it is missing, bright blue the moment it is met — the light blue
   the page uses for anything lit up, at full strength, not a faded version of
   the link colour. */
.pwrule{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:15.5px}
.pwrule i{font-style:normal;display:flex;align-items:center;gap:9px;
  color:var(--w2);opacity:.5;transition:color var(--out),opacity var(--out)}
.pwrule i::before{content:"○";font-size:12px}
.pwrule i.ok{color:var(--glow);opacity:1;font-weight:700}
.pwrule i.ok::before{content:"●"}
/* Once every rule is met the field says so loudly. */
.inp.boxed.good{border-color:var(--glow);background:rgba(143,180,255,.14);
  box-shadow:0 0 0 3px rgba(143,180,255,.18)}
.gwrap{position:relative}
/* The fade is a mask on the tags themselves, not a panel laid over them. A panel
   has to know what colour the background is, and this list sits on the flat page
   in one place and over moving video in the other. Masking dissolves the last
   rows into whatever is behind them, and leaves every one of them clickable. */
.gwrap.clip{max-height:var(--gh);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 72px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 72px),transparent)}
/* It was grey on dark at two thirds opacity, under a fade, and nobody found it.
   The rest of the genres are behind it, so it has to look like something to
   press. */
.gmore{margin-top:var(--s3);background:rgba(91,141,239,.14);cursor:pointer;
  border:1.5px solid rgba(91,141,239,.55);border-radius:100px;
  font-family:var(--hfont);font-weight:700;font-size:15.5px;color:var(--w);
  padding:10px 20px;min-height:44px;
  transition:background var(--out),border-color var(--out)}
.gmore::after{content:" ↓"}
.gmore:hover{background:rgba(91,141,239,.26);border-color:var(--accent)}
.tg{position:relative;font-size:clamp(17px,.8vw,23px);cursor:pointer;user-select:none;padding:2px 0;
  color:var(--w2);transition:color var(--out),text-shadow var(--out)}
/* Hovering lights the word itself in bright blue; choosing it settles to the
   ordinary accent. Nothing is drawn behind the text any more. */
.tg:hover{color:var(--glow);text-shadow:0 0 18px rgba(143,180,255,.55);
  transition:color var(--in),text-shadow var(--in)}
.tg.on{color:var(--accent);font-weight:600;text-shadow:none}
.tg.on:hover{color:var(--glow)}
.tg.on::after{content:"";position:absolute;left:-14px;font-weight:800;
  opacity:0;transform:scale(.4);animation:tick var(--in) forwards}
@keyframes tick{to{opacity:1;transform:none}}

/* a group that opens and closes without a jump */
.mkgo{margin-top:var(--s4);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}

.mstep{margin-top:var(--s5)}
.mstep .h2{margin-bottom:var(--s2)}
.moneygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5);margin-top:var(--s4)}
.mitem .h2{margin-bottom:6px}
.mitem p{max-width:44ch}

.faq{max-width:820px;margin-top:var(--s4);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s3) 0;font-family:var(--hfont);
  font-size:21px;font-weight:700;color:var(--w);display:flex;justify-content:space-between;
  align-items:center;gap:20px;transition:color var(--out)}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .x{font-size:24px;color:var(--accent);transition:transform var(--in);flex:none}
.faq details[open] summary .x{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--s3);max-width:64ch}

.final{text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.final .veil{background:rgba(7,8,13,.86)}
.final .shell{z-index:2}
.final .h1{margin-bottom:var(--s2)}
.final p{margin-bottom:var(--s4)}
footer{background:#04050a;border-top:1px solid var(--line);padding:var(--s4) 0;font-size:clamp(16px,.7vw,20px)}
.frow{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
/* Three blocks rather than three lines: the registered address belongs in full,
   and it is four lines whether or not it is convenient. */
.frow > div{line-height:1.6}
/* The signed documents themselves, each at its own address, beside the pages
   that carry the same text. */
.lnk.pdf{font-family:var(--hfont);font-size:12.5px;font-weight:800;letter-spacing:.08em;
  border:1px solid rgba(91,141,239,.5);border-radius:4px;padding:2px 6px;
  vertical-align:2px;white-space:nowrap}
.frow .fco b{font-weight:700}

@media(max-width:940px){
  .makergrid,.chain,.fgrid,.whogrid,.moneygrid{grid-template-columns:1fr;display:grid}
  .fnode{width:100%}.fnode:nth-child(even){margin-left:0}
  .clink{padding-right:0;margin-bottom:var(--s3)}
  .clink::after{display:none}
  .grid6{grid-template-columns:1fr}
  /* Measured: the five words, the logo and the two buttons fit down to 950 and
     start breaking at 900. So the menu folds into the button below 940 and not
     a pixel sooner — on a computer the header stays as it was. Three across,
     then two: five items over two rows, no orphan on a line of its own. */
  nav{display:flex;justify-content:space-between}
  .navright{flex:none}
  .burger{display:flex}
  .navlinks{position:absolute;left:calc(50% - 50vw);width:100vw;top:100%;
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    padding:0 20px;background:var(--bg);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height var(--out),opacity var(--out),padding var(--out)}
  body.menu .navlinks{max-height:220px;opacity:1;pointer-events:auto;
    padding:12px 20px 18px;
    transition:max-height var(--in),opacity var(--in),padding var(--in)}
  .navlinks a{padding:13px 4px;font-size:16px;white-space:normal;line-height:1.25}
  .nums{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
}

/* ═══ setup / account ═══ */
#setup{display:none;min-height:100vh}
body.setup #setup{display:block}
body.setup #site{display:none}
.swrap{width:var(--shell);margin:0 auto;padding:0 0 80px;position:relative}
#setup .shead{display:flex;align-items:center;gap:18px;padding:20px 0 16px}
#setup .exit{margin-left:auto;font-size:16px;color:var(--accent);font-weight:600;cursor:pointer}
#setup .exit:hover{text-decoration:underline}
#setup .stage{display:none}
#setup .stage.show{display:block;animation:rise .45s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
/* The rail and the first field were almost touching, which read as clutter. */
#setup main{padding:calc(var(--sec) + var(--s4)) 0 0}
#setup .h1{margin-bottom:var(--s2)}
/* This line explains the step. It was set at exactly the body size and the
   body colour, so it read as another paragraph rather than as the answer to
   "what am I doing here". White and a size up. */
#setup .intro{max-width:74ch;margin-bottom:var(--s4);color:var(--w);
  font-size:clamp(20px,1.15vw,27px);line-height:1.44}

.demofill{background:var(--orange);color:#231202;border:none;font-family:var(--hfont);
  font-size:13px;font-weight:800;padding:9px 15px;border-radius:4px;cursor:pointer}
.demofill:hover{background:#ffa04a}

/* the mark's three squares, taking turns, used while something is working */
.pulse3{display:inline-grid;grid-template-columns:repeat(3,9px);
  grid-template-rows:repeat(2,9px);gap:3px;vertical-align:middle}
.pulse3 i{background:var(--accent);opacity:.18;animation:pulseHop 1.05s steps(1,end) infinite}
.pulse3 i:nth-child(1){grid-area:1/1}
.pulse3 i:nth-child(2){grid-area:2/2;animation-delay:.35s}
.pulse3 i:nth-child(3){grid-area:1/3;animation-delay:.7s}
@keyframes pulseHop{0%{opacity:1}33%{opacity:.18}100%{opacity:.18}}

.rail{display:flex;gap:10px}
.rail .seg{flex:1;padding-top:14px;position:relative;transition:opacity var(--in)}
.rail .seg::before{content:"";position:absolute;top:0;left:0;width:9px;height:9px;
  background:rgba(255,255,255,.14);transition:background var(--in)}
.rail .seg .pips{position:absolute;top:0;left:12px;right:0;display:flex;gap:3px;
  overflow:hidden}
.rail .seg .pips i{width:9px;height:9px;flex:none;background:rgba(255,255,255,.14);
  transition:background var(--in)}
.rail .seg.done::before,.rail .seg.active::before{background:var(--accent)}
.rail .seg.done .pips i{background:var(--accent)}
.rail .seg.active .pips i{background:rgba(91,141,239,.45)}
.rail .lbl2{font-family:var(--hfont);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--w);opacity:.4;display:flex;gap:7px;align-items:center;transition:all var(--in)}
.rail .seg.active .lbl2{opacity:1;color:var(--accent)}
.rail .seg.done .lbl2{opacity:1}
.rail .tick{color:var(--ok);font-weight:900;display:none}
.rail .seg.done .tick{display:inline;animation:pop .3s}

.block{margin-bottom:var(--s5)}
.block:last-child{margin-bottom:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.fieldwrap{position:relative}
.fieldwrap .ok{position:absolute;right:2px;bottom:14px;color:var(--ok);font-weight:900;font-size:19px;display:none}
.fieldwrap.filled .ok{display:block;animation:pop .3s}
.fieldwrap.filled .inp{border-bottom-color:var(--ok)}

/* Access gate on the first step: a channel can only be built with a code while
   the platform is unfinished. The note, the request button and the code field. */
.gate{margin-top:var(--s5);max-width:600px;border-top:1px solid var(--line);padding-top:var(--s4)}
.gatenote{font-size:clamp(16px,.82vw,20px);line-height:1.5;color:var(--w);font-weight:600;margin:0}
.gatenote b{color:var(--accent)}
.gaterow{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s4);flex-wrap:wrap}
.gaterow .inp.boxed{width:auto;max-width:210px;text-transform:uppercase;
  letter-spacing:.12em;font-family:var(--hfont);font-weight:700}
.gaterow .btn{white-space:nowrap}
.gatemsg{margin-top:var(--s3);font-weight:700;font-size:clamp(15px,.72vw,18px);min-height:1.2em}
.gatemsg.bad{color:#ff6b6b}
.gatemsg.ok{color:var(--ok)}

.ti{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  box-shadow:inset 0 0 0 1.3px var(--accent);color:var(--accent);font-size:10px;
  font-weight:800;margin-left:8px;cursor:help;font-style:normal;vertical-align:1px;
  font-family:var(--font);letter-spacing:0;text-transform:none}
.tipwrap{position:relative}
.tipbox{position:absolute;bottom:calc(100% + 10px);left:0;width:300px;z-index:30;
  background:var(--raise);color:var(--w2);border-radius:6px;padding:15px 17px;font-size:15.5px;
  font-family:var(--font);font-weight:400;line-height:1.55;text-transform:none;letter-spacing:0;
  opacity:0;pointer-events:none;transform:translateY(4px);transition:all var(--out);
  box-shadow:0 18px 50px rgba(0,0,0,.65)}
.lbl:hover .tipbox,.tipwrap:hover .tipbox{opacity:1;transform:none;transition:all var(--in)}
/* A tip hanging off the last of three columns ran sixty pixels past the right
   edge of an iPad and made the whole page scroll sideways. In the last column it
   hangs from the right instead, and it is never wider than the screen. */
.tipbox{max-width:calc(100vw - 32px)}
.three > div:last-child .tipbox{left:auto;right:0}

#logoBox{width:70px;height:70px;flex:none}
#logoBox img{width:70px;height:70px;object-fit:contain}
.aidesc{position:relative}
.regen{font-size:16px;font-weight:600;color:var(--accent);background:none;border:none;
  cursor:pointer;font-family:var(--font)}
/* only the one in the corner is pinned there; the one inside the panel is not */
.aidesc > .regen{position:absolute;top:-4px;right:0}
.aidesc .regen:hover{text-decoration:underline}
.aidesc .regen:disabled{opacity:.5;cursor:default;text-decoration:none}
/* The rewrite does not replace what a person wrote; it opens underneath it so
   the two can be read side by side, and only replaces it when asked. Grid rows
   from 0fr to 1fr, so the panel has no height to guess at. */
.aipanel{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;pointer-events:none;
  transition:grid-template-rows var(--in),opacity var(--in),margin-top var(--in)}
.aipanel.open{grid-template-rows:1fr;opacity:1;margin-top:var(--s3);pointer-events:auto}
.aipanel > .in{overflow:hidden;min-height:0}
.aipanel .aihead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.aitag{font-family:var(--hfont);font-size:12.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);border:1px solid rgba(91,141,239,.5);
  border-radius:100px;padding:4px 11px}
.aitone{font-size:15.5px;color:var(--w2);opacity:.7}
.aitext{font-size:clamp(17px,.82vw,22px);line-height:1.5;color:var(--w);
  border-left:2px solid var(--accent);padding-left:var(--s3);min-height:2em}
.aitext.busy{opacity:.5}
.airow{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}

/* pickable cards share one glow language */
.stlgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s3);margin-top:var(--s3)}
.stl,.lib{position:relative;cursor:pointer}
/* A card is either chosen or it is not, and an outline says that plainly. The
   halo behind it said "warm" and nothing else, and on a dark page it read as a
   smudge. Hover and chosen share the wash; only the outline separates them. */
.stl,.lib{border:1px solid rgba(233,235,240,.13);border-radius:14px;
  background:transparent;transition:border-color var(--out),background-color var(--out)}
.stl:hover,.lib:hover{border-color:rgba(91,141,239,.55);background-color:rgba(91,141,239,.07);
  transition:border-color var(--in),background-color var(--in)}
.stl.on,.lib.on{border-color:var(--accent);background-color:rgba(91,141,239,.13)}
.stl{padding:var(--s3) var(--s3) var(--s2)}
.stl:hover .sname{color:var(--accent)}
.stl .top{display:flex;align-items:baseline;gap:11px;margin-bottom:var(--s2)}
.stl .sname{font-size:24px;color:var(--w);transition:color var(--in)}
.stl .shint{font-size:16px}
.stl .sck{margin-left:auto;color:var(--ok);font-weight:900;font-size:19px;display:none}
.stl.on .sck{display:block;animation:pop .3s}
.stl.on .sname{color:var(--accent)}
.stl .t1{font-size:22px;color:var(--w);line-height:1.25}
.stl .t2{font-size:clamp(16px,.72vw,20px);margin-top:6px;line-height:1.5}
.stl .fonts{font-size:16px;margin-top:11px;opacity:.75}
.stl .pal{display:flex;height:8px;margin-top:var(--s2)}
.stl .pal i{flex:1}


.customBtn{margin-top:var(--s4);width:100%;justify-content:center}
.custompanel{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows var(--in),opacity var(--out),margin-top var(--in)}
.custompanel.show{grid-template-rows:1fr;opacity:1;margin-top:var(--s4);
  transition:grid-template-rows var(--in),opacity var(--in),margin-top var(--in)}
.custompanel > .in{overflow:hidden;min-height:0}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.swrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s2)}
.sw{width:32px;height:32px;cursor:pointer;transition:transform var(--out);position:relative;border:none;padding:0}
.sw:hover{transform:scale(1.14);transition:transform var(--in)}
.sw.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:15px;font-weight:900;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.sw.pick{box-shadow:inset 0 0 0 1.5px var(--line)}

.prevhead{display:flex;align-items:baseline;gap:18px;margin:var(--s5) 0 var(--s2);flex-wrap:wrap}
.prevgrid{display:grid;grid-template-columns:2.05fr 1fr;gap:20px;align-items:start}
.bigprev{position:relative;overflow:hidden;background:#000}
.bigprev .fr{position:relative;aspect-ratio:16/9}
.bigprev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bigprev .tint{position:absolute;inset:0;pointer-events:none}
.bigprev .brand{position:absolute;top:16px;right:18px;z-index:3;display:flex;align-items:center;
  gap:10px;font-weight:700;color:#fff;font-size:17px}
.bigprev .third{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:52px 20px 18px;
  background:linear-gradient(transparent,rgba(0,0,0,.88))}
.bigprev .third .kk{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.bigprev .third b{display:block;color:#fff;font-size:25px;font-weight:700;margin:4px 0 11px}
.bigprev .third .pb{height:3px;background:rgba(255,255,255,.2)}
.bigprev .third .pb i{display:block;height:100%;width:38%}
.takeover{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  opacity:0;transition:opacity .6s ease;pointer-events:none}
.takeover.on{opacity:1}
.takeover .tl{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.takeover .wipe{position:absolute;top:-20%;bottom:-20%;width:60%;transform:skewX(-14deg);left:20%}
.tvbadge{position:absolute;bottom:14px;left:20px;z-index:7;font-family:var(--hfont);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;
  opacity:0;transition:opacity .5s ease;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.tvbadge.on{opacity:.85}
.fxcol{display:flex;flex-direction:column;gap:20px}
.tmpl{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.tmplrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s3)}
.fxmini .scr{position:relative;aspect-ratio:16/6.6;overflow:hidden}
.fxmini .cap{padding-top:9px;font-size:16px}
.fxmini .cap b{color:var(--w);font-weight:700;margin-right:8px}
.fx-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;animation:fxIntro 5s ease-in-out infinite}
@keyframes fxIntro{0%,6%{opacity:0;transform:scale(.9)}16%,82%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1.03)}}
.fx-third{position:absolute;left:0;right:0;bottom:0;padding:10px 13px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));animation:fxSlide 5s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes fxSlide{0%,8%{transform:translateY(110%)}22%,84%{transform:translateY(0)}96%,100%{transform:translateY(110%)}}
.fx-bar{height:3px;margin-top:6px;animation:fxBar 5s linear infinite}
@keyframes fxBar{0%,22%{width:6%}84%,100%{width:88%}}
.fx-wipe{position:absolute;top:-20%;bottom:-20%;width:55%;transform:skewX(-14deg);
  animation:fxWipe 5s cubic-bezier(.6,0,.3,1) infinite}
@keyframes fxWipe{0%,10%{left:-80%}45%,58%{left:22%}92%,100%{left:130%}}
.fx-ini{position:absolute;inset:0;display:grid;place-items:center;animation:fxIni 5s ease infinite}
@keyframes fxIni{0%,28%{opacity:0}45%,62%{opacity:1}80%,100%{opacity:0}}

.libs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s4);margin-top:var(--s1)}
.lib{padding:11px 11px var(--s2)}
.lib .fr{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:7px}
.lib video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.lib:hover video{transform:scale(1.04)}
.lib .sh{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}
.lib .sug{position:absolute;top:11px;left:11px;font-family:var(--hfont);font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;z-index:2;
  text-shadow:0 1px 6px rgba(0,0,0,.9)}
.lib .cap{padding-top:13px;display:flex;align-items:baseline;gap:10px}
.lib .cap p{font-size:16px}
.lib .cap .ck{margin-left:auto;color:var(--ok);font-weight:900;font-size:19px;display:none;flex:none}
.lib.on .cap .ck{display:block;animation:pop .3s}

/* Most people arrive with a library of their own; ours is the fallback, not the
   headline. So this comes first and it is the largest thing on the step. */
.ownrow{margin-top:var(--s5);padding:var(--s4) var(--s4);display:flex;align-items:center;
  gap:var(--s4);cursor:pointer;position:relative;border-radius:18px;
  border:1.5px solid rgba(91,141,239,.45);
  background:linear-gradient(120deg,rgba(91,141,239,.30),rgba(125,107,216,.20) 62%,
    rgba(91,141,239,.10));
  transition:border-color var(--out),background var(--out),transform var(--out)}
.ownrow:hover{border-color:var(--accent);transform:translateY(-2px);
  background:linear-gradient(120deg,rgba(91,141,239,.42),rgba(125,107,216,.28) 62%,
    rgba(91,141,239,.16));
  transition:border-color var(--in),background var(--in),transform var(--in)}
.ownrow.on{border-color:var(--accent);
  background:linear-gradient(120deg,rgba(91,141,239,.46),rgba(125,107,216,.30) 62%,
    rgba(91,141,239,.18))}
.ownrow .oh{font-family:var(--hfont);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(24px,1.5vw,34px);line-height:1.1;color:var(--w)}
.ownrow p{max-width:60ch;margin-top:8px;font-size:clamp(16px,.78vw,20px);color:var(--w2)}
.ownrow .arr{margin-left:auto;font-size:34px;color:var(--w);flex:none}
.ownrow .ck2{margin-left:auto;flex:none;display:none;color:var(--w);font-weight:700;
  font-size:clamp(16px,.78vw,19px);text-align:right}
.ownrow.on .ck2{display:block}
.ownrow.on .arr{display:none}
/* Who takes the channel to the platforms. Asked here, at the foot of the
   content step, because "where it is watched" is asked above it: this step is
   about content and reach. Two cards, nothing chosen for you, and the step does
   not move on without an answer — the same rule as the sources above. */
.dist{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.dcards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s2)}
.dcard{padding:var(--s3) var(--s4);cursor:pointer;border-radius:16px;
  border:1.5px solid rgba(233,235,240,.13);
  transition:border-color var(--out),background-color var(--out),transform var(--out)}
.dcard:hover{border-color:rgba(91,141,239,.55);background-color:rgba(91,141,239,.07);
  transform:translateY(-2px);transition:border-color var(--in),background-color var(--in),
  transform var(--in)}
.dcard.on{border-color:var(--accent);background-color:rgba(91,141,239,.13)}
.dcard .dh{font-family:var(--hfont);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(19px,1.1vw,24px);line-height:1.15;color:var(--w)}
.dcard p{margin-top:8px;font-size:clamp(15.5px,.76vw,18px);color:var(--w2);line-height:1.45}
.dist.missing .dcard{animation:flashCard 1.5s ease-in-out 1}
.dist.missing .lbl{animation:flashWord 1.5s ease-in-out 1}

/* a quiet line, so the two libraries below read as the alternative */
.orline{display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0 var(--s4);
  color:var(--w2);opacity:.55;font-size:15.5px;letter-spacing:.02em}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}

/* The channel plays behind the plan: alive to look at, and not pretending to be
   created. Blurred and dimmed so it is scenery, not something to read. */
/* The blobs are pinned to the step rather than hanging 20% past it: absolutely
   positioned decoration still counts toward how far the page can be scrolled,
   and this one was adding eight hundred pixels of nothing under the last card. */
.stage[data-stage="plan"]{overflow:hidden}
.stage .blobs{inset:0}
/* Scenery, not competition: the channel plays behind, dimmed far enough that
   white text and blue ticks sit on top of it without a fight. */
.backprev{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  filter:blur(12px) saturate(.7) brightness(.55);opacity:.16;transform:scale(1.05)}
.backprev::after{content:"";position:absolute;inset:0;background:rgba(7,8,13,.55)}
.backprev .result{margin-top:0}
.planpanel,.acctwrap{position:relative;z-index:2}

/* the account step */
/* Once the channel is being made, the form has nothing left to ask for and its
   button must not invite a second press. Everything else on the step stays
   exactly where it was: hiding the plans as well left a heading called "Choose
   a plan" with nothing under it to choose, which read as a broken sixth screen. */
body.made .acctwrap{display:none}
.acctwrap{display:grid;grid-template-columns:1.35fr .8fr;gap:var(--s5);align-items:start;
  max-width:1040px;margin-top:var(--sec);padding-top:var(--s5);
  border-top:1px solid var(--line)}
.acctform .mt0{margin-top:0}
.acctform .btn.lg{margin-top:var(--s4)}
.acsub{margin-top:var(--s3);font-size:16px;color:var(--w2)}
.acctside{border:1.5px solid rgba(233,235,240,.13);border-radius:16px;padding:var(--s4);
  background:rgba(255,255,255,.02)}
.asrow{display:flex;justify-content:space-between;gap:var(--s3);padding:11px 0;
  border-bottom:1px solid var(--line);font-size:16.5px;color:var(--w2)}
.asrow:last-of-type{border-bottom:0}
.asrow b{color:var(--w);text-align:right}
.asnote{margin-top:var(--s2);font-size:15px;color:var(--w2);opacity:.7}

/* ── plans ─────────────────────────────────────────────────────────────
   Laid out the way this industry lays them out, because a pricing table is one
   of the few places where being inventive only costs you: a cycle switch above,
   three cards with the middle one marked, and the full comparison underneath
   grouped by what a person is actually deciding. */
.planhead{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.planhead .oap{margin-top:var(--s2);max-width:46ch}
.cyc{display:inline-flex;padding:5px;border-radius:100px;background:rgba(255,255,255,.05);
  border:1px solid var(--line)}
.cyc button{border:0;background:none;cursor:pointer;font-family:var(--font);font-weight:600;
  font-size:16.5px;color:var(--w2);padding:10px 22px;border-radius:100px;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--out),color var(--out)}
.cyc button span{color:var(--accent);font-weight:700;margin-left:8px;font-size:14.5px}
/* White on the accent blue is 3.2:1, under the 4.5 an ordinary-sized label
   needs. A step darker carries it at 4.9 and looks the same at a glance. */
.cyc button.on{background:#3f6fc4;color:#fff}
.cyc button.on span{color:rgba(255,255,255,.85)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;cursor:pointer;
  border:1.5px solid rgba(233,235,240,.16);border-radius:16px;padding:18px 18px 14px;
  background:rgba(7,8,13,.72);backdrop-filter:blur(6px);
  transition:border-color var(--out),background-color var(--out)}
.plan:hover{border-color:rgba(91,141,239,.6);background-color:rgba(11,14,26,.82)}
.plan.on{border-color:var(--accent);background-color:rgba(15,22,44,.86)}
.plan .pn{font-family:var(--hfont);font-weight:800;font-size:clamp(20px,1.1vw,25px);
  letter-spacing:-.02em;color:var(--w);line-height:1.1}
.plan .pnote{margin-top:2px;font-size:15px;color:var(--w2);opacity:.75;line-height:1.25}
.plan .pp{margin-top:11px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan .pp b{font-family:var(--hfont);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(25px,1.7vw,32px);color:var(--w);line-height:1}
.plan .pp s{font-family:var(--hfont);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(25px,1.7vw,32px);line-height:1;
  color:var(--w2);opacity:.55;text-decoration-thickness:2.5px}
.plan .pp span{font-size:15px;color:var(--w2);opacity:.75}
.plan .pyr{margin-top:3px;font-size:14px;color:var(--glow);min-height:1.1em}
.plan .pyr.free{font-family:var(--hfont);font-weight:700;font-size:clamp(16px,.85vw,19px);
  color:var(--glow)}
/* The five lines are what a person actually reads, so they are set larger than
   the body text, not smaller. */
.plan ul{list-style:none;margin:12px 0 0;padding:0}
.plan li{padding:3px 0 3px 26px;position:relative;font-size:clamp(19px,1.06vw,23px);
  color:var(--w);line-height:1.28}
.plan li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--glow)}
.plan .pick{margin-top:auto;padding-top:12px;font-family:var(--hfont);font-weight:700;
  font-size:15px;color:var(--glow)}


.promo{margin-top:var(--s5);max-width:520px}
.promorow{display:flex;gap:var(--s2);align-items:stretch}
.promorow .inp{flex:1;min-width:0}
.promorow .btn{flex:none;white-space:nowrap}
.promomsg{margin-top:9px;font-size:15.5px;min-height:1.3em;color:var(--accent);opacity:0;
  transition:opacity var(--in)}
.promomsg.show{opacity:1}
.promomsg.bad{color:var(--w2)}

/* Five features are on the card; the rest is behind this. It used to be a line
   of blue text, which on a phone is indistinguishable from a heading. It is a
   button, and it looks like the other buttons. */
.allfeat{margin-top:var(--s5)}
.allfeat span{display:inline-grid;place-items:center;width:22px;height:22px;
  border:1.5px solid currentColor;border-radius:50%;font-size:15px;line-height:1;
  transition:transform var(--in)}
.allfeat[aria-expanded="true"] span{transform:rotate(45deg)}
.ptable{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--in),opacity var(--in),margin-top var(--in)}
.ptable > .in{overflow:hidden;min-height:0}
.ptable.open{grid-template-rows:1fr;opacity:1;margin-top:var(--s4)}
/* The same rounded card as the plans above, drawn once per column by giving
   the first and last cell of each column the corners and the sides. */
.pcols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s3);align-items:stretch}
.pc{padding:5px 18px;background:rgba(7,8,13,.72);
  border-left:1.5px solid rgba(233,235,240,.16);
  border-right:1.5px solid rgba(233,235,240,.16)}
.pc.on{background:rgba(15,22,44,.9);border-left-color:var(--accent);
  border-right-color:var(--accent)}
.pc.pch{font-family:var(--hfont);font-weight:800;font-size:20px;color:var(--w);
  letter-spacing:-.02em;padding:18px 18px 12px;border-top:1.5px solid rgba(233,235,240,.16);
  border-radius:16px 16px 0 0}
.pc.pch.on{border-top-color:var(--accent)}
.pcols > .pc:nth-last-child(-n+3){border-bottom:1.5px solid rgba(233,235,240,.16);
  border-radius:0 0 16px 16px}
.pcols > .pc:nth-last-child(-n+3).on{border-bottom-color:var(--accent)}
.pc.pgh{font-family:var(--hfont);font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glow);padding-top:18px;padding-bottom:6px}
.pc.pl{display:flex;gap:9px;font-size:16.5px;color:var(--w);line-height:1.3;padding-bottom:7px}
.pc.pl i{flex:none;width:6px;height:6px;margin-top:.55em;border-radius:50%;
  background:var(--glow)}
/* on the same line as the label; it only drops when the line truly runs out */
.pc.pl b{font-weight:600;color:var(--w2)}
/* Missing means grey text, not a band of a different shade across the column.
   Opacity on the whole cell was lightening the card behind it as well. */
.pc.pl.off{color:var(--w2);opacity:1}
.pc.pl.off span{opacity:.45}
.pc.pl.off i{background:var(--w2);opacity:.35}
.pcols > .pc:nth-last-child(-n+3){padding-bottom:18px}

.planfoot{margin-top:var(--sec);display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s4)}
.pfsum{font-family:var(--hfont);font-weight:700;font-size:clamp(19px,1.1vw,24px);color:var(--w)}
.pfnote{margin-top:6px;font-size:16px;color:var(--w2);opacity:.75;max-width:52ch}

.buildbox{display:none;margin-top:var(--sec);border-top:1px solid var(--line);
  padding-top:var(--s5)}
.buildbox.show{display:block;animation:rise .4s}
.oah2{font-family:var(--hfont);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,1.9vw,36px);line-height:1.1;color:var(--w)}

/* review: one column, every row edit-gated */
.sumhead{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.sumcol{max-width:820px}
.sumrow{display:grid;grid-template-columns:150px 1fr 90px;gap:var(--s3);align-items:start;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.sumrow:first-child{border-top:1px solid var(--line)}
.sumrow .k2{font-family:var(--hfont);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--w);opacity:.55;padding-top:6px}
/* One size and one colour for every value on this screen; the label beside it
   is the grey one. The name and the description are disabled inputs, and the
   rule that greys a disabled field was making those two the odd ones out. */
.sumrow .v{color:var(--w);font-size:18px;line-height:1.4}
.sumrow .v .inp:disabled{color:var(--w);opacity:1;font-size:18px;line-height:1.4;
  padding:0;border-bottom-color:transparent}
.sumrow .v .sub{color:var(--w);font-size:18px;margin-top:4px}
.sumrow .ed{color:var(--accent);font-weight:600;cursor:pointer;font-size:16px;text-align:right;
  padding-top:6px;transition:opacity var(--out)}
.sumrow .ed:hover{text-decoration:underline}
.sumpal{display:flex;height:10px;width:150px;margin-top:8px}
.sumpal i{flex:1}
.launchbar{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.launchbar .big{font-size:20px;padding:19px 40px}

/* This screen used to clip whatever ran past its box, which cut the top of the
   build list off as soon as the page was scrolled. Nothing here is hidden. */
.launchwrap{position:relative}
.launchwrap .blobs{opacity:.35}
.lcol{position:relative;z-index:2;max-width:760px}
.bline{display:flex;align-items:center;gap:14px;padding:11px 0;font-size:17px;
  opacity:.35;transition:opacity var(--in)}
.bline .st{width:21px;height:21px;flex:none;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--line);display:grid;place-items:center;
  font-size:11px;font-weight:900;transition:all var(--in)}
.bline.doing,.bline.done{opacity:1}
.bline.doing .st{box-shadow:inset 0 0 0 2px var(--accent)}
.bline.doing .st::after{content:"";width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(91,141,239,.3);border-top-color:var(--accent);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bline.done .st{background:var(--ok);box-shadow:none;color:#06231c}
.bline.done .st::after{content:"✓";animation:pop .25s}
/* One thing to read and one thing to press. There used to be three links here
   that all meant the same, and the one that looked most like a button had no
   handler at all. */
.onair{display:none;margin-top:var(--s5)}
/* while the channel is still being made */
.onair.waiting .oap{color:var(--w2)}
.onair.waiting .btn{cursor:default}
.onair.show{display:block;animation:rise .45s}
.oah{font-family:var(--hfont);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(30px,2.4vw,44px);line-height:1.08;color:var(--w)}
.oap{margin-top:var(--s2);font-size:clamp(17px,.86vw,21px);color:var(--w2);max-width:52ch}
.btn.lg{margin-top:var(--s4);font-size:clamp(17px,.86vw,21px);padding:17px 30px}

/* The channel itself, across the whole width, under everything else. It was a
   small box in the corner, which is a strange way to show someone the thing
   they just spent seven minutes making. */
.result{display:none;margin-top:var(--sec);position:relative;z-index:2;
  grid-template-columns:1.55fr 1fr;gap:var(--s4);align-items:start}
.result.show{display:grid;animation:rise .5s}
.player{position:relative;overflow:hidden;background:#000;border-radius:14px}
.player .fr{position:relative;aspect-ratio:16/9}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .brand{position:absolute;top:13px;right:15px;z-index:3;display:flex;align-items:center;
  gap:9px;font-family:var(--bfont);font-weight:700;color:#fff;font-size:16px}
.player .third{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:48px 18px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.88))}
.player .third .kk{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bs);
  font-weight:800;font-family:var(--bfont)}
.player .third b{display:block;color:#fff;font-family:var(--bfont);font-size:23px;
  font-weight:700;margin:3px 0 10px}
.player .third .pb{height:3px;background:rgba(255,255,255,.2)}
.player .third .pb i{display:block;height:100%;width:38%;background:var(--bp);animation:fillbar 60s linear forwards}
@keyframes fillbar{to{width:96%}}
.sched{margin-top:var(--s4);max-width:760px}
.sched .sh2{font-family:var(--hfont);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--w);font-weight:700;padding-bottom:10px}
.srow{display:flex;gap:16px;padding:10px 0;font-size:16px}
.srow .t{opacity:.5;font-variant-numeric:tabular-nums;width:48px;flex:none}
.srow.now .t{color:var(--accent);opacity:1;font-weight:700}
.srow.now .n{color:var(--w);font-weight:600}

/* The buttons stay on screen. The second step runs to nearly two thousand
   pixels, and hunting for Continue at the bottom of it reads as the button
   appearing late rather than as a long page. */
.foot2{position:sticky;bottom:0;z-index:30;margin-top:var(--s4);
  padding:var(--s3) 0;display:flex;align-items:center;gap:20px;
  border-top:1px solid var(--line);background:rgba(7,8,13,.92);backdrop-filter:blur(10px)}
.foot2 .fnote{font-size:16px}
/* Back belongs next to Continue, not at the other end of the room. */
.foot2 .f2b{order:-1;display:flex;align-items:center;gap:var(--s2)}
/* the flex gap already spaces them; the sibling margin still applied when Back
   was hidden and pushed Continue off the left edge */
.foot2 .f2b .btn + .btn{margin-left:0}


#auth{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
#auth.show{display:flex}
#auth .bd{position:absolute;inset:0;background:rgba(7,8,13,.72);backdrop-filter:blur(14px)}
#auth .card{position:relative;width:min(460px,100%);background:var(--raise);padding:var(--s4);
  box-shadow:0 40px 110px rgba(0,0,0,.75);animation:rise .4s}
#auth .h1{font-size:29px;margin-bottom:12px}
#auth .sd{margin-bottom:var(--s3)}
.orline{display:flex;align-items:center;gap:14px;font-size:15px;margin:var(--s3) 0;opacity:.6}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
#auth .row{display:flex;gap:14px;align-items:flex-end}
#auth .step2{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--in),opacity var(--out),margin-top var(--in);margin-top:0}
#auth .step2.show{grid-template-rows:1fr;opacity:1;margin-top:var(--s3);
  transition:grid-template-rows var(--in),opacity var(--in),margin-top var(--in)}
#auth .step2 > .in{overflow:hidden;min-height:0}
.terms{display:flex;gap:11px;align-items:flex-start;margin-top:var(--s3);font-size:16px;cursor:pointer}
/* On the review screen this line sits between the last summary rule and the
   footer rule, so it gets the same air above and below rather than hugging one. */
.revterms{margin:var(--s4) 0;padding:0;align-items:center}
.terms input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent);flex:none}
#auth .skip{display:block;text-align:center;margin-top:var(--s3);font-size:16px;color:var(--accent);cursor:pointer}
#auth .skip:hover{text-decoration:underline}

#confirm{position:fixed;inset:0;z-index:85;display:none;align-items:center;
  justify-content:center;padding:24px}
#confirm.show{display:flex}
#confirm .bd{position:absolute;inset:0;background:rgba(7,8,13,.72);backdrop-filter:blur(14px)}
#confirm .card{position:relative;width:min(460px,100%);background:var(--raise);
  padding:var(--s4);border-radius:16px;box-shadow:0 40px 120px rgba(0,0,0,.75)}
#confirm .h1{font-size:clamp(24px,1.2vw,32px);margin-bottom:12px}
#confirm .sd{margin-bottom:var(--s4)}
#confirm .crow{display:flex;gap:var(--s2);flex-wrap:wrap}
@media(max-width:760px){#confirm .crow{flex-direction:column}}

#toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%,14px);z-index:90;
  background:var(--raise);color:var(--w);font-size:16px;font-weight:600;padding:14px 22px;
  border-radius:5px;opacity:0;pointer-events:none;transition:all var(--in);
  display:flex;align-items:center;gap:11px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast .d{color:var(--ok);font-weight:900}

/* ── legal and error pages ─────────────────────────────────────────── */
body.signed #loginLink{display:none}
#doc,#err,#hand{display:none;min-height:100vh}
body.doc #doc,body.err #err,body.hand #hand{display:block}
body.doc #site,body.err #site,body.hand #site{display:none}
#doc .shead,#hand .shead{display:flex;align-items:center;gap:18px;padding:20px 0 16px}
#doc .exit,#hand .exit{margin-left:auto;font-size:16px;color:var(--accent);
  font-weight:600;cursor:pointer}
#doc .exit:hover,#hand .exit:hover{text-decoration:underline}
#doc main{padding:var(--s5) 0 0;max-width:74ch}
#doc .upd{margin-bottom:var(--s5)}
#doc h3{font-family:var(--hfont);font-size:21px;font-weight:700;color:var(--w);
  letter-spacing:-.015em;margin:var(--s5) 0 var(--s2)}
#doc p{margin-bottom:var(--s2)}
#doc ul{list-style:none;margin:var(--s2) 0}
#doc li{padding:6px 0 6px 24px;position:relative}
#doc li::before{content:"";position:absolute;left:4px;top:16px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
#doc .todo{color:#ff6b6b;font-weight:600;border-bottom:1px dashed rgba(255,107,107,.55)}
#doc .todo::before{content:"";}

#err{display:none;place-items:center;text-align:left}
body.err #err{display:grid}
.errcol{width:min(620px,88vw)}
.errcol .h1{margin:var(--s2) 0 var(--s3)}
.errcol p{font-size:19px;margin-bottom:var(--s4)}
.errcol .btn{margin-right:var(--s2)}

/* ── handoff to Playout ────────────────────────────────────────────── */
#hand main{padding:var(--s5) 0 0}
.handcol{max-width:72ch;position:relative;z-index:2}
.handcol .h1{margin-bottom:var(--s3)}
.carry{border-top:1px solid var(--line);margin:var(--s4) 0}
.carry .cr{display:grid;grid-template-columns:190px 1fr;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.carry .cr .k2{font-family:var(--hfont);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--w);opacity:.55}
.carry .cr .v{color:var(--w)}
.carry .dots{display:flex;gap:9px;margin-top:9px}
.carry .dots i{width:26px;height:26px;border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.45)}
.carry .sub{color:var(--w2);opacity:.85;margin-top:3px}
.carry .gap6{height:8px}
.handbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.handbar .cd{font-size:16px}
.handbar .cd b{color:var(--w)}
.stopgo{color:var(--accent);font-weight:600;cursor:pointer}
.stopgo:hover{text-decoration:underline}

/* ── cookie notice ─────────────────────────────────────────────────── */
#cookie{position:fixed;left:26px;bottom:26px;width:min(430px,calc(100vw - 52px));
  background:var(--raise);border-radius:14px;padding:var(--s3);z-index:70;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--out),transform var(--out),visibility var(--out)}
#cookie.show{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--in),transform var(--in),visibility var(--in)}
/* it belongs to the front page. Inside the wizard it would sit on top of the
   controls, so it steps aside and comes back when you return. */
body.setup #cookie,body.hand #cookie,body.err #cookie,body.doc #cookie,body.cat #cookie,body.chan #cookie{
  opacity:0;visibility:hidden;pointer-events:none}
#cookie .h2{margin-bottom:var(--s1)}
#cookie p{font-size:16px;margin-bottom:var(--s3)}
#cookie .crow{display:flex;align-items:center;gap:var(--s3)}

/* ── preview tools, not part of the product ────────────────────────── */
/* bottom right, out of the way of every real control. Deleting #devbar
   and this block removes the tools entirely. */
#devbar{position:fixed;bottom:18px;right:18px;z-index:90;font-family:var(--hfont)}
#devbar .pill{background:var(--orange);color:#231202;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border-radius:4px;
  cursor:pointer;user-select:none;display:inline-block}
#devbar .list{position:absolute;bottom:calc(100% + 8px);right:0;width:216px;
  background:var(--raise);border-radius:12px;padding:7px;
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--out),transform var(--out),visibility var(--out)}
#devbar.open .list{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--in),transform var(--in),visibility var(--in)}
#devbar .list b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--w);opacity:.45;padding:9px 11px 5px}
#devbar .dv{display:block;width:100%;text-align:left;background:none;border:0;
  font-family:var(--font);font-size:15px;color:var(--w2);padding:9px 11px;
  border-radius:8px;cursor:pointer;transition:background var(--out),color var(--out)}
#devbar .dv:hover{background:rgba(255,255,255,.07);color:var(--w);
  transition:background var(--in),color var(--in)}

@media(max-width:940px){
  .two,.optx .inner,.prevgrid,.cgrid{grid-template-columns:1fr;gap:var(--s4)}
  .stlgrid,.libs,.dcards{grid-template-columns:1fr}
  .tmplrow{grid-template-columns:1fr}
  /* One card per row, and every card compressed enough that the whole of it —
     name, price, all five lines and the button — is on the screen at once,
     without scrolling inside it. */
  .plans{grid-template-columns:1fr;gap:var(--s2)}
  .plan{padding:15px 15px 12px}
  .plan .pn{font-size:20px}
  .plan .pnote{font-size:14.5px}
  .plan .pp{margin-top:9px}
  .plan .pp b{font-size:25px}
  .plan .pyr{font-size:13.5px}
  .plan ul{margin-top:10px}
  .plan li{padding:3px 0 3px 24px;font-size:17px}
  .plan .pick{padding-top:10px;font-size:15px}
  /* the comparison, as one complete card per plan */
  .pstack{display:grid;gap:var(--s3)}
  .pcard{border:1.5px solid rgba(233,235,240,.16);border-radius:16px;
    padding:16px 16px 18px;background:rgba(7,8,13,.72)}
  .pcard.on{border-color:var(--accent);background:rgba(15,22,44,.9)}
  .pch2{font-family:var(--hfont);font-weight:800;font-size:21px;color:var(--w);
    letter-spacing:-.02em;margin-bottom:4px}
  .psg{font-family:var(--hfont);font-size:12px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--glow);margin:16px 0 6px}
  .ps{display:flex;gap:9px;font-size:16.5px;color:var(--w);line-height:1.35;
    padding-bottom:7px}
  .ps i{flex:none;width:6px;height:6px;margin-top:.6em;border-radius:50%;
    background:var(--glow)}
  .ps b{font-weight:700;color:var(--w2)}
  .ps.off{color:var(--w2)}
  .ps.off span{opacity:.45}
  .ps.off i{background:var(--w2);opacity:.35}

  /* the code and the button that applies it get a line each */
  .promo{max-width:none}
  .promorow{flex-direction:column;align-items:stretch}
  .promorow .btn{width:100%}
  /* One column puts the summary after the form, which on a phone means the
     price ends up below the button that commits to it. It goes first instead,
     under the code and above the fields. */
  .acctwrap{grid-template-columns:1fr;gap:var(--s4);max-width:none}
  .acctwrap .acctside{order:-1}
  /* On a tablet the source card is still a row, but the line confirming it can
     no longer sit beside a paragraph without crushing it, so it drops under. */
  .ownrow{flex-wrap:wrap}
  .ownrow .ck2{margin-left:0;width:100%;text-align:left}
  .backprev{filter:blur(9px) saturate(.7) brightness(.55);opacity:.12}
  .planhead{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .planhead .oah{font-size:28px}
  .cyc{align-self:flex-start}
  /* four columns of comparison do not fit a phone; it scrolls inside its own
     box rather than making the whole page scroll sideways */
  .ptable{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ptable table{min-width:640px}
  .planfoot{flex-direction:column;align-items:stretch}
  .planfoot .btn{width:100%;justify-content:center}
  .sumrow,.carry .cr{grid-template-columns:1fr;gap:var(--s1)}
  .fxcol{flex-direction:row;overflow-x:auto}
  .fxmini{min-width:240px}
  #devbar{bottom:14px;right:14px}
}

/* ── phones ─────────────────────────────────────────────────────────────
   Not the desktop shrunk. Everything that was side by side stacks, the
   connector becomes a straight drop, and type is set for a hand, not a wall. */
@media(max-width:760px){
  :root{--s1:6px;--s2:12px;--s3:18px;--s4:26px;--s5:36px;--sec:48px;
        --shell:calc(100vw - 40px)}
  body{font-size:16.5px;line-height:1.55}
  .h1{font-size:clamp(28px,7.6vw,38px);line-height:1.08}
  .h2{font-size:20px}
  /* Nothing under 12px on a screen held at arm's length. Lighthouse asks for
     12 and stops there; these are the labels that were under it. */
  .kick{font-size:12.5px;letter-spacing:.14em}
  .livemark{font-size:12px}
  .lib .sug{font-size:12px}



  /* The full-width button rule further down is for buttons in the page. Left to
     apply here it stretched the header button across the whole bar and pushed the
     logo, the link and the button into one corner on top of each other. */
  /* The header must survive 320 pixels: the logo may not be squeezed, so it is
     told not to shrink and everything in it is set a size down. */
  nav{height:58px;gap:8px}
  .logo{flex:none;font-size:15.5px;column-gap:7px}
  .logo .mk{height:1.05em;width:calc(1.05em * 6.4149 / 2.0153)}
  .logo small{font-size:12px;margin-top:2px}
  .navright{gap:9px}
  .burger{width:44px;height:44px;padding:0 10px;gap:4px}
  /* Under 360 the logo, the link and the button cannot all sit on one bar
     without the button running off the edge, so signing in moves into the
     panel, where it gets a line of its own under the five sections. */
  @media(max-width:365px){
    #loginLink{display:none}
    .navlinks .inpanel{display:block;grid-column:1/-1;border-top:1px solid var(--line);
      margin-top:8px;padding-top:14px;color:var(--accent)}
    body.menu .navlinks{max-height:300px}
  }
  nav .btn{width:auto;padding:9px 13px;font-size:14.5px;white-space:nowrap}
  .navprice{display:none}
  .pricestrip{display:flex;justify-content:center;align-items:center;gap:8px;
    min-height:44px;padding:10px 16px;text-decoration:none;
    font-family:var(--hfont);font-weight:700;font-size:14.5px;color:var(--w);
    background:rgba(91,141,239,.14);border-bottom:1px solid rgba(91,141,239,.35)}
  .pricestrip span{color:var(--accent)}
  #loginLink{font-size:15px;white-space:nowrap}

  .three{grid-template-columns:1fr;gap:var(--s3)}
  .gwrap.clip{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 54px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 54px),transparent)}

  .hero{min-height:auto;padding:var(--s5) 0 var(--sec)}
  .hero .hh{font-size:clamp(32px,8.8vw,44px);max-width:none;margin-top:var(--s2)}
  .hero .hsub{font-size:17px;max-width:none;margin-top:var(--s3)}
  .hero .after{margin-top:var(--s4);gap:var(--s2);align-items:stretch;flex-direction:column}
  .hero .after span{font-size:15.5px}
  .hero .veil{background:linear-gradient(180deg,rgba(7,8,13,.90) 30%,rgba(7,8,13,.70))}
  .forNew,.forOwner{flex-direction:column;align-items:stretch;gap:var(--s2)}

  /* On a phone a button that is the only action of its block fills the line;
     that is the convention every touch interface uses and it is what makes a
     call to action reachable with a thumb. The exceptions are the ones that sit
     inside a row of other things: the header, the small variant, and the two
     wizard controls, which share the line between them instead. */
  .btn{width:100%;justify-content:center;padding:15px 18px;font-size:16.5px;min-height:50px}
  .btn + .btn{margin-left:0}
  .btn.sm{width:auto;padding:10px 16px;font-size:14px;min-height:44px}
  .btn.big{font-size:18px;padding:17px 22px}
  /* 320px is the narrowest screen still in use. A label that would not fit gives
     up its padding before it gives up its line. */
  @media(max-width:360px){
    .btn{padding:14px 12px;font-size:15.5px;gap:6px}
    .btn.big{font-size:16.5px;padding:15px 14px}
  }

  /* the source card: a column, so the heading, the description and the line that
     confirms the choice each get the full width instead of a third of it */
  .ownrow{flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s3)}
  .ownrow .oh{font-size:23px}
  .ownrow p{font-size:16px}
  .ownrow .arr{margin-left:0;font-size:26px}
  .ownrow .ck2{margin-left:0;width:100%;text-align:left;font-size:16px}

  /* the carousel has to fit a hand, not a monitor */
  .strip{padding:var(--s4) 0}
  .track{gap:44px;animation-duration:34s}
  .mwrap.rev .track{animation-duration:42s}
  .lchip{height:62px}
  .lchip img{max-width:150px;max-height:44px}
  .nums{gap:var(--s3) var(--s4);margin-top:var(--s4)}
  .nums .n{font-size:27px}
  .nums .l{font-size:14px}

  /* one column everywhere, and the connector drops straight down */
  .whogrid,.moneygrid,.grid6,.makergrid,.chain,.fgrid,
  .two,.optx .inner,.prevgrid,.cgrid,.stlgrid,.libs{grid-template-columns:1fr;gap:var(--s4)}
  .fgrid{gap:var(--s5)}
  /* a stepper: the circles sit in a gutter and the line runs down it,
     so nothing crosses the words */
  .fnode{width:100%;position:relative;padding-left:60px;min-height:46px}
  .fnode:nth-child(even){margin-left:0}
  .fnode .num{position:absolute;left:0;top:0;margin:0}
  .fnode p{max-width:none;font-size:16.5px}
  .fnode .h2{font-size:20px}
  .who p,.wide{max-width:none}
  .clink{padding-right:0;margin-bottom:var(--s3)}
  .clink::after{display:none}

  section{padding:var(--sec) 0}
  #setup .intro{font-size:18.5px;margin-bottom:var(--s4)}

  /* the wizard: the rail turns into a single line, panels stack in reading order */
  .swrap{padding-bottom:var(--s5)}
  #setup .shead{gap:10px;padding:14px 0 10px;flex-wrap:wrap}
  .rail{gap:5px}
  .rail .lbl2{font-size:0;letter-spacing:0}
  .rail .seg{padding-top:8px}
  .foot2{flex-wrap:wrap;gap:var(--s2)}
  .foot2 .fnote{order:3;width:100%;font-size:14.5px}
  /* Back and Continue are the exception to the full-width rule: they are two
     actions on one line, so they take the width of their labels and sit
     together at the left. Stretched to half the bar each, the longer label was
     wider than the button holding it and had its arrow cut off. */
  .foot2 .btn{margin-left:0;width:auto;flex:0 1 auto;min-width:0;padding:14px 18px}
  .sumrow,.carry .cr{grid-template-columns:1fr;gap:6px}
  .sumrow .ed{justify-self:start}
  .tipbox{width:min(300px,78vw)}

  #auth .card{width:100%;padding:var(--s3);border-radius:14px 14px 0 0;
    position:absolute;left:0;right:0;bottom:0}
  #cookie{left:12px;right:12px;bottom:12px;width:auto;padding:var(--s3)}
  #doc main{padding-top:var(--s4)}
  .frow{flex-direction:column;gap:var(--s2);font-size:14.5px}
  #devbar{bottom:10px;right:10px}
  #devbar .pill{font-size:11px;padding:7px 10px}
}


/* ── writing to us ──────────────────────────────────────────────────────
   A form, not a mail client. The page behind is dimmed and blurred rather
   than replaced, so nothing that was being built is lost sight of. Closing
   folds the panel into the corner it lives in, and what was typed stays
   typed: the same draft is there on the landing page, in the setup and on
   the documents. */
#contact{position:fixed;inset:0;z-index:120;display:none}
body.writing #contact{display:block}
#contact .cshade{position:absolute;inset:0;background:rgba(5,6,10,.66);
  -webkit-backdrop-filter:blur(14px) saturate(.7);backdrop-filter:blur(14px) saturate(.7);
  opacity:0;transition:opacity var(--out)}
body.writing.wopen #contact .cshade{opacity:1;transition:opacity var(--in)}
#contact .cpanel{position:absolute;left:50%;top:50%;width:min(620px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow:auto;
  background:var(--raise);border:1.5px solid rgba(233,235,240,.14);border-radius:20px;
  padding:var(--s4);box-shadow:0 40px 120px rgba(0,0,0,.75);
  transform:translate(-50%,-50%) scale(.94);opacity:0;
  transition:transform var(--out),opacity var(--out)}
body.writing.wopen #contact .cpanel{transform:translate(-50%,-50%) scale(1);opacity:1;
  transition:transform var(--in),opacity var(--in)}
/* the fold into the corner: measured at the moment of closing, so it lands on
   the bubble wherever the bubble is */
#contact.folding .cpanel{transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .42s ease}
#contact .cclose{position:absolute;top:8px;right:10px;background:none;border:0;
  color:var(--w2);font-size:26px;line-height:1;cursor:pointer;padding:0;
  width:44px;height:44px;display:grid;place-items:center}
#contact .cclose:hover{color:var(--w)}
.cto{font-size:14.5px;color:var(--w2);margin:var(--s3) 0}
.cfields{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.cfields textarea.inp{resize:vertical;min-height:118px;line-height:1.5}
.crow2{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap}
.cnote{font-size:14.5px;color:var(--w2)}
.cnote.bad{color:var(--glow)}

/* the corner it folds into, and starts from */
#cbub{position:fixed;right:22px;bottom:22px;z-index:110;width:56px;height:56px;
  border-radius:50%;border:1.5px solid rgba(233,235,240,.2);cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:linear-gradient(168deg,rgba(120,163,247,.95),rgba(72,116,214,.9));
  box-shadow:0 14px 34px rgba(24,54,120,.5);
  transition:transform var(--out),box-shadow var(--out)}
#cbub:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 20px 44px rgba(24,54,120,.62)}
#cbub svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
#cbub .dot{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;
  background:var(--glow);border:2px solid var(--bg);display:none}
#cbub.has .dot{display:block}
#cbub.pop{animation:bubPop .5s cubic-bezier(.3,1.5,.5,1) 1}
@keyframes bubPop{0%{transform:scale(.72)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
body.writing #cbub,body.phone #cbub{display:none}
/* the preview tools sit in the same corner; they step aside for it */
body.tools #devbar{right:92px}
@media(max-width:760px){
  #cbub{right:14px;bottom:14px;width:50px;height:50px}
  body.tools #devbar{right:76px}
  #contact .cpanel{width:calc(100vw - 20px);padding:var(--s3)}
}

/* ── fingertips ─────────────────────────────────────────────
   Keyed on there being no mouse, not on the screen being narrow: an iPad is 768
   pixels wide and every target on it is still hit with a thumb.

   44px on the shortest side is Apple's floor and WCAG 2.5.5; Lighthouse asks
   for 48 and mentions anything under it. A word in a list of words keeps its
   own width — "TV" cannot be 44 wide without pushing the rest of the line off
   the screen — and gets its height and the space around it instead. All of it
   is padding, so nothing about the design changes; only what a thumb can hit. */
body.touch .tagwrap{gap:0 18px}
body.touch .tg{padding:9px 0}
body.touch .gmore{padding:10px 0}
body.touch .logo{padding:7px 0}
body.touch .demofill{min-height:44px;padding:11px 15px}
/* Padding, not a negative margin: pulled up by ten pixels the tap area reached
   into the line above it. The row is a little taller instead. */
body.touch .sumrow .ed{display:inline-block;padding:10px 12px;margin:0 -12px}
body.touch .btn.sm{min-height:44px}
body.touch .burger{width:44px;height:44px}
body.touch .exit{padding:11px 0;display:inline-block}
/* Pinned to the top right corner it landed on top of the label beside it as
   soon as the column narrowed. Without a mouse it takes a line of its own. */
body.touch .aidesc > .regen{position:static;display:block;padding:11px 0;
  margin-bottom:2px;min-height:44px}
body.touch .livemark{font-size:12px}
body.touch .lib .sug{font-size:12px}

/* ── no cursor, no hover ────────────────────────────────────────────────
   A phone only has a tap. Anything that only ever happened under a pointer
   would either never fire or stick after the tap, so it is switched off. */
body.touch .tg:hover::before{opacity:0}
body.touch .tg:hover{color:var(--w2)}
body.touch .tg.on{color:var(--accent)}
body.touch .btn:hover{transform:none;filter:none;box-shadow:inherit}
body.touch .btn:hover::after{transform:translateX(-140%) rotate(18deg);transition:none}
body.touch .stl:hover::before,body.touch .lib:hover::before,
body.touch .ownrow:hover::before,body.touch .clink:hover::before{opacity:0}
body.touch .navlinks a:hover,body.touch .lnk:hover{text-decoration:none}
body.touch .lbl:hover .tipbox,body.touch .tipwrap:hover .tipbox{opacity:0}
body.touch .ti:active + .tipbox,body.touch .tipbox.open{opacity:1;transform:none}

/* ── phone preview, a tool and not part of the site ─────────────────────
   The page is loaded again inside a 390px window so the real phone rules
   apply, then that window is scaled. Anything else would just be a
   shrunken desktop. */
#phone{position:fixed;inset:0;z-index:100;background:#000;display:none;
  place-items:center}
body.phone #phone{display:grid}
body.phone #site,body.phone #setup,body.phone #doc,body.phone #err,
body.phone #hand,body.phone #cookie{display:none!important}
#phone .screen{position:relative;width:390px;height:844px;flex:none;
  transform-origin:center center;border-radius:34px;overflow:hidden;
  background:var(--bg);box-shadow:0 0 0 2px rgba(255,255,255,.14),
    0 40px 120px rgba(0,0,0,.9)}
#phone iframe{width:100%;height:100%;border:0;display:block}
#phone .ctl{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--s3);z-index:2;
  background:var(--raise);border-radius:14px;padding:12px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.8)}
#phone .ctl label{font-family:var(--hfont);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--w);opacity:.55}
#phone .ctl output{font-family:var(--mono,'Cascadia Mono',Consolas,monospace);
  font-size:13px;color:var(--w);min-width:112px;text-align:right}
#phone input[type=range]{width:260px;accent-color:var(--accent);cursor:pointer}
#phone .close{color:var(--accent);font-weight:600;cursor:pointer;font-size:15px}
#phone .close:hover{text-decoration:underline}
body.framed #devbar,body.framed #phone{display:none!important}

/* ── the opening: a channel finding its signal ──────────────────────────
   A hairline strikes across the middle, opens into colour bars, the picture
   glitches once, then the tube switches off and the page is already there.
   Six hundred milliseconds, transforms and opacity only. The bars use the
   brand palette from MYFAST_logo_01.pdf; those colours appear nowhere else. */
#intro{position:fixed;inset:0;z-index:200;pointer-events:none;background:#000;
  transform-origin:center;will-change:transform,opacity;
  animation:tubeOff .30s cubic-bezier(.7,0,.3,1) .46s forwards}
#intro .bars{position:absolute;inset:0;display:flex;
  clip-path:inset(50% 0 50% 0);
  animation:bandOpen .17s cubic-bezier(.2,.8,.2,1) .07s forwards,
            barsWipe .16s steps(5,end) .30s forwards}
#intro .bars i{flex:1;height:100%}
#intro .bars i:nth-child(1){background:#ED1842}
#intro .bars i:nth-child(2){background:#F37120}
#intro .bars i:nth-child(3){background:#FBCC10}
#intro .bars i:nth-child(4){background:#0BAC4B}
#intro .bars i:nth-child(5){background:#189BD7}
#intro .line{position:absolute;left:0;right:0;top:50%;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:center;
  box-shadow:0 0 24px 6px rgba(255,255,255,.9);
  animation:strike .09s cubic-bezier(.2,.9,.2,1) forwards,
            lineOut .12s ease .13s forwards}
#intro .scan{position:absolute;inset:0;mix-blend-mode:overlay;opacity:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 1px,
    transparent 1px 3px);
  animation:scanOn .26s steps(4,end) .12s}
#intro .tear{position:absolute;left:0;right:0;height:12%;background:#fff;
  opacity:0;mix-blend-mode:overlay;
  animation:tear .18s steps(3,end) .24s}

@keyframes strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lineOut{to{opacity:0;transform:scaleX(1) scaleY(6)}}
@keyframes bandOpen{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0)}}
@keyframes barsWipe{to{clip-path:inset(0 0 0 100%)}}
@keyframes scanOn{0%{opacity:0}20%{opacity:1}70%{opacity:.55}100%{opacity:0}}
@keyframes tear{0%{opacity:0;top:18%}
  33%{opacity:.9;top:62%;transform:translateX(-4%)}
  66%{opacity:.7;top:34%;transform:translateX(5%)}
  100%{opacity:0;top:50%}}
@keyframes tubeOff{
  0%{transform:scaleY(1) scaleX(1);opacity:1;filter:brightness(1)}
  55%{transform:scaleY(.06) scaleX(1.02);opacity:1;filter:brightness(2.4)}
  100%{transform:scaleY(.004) scaleX(.4);opacity:0;filter:brightness(3)}}

/* the words arrive already mid-signal, then settle */
.beat.gl{animation:glitchIn .5s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes glitchIn{
  0%{opacity:0;transform:translate3d(-16px,0,0) skewX(7deg);
     clip-path:inset(42% 0 42% 0);filter:blur(1px)}
  26%{opacity:1;transform:translate3d(9px,0,0) skewX(-4deg);
      clip-path:inset(0 0 58% 0);filter:blur(0)}
  48%{transform:translate3d(-5px,0,0) skewX(2deg);clip-path:inset(56% 0 0 0)}
  70%{transform:translate3d(2px,0,0);clip-path:inset(0)}
  100%{opacity:1;transform:none;clip-path:inset(0);filter:none}}
body.intro .b1{animation-delay:.40s}
body.intro .b2{animation-delay:.50s}
body.intro .b3{animation-delay:.62s}
body.intro .b4{animation-delay:.74s}

@media(prefers-reduced-motion:reduce){
  #intro{display:none}
  .beat,.beat.gl{animation:beatIn .4s ease forwards}
}

/* ── blocks arrive as the page is scrolled ──────────────────────────────
   One movement, used everywhere: a short rise out of nothing. The pieces
   inside a block follow each other rather than landing together, which is
   what makes it read as considered instead of decorated. */
body.rvon .rvi{opacity:0}
body.rvon .rvi.in{animation:rvUp .5s cubic-bezier(.22,.75,.2,1) var(--d,0s) both}
@keyframes rvUp{from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}}

/* the connector is drawn one span at a time, between the blocks it joins */
.flowsvg path{transition:stroke-dashoffset .46s cubic-bezier(.35,0,.2,1)}

@media(prefers-reduced-motion:reduce){
  body.rvon .rvi,body.rvon .rvi.in{opacity:1;animation:none}
  .flowsvg path{transition:none}
}

/* ── the opening, second version ────────────────────────────────────────
   Three slots flip through pixel figures and lock one after another, then
   the letter cuts in beside them. Black and white, hard cuts, no easing:
   the rhythm is the whole effect. */
#flip{position:fixed;inset:0;z-index:200;background:#000;pointer-events:none;
  display:grid;place-items:center;
  animation:hide .001s steps(1,end) .92s forwards}
#flip .rig{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  --c:clamp(34px,4.2vw,74px)}
#flip .m{width:calc(var(--c)*3);height:calc(var(--c)*2);color:#fff;
  opacity:0;animation:show .001s steps(1,end) .80s forwards}
#flip .m svg{width:100%;height:100%;fill:currentColor}
#flip .slot{width:var(--c);height:calc(var(--c)*2);overflow:hidden;position:relative}
#flip .strip{position:absolute;inset:0;display:grid;grid-auto-rows:calc(var(--c)*2)}
#flip .strip b{display:grid;grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(4,1fr)}
#flip .strip b i{background:#fff}
/* each slot runs the strip and stops on its own beat */
#flip .s1 .strip{animation:reel1 .46s steps(8,end) forwards,
  hide .001s steps(1,end) .46s forwards}
#flip .s2 .strip{animation:reel2 .60s steps(11,end) forwards,
  hide .001s steps(1,end) .60s forwards}
#flip .s3 .strip{animation:reel3 .76s steps(14,end) forwards,
  hide .001s steps(1,end) .76s forwards}
/* when a slot stops flipping it becomes the square it stands for in the mark,
   which is the only way the last frame is guaranteed to be the logo */
#flip .slot::after{content:"";position:absolute;left:0;width:100%;height:50%;
  background:#fff;opacity:0}
#flip .s1::after,#flip .s3::after{top:0}
#flip .s2::after{bottom:0}
#flip .s1::after{animation:show .001s steps(1,end) .46s forwards}
#flip .s2::after{animation:show .001s steps(1,end) .60s forwards}
#flip .s3::after{animation:show .001s steps(1,end) .76s forwards}
#flip .s2{opacity:0;animation:show .001s steps(1,end) .04s forwards}
#flip .s3{opacity:0;animation:show .001s steps(1,end) .08s forwards}
/* the single inverted frame that ends it */
#flip .bar{position:absolute;inset:0;background:#fff;mix-blend-mode:difference;
  opacity:0;animation:show .001s steps(1,end) .86s forwards}
@keyframes reel1{to{transform:translateY(calc(var(--c)*-16))}}
@keyframes reel2{to{transform:translateY(calc(var(--c)*-22))}}
@keyframes reel3{to{transform:translateY(calc(var(--c)*-28))}}
@keyframes show{to{opacity:1}}
@keyframes hide{to{opacity:0}}

body.nofx #intro,body.nofx #flip{display:none}
/* ===== catalog: built from the landing's own tokens and components ===== */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) 22px;margin-top:var(--s4)}
@media(max-width:1180px){.catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.catgrid{grid-template-columns:1fr}}
.cch{display:block;color:inherit;cursor:pointer}
.cch .frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);transition:transform var(--out),border-color var(--out)}
.cch:hover .frame{transform:translateY(-4px);border-color:rgba(91,141,239,.5)}
.cch video,.cch .pv{width:100%;height:100%;object-fit:cover;display:block}
.cch .frame.ph{display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 15%,color-mix(in srgb,var(--c) 55%,transparent),transparent 68%),linear-gradient(140deg,color-mix(in srgb,var(--c) 26%,var(--bg2)),var(--bg2))}
.cch .frame.ph .mono{width:74px;height:74px;border-radius:17px;background:var(--c);display:grid;
  place-items:center;font-family:var(--hfont);font-weight:800;font-size:29px;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
.cch .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.5))}
.cch .chlogo{position:absolute;right:10px;bottom:10px;width:clamp(38px,3.2vw,52px);height:auto;
  border-radius:6px;z-index:3;box-shadow:0 2px 10px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)}
.cch .rtag{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--hfont);font-size:11px;
  font-weight:700;letter-spacing:.05em;color:var(--w);background:rgba(0,0,0,.52);
  border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:3px 8px}
.cch .cap{padding-top:var(--s2)}
.cch .cap .h2{margin-bottom:6px}
.cch .now{font-weight:600;font-size:clamp(15px,.72vw,18px);color:var(--w);margin-top:2px}
.cch .now b{color:var(--accent);font-weight:700}
.cch .tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px}
/* tags are chips in the site's rounded-rectangle language, not pills */
.pill{font-family:var(--hfont);font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--w);
  background:rgba(91,141,239,.15);border:1px solid rgba(91,141,239,.3);border-radius:7px;padding:5px 11px}
.cch .lang{font-family:var(--hfont);font-weight:700;font-size:13px;color:var(--w2);letter-spacing:.03em}
.cch .initbadge{position:absolute;right:10px;bottom:10px;z-index:3;width:46px;height:46px;border-radius:9px;
  display:grid;place-items:center;font-family:var(--hfont);font-weight:800;font-size:17px;color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.16)}
.catmore{display:flex;justify-content:center;margin-top:var(--s5)}
/* the catalog is hidden on the public site and revealed only by the small
   unlabeled button in the footer, so testing does not expose it */
.catlink{display:none}
body.showcat .catlink{display:inline-block}
.catpreview{display:none}
body.showcat .catpreview{display:block}
body.showcat .pubchannels{display:none}
.revealdot{display:inline-block;width:12px;height:12px;margin-left:12px;vertical-align:middle;
  padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.05);cursor:pointer;
  transition:background var(--out)}
.revealdot:hover{background:rgba(255,255,255,.14)}

/* catalog + channel are full pages, like #setup / #doc */
#catalog,#chan{display:none;min-height:100vh}
body.cat #catalog{display:block} body.cat #site{display:none}
body.chan #chan{display:block} body.chan #site{display:none}
.pghead{display:flex;align-items:center;gap:18px;padding:20px 0 16px;border-bottom:1px solid var(--line)}
.pghead .logo{margin-right:auto}
#catalog main,#chan main{padding:var(--s5) 0 var(--sec)}
.pgkick{margin-bottom:var(--s2)}
.backlnk{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;
  cursor:pointer;font-size:16px;margin-bottom:var(--s3)}

/* filter bar: the site's own animated dropdown, laid out in a row */
.filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--s4)}
.filtsearch{flex:1;min-width:230px;position:relative}
.filtsearch input{width:100%;background:var(--raise);border:1.5px solid var(--line);color:var(--w);
  border-radius:100px;padding:13px 18px 13px 44px;font-family:var(--font);font-size:16px}
.filtsearch input:focus{outline:none;border-color:var(--accent);background:rgba(91,141,239,.08)}
.filtsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--w2);opacity:.7}
.filterbar .sel{width:auto;min-width:158px}
.filterbar .selbtn{border-radius:11px;padding:12px 40px 12px 15px;font-size:15px;font-weight:600}
.morefbtn{white-space:nowrap}
.morefrow{display:none;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;
  border-top:1px solid var(--line);padding-top:14px;width:100%}
.morefrow.on{display:flex}

/* channel page */
.chanhero{display:grid;grid-template-columns:1.12fr 1fr;gap:var(--s4);align-items:start;margin-top:var(--s3)}
@media(max-width:900px){.chanhero{grid-template-columns:1fr}}
.chanhero .player{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.chanhero .player video,.chanhero .player .pv{width:100%;height:100%;object-fit:cover;display:block}
.chanhero .player.ph{display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 15%,color-mix(in srgb,var(--c) 55%,transparent),transparent 68%),linear-gradient(140deg,color-mix(in srgb,var(--c) 26%,var(--bg2)),var(--bg2))}
.chanhero .player.ph .mono{width:96px;height:96px;border-radius:22px;background:var(--c);display:grid;
  place-items:center;font-family:var(--hfont);font-weight:800;font-size:38px;color:#fff}
.chanside{display:flex;flex-direction:column;justify-content:center;gap:var(--s3)}
.chanid{display:flex;align-items:center;gap:16px}
.chanid .big{width:70px;height:70px;flex:none;border-radius:17px;background:var(--c);display:grid;
  place-items:center;font-family:var(--hfont);font-weight:800;font-size:28px;color:#fff}
.chanchips{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:8px}
.chandesc{font-size:clamp(16px,.8vw,20px);color:var(--w);line-height:1.55}
.csec{margin-top:var(--sec)}
.csec .lbl{margin-bottom:var(--s3)}
.chanid .chanlogo{width:70px;height:70px;flex:none;border-radius:15px;object-fit:cover;
  background:var(--raise);box-shadow:0 0 0 1px var(--line)}
.dlrow{margin-top:var(--s2)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:var(--s2)}
.fact{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.fact .fk{font-family:var(--hfont);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.fact .fv{font-weight:600;color:var(--w);font-size:16px;margin-top:6px;overflow-wrap:anywhere}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.relgrid{grid-template-columns:1fr}}