/* ==========================================================================
   Reachers — Flagship layer
   Editorial scale, atmospheric depth, and the narrative sections.
   Depends on tnx.css for tokens (--cyan/--lime/--ink/--stroke/--f-disp/--e-out).
   ========================================================================== */

:root{
  --near:#070809;                  /* near-black, never flat #000 */
  --near-2:#0a0c10;
  --edge:rgba(255,255,255,.07);
  --edge-2:rgba(255,255,255,.14);
  --glow-cyan:rgba(24,226,255,.5);
  --glow-lime:rgba(198,255,46,.5);
  --e-io:cubic-bezier(.65,.02,.28,1);
}

/* ---------- editorial type scale ---------- */
.dsp{
  font-family:var(--f-disp);font-weight:700;
  letter-spacing:-.038em;line-height:.98;
  font-size:clamp(32px,4.4vw,60px);
  margin:0;text-wrap:balance;
}
.dsp-xl{
  font-family:var(--f-disp);font-weight:700;
  letter-spacing:-.044em;line-height:.94;
  font-size:clamp(40px,6.4vw,92px);
  margin:0;
}
.dsp-sm{
  font-family:var(--f-disp);font-weight:700;
  letter-spacing:-.032em;line-height:1.04;
  font-size:clamp(26px,3.4vw,46px);
  margin:0;
}
.lede{
  font-size:clamp(15.5px,1.32vw,19px);line-height:1.6;color:var(--ink-dim);
  max-width:56ch;margin:0;
}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-disp);font-size:11px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
}
.kicker::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--kc,var(--lime));box-shadow:0 0 12px var(--kc,var(--lime));
}
.kicker.dim::before{background:var(--muted);box-shadow:none}

.hr-fade{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--edge) 22%,var(--edge) 78%,transparent)}

/* technical corner ticks — small "instrument" detail */
.ticks{position:relative}
.ticks::before,.ticks::after{
  content:'';position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--edge-2);border-style:solid;border-width:0}
.ticks::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.ticks::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}

/* reveal primitives driven by flagship.js */
[data-rv]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .95s var(--e-out),transform .95s var(--e-out)}
[data-rv].rv{opacity:1;transform:none}
[data-rv="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--e-out)}
[data-rv="mask"].rv{clip-path:inset(0 0 0 0)}
.rvline{display:block;overflow:hidden}
.rvline>span{display:block;transform:translate3d(0,105%,0);
  transition:transform 1.05s var(--e-out)}
.rvline.rv>span{transform:none}

@media(prefers-reduced-motion:reduce){
  [data-rv],[data-rv="mask"]{opacity:1!important;transform:none!important;clip-path:none!important}
  .rvline>span{transform:none!important}
}

/* tnx.css hides these children until a legacy `.in` class lands (old data-rise
   system). The flagship reveal adds `.rv`, so unlock them here too. */
.cmetrics.rv .cmet,.board.rv .bcard,.facts6.rv .f6,.sgnote.rv>div,
[data-rv].rv .cmet,[data-rv].rv .bcard,[data-rv].rv .f6{
  opacity:1;transform:none}

/* creator.css dashboard bars/sparkline are gated on .dashwrap.seen, which is
   only ever added by creator.js — not loaded on this page. Wire them to the
   flagship .rv reveal instead so the platform dashboard actually animates in. */
[data-rv].rv .dchart s{transform:scaleY(1)}
[data-rv].rv .dbfill{width:var(--w)}
[data-rv].rv .dspark path.ln{stroke-dashoffset:0}
[data-rv].rv .dspark path.fillx{opacity:1}
/* .order (chaos-section preview) reveals via its own --p scroll progress,
   not [data-rv], so give its bars/lists the same unlock directly */
.order .dchart s{transform:scaleY(1)}
.order .dbfill{width:var(--w)}

/* ---------- section rhythm ---------- */
.sect-air{padding:clamp(64px,7.4vw,112px) 0}
.sect-loud{padding:clamp(52px,5.8vw,84px) 0}

/* ==========================================================================
   1. HERO — the ecosystem
   ========================================================================== */
.fhero{
  position:relative;padding-top:calc(var(--nav-h) + clamp(34px,6vw,74px));
  padding-bottom:clamp(40px,6vw,80px);overflow:hidden;
}
.fhero::before{ /* atmospheric wash, not a flat panel */
  content:'';position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:
    radial-gradient(58% 46% at 18% 30%,rgba(43,139,255,.15),transparent 70%),
    radial-gradient(48% 42% at 82% 22%,rgba(24,226,255,.12),transparent 72%),
    radial-gradient(60% 50% at 60% 92%,rgba(198,255,46,.055),transparent 70%);
  pointer-events:none;z-index:0;
}
.fherowrap{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,3vw,44px);align-items:center}
@media(max-width:1040px){.fherowrap{grid-template-columns:1fr;gap:clamp(30px,6vw,52px)}}

.fhero h1{margin:18px 0 0}
.fhero .lede{margin-top:clamp(20px,2.2vw,28px)}
.fherocta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}
.fherometa{
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(30px,3.6vw,44px);padding-top:20px;
  border-top:1px solid var(--edge)}
.fherometa div{display:flex;flex-direction:column;gap:2px}
.fherometa b{font-family:var(--f-disp);font-size:clamp(17px,1.7vw,22px);font-weight:700;
  letter-spacing:-.03em;color:var(--ink)}
.fherometa span{font-size:11.4px;color:var(--muted)}

/* --- the flow ------------------------------------------------------------
   Three columns laid out by grid, so the nodes own their own spacing and
   nothing is positioned by hand. flagship.js measures the result and draws
   one curve per relationship: product to each creator, each creator to the
   distribution panel. No shared rail, so every path stays traceable.
   ------------------------------------------------------------------------ */
.flow{position:relative;width:100%;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr) minmax(0,1.02fr);
  column-gap:clamp(18px,2.5vw,38px);align-items:stretch}
.flow::before{ /* lit stage so the diagram is not floating on flat black */
  content:'';position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 54% at 16% 50%,rgba(24,226,255,.12),transparent 72%),
    radial-gradient(40% 56% at 86% 50%,rgba(198,255,46,.09),transparent 72%);
  filter:blur(10px)}
.floww{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;
  pointer-events:none}
.fcol{position:relative;z-index:2;display:flex;flex-direction:column;gap:11px;min-width:0}
.fbody{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.fcol-b .fbody{gap:clamp(11px,1.8vw,22px)}
.fcap{font-family:var(--f-disp);font-size:9.2px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted-2)}

/* the rails and the packets travelling along them */
.frail{fill:none;stroke:url(#flowRail);stroke-width:1.2}
.fglow,.fpulse{fill:none;stroke:url(#flowPulse);stroke-linecap:round;
  stroke-dasharray:22 300;stroke-dashoffset:322;
  animation:fFlow 4.4s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:var(--d,0s)}
.fglow{stroke-width:6;opacity:.16}
.fpulse{stroke-width:1.8}
@keyframes fFlow{to{stroke-dashoffset:-300}}

/* 1 · product */
.fprod{display:flex;align-items:center;gap:10px;min-width:0;
  width:100%;padding:11px;border-radius:16px;
  background:linear-gradient(180deg,rgba(16,20,27,.97),rgba(9,11,15,.97));
  border:1px solid var(--edge-2);
  box-shadow:0 26px 56px -24px rgba(0,0,0,.95),0 0 0 1px rgba(24,226,255,.1) inset}
.fpimg{flex:0 0 auto;width:42px;aspect-ratio:3/4;border-radius:9px;
  background:var(--panel) center/cover no-repeat;border:1px solid var(--edge-2)}
.fptx{display:flex;flex-direction:column;gap:3px;min-width:0}
.fptx i{font-style:normal;font-size:8.4px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);white-space:nowrap}
.fptx b{font-family:var(--f-disp);font-size:clamp(11.4px,1.05vw,12.8px);font-weight:600;
  color:var(--ink);line-height:1.18}
.fptx s{text-decoration:none;font-size:9.6px;color:var(--muted-2);line-height:1.4}

/* 2 · creators */
.fcre{display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 12px 6px 6px;border-radius:999px;
  background:rgba(11,14,19,.94);border:1px solid var(--edge);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9);
  opacity:.55;animation:fWake 4.4s var(--e-out) infinite;animation-delay:var(--d,0s)}
.fcre em{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:var(--panel) center/cover no-repeat;border:1px solid var(--edge-2)}
.fcre span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.fcre b{font-family:var(--f-disp);font-size:clamp(10.4px,.95vw,12px);font-weight:600;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcre i{font-style:normal;font-size:clamp(9px,.9vw,10px);color:var(--lime);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes fWake{
  0%,12%{opacity:.5;transform:translateY(0)}
  22%{opacity:1;transform:translateY(-2px)}
  64%{opacity:1;transform:translateY(0)}
  100%{opacity:.5}
}

/* 3 · one distribution surface, so three curves in means three curves out */
.fdist{width:100%;min-width:0;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,19,26,.97),rgba(9,11,15,.97));
  border:1px solid var(--edge-2);
  box-shadow:0 26px 56px -24px rgba(0,0,0,.95)}
.fdhead{display:block;padding:9px 11px;font-size:9.2px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--muted-2);
  border-bottom:1px solid var(--edge);background:rgba(255,255,255,.022);
  line-height:1.35}
.fdrow{display:flex;align-items:center;gap:7px;padding:8px 10px;
  border-bottom:1px solid var(--edge)}
.fdrow:last-child{border-bottom:0}
.fdrow i{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:22px;height:22px;border-radius:6px;color:var(--pc,var(--ink));
  background:color-mix(in srgb,var(--pc,var(--ink)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--pc,var(--ink)) 26%,transparent)}
.fdrow i svg{width:13px;height:13px}
.fdrow b{font-family:var(--f-disp);font-size:clamp(9.6px,.92vw,11px);font-weight:600;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fdrow s{display:none}

@media(prefers-reduced-motion:reduce){
  .fpulse,.fglow{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.38}
  .fglow{display:none}
  .fcre{opacity:1;animation:none}
}

/* --- mobile: stack the three stages, drop the curves --- */
@media(max-width:820px){
  .flow{grid-template-columns:1fr;gap:20px}
  .floww{display:none}
  .fcol{align-items:stretch}
  .fcol-b{gap:8px}
  .fprod,.fdist{width:100%;max-width:none}
  .fcre{opacity:1;animation:none}
  .fdrow s{display:none}
}
@media(max-width:420px){
  .fprod{gap:11px;padding:11px}
  .fpimg{width:46px}
  .fptx b{font-size:14px}
}

/* ==========================================================================
   2. CHAOS → ORDER
   ========================================================================== */
.chaos{position:relative}
.chaostrack{height:300vh}
.chaostage{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.chaosin{position:relative;width:100%;max-width:var(--maxw);
  padding:0 var(--gut);text-align:center}

.chaoshead{position:relative;z-index:3;pointer-events:none}
.chaoshead .swap{position:relative;display:block;min-height:1.05em}
.chaoshead .swap>span{display:block}
.chaoshead .s-before{opacity:calc(1 - var(--p,0) * 2.6)}
.chaoshead .s-after{position:absolute;inset:0;
  opacity:calc((var(--p,0) - .5) * 3.6)}

/* the stage where the mess resolves into one workspace */
.chaosarena{position:relative;margin-top:clamp(16px,2vw,26px);
  height:clamp(320px,54vh,600px)}

/* realistic artefact fragments, grouped deliberately rather than scattered */
.frag{
  position:absolute;left:50%;top:50%;z-index:2;width:var(--w,216px);
  border-radius:11px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,rgba(17,21,28,.97),rgba(11,14,19,.97));
  border:1px solid var(--edge-2);
  box-shadow:0 24px 54px -26px rgba(0,0,0,.96);
  transform:
    translate3d(
      calc(-50% + var(--dx) * (1 - var(--p,0))),
      calc(-50% + var(--dy) * (1 - var(--p,0))),
      0)
    rotate(calc(var(--rot) * (1 - var(--p,0))))
    scale(calc(1 - var(--p,0) * .5));
  opacity:calc(1 - var(--p,0) * 2.3);
  will-change:transform,opacity}
.fraghd{display:flex;align-items:center;gap:7px;padding:8px 11px;
  border-bottom:1px solid var(--edge);background:rgba(255,255,255,.028)}
.fraghd svg{width:12px;height:12px;flex:0 0 auto;color:var(--muted-2);
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fraghd b{font-family:var(--f-disp);font-size:10.4px;font-weight:600;
  color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fragbd{padding:9px 11px 10px;display:flex;flex-direction:column;gap:6px}
.fragbd i{display:block;height:5px;border-radius:99px;
  background:rgba(255,255,255,.1);width:var(--l,100%)}
.fragbd span{font-size:10.6px;color:var(--muted);line-height:1.45}
@media(max-width:760px){.frag{--w:158px}.fragbd span{font-size:9.6px}}

/* the resolved state — deliberately quiet, and NOT the platform dashboard
   (that gets its own section further down) */
.order{
  position:absolute;left:50%;top:50%;z-index:3;
  width:min(1120px,100%);
  border-radius:20px;overflow:hidden;
  border:1px solid var(--edge-2);
  background:linear-gradient(180deg,rgba(12,16,22,.97),rgba(7,9,13,.97));
  box-shadow:0 60px 130px -60px rgba(0,0,0,1);
  opacity:calc((var(--p,0) - .48) * 2.8);
  /* --os is measured by flagship.js so the panel always fits the sticky stage */
  transform:translate3d(-50%,-50%,0)
            scale(calc((.95 + var(--p,0) * .05) * var(--os,1)));
  will-change:transform,opacity}
/* on a short screen the bottom row costs more height than it earns */
@media(max-height:840px){
  .order .dcell:nth-child(6),.order .dcell:nth-child(7){display:none}
}

/* compact pass on the shared dashboard so the whole workspace fits one screen */
.order{text-align:left}   /* .chaosin centres its text; the dashboard must not inherit that */
.order .dspark path.ln{stroke-dashoffset:0}
.order .dspark path.fillx{opacity:1}
.order .dashbar{padding:10px 14px}
.order .dbtitle{font-size:11.4px}
.order .dbuser{font-size:10.4px}
.order .dcell{padding:13px 14px 12px}
.order .dcell .dlab{margin-bottom:9px}
.order .dbig{font-size:clamp(18px,2vw,25px)}
.order .dsub{font-size:10.4px}
.order .dchart{height:46px;margin-top:11px;gap:4px}
.order .dxaxis{font-size:8.4px;margin-top:6px}
.order .dspark svg{height:38px}
.order .dbars{gap:8px}
.order .dcamp{gap:5px}
.order .dcrow{padding:7px 9px}
.order .dcrow .dcb{width:22px;height:22px;font-size:8.6px}
@media(max-width:980px){
  /* the wide cells stop earning their space once the grid drops to two columns */
  .order .dcell:nth-child(n+5){display:none}
}
.ownrow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,30px);
  align-items:center;padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);
  border-radius:16px;border:1px solid var(--edge-2);
  background:linear-gradient(180deg,rgba(15,19,26,.96),rgba(9,11,15,.96))}
.ownrow + .ownrow{margin-top:10px}
.ownrow.you{border-color:rgba(198,255,46,.3);
  box-shadow:0 0 60px -34px rgba(198,255,46,.75)}
.ownlab{font-family:var(--f-disp);font-size:10px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.ownlist{display:flex;flex-wrap:wrap;gap:6px 0;align-items:center;
  font-size:clamp(12.4px,1.15vw,14.6px);color:var(--ink-dim)}
/* separator trails its item, so a wrap never starts a line with a dot */
.ownlist s{text-decoration:none;white-space:nowrap}
.ownlist s:not(:last-child)::after{content:'·';margin:0 9px;color:var(--muted-2)}
.ownwho{font-family:var(--f-disp);font-size:clamp(14px,1.5vw,19px);font-weight:700;
  letter-spacing:-.02em;color:var(--w,var(--ink));white-space:nowrap}
@media(max-width:720px){
  .ownrow{grid-template-columns:1fr;gap:9px;text-align:left}
  .ownwho{font-size:15px}
}
.orderbar{display:flex;align-items:center;gap:10px;padding:11px 15px;
  border-bottom:1px solid var(--edge);background:rgba(255,255,255,.02)}
.orderbar s{width:7px;height:7px;border-radius:50%;background:var(--edge-2);
  text-decoration:none}
.orderbar b{font-family:var(--f-disp);font-size:11.4px;font-weight:600;
  color:var(--ink-dim);margin-left:4px}
.orderbar i{margin-left:auto;font-style:normal;font-size:9.6px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lime);
  display:inline-flex;align-items:center;gap:5px}
.orderbar i::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 8px var(--lime)}
.ordergrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge)}
@media(max-width:700px){.ordergrid{grid-template-columns:repeat(2,1fr)}}
.ordercell{background:#080b10;padding:15px 14px 14px;text-align:left}
.ordercell i{display:block;font-style:normal;font-size:9.4px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);font-weight:600}
.ordercell b{display:block;font-family:var(--f-disp);font-size:clamp(17px,1.9vw,23px);
  font-weight:700;letter-spacing:-.03em;color:var(--c,var(--ink));margin-top:7px}
.ordercell span{display:block;font-size:10.8px;color:var(--muted);margin-top:4px}

/* creator rows inside the resolved workspace, so it reads as real software */
.orderlist{border-top:1px solid var(--edge)}
.orderrow{display:flex;align-items:center;gap:11px;padding:10px 15px;
  border-bottom:1px solid var(--edge)}
.orderrow:last-child{border-bottom:0}
.orderrow s{text-decoration:none;width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-disp);font-size:9.4px;font-weight:700;color:var(--ink-dim);
  background:rgba(255,255,255,.06);border:1px solid var(--edge)}
.orderrow b{font-family:var(--f-disp);font-size:11.8px;font-weight:600;color:var(--ink)}
.orderrow em{font-style:normal;font-size:10.6px;color:var(--muted-2)}
.orderrow u{margin-left:auto;text-decoration:none;font-size:9.6px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:3.5px 8px;border-radius:6px;
  color:var(--sc,var(--lime));
  background:color-mix(in srgb,var(--sc,var(--lime)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--sc,var(--lime)) 32%,transparent)}
.orderrow i{font-style:normal;font-family:var(--f-disp);font-size:11.6px;
  font-weight:600;color:var(--ink-dim);min-width:56px;text-align:right}
@media(max-width:640px){.orderrow em,.orderrow i{display:none}}

@media(prefers-reduced-motion:reduce){
  .chaostrack{height:auto}
  .chaostage{position:static;height:auto;padding:clamp(50px,8vw,90px) 0}
  .chaosarena{height:auto}
  .frag{display:none}
  .order{position:relative;left:auto;top:auto;opacity:1;transform:none;margin:0 auto}
  .chaoshead .s-before{display:none}
  .chaoshead .s-after{position:static;opacity:1}
}

/* ==========================================================================
   3. CREATOR INTELLIGENCE
   ========================================================================== */
.ci{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,3.6vw,58px);align-items:start}
@media(max-width:1000px){.ci{grid-template-columns:1fr}}

.brief{border-radius:18px;padding:20px 20px 18px;
  background:linear-gradient(180deg,rgba(15,19,26,.9),rgba(9,11,15,.9));
  border:1px solid var(--edge-2);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95)}
.brief>i{display:block;font-style:normal;font-size:9.6px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);font-weight:600}
.brief h4{font-family:var(--f-disp);font-size:clamp(18px,2vw,24px);font-weight:700;
  letter-spacing:-.03em;margin:10px 0 0;color:var(--ink)}
.briefrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.briefrow s{text-decoration:none;font-size:11px;color:var(--ink-dim);
  padding:5px 10px;border-radius:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--edge)}

/* category + tier coverage (replaced the old scored funnel) */
.cover{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.covblk i{display:block;font-style:normal;font-family:var(--f-disp);font-size:9.4px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:11px}
.covtags{display:flex;flex-wrap:wrap;gap:6px}
.covtags s{text-decoration:none;font-size:11.8px;color:var(--ink-dim);
  padding:6px 11px;border-radius:99px;
  background:rgba(255,255,255,.032);border:1px solid var(--edge);
  transition:border-color .45s,color .45s,background .45s}
.covtags s:hover{border-color:rgba(24,226,255,.36);color:var(--ink);
  background:rgba(24,226,255,.07)}
.covtier{display:flex;flex-direction:column;gap:2px}
.ctr{display:flex;align-items:baseline;gap:12px;padding:11px 14px;border-radius:11px;
  background:rgba(255,255,255,.022);border:1px solid var(--edge)}
.ctr b{font-family:var(--f-disp);font-size:13.4px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);min-width:5.4ch;flex:0 0 auto}
.ctr:last-child b{color:var(--lime)}
.ctr em{font-style:normal;font-size:11.8px;color:var(--muted);line-height:1.45}
@media(max-width:520px){
  .ctr{flex-direction:column;gap:3px}
  .ctr b{min-width:0}
}
.funnote{font-size:11.2px;color:var(--muted-2);margin:12px 0 0;line-height:1.55}

/* creator cards */
.crgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.2vw,15px)}
@media(max-width:600px){.crgrid{grid-template-columns:1fr}}
.crcard{position:relative;border-radius:17px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,18,25,.94),rgba(8,10,14,.94));
  border:1px solid var(--edge);
  transition:transform .6s var(--e-out),border-color .6s,box-shadow .6s}
.crcard:hover{transform:translateY(-6px);border-color:rgba(24,226,255,.34);
  box-shadow:0 32px 66px -32px rgba(0,0,0,.95),0 0 46px -26px var(--glow-cyan)}
.crtop{display:flex;align-items:center;gap:11px;padding:11px 15px 10px;
  border-bottom:1px solid var(--edge)}
.cravatar{width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  background:var(--panel) center/cover no-repeat;border:1px solid var(--edge-2)}
.crid{display:flex;flex-direction:column;min-width:0;gap:2px}
.crid b{font-family:var(--f-disp);font-size:13.4px;font-weight:600;color:var(--ink)}
.crid span{font-size:10.8px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* fit score ring */
.crfit{margin-left:auto;position:relative;width:46px;height:46px;flex:0 0 auto}
.crfit svg{width:100%;height:100%;transform:rotate(-90deg)}
.crfit circle{fill:none;stroke-width:3.4;stroke-linecap:round}
.crfit .tr{stroke:rgba(255,255,255,.09)}
.crfit .vl{stroke:var(--lime);
  stroke-dasharray:126;stroke-dashoffset:126;
  transition:stroke-dashoffset 1.3s var(--e-out);transition-delay:var(--d,0s)}
.crcard.rv .crfit .vl{stroke-dashoffset:calc(126 - 126 * var(--fit))}
.crfit u{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-family:var(--f-disp);font-size:11.6px;font-weight:700;
  color:var(--lime)}
.crmeta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge)}
.crmeta div{background:#080b10;padding:8px 12px}
.crmeta i{display:block;font-style:normal;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);font-weight:600}
.crmeta b{display:block;font-family:var(--f-disp);font-size:12.6px;font-weight:600;
  color:var(--ink-dim);margin-top:4px}
.crfoot{display:flex;align-items:center;gap:8px;padding:9px 14px;flex-wrap:wrap}

/* metric strip cells: match the depth of the other panels instead of a flat wash */
.brandband .cmet{background:linear-gradient(180deg,rgba(14,18,25,.96),rgba(9,11,15,.96))}
.brandband .cmet:hover{background:linear-gradient(180deg,rgba(19,25,33,.98),rgba(11,14,19,.98))}
.crtag{font-size:9.8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;color:var(--tc,var(--cyan));
  background:color-mix(in srgb,var(--tc,var(--cyan)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--tc,var(--cyan)) 30%,transparent)}
.crrate{margin-left:auto;font-family:var(--f-disp);font-size:12.4px;font-weight:600;
  color:var(--ink)}

/* ==========================================================================
   4. PRODUCTION — editorial image composition
   ========================================================================== */
.prodgrid{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.15vw,15px);align-items:stretch}
@media(max-width:900px){.prodgrid{grid-template-columns:repeat(6,1fr)}}
.pf{position:relative;overflow:hidden;border-radius:18px;
  border:1px solid var(--edge);background:var(--near-2) center/cover no-repeat}
.pf::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,9,0) 42%,rgba(6,7,9,.9))}
.pf figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 14px}
.pf figcaption b{display:block;font-family:var(--f-disp);font-size:13.4px;
  font-weight:600;color:var(--ink)}
.pf figcaption span{display:block;font-size:11.2px;color:var(--muted);margin-top:3px}
.pf .ptag{position:absolute;top:12px;left:12px;z-index:2;
  font-size:9.4px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);padding:4.5px 9px;border-radius:999px;
  background:rgba(6,7,9,.6);border:1px solid var(--edge-2);backdrop-filter:blur(8px)}
.pf-a{grid-column:span 5;aspect-ratio:4/5}
.pf-b{grid-column:span 4;aspect-ratio:4/5}
.pf-c{grid-column:span 3;aspect-ratio:3/5}
.pf-d{grid-column:span 7;aspect-ratio:16/9}
.pf-e{grid-column:span 5;aspect-ratio:5/4}
@media(max-width:900px){
  .pf-a,.pf-b,.pf-e{grid-column:span 3;aspect-ratio:4/5}
  .pf-c{grid-column:span 3;aspect-ratio:4/5}
  .pf-d{grid-column:span 6;aspect-ratio:16/9}
}
@media(max-width:560px){
  .pf-a,.pf-b,.pf-c,.pf-e{grid-column:span 6}
  .pf-d{grid-column:span 6}
}

/* capability line — quiet, not cards */
.caps{display:flex;flex-wrap:wrap;gap:0 clamp(14px,1.8vw,26px);
  margin-top:clamp(24px,3vw,38px);padding-top:22px;border-top:1px solid var(--edge)}
.caps span{position:relative;font-size:13px;color:var(--muted);padding:5px 0}
.caps span::after{content:'';position:absolute;right:calc(clamp(14px,1.8vw,26px) / -2);
  top:50%;width:3px;height:3px;border-radius:50%;background:var(--edge-2);
  transform:translateY(-50%)}
.caps span:last-child::after{display:none}
.caps span.on{color:var(--ink)}

/* ==========================================================================
   6. DISTRIBUTION
   ========================================================================== */
.dist2{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,40px);align-items:center}
@media(max-width:940px){.dist2{grid-template-columns:1fr;gap:22px}}
.dcol{display:flex;flex-direction:column;gap:9px}
.dcolhead{display:flex;align-items:center;gap:8px;margin-bottom:4px;
  font-family:var(--f-disp);font-size:10.4px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.dcolhead s{text-decoration:none;width:6px;height:6px;border-radius:50%;
  background:var(--dc,var(--cyan));box-shadow:0 0 10px var(--dc,var(--cyan))}
.dnode{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.026);border:1px solid var(--edge);
  transition:border-color .5s,background .5s,transform .5s var(--e-out)}
.dnode:hover{border-color:var(--edge-2);background:rgba(255,255,255,.05);
  transform:translateX(3px)}
.dnode svg{width:16px;height:16px;flex:0 0 auto;color:var(--pc,var(--ink))}
.dnode b{font-family:var(--f-disp);font-size:12.4px;font-weight:600;color:var(--ink)}
.dnode span{margin-left:auto;font-size:10.4px;color:var(--muted-2);white-space:nowrap}

.dcore{position:relative;width:clamp(150px,17vw,206px);aspect-ratio:1;
  border-radius:50%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:20px;
  background:radial-gradient(circle at 50% 40%,rgba(24,226,255,.12),rgba(8,10,14,.96) 68%);
  border:1px solid var(--edge-2);margin-inline:auto}
.dcore::before,.dcore::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(24,226,255,.26);animation:dRipple 3.6s var(--e-out) infinite}
.dcore::after{animation-delay:1.8s}
@keyframes dRipple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.34);opacity:0}}
.dcore i{font-style:normal;font-size:9.4px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);font-weight:600}
.dcore b{font-family:var(--f-disp);font-size:clamp(14px,1.6vw,18px);font-weight:700;
  letter-spacing:-.03em;color:var(--ink);margin-top:7px;line-height:1.2}
.dcore span{font-size:10.6px;color:var(--muted);margin-top:6px}
@media(prefers-reduced-motion:reduce){.dcore::before,.dcore::after{animation:none;opacity:0}}

/* ==========================================================================
   7. CAMPAIGN VISUALISATION (scroll-linked)
   NOTE: named .cstory, not .camp — creator.css already owns .camp as a grid card.
   ========================================================================== */
/* distribution channels, shown as real platform marks rather than text pills */
.chwrap{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);
  justify-content:center;height:100%;padding:clamp(20px,2.6vw,34px)}
.chlab{display:block;font-family:var(--f-disp);font-size:9.2px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px}
.chgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chtile{display:flex;align-items:center;gap:10px;min-width:0;
  padding:10px 12px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--edge);
  transition:border-color .5s,background .5s,transform .5s var(--e-out)}
.chtile:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--tc,var(--ink)) 42%,transparent);
  background:color-mix(in srgb,var(--tc,var(--ink)) 9%,rgba(255,255,255,.02))}
.chtile i{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:8px;color:var(--tc,var(--ink));
  background:color-mix(in srgb,var(--tc,var(--ink)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--tc,var(--ink)) 26%,transparent)}
.chtile i svg{width:15px;height:15px}
.chtile b{font-family:var(--f-disp);font-size:11.8px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chtile em{font-style:normal;font-size:9.4px;color:var(--muted-2);margin-left:auto;
  white-space:nowrap;flex:0 0 auto}
@media(max-width:900px){
  .chgrid{grid-template-columns:1fr}
  .chtile em{display:none}
}
@media(prefers-reduced-motion:reduce){.chtile:hover{transform:none}}

.cstory{position:relative}
.camptrack{height:420vh}
.campstage{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  overflow:hidden}
/* flex child must be told to fill, otherwise it shrinks to content width */
.campin{flex:1 1 100%;min-width:0;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.campbar{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.4vw,20px);
  margin-bottom:clamp(20px,2.6vw,34px)}
.campstep{position:relative;padding-bottom:12px;min-width:0;
  font-family:var(--f-disp);font-size:clamp(8.4px,.78vw,10.4px);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
  transition:color .5s;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campstep::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--edge)}
.campstep::before{content:'';position:absolute;left:0;bottom:0;height:1px;
  width:var(--fill,0%);background:var(--lime);
  box-shadow:0 0 10px var(--lime);z-index:1;transition:width .18s linear}
.campstep.on{color:var(--ink)}
@media(max-width:700px){
  .campbar{gap:5px}
  .campstep{font-size:0;padding-bottom:9px}
  .campstep.on{font-size:8.6px}
}

.camppanel{position:relative;min-height:clamp(320px,52vh,470px)}
.campslide{position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
  opacity:0;transform:translate3d(0,26px,0);pointer-events:none;
  transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.campslide.on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:900px){.campslide{grid-template-columns:1fr;align-content:start;
  gap:18px}}
.campslide h3{font-family:var(--f-disp);font-size:clamp(24px,2.9vw,42px);
  font-weight:700;letter-spacing:-.038em;line-height:1.02;margin:12px 0 0;
  color:var(--ink);text-wrap:balance}
.campslide p{font-size:14.4px;line-height:1.62;color:var(--muted);margin:14px 0 0;
  max-width:46ch}
.campvis{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--edge-2);
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(24,226,255,.07),transparent 62%),
    linear-gradient(180deg,rgba(14,18,25,.95),rgba(8,10,14,.95));
  box-shadow:0 40px 90px -50px rgba(0,0,0,1);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.campvis{aspect-ratio:16/11}}
.campnum{position:absolute;top:14px;right:16px;font-family:var(--f-disp);
  font-size:11px;font-weight:600;color:var(--muted-2);letter-spacing:.1em}
.campshots{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:4px;padding:12px}
.campshots span{border-radius:4px;background:var(--panel) center/cover no-repeat;
  border:1px solid var(--edge)}
.campstat{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);margin-top:18px}
.campstat div{display:flex;flex-direction:column;gap:2px}
.campstat b{font-family:var(--f-disp);font-size:clamp(18px,2.2vw,26px);font-weight:700;
  letter-spacing:-.03em;color:var(--c,var(--lime));font-variant-numeric:tabular-nums}
.campstat span{font-size:10.8px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .camptrack{height:auto}
  .campstage{position:static;height:auto;padding:clamp(40px,6vw,70px) 0}
  .camppanel{min-height:0;display:flex;flex-direction:column;gap:44px}
  .campslide{position:static;opacity:1;transform:none;pointer-events:auto}
}

/* ==========================================================================
   8. MARKETING TEAM — orbit
   ========================================================================== */
.orbit{position:relative;width:100%;max-width:840px;margin-inline:auto;
  aspect-ratio:1/.72}
@media(max-width:760px){.orbit{aspect-ratio:auto;max-width:520px}}
.orbring{position:absolute;inset:6% 12%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.11)}
.orbring.r2{inset:18% 26%;border-style:solid;border-color:rgba(255,255,255,.07)}
.orbcore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(160px,22vw,214px);padding:20px 18px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,rgba(16,21,28,.98),rgba(9,11,15,.98));
  border:1px solid rgba(198,255,46,.34);
  box-shadow:0 0 70px -28px rgba(198,255,46,.55),0 30px 70px -34px rgba(0,0,0,1);z-index:3}
.orbcore i{font-style:normal;font-size:9.4px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);font-weight:600}
.orbcore b{display:block;font-family:var(--f-disp);font-size:clamp(15px,1.7vw,19px);
  font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-top:8px;line-height:1.22}
.orbcore span{display:block;font-size:10.8px;color:var(--muted);margin-top:7px}
.orbnode{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  background:rgba(11,14,19,.94);border:1px solid var(--edge-2);
  box-shadow:0 16px 36px -20px rgba(0,0,0,.95);backdrop-filter:blur(8px);z-index:2;
  font-family:var(--f-disp);font-size:11.6px;font-weight:600;color:var(--ink-dim);
  white-space:nowrap;transition:border-color .5s,color .5s,transform .5s var(--e-out)}
.orbnode s{text-decoration:none;width:5px;height:5px;border-radius:50%;
  background:var(--nc,var(--cyan));box-shadow:0 0 9px var(--nc,var(--cyan))}
.orbnode:hover{color:var(--ink);border-color:var(--edge-2);transform:translate(-50%,-50%) scale(1.05)}
@media(max-width:760px){
  .orbring{display:none}
  .orbit{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 0}
  .orbcore{position:static;transform:none;width:100%;max-width:340px;margin-bottom:6px}
  .orbnode{position:static;transform:none;width:100%;max-width:340px;justify-content:center}
  .orbnode:hover{transform:none}
}

/* ==========================================================================
   9. PLATFORM — zoom callouts
   ========================================================================== */
.platwrap{position:relative}
.platnote{font-size:11.4px;color:var(--muted-2);margin:14px 0 0}

/* the questions, as tabs */
.bitabs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,12px)}
@media(max-width:860px){.bitabs{grid-template-columns:1fr}}
.bitab{font:inherit;color:var(--muted);text-align:left;cursor:pointer;
  font-size:clamp(12.4px,1.15vw,14px);line-height:1.45;
  padding:14px 16px;border-radius:13px;
  background:rgba(255,255,255,.026);border:1px solid var(--edge);
  transition:border-color .45s,background .45s,color .45s,transform .45s var(--e-out)}
.bitab:hover{color:var(--ink-dim);border-color:var(--edge-2);transform:translateY(-2px)}
.bitab.on{color:var(--ink);border-color:rgba(24,226,255,.42);
  background:rgba(24,226,255,.07);
  box-shadow:0 0 40px -18px var(--glow-cyan)}

.bishell{position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--edge-2);
  background:linear-gradient(180deg,rgba(12,16,22,.96),rgba(7,9,13,.96));
  box-shadow:0 60px 130px -60px rgba(0,0,0,1);
  padding:clamp(18px,2.2vw,28px)}
.bipanel{display:none}
.bipanel.on{display:block;animation:biIn .5s var(--e-out) both}
@keyframes biIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.bihead,.birow{display:grid;grid-template-columns:1.5fr 1.6fr .8fr .9fr;
  gap:clamp(10px,1.4vw,20px);align-items:center}
.bihead{padding:0 4px 11px;border-bottom:1px solid var(--edge)}
.bihead span{font-family:var(--f-disp);font-size:9.2px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-2)}
.birow{padding:13px 4px;border-bottom:1px solid var(--edge)}
.birow:last-of-type{border-bottom:0}
.biname b{display:block;font-family:var(--f-disp);font-size:13px;font-weight:600;color:var(--ink)}
.biname em{font-style:normal;font-size:10.6px;color:var(--muted-2)}
.bibar{display:flex;align-items:center;gap:10px}
.bibar i{flex:1;height:6px;border-radius:99px;position:relative;
  background:rgba(255,255,255,.07);overflow:hidden}
.bibar i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w,0%);
  border-radius:99px;background:var(--c,var(--lime));
  transform-origin:left;transform:scaleX(0);
  transition:transform 1s var(--e-out)}
.bipanel.on .bibar i::after{transform:scaleX(1)}
.bibar u{text-decoration:none;font-family:var(--f-disp);font-size:11.4px;font-weight:600;
  color:var(--ink-dim);min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.binum{font-family:var(--f-disp);font-size:13px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.bibadge{justify-self:start;font-family:var(--f-disp);font-size:9.6px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:7px;
  white-space:nowrap}
.bibadge.go{background:rgba(198,255,46,.13);color:var(--lime);
  border:1px solid rgba(198,255,46,.3)}
.bibadge.hold{background:rgba(24,226,255,.12);color:var(--cyan);
  border:1px solid rgba(24,226,255,.28)}
.bibadge.stop{background:rgba(255,255,255,.06);color:var(--muted);
  border:1px solid var(--edge-2)}
.binote{font-size:11.8px;color:var(--muted);margin:16px 0 0;max-width:76ch;line-height:1.6}

/* overlap matrix */
.bimx{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:4px}
.bimxc{display:flex;align-items:center;justify-content:center;
  padding:13px 6px;border-radius:9px;
  font-family:var(--f-disp);font-size:12px;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--cyan) calc(var(--v,0) * 42%),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--cyan) calc(var(--v,0) * 46%),var(--edge))}
.bimxc.lab{background:none;border-color:transparent;color:var(--muted-2);
  font-size:9.6px;letter-spacing:.13em;text-transform:uppercase;justify-content:flex-start}
.bimx .bimxc.lab:nth-child(-n+5){justify-content:center}
.bimxc.self,.bimxc:empty{background:none;border-color:transparent;color:var(--muted-2)}
@media(max-width:760px){
  .bihead{display:none}
  .birow{grid-template-columns:1fr 1fr;gap:9px}
  .bimxc{padding:10px 3px;font-size:10.6px}
  .bimxc.lab{font-size:8.4px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
  .bitab:hover{transform:none}
  .bipanel.on{animation:none}
  .bibar i::after{transition:none;transform:scaleX(1)}
}

/* ==========================================================================
   10. WORK WALL
   ========================================================================== */
.wwall{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.2vw,16px)}
@media(max-width:860px){.wwall{grid-template-columns:repeat(6,1fr)}}
.wcard{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--edge);
  background:var(--near-2) center/cover no-repeat;
  transition:transform .65s var(--e-out),border-color .65s}
.wcard::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,9,0) 38%,rgba(6,7,9,.92))}
.wcard:hover{transform:translateY(-7px);border-color:var(--edge-2)}
.wcard-lg{grid-column:span 7;aspect-ratio:16/11}
.wcard-sm{grid-column:span 5;aspect-ratio:16/11}
@media(max-width:860px){.wcard-lg,.wcard-sm{grid-column:span 6;aspect-ratio:16/10}}
.wbody{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 18px}
.wbody i{font-style:normal;font-size:9.4px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);font-weight:600}
.wbody b{display:block;font-family:var(--f-disp);font-size:clamp(16px,1.9vw,22px);
  font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-top:8px}
.wbody p{font-size:12.2px;color:var(--ink-dim);margin:6px 0 0;max-width:42ch}
.wres{display:flex;gap:18px;margin-top:13px}
.wres div{display:flex;flex-direction:column;gap:1px}
.wres b{font-family:var(--f-disp);font-size:15.4px;font-weight:700;color:var(--lime);margin:0}
.wres span{font-size:10px;color:var(--muted)}

/* ==========================================================================
   Higgsfield placeholder slots
   Any element with data-hf renders a labelled, styled empty frame until an
   image is set. Swap by adding style="background-image:url(...)".
   ========================================================================== */
[data-hf]:not([style*="background-image"]){
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.022) 0 10px,transparent 10px 20px),
    radial-gradient(70% 60% at 50% 40%,rgba(24,226,255,.07),transparent 70%);
  background-color:var(--near-2);
}
[data-hf]:not([style*="background-image"])::before{
  content:'HF · ' attr(data-hf);
  position:absolute;top:11px;left:11px;z-index:3;
  font-family:var(--f-disp);font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);
  padding:4px 8px;border-radius:6px;
  background:rgba(6,7,9,.72);border:1px solid rgba(24,226,255,.3);
}

/* ---------- utility ---------- */
.center{text-align:center}
.mx-auto{margin-inline:auto}
.maxw-56{max-width:56ch}
.maxw-46{max-width:46ch}
.mt-s{margin-top:clamp(13px,1.5vw,19px)}
.mt-m{margin-top:clamp(20px,2.3vw,30px)}
.mt-l{margin-top:clamp(26px,3.1vw,42px)}

/* ==========================================================================
   BRANDS PAGE — components unique to influencer-marketing.html
   Deliberately not shared with the creators page, which has its own language.
   ========================================================================== */
.bhero .crumb{margin-bottom:16px}

/* the hero shortlist: a decision artefact, not a mood board */
.shortlist{border-radius:20px;overflow:hidden;
  border:1px solid var(--edge-2);
  background:linear-gradient(180deg,rgba(14,18,25,.97),rgba(8,10,14,.97));
  box-shadow:0 50px 110px -50px rgba(0,0,0,1)}
.slhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--edge);
  background:rgba(255,255,255,.022)}
.sltitle{font-family:var(--f-disp);font-size:12.4px;font-weight:600;color:var(--ink)}
.slstamp{font-size:9.6px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cyan);padding:4px 9px;border-radius:99px;
  background:rgba(24,226,255,.1);border:1px solid rgba(24,226,255,.26)}
.slfilters{display:flex;flex-wrap:wrap;gap:6px;padding:13px 16px;
  border-bottom:1px solid var(--edge)}
.slfilters s{text-decoration:none;font-size:10.4px;color:var(--muted-2);
  padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.03);border:1px solid var(--edge)}
.slfilters s.on{color:var(--ink);background:rgba(198,255,46,.1);
  border-color:rgba(198,255,46,.32)}
.slrows{padding:6px 8px}
.slrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:11px 8px;border-bottom:1px solid var(--edge)}
.slrow:last-child{border-bottom:0}
.slrow.muted{opacity:.5}
.slfit{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:10px;
  font-family:var(--f-disp);font-size:12.4px;font-weight:700;color:var(--lime);
  background:rgba(198,255,46,.1);border:1px solid rgba(198,255,46,.3);
  font-variant-numeric:tabular-nums}
.slrow.muted .slfit{color:var(--muted);background:rgba(255,255,255,.04);
  border-color:var(--edge)}
.slwho{min-width:0}
.slwho b{display:block;font-family:var(--f-disp);font-size:12.4px;font-weight:600;
  color:var(--ink)}
.slwho em{font-style:normal;font-size:10.4px;color:var(--muted-2)}
.slfee{font-family:var(--f-disp);font-size:12.4px;font-weight:600;color:var(--ink-dim);
  font-variant-numeric:tabular-nums}
.slfoot{padding:12px 16px;border-top:1px solid var(--edge);
  background:rgba(255,255,255,.018)}
.slfoot span{font-size:10.6px;color:var(--muted);line-height:1.5}

/* comparison table */
.cmp{border-radius:18px;overflow:hidden;border:1px solid var(--edge-2);
  background:linear-gradient(180deg,rgba(12,16,22,.9),rgba(8,10,14,.9))}
.cmprow{display:grid;grid-template-columns:1.05fr 1.15fr 1.15fr 1.3fr;
  gap:clamp(10px,1.4vw,20px);padding:15px clamp(14px,1.8vw,22px);
  border-bottom:1px solid var(--edge);align-items:start}
.cmprow:last-child{border-bottom:0}
.cmprow>span{font-size:clamp(11.8px,1.05vw,13.2px);line-height:1.5;color:var(--muted)}
.cmprow>[role="rowheader"]{font-family:var(--f-disp);font-weight:600;color:var(--ink)}
.cmphead{background:rgba(255,255,255,.028)}
.cmphead>span{font-family:var(--f-disp);font-size:9.6px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}
.cmphead>.us{color:var(--lime)}
/* the Reachers column is the answer, so it gets the light */
.cmprow>.us{color:var(--ink);position:relative;
  display:flex;align-items:flex-start;gap:8px}
.cmp .cmprow:not(.cmphead)>.us{
  background:linear-gradient(90deg,rgba(198,255,46,.07),rgba(198,255,46,.02))}
.cmprow>.us i.ok{flex:0 0 auto;width:15px;height:15px;border-radius:50%;margin-top:1px;
  background:rgba(198,255,46,.16);border:1px solid rgba(198,255,46,.45);
  position:relative}
.cmprow>.us i.ok::after{content:'';position:absolute;left:4.4px;top:2.4px;
  width:4px;height:7px;border:solid var(--lime);border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg)}
@media(max-width:860px){
  .cmprow{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .cmphead{display:none}
  .cmprow>[role="rowheader"]{font-size:13px;margin-bottom:4px}
  .cmprow>span:not([role="rowheader"])::before{
    content:'Agency: ';color:var(--muted-2);font-weight:600}
  .cmprow>span:nth-child(3)::before{content:'In-house: '}
  .cmprow>.us::before{content:none}
  .cmp .cmprow>.us{border-radius:9px;padding:8px 10px;margin-top:3px}
}