/* ============================================================================
   TrybeDaily — the departures board.

   One family (Archivo), worked through width and weight. Rank is carried by
   weight, case and rule, never by a second face or a bigger size. State is a
   mark in a fixed cell. Twelve category line colours are the leading device:
   the wall reads by colour before it reads by word.

   Goldenrod is LIGHT, never ground — a yellow field fights full-colour video.
   ========================================================================= */
/* The [hidden] attribute sets display:none at the UA level, and ANY display
   declaration in a stylesheet beats it. That has cost two bugs now: a closed
   lightbox that stayed over the page swallowing every click, and a transcript
   that would not hide when the Rewrite tab was chosen. Both times the
   JavaScript was correct and the CSS quietly ignored it. Ends here. */
[hidden]{display:none!important}

/* Dark-first: creators open this in the morning already inside TikTok, and the
   video is the content — a dark field lets it carry the page. Violet is Trybe's
   own (#7C3AED, lifted from their stylesheet); the blues and the density come
   from the daily-virals side. No neon glow: depth is elevation and rule, never
   a coloured halo.

   The chrome is violet and blue. The twelve CATEGORY LINES stay a full spectrum
   on purpose — a wall of one hue cannot be scanned by category, which is the
   job the operator asked the colour to do. */
:root{
  --mast-h:45px;
  --paper:#0E0E18; --pane:#17172A; --pane-2:#1E1E33; --ink:#ECEBF2; --ink-2:#9C9BB0;
  /* Raised from #6E6D86, which was 3.52:1 on a panel and 3.25:1 on the
     lighter panel — under the 4.5:1 that normal-size text needs, in 94 places
     on the creators page alone. #86859E clears it on every surface the token
     is used against. */
  --ink-3:#86859E; --rule:#2A2A42; --rail:#0A0A12;
  --violet:#A78BFA; --violet-fill:#6D28D9; --violet-deep:#5B21B6; --violet-soft:#241B45;
  --blue:#38BDF8; --confirm:#34D399; --strike:#F472B6;
  --sans:"Archivo","Archivo Narrow",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --u:15px; --gap:16px;
  --r:12px; --r-sm:8px; --r-xs:6px;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -20px rgba(0,0,0,.9);
}
/* Category lines, tuned for a dark field: distinguishable at 12px, held to one
   lightness band so no line shouts over its neighbours. */
:root{
  --c-supplements:#34D399; --c-wellness:#22D3EE; --c-skincare:#FB7185;
  --c-womens:#F472B6;      --c-mens:#60A5FA;     --c-accessories:#A78BFA;
  --c-activewear:#FBBF24;  --c-makeup:#E879F9;   --c-personal:#94A3B8;
  --c-drinks:#FCD34D;      --c-pets:#D8A26A;     --c-tools:#818CF8;
  --c-default:#8E8DA4;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --paper:#F4F3F8; --pane:#FFFFFF; --pane-2:#F7F6FB; --ink:#191828; --ink-2:#5C5A72;
  /* 4.5:1 on white and on both panel tints; #8B89A0 was 3.40 and 3.16. */
  --ink-3:#6F6D85; --rule:#E2E0EC; --rail:#191828;
  --violet:#7C3AED; --violet-fill:#6D28D9; --violet-deep:#5B21B6; --violet-soft:#F0ECFD;
  --blue:#0284C7; --confirm:#15803D; --strike:#DB2777;
  --shadow:0 1px 2px rgba(25,24,40,.05),0 12px 30px -18px rgba(25,24,40,.35);
  --c-supplements:#15803D; --c-wellness:#0E7490; --c-skincare:#BE123C;
  --c-womens:#BE185D;      --c-mens:#1D4ED8;     --c-accessories:#6D28D9;
  --c-activewear:#B45309;  --c-makeup:#A21CAF;   --c-personal:#475569;
  --c-drinks:#A16207;      --c-pets:#8A5A2B;     --c-tools:#4338CA;
  --c-default:#5C5A72;
}}
:root[data-theme="light"]{
  --paper:#F4F3F8; --pane:#FFFFFF; --pane-2:#F7F6FB; --ink:#191828; --ink-2:#5C5A72;
  /* 4.5:1 on white and on both panel tints; #8B89A0 was 3.40 and 3.16. */
  --ink-3:#6F6D85; --rule:#E2E0EC; --rail:#191828;
  --violet:#7C3AED; --violet-fill:#6D28D9; --violet-deep:#5B21B6; --violet-soft:#F0ECFD;
  --blue:#0284C7; --confirm:#15803D; --strike:#DB2777;
  --shadow:0 1px 2px rgba(25,24,40,.05),0 12px 30px -18px rgba(25,24,40,.35);
  --c-supplements:#15803D; --c-wellness:#0E7490; --c-skincare:#BE123C;
  --c-womens:#BE185D;      --c-mens:#1D4ED8;     --c-accessories:#6D28D9;
  --c-activewear:#B45309;  --c-makeup:#A21CAF;   --c-personal:#475569;
  --c-drinks:#A16207;      --c-pets:#8A5A2B;     --c-tools:#4338CA;
  --c-default:#5C5A72;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--u);line-height:1.45;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%}
a{color:inherit}

/* Browser surfaces belong to the design too. */
::selection{background:var(--violet-fill);color:#fff}
:focus-visible{outline:2px solid var(--strike);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
::-webkit-scrollbar{height:9px;width:9px}
::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:0}
::-webkit-scrollbar-track{background:transparent}

.wrap{max-width:1240px;margin:0 auto;padding:0 18px}

/* ---- the signage rail ---- */
/* The rail is dark in both themes; its foreground is fixed, never themed. */
/* The masthead stays put, and both bars are translucent rather than solid:
   content passing beneath them stays legible as motion and colour, which is
   what makes a sticky bar feel attached to the page instead of parked on top
   of it. blur alone goes grey, so saturate lifts the colour back.

   backdrop-filter is progressive: where it is unsupported the fallback
   background is fully opaque, so text contrast never depends on the effect
   landing. */
.mast{position:sticky;top:0;z-index:40;color:#F0EFEC;
  background:#12121F;
  border-bottom:1px solid rgba(255,255,255,.07)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
  /* 86%, not less. Computed against the worst case — the bar sitting over a
     white video frame — the wordmark's violet holds 4.78:1 at 86% and falls
     to 2.98:1 at 72%, which the detector caught. Glass is not worth an
     unreadable wordmark. */
  .mast{background:color-mix(in srgb,#12121F 86%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%)}
}
.mast .wrap{display:flex;align-items:stretch;gap:0;min-height:44px}
.wordmark{display:flex;align-items:center;text-decoration:none;color:#F0EFEC;
  font-weight:700;font-stretch:75%;font-size:17px;letter-spacing:.14em;
  text-transform:uppercase;padding-right:20px}
.wordmark em{font-style:normal;color:#A78BFA}
/* Eight uppercase labels in a row was a wall of near-identical text you had
   to read word by word to navigate. Six sections keep an icon each, which is
   what the eye actually lands on; "How it works" left the bar for the footer
   and the places that link to it in context; and the Shot list is a personal
   tool rather than a section, so it sits apart from the six behind a rule. */
.mast nav{display:flex;margin-left:auto;align-items:stretch}
.mast nav a{display:flex;align-items:center;gap:7px;padding:0 13px;text-decoration:none;
  color:#A5A4AC;font-weight:600;font-stretch:87.5%;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid transparent}
.mast nav a:hover{color:#F0EFEC}
.mast nav .ni{width:16px;height:16px;flex:none;opacity:.72}
.mast nav a:hover .ni,.mast nav a[aria-current] .ni{opacity:1}
.mast nav .tool{position:relative;color:#8F8E98}
.mast nav .tool + .tool{padding-left:11px}
/* The divider marks where the sections end and the personal tools begin, so
   it belongs on the first tool only. */
.mast nav a:not(.tool) + .tool{margin-left:10px;padding-left:19px}
.mast nav a:not(.tool) + .tool::before{content:"";position:absolute;left:0;top:12px;bottom:12px;
  width:1px;background:rgba(255,255,255,.16)}
.mast nav .tool b{font-size:11px;font-weight:800;background:var(--violet-fill);color:#fff;
  border-radius:999px;padding:1px 6px;min-width:8px;text-align:center}
/* Five uppercase labels do not fit beside the wordmark on a phone, and the
   masthead pushed the whole page 171px wider than the screen on every page.
   The nav wraps under the wordmark and its items share the row evenly. */
@media (max-width:760px){
  /* One scrollable row, not two stacked ones. Seven items wrapped to two rows
     cost 150px of permanent furniture at the top of every page on a screen
     844px tall, and the links were 35px — under the 44px a thumb needs.
     Swiping is a better trade than hiding six items behind a hamburger. */
  .mast .wrap{flex-wrap:wrap;padding:0 18px}
  /* 44px on every standalone control, not just the nav. A thumb does not
     care which of them it is aiming at. */
  .wordmark{flex:1 0 100%;padding:12px 0 8px;min-height:44px;font-size:15px;box-sizing:border-box}
  .mast nav{margin:0 -18px;width:calc(100% + 36px);flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    border-top:1px solid rgba(255,255,255,.1);padding:0 18px}
  .mast nav::-webkit-scrollbar{display:none}
  .mast nav a{padding:0 12px;min-height:44px;font-size:12px;letter-spacing:.05em;
    gap:6px;flex:none;white-space:nowrap}
  .mast nav .ni{width:15px;height:15px}
  .mast nav a:not(.tool) + .tool{margin-left:6px;padding-left:14px}
  .chip{min-height:44px}
  .btn,.signup button,.signup input{min-height:44px}
  .dateline select{min-height:44px}
  .join{min-height:36px;display:inline-flex;align-items:center}
  /* The brand name is the primary tap on a phone and was 19px tall in the
     ranked rows and 22px in the movers boards. Padded to a thumb's size
     without changing where the text sits, by taking the padding back as a
     negative margin. */
  .row a[href^="/brand"],#boards li a,.section-head a{
    padding:11px 0;margin:-11px 0;display:inline-block;min-height:22px}
  /* Every control gets a thumb's worth, the pin included — it is 34px on a
     desktop where a pointer is exact, and a phone is not a desktop. */
  .pin{width:44px;height:44px}
  .row .head .pin{width:44px;height:44px}
  .tv .pin{width:38px;height:38px}
  #boards li{padding:2px 0}
}
}
.mast nav a[aria-current="page"]{color:#FFFFFF;background:transparent;border-bottom-color:var(--violet)}

/* ---- dateline: the one reversed plate on the page ---- */
.dateline{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;margin:18px 0 0}
.dateline h1{margin:0;background:var(--violet-fill);color:#fff;border-radius:var(--r-sm);
  font-size:clamp(17px,2.3vw,23px);font-weight:700;font-stretch:87.5%;
  letter-spacing:.02em;text-transform:uppercase;padding:7px 14px;line-height:1.2}
.dateline .sub{display:flex;align-items:center;padding:7px 14px;color:var(--ink-2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex:1;min-width:190px}
.dateline .sub a{color:var(--ink);text-underline-offset:3px}
.dateline label{display:flex;align-items:center;gap:8px;padding:7px 0 7px 14px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink-2)}
.dateline select{font:inherit;font-size:var(--u);padding:6px 10px;border:1px solid var(--rule);
  background:var(--pane);color:var(--ink);border-radius:var(--r-xs);max-width:210px}

/* ---- the departures strip: figures in fixed cells, not tiles ---- */
.glance{display:flex;flex-wrap:wrap;align-items:baseline;
  border-bottom:2px solid var(--ink);margin-bottom:var(--gap)}
/* The subject the figures share. Without it they were six numbers in a row
   with nothing saying what they counted. */
.g-lede{padding:9px 22px 9px 0;margin-right:22px;border-right:1px solid var(--rule);
  font-weight:700;font-stretch:87.5%;letter-spacing:.04em;text-transform:uppercase;
  font-size:12px;color:var(--ink-2)}
.glance div{padding:9px 22px 9px 0;margin-right:22px;border-right:1px solid var(--rule);
  display:flex;align-items:baseline;gap:8px}
.glance div:last-child{border-right:0}
.glance b{font-weight:700;font-stretch:75%;font-size:22px;letter-spacing:.01em}
.glance span{color:var(--ink-2);text-transform:uppercase;letter-spacing:.07em;font-size:12px;
  font-weight:600}
.glance .hl b{color:var(--violet)}
/* On a phone the strip's fixed cells wrapped into orphaned rows with dangling
   vertical rules, and its subject line took a whole row of its own. Two
   columns, no rules, subject on top. */
@media (max-width:620px){
  .glance{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;
    border-bottom-width:1px;padding-bottom:4px}
  .glance .g-lede{grid-column:1/-1;border-right:0;margin:0;padding:2px 0 7px}
  .glance div{border-right:0;margin:0;padding:5px 0;gap:6px}
  .glance div b{font-size:19px}
  /* Titles, their explanation and the link stack rather than fight for a row. */
  .section-head{gap:3px 12px;margin:22px 0 10px}
  .section-head .sub{flex:1 0 100%;line-height:1.4}
  .section-head a{flex:0 0 auto;margin-left:0}
  /* display:flex made the trailing "·" an orphan with the link pushed to the
     far edge on its own two lines. As normal text it just wraps. */
  .dateline .sub{display:block;flex:1 0 100%;border-top:0;padding:8px 0 0;line-height:1.45}
}



.stale{margin:var(--gap) 0 0;padding:11px 14px;background:var(--violet-soft);color:var(--ink);
  border:1px solid var(--violet);border-radius:var(--r)}
.stale b{color:var(--ink)}

/* ---- category filter: line colours, not pills ---- */
.filters{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--rule);
  margin-bottom:var(--gap);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;font:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 13px;border:0;border-bottom:2px solid transparent;
  background:none;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:7px}
.chip::before{content:"";width:9px;height:9px;background:var(--line,var(--c-default));flex:none;
  border-radius:2px}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--line,var(--ink))}
.chip[data-cat=""]::before{display:none}

/* ================= the wall ================= */
.tv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:var(--gap);padding-bottom:42px}
.tv{position:relative;background:#08080F;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.tv:hover{transform:translateY(-2px)}
.tv .media{position:relative;display:block;aspect-ratio:9/16;text-decoration:none;color:#fff}
.tv .stretch{position:absolute;inset:0;z-index:2}
.tv.linked{cursor:pointer}
.tv .veil{z-index:3;pointer-events:none}
.tv .veil a{pointer-events:auto}
.tv .rk,.tv .prods,.tv .dur{z-index:3}
.tv video,.tv .media>img{width:100%;height:100%;object-fit:cover;display:block}

/* the plate: rank on the brand's category line colour */
.tv .rk{position:absolute;top:9px;left:9px;background:var(--line,var(--c-default));color:#08080F;
  font-weight:700;font-stretch:75%;font-size:12px;letter-spacing:.05em;padding:3px 8px;
  min-width:28px;text-align:center;border-radius:var(--r-xs)}
.tv.top3 .rk{background:var(--violet-fill);color:#fff}
/* On our own daily wall the plate carries a word, not a rank number: the
   ranking is ours and unnumbered there, and what a returning reader wants to
   know is which of these were not here yesterday. */
/* The chips on a video are controls, so they behave like controls: they lift
   slightly under the pointer rather than sitting there looking decorative. */
.tv .bn,.tv .join{transition:transform .12s ease,background .12s,box-shadow .12s;
  transform-origin:left center}
.tv .bn:hover,.tv .bn:focus-visible{transform:scale(1.045);background:rgba(255,255,255,.2)}
.tv .join{transform-origin:center}
.tv .join:hover,.tv .join:focus-visible{transform:scale(1.06);background:rgba(255,255,255,.26)}
.tv .bn:focus-visible,.tv .join:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* the chip, seamed across the foot */
/* Fixed rows, not auto-flow: without them a tile with no creator name pulled
   the brand up and the wall lost its baseline. Empty rows stay reserved. */
.tv .veil{position:absolute;inset:auto 0 0 0;padding:26px 10px 10px;color:#fff;
  background:linear-gradient(to top,rgba(6,6,9,.94) 0%,rgba(6,6,9,.78) 46%,rgba(6,6,9,0) 100%);
  display:grid;grid-template-rows:20px 16px auto;gap:2px;align-content:end}
.tv .bn,.tv .cn{align-self:center}
.tv .cn:empty::before{content:"\00a0"}
.tv .bn{display:flex;align-items:center;gap:7px;min-width:0;color:#fff;text-decoration:none}
.tv .bn .logo{width:20px;height:20px;object-fit:cover;flex:none;background:#fff;border-radius:var(--r-xs)}
.tv .bn .nm{font-weight:700;font-stretch:87.5%;font-size:15px;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv .bn:hover .nm{text-decoration:underline;text-underline-offset:2px}
.tv .cn{font-size:12px;color:rgba(255,255,255,.76);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
.tv .chiprow{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0}
.tv .pay{font-size:12px;font-weight:600;color:#fff;background:var(--violet-fill);
  padding:3px 9px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tv .join{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:3px 10px;border-radius:999px;text-decoration:none;white-space:nowrap;flex:none;
  backdrop-filter:blur(8px);transition:background .14s,color .14s}
.tv .join:hover{background:#fff;color:#191828;border-color:#fff}
.tv .prods{position:absolute;top:9px;right:9px;display:flex;gap:4px}
.tv .prods img{width:28px;height:28px;object-fit:cover;background:#fff;border-radius:var(--r-xs)}
.tv .prods img:nth-child(n+3){display:none}
.tv .dur{position:absolute;right:9px;bottom:9px;font-size:10px;color:#fff;
  background:rgba(6,6,9,.66);padding:2px 7px;letter-spacing:.03em;border-radius:var(--r-xs);
  backdrop-filter:blur(6px)}
.tv .play,.tv .playbtn{position:absolute;inset:0;display:grid;place-items:center;
  opacity:.86;transition:opacity .16s}
.tv .play{pointer-events:none}
.tv .playbtn{z-index:4;border:0;background:transparent;cursor:pointer;padding:0}
.tv .playbtn:hover{opacity:1}
.tv:hover .playbtn{opacity:.55}

/* full-submission player */
/* The [hidden] attribute sets display:none at the UA level, and ANY display
   declaration in a stylesheet beats it. So a closed lightbox kept display:grid
   and stayed on top of the page as an invisible full-screen sheet that
   swallowed every click — the page was not frozen, it was covered. This one
   line is the whole bug. */
/* The quieter Join: a real link to Trybe for a brand whose terms we could not
   read. It must not look like the confident Join, because we are not claiming
   the reader can join, only that the brand is there. */
.tv .join-plain{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.9)}
.tv .join-plain:hover{background:rgba(255,255,255,.18)}

.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:100;background:rgba(6,6,10,.92);display:grid;
  place-items:center;padding:24px;backdrop-filter:blur(6px)}
/* An explicit portrait box. With only max-width/max-height, a source that
   fails to load has no intrinsic size and the player collapsed to the bare
   300x150 control bar floating in the dark. */
.lb video{width:min(420px,92vw);height:min(82vh,747px);aspect-ratio:9/16;
  object-fit:contain;border-radius:var(--r);background:#000;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.9)}
.lb-err{color:#fff;max-width:min(420px,92vw);text-align:center;font-size:14px;line-height:1.5}
.lb-err a{color:#fff}
.lb-c{color:#fff;margin:12px 0 0;font-size:14px;text-align:center;opacity:.85}
.lb-x{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;
  font-size:24px;line-height:1;cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.2)}
/* Both play marks, not just the passive one. .playbtn had no svg rule, so its
   triangle stretched to fill the whole tile — a play button the size of the
   video. */
.tv .play svg,.tv .playbtn svg{width:40px;height:40px;flex:none;
  filter:drop-shadow(0 2px 9px rgba(0,0,0,.6))}
.tv:hover .play{opacity:0}

.section-head{display:flex;align-items:baseline;gap:12px;margin:30px 0 11px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:7px}
.section-head h2{margin:0;font-size:14px;font-weight:700;font-stretch:87.5%;
  letter-spacing:.1em;text-transform:uppercase}
.section-head .sub{color:var(--ink-2)}
.section-head a{margin-left:auto;color:var(--ink);text-underline-offset:3px}

/* ================= the ranked list ================= */
.feed{display:grid;gap:8px;padding-bottom:20px}
.row{display:grid;grid-template-columns:44px 62px minmax(0,1fr) 96px auto;gap:0 14px;
  align-items:center;background:var(--pane);border:1px solid var(--rule);
  border-radius:var(--r);padding:11px 14px;transition:border-color .15s,background .15s}
.row:hover{background:var(--pane-2);border-color:var(--violet)}
/* The rank sits on its category's line colour — a stand plate, not a side tab.
   A thick coloured edge on a list item is the most recognisable AI-UI tell, and
   the plate carries the same information with the timetable's own vocabulary. */
.row .rank{align-self:start;background:var(--line,var(--c-default));color:#08080F;
  font-weight:700;font-stretch:75%;font-size:15px;text-align:center;padding:4px 0;
  letter-spacing:.04em;border-radius:var(--r-xs)}
.row.top3 .rank{background:var(--violet-fill);color:#fff}

.thumb{position:relative;display:block;width:62px;aspect-ratio:9/16;overflow:hidden;
  background:#08080F;text-decoration:none;border-radius:var(--r-sm)}
.thumb video,.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.still{background:#fff;display:grid;place-items:center;padding:5px}
.thumb.still img{height:auto;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.thumb .novid{display:grid;place-items:center;height:100%;font-size:9px;color:#8A8A93;
  text-align:center;padding:4px;line-height:1.2;text-transform:uppercase;letter-spacing:.04em}
.thumb .tag{position:absolute;left:0;right:0;bottom:0;background:rgba(6,6,9,.82);color:#fff;
  font-size:9px;padding:2px 1px;text-align:center;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}

.body{min-width:0;display:grid;gap:2px}
.head{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.head img{width:18px;height:18px;object-fit:cover;flex:none;background:var(--pane);border-radius:var(--r-xs)}
.body h2{margin:0;font-size:17px;font-weight:700;font-stretch:87.5%;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.body h2 a{text-decoration:none}
.body h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.cats{color:var(--line,var(--ink-2));font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- what works: measured length and how the best videos open ---- */
.fmt-list{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px}
.fmt-list .fmt-row{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(0,2fr) auto;
  gap:14px;align-items:center;background:var(--pane);padding:11px 14px}
.fmt-cat{font-weight:650;display:grid;gap:1px;min-width:0}
.fmt-hint{font-weight:400;font-size:12px;color:var(--ink-2)}
.fmt-band{display:flex;align-items:center;gap:11px;min-width:0}
.fmt-band b{font-variant-numeric:tabular-nums;white-space:nowrap;font-stretch:87.5%}
.fb{flex:1;height:7px;border-radius:99px;background:var(--pane-2);overflow:hidden;min-width:40px}
.fb i{display:block;height:100%;border-radius:99px;background:var(--line,var(--violet))}
.fmt-n{color:var(--ink-2);font-size:12.5px;white-space:nowrap}
@media (max-width:700px){
  .fmt-list .fmt-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .fmt-band{grid-column:1/-1}
}

/* ---- creators: who keeps reaching Trybe's own top 100 ---- */
.crlist{display:grid;gap:8px;padding-bottom:6px}
/* Four columns now, not six: place, face, who they are, and then the numbers
   and their best three videos as two blocks that keep their own internal
   order. The old row spread four separate auto columns across the right-hand
   half, which left a stat stranded in the middle of empty space. */
.cr{display:grid;grid-template-columns:26px 44px minmax(0,1fr) auto auto;
  gap:0 14px;align-items:center;background:var(--pane);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:11px 14px}
.cr-n{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:700;text-align:right}
/* Gold, silver and bronze, as a ring around the number rather than an emoji.
   An emoji medal renders differently on every platform and reads as a sticker;
   a metal ring reads as a placing. */
.medal{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  margin-left:auto;font-size:12px;font-weight:800;color:#2b2410;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.cr-gold .medal{background:linear-gradient(160deg,#F6D365,#C99700)}
.cr-silver .medal{background:linear-gradient(160deg,#E6E8EC,#A8AEB8)}
.cr-bronze .medal{background:linear-gradient(160deg,#E3A977,#A96A32);color:#2a1a0c}
.cr-medal{border-color:var(--ink-3)}
.cr-gold{border-color:#C99700}
.cr-face{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--pane-2);
  border:1px solid var(--rule);display:block}
.cr-face-l{display:grid;place-items:center;font-weight:800;color:var(--ink-2)}
.cr-body{min-width:0;display:grid;gap:2px}
.cr-name{font-weight:700;font-size:15.5px;display:flex;align-items:baseline;gap:9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-tt{font-weight:600;font-size:12.5px;color:var(--ink-3);flex:none}
.cr-brands{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-hook{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Fixed widths, because "1 video" is narrower than "2 videos" and without
   them every row's numbers sat in a slightly different place down the page. */
.cr-stats{display:flex;align-items:center;gap:18px}
.cr-stat{text-align:right;display:grid;gap:1px;white-space:nowrap;min-width:46px}
.cr-stat b{font-size:17px;font-weight:700;font-stretch:87.5%;font-variant-numeric:tabular-nums}
.cr-stat span{font-size:11.5px;color:var(--ink-2)}
/* Points are what the list is sorted by, so they are the figure that reads
   first. The rest explain the placing; this one causes it. */
.cr-pts{min-width:58px}
.cr-pts b{font-size:22px;color:var(--violet)}

/* Their best three, highest placement first. One thumbnail used to sit here
   showing their top video with nothing said about it and no way to open it —
   a picture of a video is not a video. */
/* Three clips wide whether or not there are three, so the strip's right edge
   is the same on every row. */
.cr-clips{display:flex;gap:5px;width:148px;justify-content:flex-end}
.cr-clip{position:relative;flex:none;width:46px;aspect-ratio:9/16;padding:0;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r-xs);overflow:hidden;
  background:var(--pane-2);display:block;
  transition:transform .14s ease,border-color .14s ease}
.cr-clip video,.cr-clip img{width:100%;height:100%;object-fit:cover;display:block}
.cr-clip:hover,.cr-clip:focus-visible{transform:translateY(-2px) scale(1.06);
  border-color:var(--violet);z-index:2}
.cr-clip:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* The placement, on the clip it belongs to. The row's "best" figure names one
   number; this says which of the three earned it. */
.cr-cliprk{position:absolute;left:2px;bottom:2px;font-size:9.5px;font-weight:800;
  letter-spacing:.02em;color:#fff;background:rgba(6,6,9,.78);border-radius:999px;
  padding:1px 5px;pointer-events:none;font-variant-numeric:tabular-nums}
@media (max-width:820px){
  /* The clips wrap under the name rather than disappearing: they are the
     reason to look at a creator, and a phone is where people watch. */
  .cr{grid-template-columns:22px 38px minmax(0,1fr) auto;gap:6px 11px}
  .cr-face{width:38px;height:38px}
  .cr-clips{grid-column:3/-1;justify-self:start}
  .cr-clip{width:40px}
  .cr-stats{gap:14px}
  .cr-stats .cr-stat:not(.cr-pts):nth-child(n+3){display:none}
}

/* ---- placeholders that hold the page still ---- */
/* Measured before this existed: cumulative layout shift of 0.857 on the home
   page, 0.762 on All brands. Google calls anything above 0.25 poor, and it is
   what "things flash before they load" actually is — the page rendering at one
   size and then shoving itself around when the data lands.

   A quiet opacity pulse, not a shimmer sweep: a diagonal gradient travelling
   across grey blocks is the most recognisable loading-state cliche going, and
   it draws the eye to the wait instead of away from it. */
.sk{background:var(--pane);border:1px solid var(--rule);border-radius:var(--r-sm);
  animation:sk 1.6s ease-in-out infinite}
.sk-tile{aspect-ratio:9/16;border-radius:var(--r)}
/* Heights measured from the real thing, not guessed: a ranked row is 144px
   and a brand row 50px, and a skeleton of the wrong height just moves the
   shift rather than removing it. */
.sk-row{height:144px}
.sk-line{height:50px}
.sk-cr{height:76px}
/* Panels that arrive after the feed sit ABOVE it, so anything they gain on
   appearing pushes the whole page down. They hold their measured height from
   the first paint instead. */
/* Reserved ONLY while the page is still loading. A panel can legitimately
   stay hidden forever — fewer than three qualifying brands, no hooks that day
   — and reserving its height unconditionally would leave a permanent 373px
   hole on exactly the days there is least to show. */
.loading #odds[hidden]{display:block;min-height:373px}
.loading #hooks[hidden]{display:block;min-height:206px}
.loading #fmt[hidden]{display:block;min-height:44px}
.loading #odds[hidden]>*,.loading #hooks[hidden]>*{visibility:hidden}
.loading #views:empty{min-height:38px}
.loading #niche:empty{min-height:46px}
.loading .glance:empty{min-height:52px}
@keyframes sk{0%,100%{opacity:.55}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.sk{animation:none;opacity:.6}}
/* The strips keep their height from the first paint, so the content below
   them never moves when the numbers arrive. */


/* ---- my categories: a standing choice, kept on this device ---- */
.niche{margin:0 0 var(--gap);border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--pane)}
.niche summary{cursor:pointer;padding:11px 14px;font-weight:650;font-stretch:87.5%;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;list-style:none;min-height:44px;
  box-sizing:border-box}
.niche summary::-webkit-details-marker{display:none}
.niche summary::before{content:"+";color:var(--violet);font-weight:700;margin-right:2px}
.niche[open] summary::before{content:"\2013"}
.niche-hint{font-weight:400;color:var(--ink-2);font-size:13px}
.niche-body{padding:0 14px 13px;border-top:1px solid var(--rule)}
.niche-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:2px 14px;padding:11px 0}
.niche-opt{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer;
  min-height:40px;color:var(--ink-2);font-size:13.5px}
.niche-opt.on{color:var(--ink);font-weight:600}
.niche-opt input{width:16px;height:16px;accent-color:var(--violet-fill);flex:none}
.niche-opt b{margin-left:auto;font-weight:600;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.niche-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:11px}
.niche-clear{font:inherit;font-size:13px;font-weight:650;padding:9px 14px;min-height:40px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--pane-2);
  color:var(--ink);cursor:pointer}
.niche-note{color:var(--ink-2);font-size:12.5px}

/* ---- the signup: one line, out of the way ---- */
/* It was a bordered card with a two-line label above the video walls, which
   pushed the entire reason for the page below the fold and asked for an
   address before showing anything worth having. A rule and a row now, sitting
   between the two walls. */
.signup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:12px 0;margin:22px 0 6px}
.signup label{font-weight:650;font-stretch:87.5%;color:var(--ink);white-space:nowrap;flex:none}
.signup input{flex:1 1 220px;max-width:300px;min-width:0;font:inherit;font-size:14px;
  padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--pane);color:var(--ink)}
.signup input:focus-visible{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.signup button{font:inherit;font-size:13px;font-weight:700;font-stretch:87.5%;letter-spacing:.03em;
  padding:9px 16px;border:0;border-radius:var(--r-sm);background:var(--violet-fill);color:#fff;
  cursor:pointer;white-space:nowrap;flex:none}
.signup button:disabled{opacity:.6;cursor:default}
.signup-msg{margin:0;font-size:13px;color:var(--ink-2);flex:1 1 100%}
.signup-msg:empty{display:none}
.signup-msg.good{color:var(--confirm,var(--ink))}
.signup-msg.bad{color:var(--strike,#d13)}
@media (max-width:560px){
  .signup label{flex:1 0 100%}
  .signup input{max-width:none}
}

/* ---- the script beside the video ---- */
/* Top-left, not bottom-left. At the bottom it sat directly on the payout chip
   and the Join button, so three controls fought for the same corner. */
.tv .scriptbtn{position:absolute;left:9px;top:9px;z-index:5;font:inherit;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;cursor:pointer;
  color:#fff;background:rgba(6,6,9,.66);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;opacity:0;transition:opacity .14s,transform .12s}
.tv .rk ~ .scriptbtn{left:auto;right:9px}
.tv:hover .scriptbtn,.tv .scriptbtn:focus-visible{opacity:1}
.tv .scriptbtn:hover{transform:scale(1.06)}
.thumb[data-script]{position:relative;cursor:pointer}
.thumb-script{position:absolute;left:4px;bottom:4px;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(6,6,9,.7);
  padding:2px 6px;border-radius:999px}
.scriptlb[hidden]{display:none}
.scriptlb{position:fixed;inset:0;z-index:110;background:rgba(6,6,10,.92);display:grid;
  place-items:center;padding:22px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Everything from here down exists to keep the panel a FIXED frame: the box is
   88vh and never taller, the video and the head are fixed, and exactly one
   region scrolls — the cue list on the Script tab, the written script on
   Rewrite. Before this, the box capped its height but nothing clipped or
   scrolled, so a long transcript or a returned script simply drew past the
   panel's own border and off the bottom of the screen with no way to reach it.
   The min-height:0 on every nested grid item is the load-bearing part: a grid
   item's default min-height is auto, which means it refuses to shrink below its
   content and hands the overflow to its parent instead of scrolling itself. */
.scriptbox{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;
  width:min(940px,100%);height:min(88vh,720px);background:var(--pane);border:1px solid var(--rule);
  border-radius:var(--r);padding:18px;position:relative}
/* Not overflow:hidden on the box — that clipped the close button, which sits
   deliberately outside the panel's corner. Each column constrains itself. */
.scriptvid,.scriptside{overflow:hidden}
/* The close sits outside the panel's own controls: at 18px it landed on top
   of Copy script, and two overlapping buttons is a coin flip for the reader. */
.scriptbox .lb-x{top:-14px;right:-14px;width:34px;height:34px;font-size:20px;
  background:var(--pane);border:1px solid var(--rule);color:var(--ink)}
.scriptbox .lb-x:hover{background:var(--pane-2);border-color:var(--violet)}
.scriptvid{min-height:0;display:grid;align-content:start}
.scriptvid video{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm);
  background:#000;display:block}
.scriptside{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:11px}
/* Title on its own line, then the tabs and the copy button on the next. They
   were all on one row, so a long brand-and-creator title pushed Copy script on
   top of the tabs. */
.scripthead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;
  align-items:center;border-bottom:1px solid var(--rule);padding-bottom:8px}
.scripttitle{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scripttitle{font-size:15px;font-stretch:87.5%}
.scriptcopy{font-size:12px;padding:8px 13px;white-space:nowrap;justify-self:end}
.scriptcues{margin:0;padding:0;list-style:none;overflow-y:auto;display:grid;gap:2px;
  align-content:start;min-height:0}
.scriptcues li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:6px 8px;
  border-radius:var(--r-xs);cursor:pointer;line-height:1.45}
.scriptcues li:hover{background:var(--pane-2)}
.scriptcues li.note{grid-template-columns:1fr;cursor:default;color:var(--ink-2)}
.cue-at{color:var(--violet);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
.scripttabs{display:flex;gap:2px}
.stab{font:inherit;font-size:12.5px;font-weight:650;padding:7px 12px;min-height:36px;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-2)}
.stab.on{color:var(--ink);border-bottom-color:var(--violet)}
.rewritepane[hidden]{display:none}
/* The controls sit at the top and stay put; only the written script scrolls.
   They used to be stacked above a growing output, which pushed the dial and
   the angle box off the bottom of the panel the moment anything was written. */
.rewritepane{display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;min-height:0}
.rw-controls{display:grid;gap:11px;align-content:start}
.rw-row{display:grid;gap:5px;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.rw-simline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.rw-gorow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rw-row select,.rw-row input[type=text]{font:inherit;font-size:14px;padding:9px 11px;min-height:40px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.rw-row input[type=range]{accent-color:var(--violet-fill);min-height:32px}
.rw-simout{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.rw-go{flex:none}
.rw-note{margin:0;font-size:12.5px;color:var(--ink-2);min-width:0}
.rw-out{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:9px;min-height:0}
.rw-out[hidden]{display:none}
.rw-text{font:inherit;font-size:14px;line-height:1.55;padding:12px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);resize:none;
  width:100%;height:100%;min-height:0}
.rw-copy{justify-self:start}
@media (max-width:760px){
  /* One column, and the whole side stacks under a shorter video. The box still
     owns the height; the side is what scrolls. */
  .scriptbox{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:92vh;padding:14px}
  .scriptvid{height:30vh}
  .scriptbox.writing .scriptvid{height:13vh}
  .scriptvid video{height:100%;width:auto;margin:0 auto}
}

/* ---- the shot list ---- */
.pin{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--pane-2);
  color:var(--ink-3);transition:color .14s,border-color .14s,background .14s}
.pin svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round}
.pin:hover{color:var(--violet);border-color:var(--violet)}
.pin.on{color:var(--violet);border-color:var(--violet);background:var(--violet-soft)}
.pin.on svg{fill:currentColor}
.tv .pin{position:absolute;top:9px;right:9px;z-index:5;width:32px;height:32px;
  background:rgba(6,6,9,.6);border-color:rgba(255,255,255,.25);color:#fff}
.mast nav b[data-board-count]{display:inline-block;margin-left:5px;padding:1px 6px;
  border-radius:999px;background:var(--violet-fill);color:#fff;font-size:10.5px;font-weight:700}
.linkish{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}

.sllist{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;
  padding-bottom:40px}
.sl{background:var(--pane);border:1px solid var(--rule);border-radius:var(--r);padding:15px;
  display:grid;gap:12px;align-content:start}
.sl-head{display:flex;align-items:center;gap:11px}
.sl-name{min-width:0;display:grid;gap:1px;flex:1}
.sl-name a{font-weight:700;font-size:16px;text-decoration:none;color:var(--ink)}
.sl-name a:hover{color:var(--violet)}
.sl-cat{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--line,var(--ink-2));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-pay{font-weight:650;font-size:13px;white-space:nowrap}
.sl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 16px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:11px 0;margin:0}
.sl-facts dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2)}
.sl-facts dd{margin:2px 0 0;font-weight:650}
.sl-rules h4{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.sl-rules ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:13.5px;color:var(--ink-2)}
.sl-vids{display:flex;gap:8px;flex-wrap:wrap}
.sl-vids .thumb{width:78px;aspect-ratio:9/16;border-radius:var(--r-xs);overflow:hidden;
  background:var(--pane-2);display:block}
.sl-vids .thumb video{width:100%;height:100%;object-fit:cover;display:block}
.sl-vids .note{flex:1 0 100%;margin:0;font-size:12px}
.sl-join{justify-self:start}

/* ---- payout changes: the thing only a record can show ---- */
#boards>.wide{grid-column:1/-1}
.rates{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:7px}
.rate{display:flex;align-items:center;gap:11px;padding:9px 12px;text-decoration:none;
  background:var(--pane-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  transition:border-color .14s}
.rate:hover{border-color:var(--violet)}
.rate-dir{font-size:15px;font-weight:800;line-height:1;flex:none;width:16px;text-align:center}
.rate-up .rate-dir,.rate-up .rate-pct{color:var(--confirm,#2e9e63)}
.rate-down .rate-dir,.rate-down .rate-pct{color:var(--strike,#d4574e)}
.rate-kind .rate-dir{color:var(--ink-2)}
.rate-body{min-width:0;display:grid;gap:1px}
.rate-name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rate-label{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rate-pct{margin-left:auto;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;flex:none}

/* ---- best odds: four published facts, joined ---- */
/* ---- the three shortlists at the top of Today ---- */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 var(--gap);
  align-items:start}
.picks[hidden]{display:none}
.pk-col{min-width:0;display:grid;gap:9px;align-content:start}
.pk-head{border-bottom:2px solid var(--rule);padding-bottom:9px}
.pk-head h2{margin:0;font-size:14px;font-weight:800;font-stretch:87.5%;text-transform:uppercase;
  letter-spacing:.075em;color:var(--ink);display:flex;align-items:center;gap:9px}
.pk-head h2::before{content:"";flex:none;width:3px;height:14px;border-radius:2px;
  background:var(--violet-fill)}
/* The sub is the rule the column applies, so it gets to be a readable
   sentence rather than an ellipsed fragment beside the title. */
.pk-sub{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.pk-list{display:grid;gap:6px}
.pk{display:grid;grid-template-columns:26px 30px minmax(0,1fr);gap:0 11px;align-items:start;
  text-decoration:none;color:inherit;background:var(--pane);border:1px solid var(--rule);
  border-left:3px solid var(--line,var(--rule));border-radius:var(--r-sm);padding:9px 11px}
.pk:hover{background:var(--pane-2);border-color:var(--violet);border-left-color:var(--line,var(--violet))}
.pk-n{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:700;font-size:12.5px;
  text-align:right;padding-top:2px}
.pk-age{font-size:11px;font-weight:700;color:var(--violet)}
.pk-up{color:var(--confirm,#4ADE80);font-size:14px}
.pk-body{min-width:0;display:grid;gap:2px}
.pk-top{display:flex;align-items:baseline;gap:10px}
.pk-name{font-weight:700;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pk-val{margin-left:auto;flex:none;font-size:12.5px;font-weight:700;white-space:nowrap}
.pk-pay{color:var(--violet)}
.pk-rise{color:var(--confirm,#4ADE80)}
/* The reason a brand is in the list IS the list. Two lines, wrapping, never
   an ellipsis mid-word — this line used to be clipped to one line and it was
   the only thing on the row worth reading. */
.pk-why{font-size:12.5px;line-height:1.45;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-more{font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:none;
  padding:8px 0;justify-self:start;display:inline-flex;align-items:center;min-height:44px}
.pk-more:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1080px){
  .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .picks{grid-template-columns:1fr;gap:24px}
}

.odds-panel{margin:0 0 var(--gap)}
.oddslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px}
.odds{display:grid;grid-template-columns:20px 30px minmax(0,1fr) auto;gap:0 12px;
  align-items:center;background:var(--pane);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:10px 13px;text-decoration:none;
  transition:border-color .14s,background .14s}
.odds:hover{background:var(--pane-2);border-color:var(--violet)}
.odds-n{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:700;
  font-size:12.5px;text-align:right}
.odds-body{min-width:0;display:grid;gap:1px}
.odds-name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odds-why{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odds-pay{font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;flex:none}
@media (max-width:560px){
  .odds{grid-template-columns:20px 30px minmax(0,1fr)}
  .odds-pay{grid-column:3;font-size:12px;color:var(--ink-2)}
}

/* ---- a page's own contents, sticky under the masthead ---- */
.secnav{position:sticky;top:var(--mast-h,45px);z-index:20;display:flex;gap:0;overflow-x:auto;
  scrollbar-width:none;background:var(--paper);border-bottom:1px solid var(--rule);
  margin:0 0 var(--gap)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
  .secnav{background:color-mix(in srgb,var(--paper) 86%,transparent);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%)}
}
.secnav::-webkit-scrollbar{display:none}
.secnav a{display:flex;align-items:center;gap:7px;padding:11px 16px 9px 0;margin-right:16px;
  text-decoration:none;color:var(--ink-2);font-weight:650;font-stretch:87.5%;font-size:13px;
  letter-spacing:.03em;white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .14s,border-color .14s}
.secnav a:hover{color:var(--ink)}
.secnav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--violet)}
.secnav a b{font-weight:600;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.secnav a[aria-current="true"] b{color:var(--ink-2)}
/* A jumped-to heading must not hide behind the bar. */
/* Clear BOTH sticky bars when jumping to a section. */
[id^="sec-"]{scroll-margin-top:calc(var(--mast-h,45px) + 52px)}

/* ---- the explainer beside a number ---- */
.infowrap{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px}
.info{width:15px;height:15px;border-radius:50%;border:1px solid var(--ink-3);
  background:none;color:var(--ink-2);font:inherit;font-size:10.5px;font-weight:700;
  line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;
  font-family:Georgia,'Times New Roman',serif;font-style:italic;
  transition:border-color .14s,color .14s}
.info:hover,.info:focus-visible{border-color:var(--violet);color:var(--violet)}
.infopop{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
  z-index:30;width:max-content;max-width:min(290px,72vw);padding:9px 11px;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink-3);
  border-radius:var(--r-sm);box-shadow:var(--shadow);
  font-size:13px;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;
  white-space:normal;text-align:left}
/* A panel opening at the right edge of a stats row would sit off-screen. */
.bstats div:last-child .infopop,.glance div:last-child .infopop{left:auto;right:0;transform:none}

.chart-empty{color:var(--ink-2);margin:0;font-size:13.5px}
.reason{margin:3px 0 4px;color:var(--ink);font-size:15px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;max-width:78ch}
.stats{display:flex;gap:5px 18px;flex-wrap:wrap;color:var(--ink-2);align-items:center;font-size:13.5px}
.stats b{color:var(--ink);font-weight:700}
.up{color:var(--confirm);font-weight:700}
.flag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 8px;background:var(--strike);color:#08080F;
  border-radius:999px}
.flag.tier{background:var(--confirm);color:#08080F}
.score{display:inline-block;font-size:12px;font-weight:600;color:var(--ink-2);
  border:1px solid var(--rule);padding:1px 8px;border-radius:999px}

/* state as marks in fixed cells — filled holds, hollow does not */
/* These four cells encode what moved today. They carried an aria-label and
   nothing else, so a screen reader was told what they meant and everyone
   looking at them was not. The legend above the feed is the key. */
.mkey{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);
  margin:0 0 10px}
.mkey b{font-weight:650;color:var(--ink-2)}
.mkey span{display:inline-flex;align-items:center;gap:6px}
.mkey i{width:9px;height:9px;border:1.5px solid var(--ink-3);display:block;border-radius:2px}
.mkey i.on{background:var(--confirm);border-color:var(--confirm)}
.mkey i.new{background:var(--strike);border-color:var(--strike)}
.marks{display:flex;gap:3px;align-items:center}
.marks i{width:9px;height:9px;border:1.5px solid var(--ink-3);display:block;border-radius:2px}
.marks i.on{background:var(--confirm);border-color:var(--confirm)}
.marks i.new{background:var(--strike);border-color:var(--strike)}

.act{display:grid;gap:5px;justify-items:stretch;min-width:118px}
.btn{display:block;text-align:center;text-decoration:none;font:inherit;font-size:12px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:9px 14px;
  border:1px solid var(--violet-fill);background:var(--violet-fill);color:#fff;cursor:pointer;
  border-radius:999px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--rule);font-weight:600}
.btn.ghost:hover{background:transparent;color:var(--ink);border-color:var(--violet)}
.paytag{text-align:center;color:var(--ink-2);font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---- format panel ---- */
.fmt{margin:0 0 var(--gap);border:1px solid var(--rule);background:var(--pane);border-radius:var(--r)}
.fmt summary{cursor:pointer;padding:10px 13px;display:flex;gap:10px;align-items:baseline;
  flex-wrap:wrap;list-style:none}
.fmt summary::-webkit-details-marker{display:none}
.fmt summary::before{content:"+";color:var(--violet);font-weight:700;width:10px}
.fmt[open] summary::before{content:"\2212"}
.fmt summary span{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px}
.fmt summary em{font-style:normal;color:var(--ink-2)}
.fmt-body{padding:0 13px 13px}
.fmt-row{display:grid;grid-template-columns:minmax(110px,1.3fr) minmax(0,3fr) 62px;gap:12px;
  align-items:center;padding:4px 0}
.fmt-row .nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.fmt-row .bar{position:relative;height:11px;background:transparent;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fmt-row .bar i{position:absolute;top:2px;bottom:2px;background:var(--line,var(--c-default));opacity:.85}
.fmt-row .bar b{position:absolute;top:-2px;width:2px;height:15px;background:var(--ink)}
.fmt-row .val{text-align:right;font-weight:700}
.fmt-note{color:var(--ink-2);margin:10px 0 0;max-width:74ch;font-size:13px}
.hooks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hooks li{display:grid;gap:2px;padding-left:11px;border-left:2px solid var(--line,var(--c-default))}
.hooks .hk{font-size:16px;color:var(--ink);line-height:1.42}
.hooks .hm{font-size:12.5px;color:var(--ink-2)}
.hooks .hm a{color:var(--ink-2);text-underline-offset:3px}
.hooks .hm a:hover{color:var(--ink)}

/* ---- detail + prose ---- */
/* The brand page was one narrow column of stacked boxes with the whole right
   half empty. It is a header plus two columns now: what a creator is deciding
   on (the videos) beside what they are deciding about (terms, score, products). */
.detail{padding:18px 0 50px;display:grid;gap:16px;max-width:none}

.bhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 18px;
  align-items:start;background:var(--pane);border:1px solid var(--rule);
  border-radius:var(--r);padding:18px}
.blogo{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);
  background:var(--pane-2);border:1px solid var(--rule);grid-row:span 2}
.bmain{min-width:0}
.bmain .reason{margin:8px 0 0;max-width:72ch;-webkit-line-clamp:unset;display:block;font-size:16px}
.about{margin:9px 0 0;max-width:72ch;color:var(--ink-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wsite{color:var(--ink-2);text-underline-offset:3px}
.wsite:hover{color:var(--ink)}
.terms{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.terms span{font-size:13px;color:var(--ink-2);background:var(--pane-2);
  border:1px solid var(--rule);border-radius:999px;padding:4px 11px}
.terms .t-pay{color:#fff;background:var(--violet-fill);border-color:var(--violet-fill);font-weight:600}
.terms .t-prog{color:var(--ink);font-weight:600}

/* A rating is a shape before it is a number. */
.stars{display:inline-flex;align-items:center;gap:8px;margin-top:10px}
.stars .rail{position:relative;display:inline-block;line-height:0;flex:none}
.stars .s-off,.stars .s-on{display:inline-flex;gap:2px}
.stars svg{width:15px;height:15px}
.stars .s-off svg{fill:var(--rule)}
.stars .s-on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.stars .s-on svg{fill:#F5B301}
.stars b{font-weight:700}
.stars i{font-style:normal;color:var(--ink-2);font-size:13px}

/* The score breakdown was three full-width bars with a caption each — most of
   a column for three numbers. */
.parts{display:grid;gap:9px}
.part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:baseline}
.part strong{font-weight:600;font-size:14px}
.part .bar{grid-column:1/-1;height:5px;background:var(--rule);border-radius:99px;overflow:hidden}
.part .tip{grid-column:1/-1;color:var(--ink-3);font-size:12px;line-height:1.35}
.bact{display:grid;gap:6px;min-width:150px}
.bstats{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:0;margin:4px 0 0;
  border-top:1px solid var(--rule);padding-top:12px}
.bstats div{padding-right:26px;margin-right:26px;border-right:1px solid var(--rule)}
.bstats div:last-child{border-right:0;margin-right:0;padding-right:0}
.bstats dt{color:var(--ink-2);font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:600;margin:0 0 3px}
.bstats dd{margin:0;font-weight:700;font-size:20px;font-stretch:75%}

/* No fixed two-column split. Videos ran down one side and everything else
   down the other, so whichever side was shorter left a column of empty page —
   the whole left half when a brand had no video, the bottom half when it had
   three. Videos take the full width, then the rest packs into as many columns
   as fit, which balances for any brand. */
/* Stop tiling. Three attempts at packing these sections — a fixed two-column
   split, an auto-fit grid, then multi-column flow — all produced the same
   defect from different directions: sections have wildly different heights, so
   any packing leaves holes, and every fix moved the hole somewhere else.
   
   One column of full-width bands instead, ordered the way the decision is
   made: what the brand asks for, how long to make it, how it compares, the
   proof, then reference. Density comes from each band laying itself out
   horizontally inside, which no packing algorithm has to solve. */
/* The score's three parts, inside the brand card. They answer "will this
   brand actually review and pay me", which belongs beside the headline
   numbers rather than three screens below them. */
/* Three verdicts on one line, colour-coded by where the brand actually
   lands. A brand in the bottom third of its category gets a red pill and
   says so — the point of a comparison is that it can come out badly. */
.verdict{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--rule)}
.vd-lede{font-size:12.5px;color:var(--ink-2);margin-right:2px}
.vd{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  padding:7px 12px 7px 10px;border-radius:999px;border:1px solid var(--rule);
  background:var(--pane-2);min-height:36px}
.vd:hover{border-color:var(--violet)}
.vd b{font-size:16px;font-weight:800;font-stretch:87.5%;font-variant-numeric:tabular-nums;
  line-height:1}
.vd b i{font-style:normal;font-size:10px;font-weight:700;vertical-align:2px;opacity:.7}
.vd span{font-size:12.5px;color:var(--ink-2);line-height:1.3;white-space:nowrap}
.vd-good b{color:#4ADE80}
.vd-good{border-color:rgba(74,222,128,.35)}
.vd-mid b{color:var(--violet)}
.vd-low b{color:#F472B6}
.vd-low{border-color:rgba(244,114,182,.35)}
@media (max-width:620px){
  .vd-lede{flex:1 1 100%}
}

.bscore{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px 26px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.bscore .part{gap:2px 10px}
.bscore .part .cap{font-size:11.5px}

.bands{display:grid;gap:14px}
.bands>section{margin:0}

/* A band's own contents run across it rather than down. */
.bands .parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 24px}
.bands .stands{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 24px}
.bands .brules{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 26px}
.bands .peers{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.bands .grid-prod{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.bands #hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:6px 24px;
  align-items:start}
.bands #hist h3{grid-column:auto;margin-top:0!important}
/* The length band puts its big figure beside its explanation, not above it. */
.bands .fmt-big{display:inline-block;margin:0 16px 0 0;vertical-align:-2px}
/* The brand's own instructions, given room. They were inside a blurb clamped
   to five lines with overflow hidden, which is where the single most useful
   text on the page had been living. */
.stands{display:grid;gap:12px}
.stand{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.stand-l{font-weight:600;line-height:1.4}
.stand-n{color:var(--ink-2);font-size:12px}
.stand .fb{width:100%}

.mom-rank{font-size:14px;font-weight:600;font-stretch:100%;letter-spacing:0;
  color:var(--ink-2);margin-left:12px}
.fmt-big{margin:0 0 5px;font-size:clamp(26px,4vw,34px);font-weight:700;font-stretch:87.5%;
  letter-spacing:-.01em;line-height:1}
.brules{margin:0;padding-left:19px;display:grid;gap:7px}
.brules li{line-height:1.5}
.rules-sec{background:var(--pane)}
.t-yes{color:var(--confirm,var(--ink));font-weight:650}
.t-wait{color:var(--ink-2)}

.peers{display:grid;gap:7px}
.peer{display:flex;align-items:center;gap:11px;text-decoration:none;padding:7px 9px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--pane-2);
  transition:border-color .14s}
.peer:hover{border-color:var(--violet)}
.peer-n{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.peer-m{margin-left:auto;color:var(--ink-2);font-size:12.5px;white-space:nowrap;flex:none}

.mvlist{display:grid;gap:12px}
.mv{display:grid;grid-template-columns:58px minmax(0,1fr);gap:13px;align-items:center;
  padding-bottom:11px;border-bottom:1px solid var(--rule)}
.mv:last-child{border-bottom:0;padding-bottom:0}
/* A reference thumbnail, not the content: a full 9:16 tile left a row of dead
   space beside two lines of text. */
.mv-shot{position:relative;display:block;width:58px;aspect-ratio:4/5;border-radius:var(--r-sm);
  overflow:hidden;background:var(--pane-2);text-decoration:none}
.mv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.mv-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:.9}
.mv-play svg{width:22px;height:22px;filter:drop-shadow(0 2px 7px rgba(0,0,0,.6))}
.mv-shot:not(:has(img)) .mv-play svg{opacity:.35}
.mv-dur{position:absolute;right:4px;bottom:4px;font-size:10px;color:#fff;
  background:rgba(6,6,9,.7);padding:1px 5px;border-radius:4px}
.mv-body{min-width:0;display:grid;gap:4px}
.mv-hook{margin:0;font-size:16px;line-height:1.42;color:var(--ink)}
.mv-meta{font-size:13.5px;color:var(--ink-2)}
.mv-meta b{color:var(--ink)}
.mv-meta a{color:var(--ink-2);text-underline-offset:3px}
.mv-meta a:hover{color:var(--ink)}
.mv-why{font-size:12px;color:var(--ink-3)}

@media (max-width:900px){
  .bhead{grid-template-columns:auto minmax(0,1fr)}
  .bact{grid-column:1/-1;grid-auto-flow:column;justify-content:start;align-items:center;gap:10px}
  .blogo{grid-row:auto;width:44px;height:44px}
  .bstats{grid-column:1/-1}
  .bstats div{padding-right:18px;margin-right:18px}
}
.detail h1{margin:0 0 3px;font-size:clamp(21px,3vw,29px);font-weight:700;font-stretch:87.5%;
  letter-spacing:-.01em}
.detail section{background:var(--pane);border:1px solid var(--rule);padding:16px;border-radius:var(--r)}
/* Section headers were 12px --ink-2, which put the label naming a panel at
   lower contrast than the rows inside it — you had to hunt for where one
   section ended and the next began. Full ink, a size up, and a violet bar that
   makes the start of a section findable in peripheral vision. */
.detail h3{margin:0 0 13px;font-size:13px;text-transform:uppercase;letter-spacing:.085em;
  color:var(--ink);font-weight:800;border-bottom:1px solid var(--rule);padding-bottom:9px;
  display:flex;align-items:center;gap:9px}
.detail h3::before{content:"";flex:none;width:3px;align-self:stretch;min-height:14px;
  border-radius:2px;background:var(--violet-fill)}
.detail #hist h3::before{display:none}
.rules{margin:0;padding-left:17px}
.rules li{margin-bottom:6px}
.cap{color:var(--ink-2)}
.part .bar i{display:block;height:100%;background:var(--violet);border-radius:99px}
.grid-prod{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:11px}
.grid-prod figure{margin:0}
.grid-prod img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff;border-radius:var(--r-sm)}
.grid-prod figcaption{color:var(--ink-2);margin-top:6px;font-size:13px;line-height:1.35}
/* On the brand page these previews are the content, not row chrome, so they
   escape the 62px list thumbnail. */
.detail .grid-prod .thumb{width:100%;aspect-ratio:9/16;border-radius:var(--r-sm)}
.vidlist{display:grid;gap:12px}
.vidrow{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.vidrow .n{font-weight:700;min-width:54px}
.spark{width:100%;height:56px;display:block}
.spark path{fill:none;stroke:var(--violet);stroke-width:2;vector-effect:non-scaling-stroke}
.prose{max-width:74ch}
.prose h2{font-size:17px;font-weight:700;font-stretch:87.5%;letter-spacing:-.005em;
  margin:24px 0 8px;border-bottom:1px solid var(--rule);padding-bottom:6px}
.prose li{margin-bottom:6px}
.prose p{margin:0 0 11px}

/* ---- how it works: read once, scanned every time after ---- */
/* Not ".about": the brand page already owns that name for its clamped brand
   blurb, and it clamps to five lines with overflow hidden. */
.howto{max-width:76ch;padding:18px 0 56px}
.ab-lede{font-size:clamp(17px,2.2vw,21px);line-height:1.45;margin:0 0 4px;
  font-stretch:92.5%;letter-spacing:-.01em}
.howto h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;
  color:var(--ink-2);margin:34px 0 10px;padding-bottom:7px;border-bottom:2px solid var(--ink)}
.howto p{margin:0 0 11px}
/* Definition rows, not cards: six signals in six tiles is the stock AI layout,
   and a table of terms is faster to scan than a numbered essay was to read. */
.ab-sig,.ab-src{margin:0 0 12px;display:grid;gap:0}
.ab-sig>div,.ab-src>div{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);
  gap:4px 20px;padding:10px 0;border-bottom:1px solid var(--rule)}
.ab-sig>div:first-child,.ab-src>div:first-child{border-top:1px solid var(--rule)}
.ab-sig dt,.ab-src dt{font-weight:700;font-stretch:87.5%}
.ab-sig dd,.ab-src dd{margin:0;color:var(--ink-2)}
.ab-sig{counter-reset:sig}
.ab-sig dt{counter-increment:sig}
.ab-sig dt::before{content:counter(sig);color:var(--ink-3);font-variant-numeric:tabular-nums;
  margin-right:9px;font-weight:600}
.ab-rules{margin:0 0 11px;padding:0;list-style:none;display:grid;gap:7px}
.ab-rules li{padding-left:22px;position:relative}
.ab-rules li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--violet)}
/* The worked examples are evidence for the rule above, so they sit in a quieter
   voice on the page's own paper rather than in a panel competing with it. */
.ab-eg{margin:16px 0 4px;padding:15px 18px;background:var(--pane);
  border:1px solid var(--rule);border-radius:var(--r-sm);color:var(--ink-2)}
.ab-eg h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--ink)}
.ab-eg p:last-child{margin-bottom:0}
@media (max-width:620px){
  .ab-sig>div,.ab-src>div{grid-template-columns:1fr}
}

.note{color:var(--ink-2);max-width:78ch;margin:0 0 10px}
.mv-note{color:var(--ink-2);font-size:13px;margin:-4px 0 12px;line-height:1.45}
.mv-val{color:var(--ink-2);font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;flex:1}
.mv-val::before{content:"— "}
/* Five leaderboards stacked one per screen left the right half empty. */
#boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;
  align-items:start}
#boards ol{margin:0;padding:0;list-style:none;counter-reset:mv}
/* Flex again: the number, the swatch, the link and the value are four items,
   and a three-column grid pushed the value onto its own row one word wide. */
/* No wrapping: a value that drops to a second line makes one board twice the
   height of the four beside it, and the auto-fit grid then leaves a column of
   empty page. The value ellipsises instead. */
#boards li{counter-increment:mv;display:flex;align-items:center;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--rule);min-width:0}
#boards li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%;flex:none}
#boards li:last-child{border-bottom:0}
#boards li::before{content:counter(mv);color:var(--ink-3);font-variant-numeric:tabular-nums;
  font-size:12.5px;flex:none;min-width:16px;text-align:right}
#boards li a{text-underline-offset:3px;font-weight:600}
/* ---- the brand mark, shared by the brand index and the movers boards ---- */
/* The category colour rides the mark's ring instead of a separate swatch: two
   leading elements on one row is one too many, and a coloured edge stripe is
   the tell we already removed from both surfaces. */
.mark{width:26px;height:26px;border-radius:7px;flex:none;align-self:center;display:block;
  object-fit:cover;background:var(--pane-2);
  border:1px solid color-mix(in srgb,var(--line,var(--c-default)) 50%,transparent)}
.mark-l{display:grid;place-items:center;font-weight:800;font-size:12.5px;line-height:1;
  color:var(--line,var(--ink-2));
  background:color-mix(in srgb,var(--line,var(--c-default)) 13%,var(--pane-2))}
#boards li .mark{width:22px;height:22px;border-radius:6px}
#boards li .mark-l{font-size:11px}

/* ---- hooks: the videos, not a wall of quotations ---- */
.hooks-panel{margin:0 0 var(--gap)}
.hooks-panel .section-head{margin:22px 0 12px}
.hooks-panel .section-head .btn{margin-left:auto;flex:none}
.hookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.hk-card{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:center;
  background:var(--pane);border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px}
.hk-shot{position:relative;display:block;width:62px;aspect-ratio:4/5;border-radius:var(--r-xs);
  overflow:hidden;background:var(--pane-2);text-decoration:none;flex:none}
.hk-shot img{width:100%;height:100%;object-fit:cover;display:block}
.hk-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:.9}
.hk-play svg{width:20px;height:20px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.hk-dur{position:absolute;right:3px;bottom:3px;font-size:9.5px;color:#fff;
  background:rgba(6,6,9,.7);padding:1px 4px;border-radius:3px}
.hk-body{min-width:0;display:grid;gap:4px}
.hk-q{margin:0;font-size:15px;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hk-m{font-size:12.5px;color:var(--ink-2)}
.hk-m a{color:var(--line,var(--ink-2));font-weight:600;text-underline-offset:3px}
.hk-m a:hover{color:var(--ink)}

/* ---- the brand finder: every brand, not just today's ranked 200 ---- */
.finder{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.finder input,.finder select{font:inherit;font-size:var(--u);padding:10px 13px;
  border:1px solid var(--rule);background:var(--pane);color:var(--ink);border-radius:var(--r-sm)}
.finder input{flex:1;min-width:230px}
.finder input::placeholder{color:var(--ink-3)}
.finder select{max-width:290px}

/* minmax(0,1fr), not auto: an auto grid column is sized by its widest item's
   min-content, and a long brand name set in nowrap made every row 426px wide
   inside a 390px phone — which pushed the whole page sideways and took the
   filter strip with it. */
.bilist{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding-bottom:10px}
/* The category reads as a swatch beside the name, not as an edge stripe: a
   thick coloured border on a list item is the most recognisable AI-UI tell,
   and it was removed from the ranked feed for the same reason. */
/* Flex, not grid: a fixed column count wrapped the optional rank badge onto a
   second row inside the 10px swatch column, clipping it to "#". */
.bi{display:flex;align-items:center;gap:14px;background:var(--pane);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:11px 14px;
  text-decoration:none;transition:border-color .14s,background .14s}
.bi:hover{background:var(--pane-2);border-color:var(--violet)}
.bi-n{font-weight:700;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:0 1 20%;min-width:130px}
.bi-c{color:var(--line,var(--ink-2));font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex:0 1 20%;min-width:0}
.bi-p{font-size:13.5px;color:var(--ink);white-space:nowrap;flex:0 0 auto;min-width:118px}
.bi-m{font-size:12.5px;color:var(--ink-2);white-space:nowrap;flex:0 0 auto}
.bi-m:empty{display:none}
.bi-join{color:var(--ink-3)}
.bi-join.lead{color:var(--ink)}
/* The number the active filter sorted on. Weight and ink, not a coloured
   badge: the row already carries a rank pill and a category colour, and a
   third accent would make the emphasis the loudest thing rather than the
   clearest. */
.bi .lead{color:var(--ink);font-weight:700}
.bi-m.lead{font-size:13.5px}
.bi .lead::after{content:"";display:block;height:2px;margin-top:3px;border-radius:2px;
  background:var(--line,var(--c-default))}
/* The rank, leading. Tabular figures so the column stays straight down the
   list, and quiet: it orders the page, it is not the headline. */
.bi-rk{flex:none;width:36px;text-align:right;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:13px;color:var(--ink-3)}
.bi-rk:empty::before{content:"\2013";color:var(--rule)}
@media (max-width:900px){
  .bi{flex-wrap:wrap;gap:4px 10px;min-width:0}
  .bi-n{flex:1 1 auto;min-width:0}
  /* basis 0, not 100%: a 100% basis is 100% of a container this row is itself
     sizing, so the row could never shrink to the screen. */
  .bi-c,.bi-p{flex:1 0 calc(100% - 40px);min-width:0}
  .bi-rk{width:28px;font-size:12px}
}

.empty{padding:50px 0;text-align:center;color:var(--ink-2)}
footer{border-top:2px solid var(--ink);padding:18px 0 50px;color:var(--ink-2);
  max-width:78ch;line-height:1.6}
footer a{color:var(--ink);text-underline-offset:3px}

.signup{background:var(--pane);border:1px solid var(--rule);padding:20px;margin:12px 0 32px;
  border-radius:var(--r)}
.signup h2{margin:0 0 3px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.signup p{color:var(--ink-2);margin:0 0 12px}
.signup form{display:flex;gap:8px;flex-wrap:wrap;max-width:460px}
.signup input{flex:1;min-width:190px;font:inherit;font-size:var(--u);padding:9px 12px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  border-radius:999px 0 0 999px}
.signup input::placeholder{color:var(--ink-3)}
.signup .msg{margin:10px 0 0;min-height:1.2em;color:var(--ink-2)}

@media (max-width:820px){
  .row{grid-template-columns:32px 52px minmax(0,1fr);padding:9px 12px 9px 0}
  .row .rank{font-size:14px}
  .thumb{width:52px}
  .reason{-webkit-line-clamp:3}
  .marks{grid-column:2/-1;margin-top:2px}
  .act{grid-column:2/-1;grid-auto-flow:column;justify-content:start;align-items:center;
    gap:8px;min-width:0;margin-top:4px}
  .paytag{text-align:left}
  .dateline label{width:100%;padding-left:0}
  .dateline select{max-width:100%;flex:1}
  .glance div{padding-right:16px;margin-right:16px}
}
@media (max-width:560px){
  .tv-grid{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
  .glance b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- what this site is, said once ---- */
.intro{position:relative;background:linear-gradient(150deg,var(--violet-soft),var(--pane) 62%);
  border:1px solid var(--rule);border-left:3px solid var(--violet-fill);
  border-radius:var(--r);padding:20px 46px 20px 22px;margin:0 0 var(--gap)}
.intro[hidden]{display:none}
.intro h2{margin:0 0 8px;font-size:clamp(18px,2.4vw,24px);font-weight:800;font-stretch:87.5%;
  letter-spacing:-.01em;line-height:1.2}
.intro p{margin:0;max-width:74ch;line-height:1.55;color:var(--ink-2)}
.intro-steps{margin:14px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 22px;counter-reset:s}
.intro-steps li{counter-increment:s;position:relative;padding-left:28px;font-size:13.5px;
  line-height:1.5;color:var(--ink-2)}
.intro-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:50%;background:var(--violet-fill);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center}
.intro-steps b{color:var(--ink);font-weight:700}
.intro-steps a{color:var(--ink)}
.intro-more{margin-top:14px!important;font-size:13px}
.intro-more a{color:var(--violet);font-weight:650;text-underline-offset:3px}
.intro-x{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;cursor:pointer;
  display:grid;place-items:center;font-size:20px;line-height:1;
  background:none;border:1px solid transparent;border-radius:var(--r-sm);color:var(--ink-2)}
.intro-x:hover{border-color:var(--rule);color:var(--ink);background:var(--pane-2)}
@media (max-width:620px){
  .intro{padding:17px 44px 17px 16px}
  .intro-x{width:40px;height:40px}
}

/* ---- the operator's status page ---- */
.gate{display:grid;gap:9px;max-width:340px;background:var(--pane);border:1px solid var(--rule);
  border-radius:var(--r);padding:20px;margin:0 0 var(--gap)}
.gate[hidden]{display:none}
.gate label{font-size:12.5px;font-weight:650;color:var(--ink-2)}
.gate input{font:inherit;font-size:15px;padding:10px 12px;min-height:44px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.gate .btn{justify-self:start}
.gate .msg{margin:0;font-size:12.5px;color:var(--ink-2);min-height:1.2em}
.warns{display:grid;gap:7px;margin:0 0 var(--gap);background:rgba(244,114,182,.08);
  border:1px solid rgba(244,114,182,.35);border-left:3px solid #F472B6;
  border-radius:var(--r);padding:15px 17px}
.warns.ok{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.32);border-left-color:#4ADE80}
.warns p{margin:0;font-size:13.5px;line-height:1.5}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px}
.st{display:grid;gap:2px}
.st b{font-size:23px;font-weight:800;font-stretch:87.5%;line-height:1.1;
  font-variant-numeric:tabular-nums}
.st span{font-size:11.5px;color:var(--ink-2);line-height:1.35}
.st-good b{color:#4ADE80}
.st-bad b{color:#F472B6}
.ops{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
.ops th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-2);font-weight:700;padding:0 12px 7px 0;border-bottom:1px solid var(--rule)}
.ops td{padding:7px 12px 7px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.ops td:first-child{color:var(--ink);font-weight:600}
.oplog{margin:0;font:400 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:13px 15px;overflow-x:auto;white-space:pre-wrap;max-height:340px;overflow-y:auto}

/* ---- the brand finder ---- */
.findbox{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.findbox input{flex:1 1 380px;min-width:0;font:inherit;font-size:15px;padding:12px 14px;
  min-height:48px;border-radius:var(--r-sm);border:1px solid var(--rule);
  background:var(--pane);color:var(--ink)}
.findbox input:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.findbox .btn{min-height:48px;flex:none}
#findnote{max-width:78ch;margin:0 0 var(--gap)}
.fv{display:flex;gap:14px;align-items:flex-start;background:var(--pane);
  border:1px solid var(--rule);border-radius:var(--r);padding:14px;margin:0 0 14px}
.fv-shot{width:62px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-xs);
  background:var(--pane-2);flex:none}
.fv-body{min-width:0}
.fv-desc{margin:0 0 5px;font-size:14.5px;line-height:1.5}
.fv-meta{margin:0;font-size:12.5px;color:var(--ink-2)}
.fresult{border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;
  background:var(--pane)}
.fresult h2{margin:0 0 10px;font-size:19px;font-weight:800;font-stretch:87.5%;letter-spacing:-.01em}
.fresult p{margin:0 0 9px;line-height:1.55;max-width:76ch}
.fresult.ok{border-left:3px solid #4ADE80}
/* A negative answer is a real answer here, so it is not styled as an error. */
.fresult.none{border-left:3px solid var(--violet-fill)}
.fmatch{display:grid;gap:5px;text-decoration:none;color:inherit;padding:13px 15px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--pane-2);margin-top:10px}
.fmatch:hover{border-color:var(--violet)}
.fmatch-name{font-size:17px;font-weight:750;font-stretch:87.5%}
.fmatch-meta{font-size:12.5px;color:var(--ink-2)}
.fmatch-why{margin:4px 0 0;padding-left:18px;display:grid;gap:3px}
.fmatch-why li{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.fnear{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule)}
.fnear p{font-size:13px;color:var(--ink-2);margin-bottom:8px}