@import url("./fonts.css");

/* ============================================================================
   Viral Explainers
   What is measured, not picked:
     paper  #E7E9ED   sampled from a real built frame
     accents          sampled from the three channel avatars; each has an _ink variant that
                      passes 4.5:1 on the paper, because orange itself is 2:1 and is a fill only
     torn masks       _build/engines.torn_mask, the routine that tears every pop-up in the videos
   Only pictures tear. Offers, tables and forms are cut clean, the product's own law: a torn
   picture lying on a clean sheet.
   Written phone first. The desktop layout starts at 960px.
   ========================================================================= */

:root{
  --paper:#E7E9ED;
  --sheet:#F7F8FA;
  --ink:#101215;
  --ink-2:#454B55;
  --ink-3:#5A616C;
  --rule:rgba(16,18,21,.16);
  --rule-soft:rgba(16,18,21,.08);
  --on-ink:#E7E9ED;
  --on-ink-2:#B9BEC6;

  --c:#101215; --c-ink:#101215; --c-soft:#DADDE2; --c-on:#FFFFFF;

  --f:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --anton:'Anton', Impact, 'Arial Narrow', sans-serif;
  --or:#D97757;          /* the site's orange, a fill: buttons, the top, the numbers on the beat chips */
  --or-ink:#B0542E;      /* the same orange dark enough for text on the paper */
  --cream:#FFFBF4;
  --gut:20px;
  --max:1160px;
  --bar-h:0px;
}
@media (min-width:600px){ :root{ --gut:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:16px; line-height:1.5; font-weight:420;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
/* the real crumpled paper, quieter than the rate card had it so tables and forms read clean */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("./paper.jpg") 0 0 / 1040px 1040px; opacity:.55;
}

img,video,svg{ max-width:100%; display:block; }
a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:1.5px; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:2px; }

.vx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.vx-skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 14px; }
.vx-skip:focus{ left:8px; }

.vx-wrap{ width:100%; max-width:calc(var(--max) + var(--gut) * 2); margin-inline:auto; padding-inline:var(--gut); }
.vx-section{ padding-block:48px; border-top:1px solid var(--rule); }
.vx-section--tight{ padding-block:28px; }
@media (min-width:960px){ .vx-section{ padding-block:80px; } }

/* ---- type ---------------------------------------------------------------- */
/* the videos colour the word being said #B0542E (engines.BEAT_COLOUR) and lift it off the paper with a
   white halo; titles borrow that, so the page speaks in the same voice as the videos */
.vx-hot{ color:#B0542E; text-shadow:0 0 .32em rgba(255,255,255,.95), 0 0 .08em #fff; }
.vx-chead__name{ color:var(--c-ink, var(--ink)); }
.vx-h2, .vx-chead__name{ text-wrap:balance; }
.vx-h2{ font-weight:800; font-size:28px; line-height:1.1; letter-spacing:-.018em; word-spacing:.03em; margin:0 0 12px; max-width:22ch; }
.vx-h3{ font-weight:760; font-size:19px; line-height:1.2; letter-spacing:-.02em; margin:0 0 6px; }
.vx-h4{ font-weight:680; font-size:14px; line-height:1.3; margin:22px 0 10px; color:var(--ink-2); }
.vx-lede{ font-size:17px; line-height:1.5; color:var(--ink-2); margin:0; max-width:56ch; }
.vx-scope{ font-size:14px; line-height:1.45; color:var(--ink-3); margin:8px 0 0; }
.vx-note{ font-size:14px; line-height:1.45; color:var(--ink-3); margin:16px 0 0; max-width:60ch; }
.vx-prose p{ margin:0 0 14px; font-size:17px; line-height:1.55; color:var(--ink-2); max-width:54ch; }
@media (min-width:960px){
  .vx-h2{ font-size:40px; margin-bottom:14px; }
  .vx-lede{ font-size:18px; }
}

/* ---- buttons ------------------------------------------------------------- */
.vx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 20px; border-radius:3px; border:2px solid transparent;
  font-weight:700; font-size:16px; line-height:1.2; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .12s ease, background-color .15s ease;
}
.vx-btn:active{ transform:translateY(1px); }
.vx-btn--ink{ background:var(--ink); color:var(--paper); }
.vx-btn--ink:hover{ background:#2A2E35; }
.vx-btn--paper{ background:var(--paper); color:var(--ink); }
.vx-btn--paper:hover{ background:#fff; }
.vx-btn--accent{ background:var(--c); color:var(--c-on); }
.vx-btn--line{ border-color:var(--ink); color:var(--ink); background:transparent; }
.vx-btn--line:hover{ background:rgba(16,18,21,.06); }
.vx-btn--sm{ min-height:40px; padding:8px 14px; font-size:15px; }

/* ---- header -------------------------------------------------------------- */
.vx-head{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule); padding-top:env(safe-area-inset-top, 0px); }
/* on a phone the top bar scrolls away once people scroll; the Start an inquiry bar at the bottom stays (his note 2026-09-15) */
@media (max-width:959px){ .vx-head{ position:relative; } html{ scroll-padding-top:12px; } }
.vx-head__in{ display:flex; align-items:center; gap:16px; min-height:56px; }
.vx-mark{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.025em; text-decoration:none; white-space:nowrap; }
.vx-dots{ display:inline-flex; gap:3px; }
.vx-dots i{ width:8px; height:8px; border-radius:50%; display:block; }
.vx-nav{ display:none; }
.vx-menu{
  margin-left:auto; min-height:44px; min-width:64px; padding:0 14px;
  background:transparent; border:1.5px solid var(--rule); border-radius:3px; font-weight:650; font-size:15px; cursor:pointer;
}
.vx-menu[aria-expanded="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.vx-sheet{ border-top:1px solid var(--rule); background:var(--paper); }
.vx-sheet .vx-wrap{ display:flex; flex-direction:column; padding-block:8px 18px; }
.vx-sheet a:not(.vx-btn){ display:flex; align-items:center; gap:10px; min-height:48px; font-size:18px; font-weight:650; text-decoration:none; border-bottom:1px solid var(--rule-soft); }
.vx-sheet__chan a{ font-size:16px !important; font-weight:560 !important; color:var(--ink-2); }
.vx-sheet__chan i, .vx-nav__drop i{ width:10px; height:10px; border-radius:50%; display:block; flex:0 0 10px; }
.vx-sheet .vx-btn{ margin-top:16px; }
@media (min-width:960px){
  .vx-menu,.vx-sheet{ display:none !important; }
  .vx-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
  .vx-nav > a:not(.vx-btn), .vx-nav summary{ padding:10px 12px; font-size:15px; font-weight:600; text-decoration:none; color:var(--ink-2); border-radius:3px; cursor:pointer; list-style:none; }
  .vx-nav summary::-webkit-details-marker{ display:none; }
  .vx-nav > a:not(.vx-btn):hover, .vx-nav summary:hover{ color:var(--ink); background:rgba(16,18,21,.06); }
  .vx-nav .vx-btn{ margin-left:10px; }
  .vx-nav__chan{ position:relative; }
  .vx-nav__drop{ position:absolute; right:0; top:calc(100% + 6px); min-width:240px; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; padding:6px; box-shadow:0 18px 40px -24px rgba(16,18,21,.45); }
  .vx-nav__drop a{ display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:15px; font-weight:600; text-decoration:none; border-radius:2px; }
  .vx-nav__drop a:hover, .vx-nav__drop a[aria-current]{ background:rgba(16,18,21,.06); }
}

/* ---- the top: set like his covers (_build/thumb_five.py), the three most viewed videos, the two offers ---- */
.vx-hero{ position:relative; }
/* the top ends on a feather into the page, never a ruled line (his note 2026-09-15) */
.vx-hero__in{ position:relative; -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 230px), rgba(0,0,0,.93) calc(100% - 190px), rgba(0,0,0,.76) calc(100% - 145px), rgba(0,0,0,.5) calc(100% - 100px), rgba(0,0,0,.24) calc(100% - 55px), rgba(0,0,0,.07) calc(100% - 20px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 230px), rgba(0,0,0,.93) calc(100% - 190px), rgba(0,0,0,.76) calc(100% - 145px), rgba(0,0,0,.5) calc(100% - 100px), rgba(0,0,0,.24) calc(100% - 55px), rgba(0,0,0,.07) calc(100% - 20px), transparent); }
.vx-hero{ margin-bottom:-150px; }
.vx-hero + .vx-section{ position:relative; border-top:0; padding-top:18px; }
/* the colour and the offers meet on torn paper: a ragged bottom edge on a phone, a ragged right edge beside the offers */
.vx-stage-wrap{ position:relative; z-index:1; filter:drop-shadow(0 5px 6px rgba(0,0,0,.3)); }
.vx-stage{ -webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - 22px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='24' viewBox='0 0 320 24'%3E%3Cpath d='M0,0 H320 V21.4 L315,21.4 L308,20.1 L301,13.4 L294,9.9 L287,17.2 L280,16.7 L273,20.9 L266,7.9 L259,7.4 L252,5.3 L245,21.1 L238,13.3 L231,21.9 L224,19.7 L217,11.9 L210,16.0 L203,20.8 L196,14.7 L189,11.1 L182,14.6 L175,6.3 L168,12.1 L161,12.7 L154,8.9 L147,13.7 L140,20.7 L133,8.8 L126,18.6 L119,19.9 L112,19.6 L105,8.9 L98,9.5 L91,9.8 L84,17.0 L77,10.7 L70,9.1 L63,22.0 L56,19.6 L49,16.6 L42,20.0 L35,5.3 L28,21.8 L21,7.7 L14,17.5 L7,5.2 L0,21.4 Z'/%3E%3C/svg%3E") left bottom / 320px 24px repeat-x;
  mask:linear-gradient(#000 0 0) top / 100% calc(100% - 22px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='24' viewBox='0 0 320 24'%3E%3Cpath d='M0,0 H320 V21.4 L315,21.4 L308,20.1 L301,13.4 L294,9.9 L287,17.2 L280,16.7 L273,20.9 L266,7.9 L259,7.4 L252,5.3 L245,21.1 L238,13.3 L231,21.9 L224,19.7 L217,11.9 L210,16.0 L203,20.8 L196,14.7 L189,11.1 L182,14.6 L175,6.3 L168,12.1 L161,12.7 L154,8.9 L147,13.7 L140,20.7 L133,8.8 L126,18.6 L119,19.9 L112,19.6 L105,8.9 L98,9.5 L91,9.8 L84,17.0 L77,10.7 L70,9.1 L63,22.0 L56,19.6 L49,16.6 L42,20.0 L35,5.3 L28,21.8 L21,7.7 L14,17.5 L7,5.2 L0,21.4 Z'/%3E%3C/svg%3E") left bottom / 320px 24px repeat-x; padding-bottom:32px; }
.vx-stage{ position:relative; isolation:isolate; overflow:hidden; padding:12px var(--gut) 54px; color:var(--st-1, #fff);
  background:url("./paper.jpg") center / 760px, var(--st-bg); background-blend-mode:multiply; }

/* the cover type: Anton capitals, an ink outline a seventeenth of the letter (0.118em of stroke, half of it inside
   the fill), the cover's soft drop shadow, and the ladder small, middle, biggest for the answer */
.vx-hl{ margin:0; width:100%; container-type:inline-size; font-family:var(--anton); font-weight:400; text-transform:uppercase; line-height:1.04; letter-spacing:.006em;
  text-align:var(--st-align, left); color:var(--st-1); -webkit-text-stroke:var(--st-stroke, .118em) var(--st-line, #0E0A0A); paint-order:stroke fill;
  text-shadow:var(--st-shadow, 0 .05em .07em rgba(0,0,0,.55)); }
.vx-hl > span{ display:block; white-space:nowrap; }
.vx-hl__pre{ font-size:7.6cqi; letter-spacing:.07em; }
.vx-hl__num{ position:relative; isolation:isolate; width:fit-content; font-size:18.5cqi; line-height:1.06; letter-spacing:-.01em; color:var(--st-num);
  margin-block:var(--st-num-gap, .08em .1em); margin-inline:var(--st-num-x, 0); background:var(--st-hi, transparent); padding-inline:var(--st-hi-pad, 0);
  transform:rotate(var(--st-hi-tilt, 0deg)); }
.vx-hl__num::before{ content:""; position:absolute; inset:-.12em -.16em -.14em -.16em; border:6px solid var(--st-ring, transparent); border-radius:50%; transform:rotate(-4deg); z-index:-1; }
.vx-hl__tail{ width:fit-content; margin-inline:var(--st-num-x, 0); font-size:8.4cqi; color:#fff; background:var(--ink); padding:.14em .38em .06em; transform:rotate(-2.5deg);
  -webkit-text-stroke:0; text-shadow:none; box-shadow:0 .12em .24em rgba(0,0,0,.4); }
.vx-hl__unit{ font-size:.46em; margin-left:.14em; color:var(--st-1); }
.vx-eye{ display:inline-block; font-size:.6em; margin-left:.08em; vertical-align:.14em; -webkit-text-stroke:0; text-shadow:none; line-height:1; }

/* the proof: three covers with the platform, the eye and the number */
.vx-proofs{ list-style:none; margin:10px 0 0; padding:0; display:flex; gap:12px; justify-content:var(--st-justify, flex-start); }
.vx-proof{ position:relative; flex:0 1 26%; max-width:100px; padding-bottom:14px; filter:drop-shadow(0 10px 12px rgba(0,0,0,.34)); }
.vx-proof:nth-child(1){ transform:rotate(-4deg); } .vx-proof:nth-child(2){ transform:rotate(2deg) translateY(-4px); } .vx-proof:nth-child(3){ transform:rotate(5deg); }
.vx-proof > img{ width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; border:3px solid #fff; border-radius:6px;
  -webkit-mask-image:linear-gradient(to bottom, #000 52%, rgba(0,0,0,.6) 76%, transparent 97%); mask-image:linear-gradient(to bottom, #000 52%, rgba(0,0,0,.6) 76%, transparent 97%); }
.vx-proof__views{ position:absolute; left:50%; bottom:0; transform:translateX(-50%) rotate(-3deg); --mark:30px; }
/* on a phone the three covers sit smaller so the arrow has room to point down at the offers (his note 2026-09-15) */
@media (max-width:959px){
  .vx-proofs{ gap:20px; }
  .vx-proof{ max-width:80px; padding-bottom:12px; }
  .vx-proof > img{ border-width:2px; }
  .vx-proof .vx-proof__views{ gap:2px; padding-block:3px 2px; padding-right:4px; --mark:24px; }
  .vx-proof .vx-proof__views .vx-eye{ font-size:9px; }
  .vx-proof .vx-proof__views b{ font-size:13px; }
}
.vx-stage--fan .vx-proofs{ gap:0; justify-content:center; padding-inline:4%; }
.vx-stage--fan .vx-proof{ flex-basis:30%; max-width:116px; }
.vx-stage--fan .vx-proof + .vx-proof{ margin-left:-4%; }
.vx-stage--fan .vx-proof:nth-child(1){ transform:rotate(-10deg) translateY(8px); z-index:1; }
.vx-stage--fan .vx-proof:nth-child(2){ transform:rotate(0deg) translateY(-6px); z-index:2; }
.vx-stage--fan .vx-proof:nth-child(3){ transform:rotate(10deg) translateY(8px); z-index:1; }
/* overlapped covers keep their numbers on the edge nothing covers */
.vx-stage--fan .vx-proof:nth-child(1) .vx-proof__views{ left:-6%; transform:rotate(-3deg); }
.vx-stage--fan .vx-views b{ font-size:15px; } .vx-stage--fan .vx-views{ --mark:26px; }
@media (max-width:380px){ .vx-stage--fan .vx-proof + .vx-proof{ margin-left:0; } .vx-stage--fan .vx-proofs{ padding-inline:0; gap:4px; } }
.vx-stage--fan .vx-proof:nth-child(3) .vx-proof__views{ left:auto; right:-6%; transform:rotate(3deg); }

/* ten looks for the top; data.json hero.look picks one. Every one keeps the crumpled paper. */
.vx-stage--v1{ --st-bg:#FFD400; --st-1:#101215; --st-num:#101215; --st-stroke:0; --st-shadow:none; --st-ring:#E4261A; --st-num-gap:.2em .2em; --st-3:#101215; }
.vx-stage--v2{ --st-bg:radial-gradient(120% 90% at 45% 30%, #F2472F 0%, #B3180F 48%, #3A0906 100%); --st-1:#fff; --st-num:#FFD400; --st-align:center; --st-num-x:auto; --st-justify:center; }
.vx-stage--v3{ --st-bg:radial-gradient(120% 90% at 50% 25%, #8A4DFF 0%, #4A1BB8 45%, #14063F 100%); --st-1:#fff; --st-num:#FFD400; --st-align:center; --st-num-x:auto; --st-justify:center; }
.vx-stage--v4{ --st-bg:radial-gradient(120% 90% at 40% 25%, #4B78FF 0%, #1D3FD0 45%, #071245 100%); --st-1:#fff; --st-num:#FFD400; --st-ring:#FF8A5B; --st-num-gap:.2em .2em; }
.vx-stage--v5{ --st-bg:radial-gradient(120% 90% at 50% 28%, #EE8A3C 0%, #A53E12 45%, #2A0D04 100%); --st-1:#fff; --st-num:#FFD400; --st-align:center; --st-num-x:auto; --st-justify:center; --st-ring:#FFFFFF; --st-num-gap:.26em .28em; }
.vx-stage--v6{ --st-bg:#F5F1E8; --st-1:#101215; --st-num:#101215; --st-stroke:0; --st-shadow:none; --st-hi:#FFD400; --st-hi-pad:.08em; --st-hi-tilt:-1.5deg; --st-num-gap:.12em .12em; }
.vx-stage--v7{ --st-bg:#E4261A; --st-1:#fff; --st-num:#FFD400; --st-align:center; --st-num-x:auto; --st-justify:center; }
.vx-stage--v8{ --st-bg:radial-gradient(120% 90% at 40% 25%, #3BC45F 0%, #148A34 45%, #04270F 100%); --st-1:#fff; --st-num:#FFD400; }
.vx-stage--v9{ --st-bg:#1A1320; --st-1:#fff; --st-num:#FFD400; --st-align:center; --st-num-x:auto; --st-justify:center; }
.vx-stage--v9::before{ content:""; position:absolute; inset:-60px; z-index:-2;
  background:url("./pieces/cover-gta6.jpg") 0 0 / 34% auto no-repeat, url("./pieces/cover-planetfitness.jpg") 50% 0 / 34% auto no-repeat, url("./pieces/cover-astra.jpg") 100% 0 / 34% auto no-repeat, #1A1320;
  filter:blur(26px) saturate(1.4); }
.vx-stage--v9::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(12,8,20,.5); }
.vx-stage--v10{ --st-bg:#151515; --st-1:#fff; --st-num:#FFC83D; --st-ring:#D97757; --st-num-gap:.2em .2em; --st-3:#FFC83D; }

.vx-deals{ position:relative; margin-top:-22px; padding:6px var(--gut) 240px; background:url("./paper.jpg") center / 760px, #FFF4E6; background-blend-mode:multiply; }
.vx-deal{ display:grid; grid-template-columns:136px minmax(0,1fr); column-gap:12px; align-items:center; padding:7px 0; }
.vx-deal + .vx-deal{ border-top:1.5px dashed rgba(16,18,21,.28); }
.vx-deal__body{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; }
.vx-deal__name{ margin:0; font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:26px; line-height:1; letter-spacing:.004em; }
.vx-deal__note{ margin:-1px 0 0; font-size:12px; color:var(--ink-3); }
/* the quiet line under an offer */
.vx-more{ font-size:13px; font-weight:600; color:var(--ink-3); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.vx-more:hover{ color:var(--ink); }
.vx-tag{ display:inline-block; font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:19px; line-height:1; padding:6px 9px 4px; background:var(--ink); color:var(--cream); border-radius:4px; transform:rotate(-3deg); white-space:nowrap; }
.vx-go{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:58px; padding:10px 12px;
  font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:23px; line-height:1; letter-spacing:.01em; white-space:nowrap; text-decoration:none; text-align:center;
  background:var(--or); color:var(--ink); border:3px solid var(--ink); border-radius:12px; box-shadow:0 5px 0 var(--ink), 0 14px 22px rgba(0,0,0,.22);
  cursor:pointer; transition:transform .12s, box-shadow .12s;
}
.vx-go svg{ flex:0 0 auto; width:.62em; height:.62em; }
.vx-go:hover{ transform:translateY(2px); box-shadow:0 3px 0 var(--ink), 0 10px 18px rgba(0,0,0,.22); }
.vx-go:active{ transform:translateY(5px); box-shadow:0 0 0 var(--ink); }
.vx-go:disabled{ opacity:.6; cursor:progress; }
@media (max-width:959px){ .vx-deal .vx-go{ font-size:20px; padding-inline:10px; gap:6px; } }
@media (max-width:374px){ .vx-deal{ grid-template-columns:120px minmax(0,1fr); } .vx-deal .vx-go{ white-space:normal; font-size:18px; padding-inline:8px; } }

/* NOW IT'S YOUR TURN: what we did is above, the two ways in are below, and the arrow points straight down at them,
   on a phone and on desktop alike (his notes 2026-09-15) */
/* the sticker sits clear below the torn edge with room above it (his note 2026-09-15) */
.vx-turn{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:4px; margin:16px 0 4px; }
.vx-turn__t{ display:inline-block; font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:min(33px, 8.6vw); line-height:1; letter-spacing:.03em; color:var(--ink);
  -webkit-text-stroke:.03em var(--ink); background:#fff; padding:.3em .5em .22em; transform:rotate(-3deg); box-shadow:0 .12em 0 rgba(16,18,21,.85), 0 .4em .6em rgba(0,0,0,.28); }
.vx-turn__arrow{ width:38px; height:53px; overflow:visible; filter:drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
@media (min-width:960px){
  .vx-turn{ gap:6px; margin:16px 0 4px; }
  .vx-turn__t{ font-size:46px; }
  .vx-turn__arrow{ width:42px; height:59px; }
}

/* the offer pictures are drawn by assets_src/make_offer_art.py: our video on YOUR ACCOUNT, your brand in our video */
.vx-art{ display:block; width:100%; }
.vx-art img{ width:100%; height:auto; }
.vx-marks{ display:inline-flex; gap:4px; }
.vx-marks img{ width:24px; height:24px; object-fit:contain; background:#fff; padding:3px; border-radius:6px; box-shadow:0 4px 8px rgba(0,0,0,.25); }
/* views are the platform's mark, the eye and the number, never the word */
.vx-views{ --mark:32px; position:relative; display:inline-flex; align-items:center; gap:4px; padding:4px 8px 3px calc(var(--mark) * .74);
  background:var(--ink); color:#fff; line-height:1; white-space:nowrap; border-radius:3px; box-shadow:0 5px 10px rgba(0,0,0,.3); }
/* the platform's mark cut out on paper (assets_src/make_platform_cutouts.py), stuck over the left end (his note 2026-09-15) */
.vx-views .vx-views__mark{ position:absolute; left:calc(var(--mark) * -.32); top:50%; width:var(--mark); height:var(--mark); object-fit:contain;
  transform:translateY(-50%) rotate(-9deg); filter:drop-shadow(0 2px 2px rgba(0,0,0,.38)); }
.vx-proof .vx-views{ box-shadow:none; }
.vx-views .vx-eye{ font-size:14px; margin:0; vertical-align:0; }
.vx-views b{ font-family:var(--anton); font-weight:400; font-size:17px; letter-spacing:.01em; }

/* desktop: the top stacked and centred like a phone, the arrow straight down, the two offers side by side (his notes
   2026-09-15) */
@media (min-width:960px){
  .vx-stage{ padding:14px var(--gut) 50px; }
  .vx-hl{ max-width:none; display:grid; grid-template-columns:auto auto; justify-content:center; align-items:baseline; column-gap:min(34px, 2.6vw); }
  .vx-hl__pre{ font-size:min(40px, 3.1vw); }
  .vx-hl__num{ font-size:min(108px, 8.4vw); }
  .vx-hl__tail{ grid-column:1 / -1; justify-self:center; font-size:min(46px, 3.6vw); }
  .vx-proofs{ max-width:none; margin:16px auto 0; gap:64px; }
  .vx-proof__views{ --mark:40px; }
  .vx-views{ --mark:38px; }
  .vx-proof{ max-width:90px; }
  .vx-stage--fan .vx-proof{ max-width:132px; }
  .vx-deals{ padding:0 var(--gut) 230px; }
  .vx-deals__list{ display:grid; grid-template-columns:repeat(2, minmax(0, 520px)); justify-content:center; column-gap:48px; }
  .vx-turn{ grid-column:1 / -1; }
  .vx-deal{ grid-template-columns:150px minmax(0,1fr); column-gap:22px; padding:4px 0; }
  /* a subtle dashed line between the two offers, in the middle of the gap (his note 2026-09-15) */
  .vx-deal + .vx-deal{ border-top:0; position:relative; }
  .vx-deal + .vx-deal::before{ content:""; position:absolute; left:-24px; top:14%; bottom:14%; border-left:1.5px dashed rgba(16,18,21,.28); }
  /* the offer names in the headline's cover type: white capitals, the ink edge, the soft drop */
  .vx-deal__name{ font-size:46px; letter-spacing:.012em; color:#fff; -webkit-text-stroke:.118em #0E0A0A; paint-order:stroke fill; text-shadow:0 .05em .07em rgba(0,0,0,.55); }
  .vx-tag{ font-size:24px; }
  .vx-go{ font-size:30px; min-height:72px; max-width:380px; }
  .vx-deal .vx-go{ font-size:24px; min-height:58px; max-width:300px; }
  .vx-more{ font-size:15px; }
  .vx-marks img{ width:30px; height:30px; }
  .vx-views b{ font-size:20px; }
}

/* ---- the torn clips ------------------------------------------------------ */
.tear-1{ --tear:url("./torn/t34-1.png"); } .tear-2{ --tear:url("./torn/t34-2.png"); }
.tear-3{ --tear:url("./torn/t34-3.png"); } .tear-4{ --tear:url("./torn/t34-4.png"); }
.tear-5{ --tear:url("./torn/t34-5.png"); } .tear-6{ --tear:url("./torn/t34-6.png"); }
.tear-v{ --tear:url("./torn/t916-1.png"); }

.vx-clips{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin-top:16px; }
.vx-clip{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  background:none; border:0; padding:0; cursor:pointer; color:inherit; min-width:0;
}
.vx-clip__pic{
  position:relative; display:block; width:100%; aspect-ratio:4/5;
  /* a torn clip lifts off the page: a much heavier shadow so it reads as something to tap (his note 2026-09-15) */
  filter:drop-shadow(3px 12px 14px rgba(0,0,0,.4)) drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
.vx-clip__pic img{
  width:100%; height:100%; object-fit:cover; background:#dfe2e7;
  -webkit-mask-image:var(--tear); mask-image:var(--tear);
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:transform .25s cubic-bezier(.3,1.4,.5,1);
}
.vx-clip:hover .vx-clip__pic img{ transform:rotate(-.8deg) scale(1.02); }
.vx-clip__play{
  position:absolute; right:12px; bottom:14px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:#fff; padding-left:3px;
}
.vx-clip__badge{
  position:absolute; left:10px; bottom:16px; max-width:calc(100% - 64px);
  display:flex; flex-direction:column; padding:5px 9px 6px; border-radius:3px;
  background:#fff; color:var(--ink); font-size:11px; font-weight:600; line-height:1.15;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.3); font-variant-numeric:tabular-nums;
}
.vx-clip__badge b{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
.vx-clip__badge .vx-eye{ font-size:13px; }
.vx-chan__views .vx-eye, .vx-toggle .vx-eye, .vx-chart__sum .vx-eye, .vx-chart__title .vx-eye{ font-size:1em; margin:0; vertical-align:0; }
.vx-clip__type{ margin-top:10px; font-size:13px; font-weight:700; color:var(--c-ink); }
.vx-clip__title{ margin-top:10px; font-size:15px; line-height:1.3; font-weight:650; letter-spacing:-.01em; }
.vx-clip__stat{ margin-top:6px; font-size:14px; line-height:1.3; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.vx-clip__stat + .vx-clip__stat{ margin-top:2px; }
.vx-clip__stat b{ color:var(--ink); font-weight:760; }
.vx-clip__date{ margin-top:4px; font-size:13px; color:var(--ink-3); }

.vx-clips--all{ grid-template-columns:1fr 1fr; }
@media (min-width:760px){ .vx-clips--all{ grid-template-columns:repeat(3,1fr); gap:28px 20px; } }
@media (min-width:1100px){ .vx-clips--all{ grid-template-columns:repeat(4,1fr); } }

/* ---- channels on the home page: name, two videos, one number ------------- */
.vx-car{ position:relative; margin-top:22px; }
.vx-chans{ display:grid; gap:36px; }
.vx-car__btn{ position:absolute; top:34%; z-index:3; display:grid; place-items:center; width:50px; height:50px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--or); color:var(--ink); border:3px solid var(--ink); box-shadow:0 4px 0 var(--ink), 0 10px 18px rgba(0,0,0,.2); }
.vx-car__btn[hidden]{ display:none; }
.vx-car__btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.vx-car__btn--prev{ left:-8px; } .vx-car__btn--next{ right:-8px; }
@media (max-width:959px){
  .vx-chans{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); scroll-padding-inline:var(--gut); }
  .vx-chans::-webkit-scrollbar{ display:none; }
  .vx-chan{ flex:0 0 84%; scroll-snap-align:start; }
}
@media (min-width:600px) and (max-width:959px){ .vx-chan{ flex-basis:58%; } }
@media (min-width:960px){ .vx-chans{ grid-template-columns:repeat(3,1fr); gap:32px; } .vx-car__btn{ display:none !important; } }
.vx-chan{ min-width:0; }
.vx-chan__id{ display:flex; align-items:center; gap:10px; text-decoration:none; min-height:48px; }
.vx-chan__av{ width:44px; height:44px; flex:0 0 44px; }
.vx-chan__name{ margin:0; font-weight:800; font-size:21px; line-height:1.1; letter-spacing:-.015em; }
.vx-chan__go{ margin-left:auto; color:var(--c-ink); flex:0 0 16px; }
.vx-chan__id:hover .vx-chan__name{ text-decoration:underline; text-underline-offset:.16em; }
.vx-chan .vx-clips{ margin-top:12px; }
.vx-chan__views{ margin:14px 0 0; padding-top:10px; border-top:3px solid var(--c); font-size:14px; color:var(--ink-3); }
.vx-chan__views b{ display:block; font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---- the method: one clip per beat, and the full video ------------------ */
.vx-method{ display:grid; gap:26px; margin-top:22px; }
.vx-screen{ position:relative; width:100%; max-width:500px; aspect-ratio:4 / 5; justify-self:center; }
/* the live rebuild draws straight onto the page: no card, no paper behind it (his note: no paper behind the paper) */
.vx-screen__stage{ position:absolute; inset:0; }
.vx-screen__play{ position:absolute; left:calc(33% - 40px); top:calc(46% - 40px); width:80px; height:80px; padding:0; border-radius:50%; cursor:pointer; z-index:2;
  background:var(--or); border:4px solid var(--ink); box-shadow:0 6px 0 var(--ink), 0 16px 26px rgba(0,0,0,.3); }
.vx-screen__play span{ position:absolute; inset:27% 22% 27% 34%; background:var(--ink); clip-path:polygon(0 0, 100% 50%, 0 100%); }
.vx-screen.is-done .vx-screen__play{ left:10px; top:auto; bottom:10px; width:54px; height:54px; }
.vx-screen.is-loading::after{ content:""; position:absolute; left:calc(33% - 18px); top:calc(46% - 18px); width:36px; height:36px; border-radius:50%;
  border:4px solid rgba(16,18,21,.18); border-top-color:var(--ink); animation:vx-spin .7s linear infinite; }
@keyframes vx-spin{ to{ transform:rotate(360deg); } }
/* the views sit centred under the video card, not in a corner (his note 2026-09-15). The card is drawn by
   _remotion/src/web/method-web.tsx at CARD {x:48, y:124, w:620, h:1102} of 1080x1350, so its middle is 33.15%
   across and its torn edge ends 92% down */
.vx-screen{ margin-bottom:16px; }
.vx-screen__views{ position:absolute; left:33.15%; top:calc(92% + 10px); transform:translateX(-50%); }
.vx-beats{ display:grid; gap:14px; align-content:center; }
.vx-beats__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.vx-beat{
  display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:8px 16px 8px 10px; text-align:left; cursor:pointer;
  font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:21px; line-height:1; letter-spacing:.01em; color:var(--ink);
  background:url("./paper.jpg") center / 500px, var(--cream); background-blend-mode:multiply;
  border:2px solid rgba(16,18,21,.18); border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); transition:transform .12s, background-color .12s, border-color .12s;
}
.vx-beat:hover{ border-color:var(--ink); }
.vx-beat__n{ position:relative; flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--ink); font-size:19px; line-height:1; }
.vx-beat[aria-pressed="true"]{ background-color:var(--or); border-color:var(--ink); box-shadow:0 4px 0 var(--ink); }
.vx-beat:active{ transform:translateY(2px); }
.vx-beat--full{ margin-top:6px; justify-content:center; background:var(--ink); color:var(--cream); border-color:var(--ink); }
.vx-beat--full[aria-pressed="true"]{ background-color:var(--ink); box-shadow:0 4px 0 var(--or); }
.vx-beat__n--play{ background:var(--or); border-color:var(--cream); }
.vx-beat__n--play::after{ content:""; position:absolute; inset:28% 24% 28% 36%; background:var(--ink); clip-path:polygon(0 0, 100% 50%, 0 100%); }
.vx-sci__close{ margin-top:48px; }
.vx-sci__close p{ margin:0 0 18px; font-family:var(--anton); text-transform:uppercase; font-size:25px; line-height:1.1; max-width:22ch; }
.vx-sci__btns{ display:grid; gap:14px; }
@media (min-width:600px){ .vx-sci__btns{ grid-template-columns:1fr 1fr; max-width:760px; } }
@media (min-width:960px){
  .vx-method{ grid-template-columns:minmax(0, 480px) minmax(0, 380px); justify-content:center; gap:64px; align-items:center; margin-top:30px; }
  .vx-beats__list{ gap:12px; }
  .vx-beat{ min-height:64px; font-size:26px; padding-left:12px; }
  .vx-beat__n{ width:42px; height:42px; flex-basis:42px; font-size:22px; }
  .vx-sci__close{ margin-top:64px; }
  .vx-sci__close p{ font-size:36px; }
}

/* ---- headings set like the top of the page and his covers (_build/thumb_five.py), centred (his notes 2026-09-15) ----
   build.cover() writes the rungs and each rung's width in ems as --w, so a rung is as big as it is allowed and never
   wider than its column: the lead spaced out like OUR VIDEOS GOT, the answer biggest on a highlighter block, the words
   after it on an ink tape like IN THE LAST 30 DAYS, and a plain big line where a block would be too much to look at. */
.vx-cover{ container-type:inline-size; width:100%; max-width:none; margin:0 0 24px; text-align:center;
  font-family:var(--anton); font-weight:400; font-size:16px; line-height:1; text-transform:uppercase; letter-spacing:.006em; word-spacing:0; color:var(--ink); }
.vx-cover > span{ display:block; width:fit-content; max-width:100%; margin-inline:auto; white-space:nowrap; }
.vx-cover__lead{ font-size:min(var(--lead, 30px), calc(94cqi / var(--w))); letter-spacing:.07em; padding-left:.07em; line-height:1.1; }
.vx-cover__hot{ font-size:min(var(--hot, 62px), calc(92cqi / (var(--w) + .44))); line-height:1; margin-block:.08em .06em; padding:.1em .22em .02em;
  background:#FFD400; transform:rotate(-2deg); box-shadow:0 .05em 0 rgba(16,18,21,.9), 0 .16em .3em rgba(0,0,0,.2); }
.vx-cover__tail{ font-size:min(var(--tail, 26px), calc(88cqi / (var(--w) + .76))); margin-top:.35em; margin-bottom:.2em; padding:.14em .38em .06em; color:#fff; background:var(--ink);
  transform:rotate(-2.5deg); box-shadow:0 .12em .24em rgba(0,0,0,.4); }
.vx-cover > .vx-cover__main{ font-size:min(var(--main, 40px), calc(86cqi * 2 / var(--w))); white-space:normal; text-wrap:balance; line-height:1.02; margin-top:.14em; }
.vx-cover__mark{ color:inherit; padding:0 .08em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:linear-gradient(100deg, transparent .12em, #FFD400 .12em, #FFD400 calc(100% - .12em), transparent calc(100% - .12em)) 0 92% / 100% .42em no-repeat; }
.vx-sci__close{ text-align:center; }
.vx-sci__close .vx-cover{ max-width:none; margin:0 0 26px; font-size:16px; line-height:1; }
.vx-sci__close .vx-cover__lead{ --lead:21px; letter-spacing:.05em; }
.vx-sci__btns{ margin-inline:auto; }
@media (min-width:960px){
  .vx-cover{ margin-bottom:36px; }
  .vx-cover--row{ display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; column-gap:.4em; }
  .vx-cover--row > span{ margin-inline:0; }
  .vx-cover--row > .vx-cover__tail{ grid-column:1 / -1; justify-self:center; }
  .vx-cover__lead{ --lead:50px; }
  .vx-cover__hot{ --hot:108px; }
  .vx-cover__tail{ --tail:40px; }
  .vx-cover > .vx-cover__main{ --main:62px; }
  .vx-sci__close .vx-cover{ margin-bottom:34px; }
  .vx-sci__close .vx-cover__lead{ --lead:36px; }
}

/* ---- numbers: one total per account, the rest behind one button ---------- */
.vx-accs{ display:grid; gap:14px; margin-top:20px; }
@media (min-width:960px){ .vx-accs{ grid-template-columns:repeat(3, 1fr); gap:20px; } }
.vx-acc{ padding:14px 14px 16px; background:url("./paper.jpg") center / 600px, var(--cream); background-blend-mode:multiply; border-radius:14px; border-top:5px solid var(--c); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.vx-acc__name{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.015em; text-decoration:none; }
.vx-acc__name img{ width:36px; height:36px; }
/* one number per channel, the three marks under it; every account's own number is behind the button */
.vx-acc__tot{ margin:10px 0 0; display:flex; align-items:center; gap:8px; }
.vx-acc__tot b{ font-family:var(--anton); font-weight:400; font-size:40px; line-height:1; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.vx-acc__tot .vx-eye{ font-size:20px; margin:0; vertical-align:0; }
.vx-acc__marks{ list-style:none; margin:10px 0 0; padding:0; display:flex; gap:12px; }
.vx-acc__marks .vx-pmark{ width:38px; height:38px; }
.vx-acc__marks li:nth-child(1) .vx-pmark{ transform:rotate(-7deg); }
.vx-acc__marks li:nth-child(2) .vx-pmark{ transform:rotate(3deg); }
.vx-acc__marks li:nth-child(3) .vx-pmark{ transform:rotate(-3deg); }
.vx-expand{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; min-height:48px; padding:10px 18px; background:var(--ink); color:var(--cream); border:0; border-radius:10px; cursor:pointer; font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:19px; letter-spacing:.02em; }
.vx-expand::after{ content:""; width:10px; height:10px; border-right:3px solid currentColor; border-bottom:3px solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform .15s; }
.vx-expand[aria-expanded="true"]::after{ transform:translateY(2px) rotate(-135deg); }
.vx-numbers-more[hidden]{ display:none; }
.vx-numbers-more{ margin-top:6px; }

/* ---- numbers: the channels by platforms table ---------------------------- */
.vx-mx{ margin-top:24px; }
.vx-toggle{ display:inline-flex; border:1.5px solid var(--ink); border-radius:3px; overflow:hidden; }
.vx-toggle button{ min-height:44px; padding:8px 14px; border:0; background:transparent; font-weight:650; font-size:15px; cursor:pointer; }
.vx-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.vx-mx[data-mode="views"] .vx-mx__f, .vx-mx[data-mode="views"] .vx-mx__scope-f{ display:none; }
.vx-mx[data-mode="followers"] .vx-mx__v, .vx-mx[data-mode="followers"] .vx-mx__scope-v{ display:none; }
.vx-mx[data-mode="followers"] .vx-mx__tot, .vx-mx[data-mode="followers"] tfoot{ display:none; }

.vx-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vx-mx__t{ width:100%; border-collapse:collapse; margin-top:14px; font-variant-numeric:tabular-nums; }
.vx-mx__t th, .vx-mx__t td{ text-align:right; padding:12px 10px; border-bottom:1px solid var(--rule-soft); font-size:16px; }
.vx-mx__t th:first-child{ text-align:left; padding-left:0; }
.vx-mx__t thead th{ font-size:14px; font-weight:650; color:var(--ink-3); border-bottom:1px solid var(--rule); }
.vx-mx__t tbody th{ font-weight:760; }
.vx-mx__t td a{ text-decoration:none; display:block; }
.vx-mx__t td a:hover{ text-decoration:underline; }
.vx-mx__t .vx-mx__tot{ font-weight:800; }
.vx-mx__t tfoot th, .vx-mx__t tfoot td{ font-weight:800; border-bottom:0; border-top:2px solid var(--ink); }
.vx-sw{ display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--c); margin-right:9px; vertical-align:.02em; }

/* on a phone each channel becomes its own block: name and total on one line, three platforms under */
@media (max-width:759px){
  .vx-mx__t thead{ position:absolute; left:-9999px; }
  .vx-mx__t, .vx-mx__t tbody, .vx-mx__t tfoot{ display:block; }
  .vx-mx__t tr{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:8px; padding:14px 0; border-bottom:1px solid var(--rule); }
  .vx-mx__t th, .vx-mx__t td{ border:0 !important; padding:0; }
  .vx-mx__t tr > th{ grid-column:1 / 3; grid-row:1; font-size:17px; }
  .vx-mx__t tr > .vx-mx__tot{ grid-column:3; grid-row:1; text-align:right; font-size:17px; }
  .vx-mx__t tr > td:not(.vx-mx__tot){ grid-row:2; margin-top:10px; text-align:left; }
  .vx-mx__t tr > td:not(.vx-mx__tot)::before{ content:attr(data-label); display:block; font-size:13px; font-weight:600; color:var(--ink-3); margin-bottom:1px; }
  .vx-mx__t tr > td:nth-of-type(3){ text-align:right; }
  .vx-mx__t tr > td:nth-of-type(2){ text-align:center; }
  .vx-mx__t tfoot tr{ border-top:2px solid var(--ink); border-bottom:0; }
  .vx-mx[data-mode="followers"] .vx-mx__t tr > th{ grid-column:1 / -1; }
}

/* ---- the daily chart: on the paper, one number, a short label on the day you point at ---- */
.vx-chart{ margin:36px 0 0; padding:0; background:transparent; border:0; }
.vx-chart__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.vx-chart__title{ font-family:var(--anton); text-transform:uppercase; font-size:24px; line-height:1; }
.vx-chart__sum{ font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:650; }
.vx-chart__sum b{ font-family:var(--anton); font-weight:400; font-size:28px; color:var(--ink); letter-spacing:.01em; }
.vx-chart__plot{ position:relative; margin-top:10px; }
.vx-chart__plot svg{ width:100%; height:auto; overflow:visible; touch-action:pan-y; }
.vx-chart__plot .axis{ font-size:12px; fill:var(--ink-2); font-family:var(--f); font-weight:600; font-variant-numeric:tabular-nums; }
.vx-chart__plot .grid{ stroke:rgba(16,18,21,.14); }
.vx-chart__plot .hit{ fill:transparent; cursor:pointer; }
.vx-chart__plot .sel{ fill:rgba(16,18,21,.08); }
.vx-chart__tip{ position:absolute; top:0; transform:translate(-50%, calc(-100% - 6px)); padding:5px 8px 4px; background:var(--ink); color:#fff; border-radius:4px; font-size:13px; font-weight:700; white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums; }
.vx-chart__tip[hidden]{ display:none; }
.vx-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0; font-size:14px; font-weight:600; color:var(--ink-2); }
.vx-legend span{ display:inline-flex; align-items:center; gap:7px; }
.vx-legend i{ width:10px; height:10px; border-radius:2px; display:block; }
.vx-more-link{ margin:20px 0 0; font-weight:650; }
/* the quiet way into the form, under a section that just made the case for it (2026-09-19) */
.vx-more-row{ margin:18px 0 0; }

/* ---- inquiry ------------------------------------------------------------- */
.vx-inq .vx-h2:focus{ outline:none; }
.vx-form{ display:grid; gap:22px; margin-top:20px; }
.vx-form__rest{ display:grid; gap:18px; max-width:640px; }
.vx-field{ display:flex; flex-direction:column; gap:6px; border:0; margin:0; padding:0; min-width:0; }
.vx-field[hidden]{ display:none; }
.vx-field > label, .vx-field legend{ font-weight:680; font-size:16px; padding:0; margin-bottom:6px; }
.vx-opt{ font-weight:450; color:var(--ink-3); }
.vx-field input:not([type=radio]):not([type=checkbox]), .vx-field select, .vx-field textarea{
  width:100%; min-height:48px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid rgba(16,18,21,.3); border-radius:6px; padding:11px 12px;
}
.vx-field textarea{ resize:vertical; min-height:110px; line-height:1.45; }
.vx-field input:focus, .vx-field select:focus, .vx-field textarea:focus{ outline:3px solid var(--ink); outline-offset:0; border-color:var(--ink); }
.vx-field [aria-invalid="true"]{ border-color:#B3261E !important; }
.vx-row{ display:grid; gap:18px; }
@media (min-width:600px){ .vx-row{ grid-template-columns:1fr 1fr; } }

/* the two choices: a picture, a name, one line, the price, and the details a buyer wants behind one tap */
.vx-choices{ display:grid; gap:16px; }
@media (min-width:760px){ .vx-choices{ grid-template-columns:1fr 1fr; gap:22px; align-items:start; } }
.vx-choice{ min-width:0; }
.vx-choice__pick{ position:relative; display:block; cursor:pointer; }
.vx-choice__pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.vx-choice__card{
  position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; padding:14px 16px 14px 12px;
  background:url("./paper.jpg") center / 620px, var(--cream); background-blend-mode:multiply;
  border:3px dashed rgba(16,18,21,.5); border-radius:14px; box-shadow:0 10px 22px rgba(0,0,0,.1); transition:border-color .12s, box-shadow .12s;
}
.vx-choice__card::after{ content:""; position:absolute; right:12px; top:12px; width:28px; height:28px; border-radius:50%; border:3px solid var(--ink); background:#fff; box-sizing:border-box; }
.vx-choice__pick:hover .vx-choice__card{ border-color:var(--ink); }
.vx-choice__pick input:checked + .vx-choice__card{ border-style:solid; border-color:var(--ink); background-color:#FFE2CF; box-shadow:0 5px 0 var(--ink), 0 14px 26px rgba(0,0,0,.16); }
.vx-choice__pick input:checked + .vx-choice__card::after{ background:var(--or); box-shadow:inset 0 0 0 4px #fff; }
.vx-choose__pick{ font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:22px; line-height:1; margin:0 0 12px; padding:0; display:flex; align-items:center; gap:10px; }
.vx-choose__pick::after{ content:""; width:40px; height:3px; background:repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); }
.vx-choice__pick input:focus-visible + .vx-choice__card{ outline:3px solid var(--ink); outline-offset:3px; }
.vx-choice__pick [aria-invalid="true"] + .vx-choice__card{ border-color:#B3261E; }
.vx-choice__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
.vx-choice__name{ font-family:var(--anton); text-transform:uppercase; font-size:28px; line-height:1; }
.vx-choice__line{ font-size:15px; font-weight:600; line-height:1.3; color:var(--ink-2); }
.vx-learn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:6px 0 0 2px; padding:6px 4px; background:none; border:0; cursor:pointer; font-weight:760; font-size:15px; }
.vx-learn::after{ content:"+"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--cream); font-size:17px; line-height:1; }
.vx-learn[aria-expanded="true"]::after{ content:"\2212"; }
.vx-learn__rows{ list-style:none; margin:2px 0 0; padding:14px 16px; display:grid; gap:12px; background:rgba(255,251,244,.9); border:2px solid var(--ink); border-radius:12px; }
.vx-learn__rows[hidden]{ display:none; }
.vx-learn__rows li{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; align-items:baseline; }
.vx-learn__rows span{ font-family:var(--anton); text-transform:uppercase; font-size:16px; line-height:1.1; color:var(--or-ink); letter-spacing:.02em; }
.vx-learn__rows p{ margin:0; font-size:15px; line-height:1.4; }
.vx-go--send{ max-width:360px; }
@media (min-width:960px){ .vx-choice__card{ grid-template-columns:120px minmax(0,1fr); padding:18px 22px 18px 16px; } .vx-choice__name{ font-size:34px; } }

.vx-checks{ display:flex; flex-wrap:wrap; gap:8px; }
.vx-check{ position:relative; cursor:pointer; }
.vx-check span{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 14px 10px 12px; border:1.5px solid rgba(16,18,21,.3); border-radius:3px; background:#fff; font-weight:620; }
.vx-check span::before{ content:""; width:18px; height:18px; border-radius:3px; border:2px solid var(--ink); flex:0 0 18px; background:#fff; }
.vx-check input:checked + span{ border-color:var(--ink); box-shadow:inset 0 -4px 0 var(--c, var(--ink)); }
.vx-check input:checked + span::before{ background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3L11 1' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 11px no-repeat; }
.vx-style{ margin:4px 0 0; font-size:15px; color:var(--ink-2); }
.vx-style button{ background:none; border:0; text-decoration:underline; cursor:pointer; padding:10px 4px; font-weight:600; }
.vx-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.vx-form__err{ margin:0; color:#B3261E; font-weight:650; }
.vx-form__after{ margin:-6px 0 0; font-size:15px; color:var(--ink-2); }
.vx-done{ padding:24px 20px; background:#fff; border:2px solid var(--ink); border-radius:3px; }
.vx-done:focus{ outline:none; }
.vx-done p{ margin:0 0 8px; font-size:17px; line-height:1.5; }
.vx-done__t{ font-weight:800; font-size:24px !important; letter-spacing:-.02em; }
.vx-done__to{ color:var(--ink-3); font-size:15px !important; }

/* ---- channel page -------------------------------------------------------- */
/* the way back, as a button you can see (his note 2026-09-15) */
.vx-back{ margin:0 0 20px; }
.vx-back a{ display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:8px 18px 8px 12px; text-decoration:none;
  font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:19px; letter-spacing:.02em; color:var(--ink);
  background:#fff; border:2.5px solid var(--ink); border-radius:10px; box-shadow:0 4px 0 var(--ink); }
.vx-back a:hover{ background:var(--or); }
.vx-back a:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.vx-chead{ padding-block:24px 40px; }
.vx-chead__in{ display:flex; gap:16px; align-items:flex-start; }
.vx-chead__av{ width:76px; height:76px; flex:0 0 76px; }
.vx-chead__name{ margin:0; font-weight:800; font-size:34px; line-height:1.06; letter-spacing:-.022em; word-spacing:.04em; }
.vx-chead__line{ margin:10px 0 0; font-size:17px; line-height:1.45; color:var(--ink-2); max-width:44ch; }
.vx-chead__since, .vx-chead__was{ margin:6px 0 0; font-size:14px; color:var(--ink-3); }
.vx-chead__facts{ display:flex; flex-wrap:wrap; gap:12px 32px; margin:22px 0 0; padding-top:14px; border-top:4px solid var(--c); }
.vx-chead__facts dt{ font-size:13px; color:var(--ink-3); }
.vx-chead__facts dd{ margin:2px 0 0; font-weight:820; font-size:30px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.vx-chead__act{ display:grid; gap:10px; margin-top:22px; }
/* the channel's three accounts: just the marks, cut out on paper (his note 2026-09-15) */
.vx-accounts{ list-style:none; margin:22px 0 0; padding:0; display:flex; gap:18px; }
.vx-accounts a{ display:block; }
.vx-accounts img{ width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.32)); transition:transform .12s; }
.vx-accounts li:nth-child(1) img{ transform:rotate(-7deg); }
.vx-accounts li:nth-child(2) img{ transform:rotate(3deg); }
.vx-accounts li:nth-child(3) img{ transform:rotate(-3deg); }
.vx-accounts a:hover img{ transform:scale(1.07) rotate(0deg); }
.vx-chead--plain .vx-chead__name{ max-width:18ch; }
.vx-chead--plain .vx-lede{ margin-top:12px; }
@media (min-width:960px){
  .vx-chead{ padding-block:40px 64px; }
  .vx-chead__av{ width:112px; height:112px; flex-basis:112px; }
  .vx-chead__name{ font-size:56px; }
  .vx-chead__act{ grid-template-columns:auto auto; justify-content:start; }
  .vx-accounts{ gap:26px; }
  .vx-accounts img{ width:74px; height:74px; }
}

/* a platform is its own paper cut-out wherever it is named, never plain text in a box (2026-09-19) */
.vx-pmark{ width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.28)); }

.vx-plat{ width:100%; border-collapse:collapse; margin-top:16px; font-variant-numeric:tabular-nums; }
.vx-plat th, .vx-plat td{ text-align:right; padding:12px 10px; border-bottom:1px solid var(--rule-soft); font-size:16px; }
.vx-plat th:first-child{ text-align:left; padding-left:0; }
.vx-plat thead th{ font-size:14px; font-weight:650; color:var(--ink-3); border-bottom:1px solid var(--rule); }
.vx-plat tbody th{ font-weight:760; }
.vx-plat tbody th .vx-pmark{ display:block; width:44px; height:44px; }
.vx-plat tfoot th, .vx-plat tfoot td{ font-weight:800; border-top:2px solid var(--ink); border-bottom:0; }
/* on a phone each platform is a block: its mark and its views on one line, followers under */
@media (max-width:759px){
  .vx-plat thead{ position:absolute; left:-9999px; }
  .vx-plat, .vx-plat tbody, .vx-plat tfoot{ display:block; }
  .vx-plat tr{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:6px; padding:12px 0; border-bottom:1px solid var(--rule); }
  .vx-plat th, .vx-plat td{ border:0 !important; padding:0; text-align:left; font-size:15px; }
  .vx-plat tr > th{ grid-column:1; grid-row:1; font-size:17px; }
  .vx-plat .vx-plat__views{ grid-column:2; grid-row:1; text-align:right; font-size:17px; font-weight:800; }
  .vx-plat .vx-plat__views::before{ content:none !important; }
  .vx-plat tr > td:not(.vx-plat__views){ grid-column:1 / -1; grid-row:2; margin-top:8px; }
  .vx-plat tr > td::before{ content:attr(data-label); display:block; font-size:12px; font-weight:600; color:var(--ink-3); }
  .vx-plat tfoot tr{ border-top:2px solid var(--ink); border-bottom:0; }
  .vx-plat__blank{ display:none; }
}

.vx-grow__h{ margin-top:36px; }
.vx-grows{ display:grid; gap:10px; margin-top:12px; }
@media (min-width:760px){ .vx-grows{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.vx-grow{ padding:14px 16px; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px; }
.vx-grow__p{ margin:0; font-weight:700; display:flex; align-items:center; gap:9px; }
.vx-grow .vx-spark{ grid-row:1 / span 2; grid-column:2; }
.vx-grow__n{ margin:0; font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.vx-grow__n b{ color:var(--ink); }

.vx-aud{ display:grid; gap:20px; margin-top:24px; }
@media (min-width:860px){ .vx-aud{ grid-template-columns:1fr 1fr; gap:24px; } }
.vx-aud__col{ padding:20px; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; }
.vx-aud__h{ display:flex; align-items:center; gap:10px; }
.vx-aud__h .vx-pmark{ width:42px; height:42px; }
.vx-bars{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.vx-bars li{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; font-size:15px; font-variant-numeric:tabular-nums; }
.vx-bars__v{ font-weight:700; }
.vx-bars__track{ grid-column:1 / -1; height:8px; background:rgba(16,18,21,.08); border-radius:0 4px 4px 0; }
.vx-bars__track span{ display:block; height:100%; background:var(--c); border-radius:0 4px 4px 0; }
.vx-kv{ list-style:none; margin:0; padding:0; display:grid; }
.vx-kv li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--rule-soft); font-size:15px; font-variant-numeric:tabular-nums; }
.vx-kv b{ font-weight:720; }

.vx-price__avail{ margin:10px 0 0; font-size:16px; line-height:1.5; color:var(--ink); font-weight:560; max-width:48ch; }
.vx-offer__price{ margin:6px 0 10px; font-weight:820; font-size:48px; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.vx-offer__alt{ margin:14px 0 0; font-size:16px; color:var(--ink-2); }

.vx-others{ display:grid; gap:10px; }
@media (min-width:760px){ .vx-others{ grid-template-columns:1fr 1fr; } }
.vx-other{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--rule); border-left:5px solid var(--c); border-radius:3px; background:var(--sheet); text-decoration:none; }
.vx-other img{ width:44px; height:44px; }
.vx-other b{ display:block; font-size:18px; font-weight:780; letter-spacing:-.02em; }
.vx-other small{ display:block; font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.vx-other:hover{ border-color:var(--ink); border-left-color:var(--c); }

/* ---- the numbers page ---------------------------------------------------- */
.vx-numch .vx-h2{ display:flex; align-items:center; max-width:none; }
.vx-numch .vx-sw{ width:14px; height:14px; }
.vx-accts{ display:grid; gap:16px; margin-top:20px; }
@media (min-width:960px){ .vx-accts{ grid-template-columns:repeat(3,1fr); } }
.vx-acct{ padding:18px; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; min-width:0; }
.vx-acct__h{ display:flex; align-items:center; gap:10px; }
.vx-acct__h .vx-pmark{ width:40px; height:40px; flex:none; }
.vx-acct .vx-h3 span{ font-weight:450; font-size:14px; color:var(--ink-3); overflow-wrap:anywhere; min-width:0; }
.vx-acct .vx-h4:first-of-type{ margin-top:12px; }
.vx-posts{ margin:0; padding-left:20px; display:grid; gap:10px; }
.vx-posts li{ font-size:14px; line-height:1.4; }
.vx-posts a{ font-weight:650; }
.vx-posts span{ display:block; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* ---- footer, bottom bar, video player ------------------------------------ */
.vx-foot{ border-top:1px solid var(--rule); padding-block:36px 40px; }
.vx-foot__in{ display:grid; gap:18px; }
.vx-foot__links{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.vx-foot__links a{ min-height:44px; display:inline-flex; align-items:center; font-weight:600; }
.vx-foot__meta{ margin:0; font-size:14px; color:var(--ink-3); line-height:1.6; }
.vx-foot__meta a{ color:var(--ink-2); overflow-wrap:anywhere; }

.vx-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--paper) 94%, transparent); border-top:1px solid var(--rule);
  transform:translateY(0); transition:transform .22s ease;
}
.vx-bar .vx-btn{ width:100%; }
.vx-bar.is-away{ transform:translateY(110%); }
@media (min-width:960px){ .vx-bar{ display:none !important; } }

.vx-player{ padding:0; border:0; background:transparent; max-width:none; max-height:none; width:100%; height:100%; margin:0; }
.vx-player::backdrop{ background:rgba(16,18,21,.86); }
.vx-player[open]{ display:grid; place-items:center; }
.vx-player__in{ position:relative; width:min(420px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; background:var(--paper); border-radius:3px; overflow:auto; }
.vx-player video{ width:100%; aspect-ratio:9/16; max-height:calc(100dvh - 190px); background:#000; object-fit:contain; }
.vx-player__x{ position:absolute; right:10px; top:10px; z-index:2; min-height:44px; padding:0 14px; border:0; border-radius:3px; background:var(--ink); color:#fff; font-weight:700; cursor:pointer; }
.vx-player__txt{ padding:14px 16px 16px; }
.vx-player__type{ margin:0; font-size:13px; font-weight:700; color:var(--ink-3); }
.vx-player__title{ margin:2px 0 8px; font-size:18px; line-height:1.25; font-weight:760; letter-spacing:-.015em; }
.vx-player__stats{ list-style:none; margin:0; padding:0; font-size:15px; font-variant-numeric:tabular-nums; }
.vx-player__stats li{ padding:6px 0; border-top:1px solid var(--rule-soft); }
.vx-player__stats b{ font-weight:760; }

@media (prefers-reduced-motion:reduce){
  .vx-clip__pic img, .vx-bar, .vx-btn{ transition:none; }
}
@media print{
  body::before, .vx-bar, .vx-head, .vx-inq{ display:none; }
}