/* Cade referrals v9 (2026-10-06): the broadcast referrals page. The shared parts are the broadcast layer (/lib/v8/broadcast.css:
   the wide table .b-tbl, the steps .b-steps.tall, the answers .b-faq) on the kit (/lib/v8/v8.css); this file keeps the page's own:
   .b-crew (the crew hero), .b-inv (the invite link row), .b-kpis / .b-kpi (the stat plates), .b-rules, the answers' panel and its
   orange tone. Shapes: --clip-panel, --clip-sign, --clip-hex, --clip-ribbon, the CTA plates. Nothing under 11px. */
.rfv9 .rf-hero-sec{padding-top:24px}
.rfv9 .rf-tick-sec{padding-top:28px}
.rfv9 .rf-first{padding-top:40px}
.rfv9 .fine{margin-top:40px}

/* ═════ THE CREW HERO: the art on the right, the cream sign on the left, YOU on the ribbon under the middle hexagon ═════ */
.b-crew{position:relative;filter:drop-shadow(var(--sh-9))}
.b-crew-f{position:relative;height:clamp(420px,38vw,500px);clip-path:var(--clip-panel);background:radial-gradient(circle,rgba(255,168,0,.16) 0 1.6px,transparent 2.1px) 0 0/10px 10px,linear-gradient(90deg,#2A1606,#140C05 40%,#100A06);overflow:hidden;container-type:inline-size}
.b-crew-art{position:absolute;inset:0 0 0 20%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
.b-crew-art img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.b-crew-you{position:absolute;z-index:2;left:60%;top:71%;margin:0;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(var(--sh-4))}
.b-crew-you b{display:block;padding:8px 34px 7px;background:var(--yellow);color:var(--ink);clip-path:var(--clip-ribbon);font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(24px,2.6cqw,34px);text-transform:uppercase;line-height:1}
.b-crew-sign{position:absolute;z-index:3;left:44px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:min(470px,40cqw)}
.b-crew-h{margin:0;padding:30px 44px 36px 34px;background:var(--paper);color:var(--ink);clip-path:var(--clip-sign);transform:rotate(-2deg);filter:drop-shadow(var(--sh-5));
  font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(46px,5.4cqw,76px);line-height:.86}
.b-crew-h span{display:inline}
.b-crew-h small{display:block;margin-top:10px;font-size:.56em;line-height:.9}
.b-crew-sign .plate{margin-left:10px}
.b-crew-side{position:absolute;z-index:2;right:30px;bottom:34px;margin:0;padding:18px 30px 22px 22px;background:var(--paper);color:var(--ink);clip-path:var(--clip-sign);transform:rotate(4deg);filter:drop-shadow(var(--sh-5))}
.b-crew-side b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.5cqw,32px);line-height:.88}

/* ═════ THE INVITE LINK: the head, the link field + copy key, Copy link, Share ═════ */
.b-inv{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px 36px;padding:28px 34px 30px 32px}
.b-inv-h{padding-right:34px;border-right:2px solid var(--line)}
.b-inv-p{margin:8px 0 0;font-family:var(--read);font-size:var(--fs-read-s);color:var(--muted)}
.b-inv-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px}
.b-inv-f{display:flex;align-items:center;gap:8px;height:56px;padding:0 6px 0 18px;background:var(--paper);box-shadow:var(--sh-4)}
.b-inv-f input{flex:1;min-width:0;height:100%;padding:0;background:none;border:0;color:var(--ink);font-family:var(--data);font-weight:700;font-size:var(--fs-input)}
.b-inv-f input:focus-visible{outline:none}
.b-inv-f:focus-within{outline:3px solid var(--orange);outline-offset:3px}
.b-inv-f .ib{width:44px;height:44px;background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:none}
.b-inv-f .ib svg{width:22px;height:22px}
.b-inv-f .toast{left:auto;right:0;transform:none}
.b-inv-share{color:var(--ink)}
.b-inv-ic{display:inline-grid;margin-right:10px;vertical-align:-3px}
.b-inv-ic svg{width:22px;height:22px}
.rfv9 .b-inv-row .plate{position:relative}

/* ═════ THE PLATES: invited, playing, fees earned (cream, the coins in their hexagon) ═════ */
.b-kpis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:24px;margin:28px 0 0}
.b-kpi{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:150px;padding:26px 30px 28px 30px}
.b-kpi dt{font-family:var(--shout);font-style:italic;font-weight:800;font-size:28px;text-transform:uppercase;line-height:1;color:var(--paper)}
.b-kpi dd{margin:0;font-family:var(--data);font-weight:800;font-size:clamp(44px,4.4vw,60px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-kpi-fees .b-kpi{padding-right:200px}
.b-kpi-fees .b-kpi dt,.b-kpi-fees .b-kpi dd{color:var(--ink)}
.b-kpi-art{position:absolute;right:34px;top:50%;width:132px;height:132px;transform:translateY(-50%) rotate(4deg);object-fit:cover;clip-path:var(--clip-hex)}

/* the crew table's head: the line beside the title */
.b-crewt .b-ph{align-items:baseline;justify-content:flex-start;gap:8px 28px;flex-wrap:wrap}
/* ═════ THE RULES (cream) + THE QUESTIONS ═════ */
.rf-duo{align-items:stretch}
.rf-duo>.pnl>.pnl-face{height:100%}
.b-rules{padding:36px 40px 40px 38px}
.b-rules-h{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(44px,4.4vw,64px);text-transform:uppercase;line-height:.86;color:var(--ink)}
.b-rules-l{list-style:none;counter-reset:r;margin:24px 0 28px;padding:0;display:flex;flex-direction:column;gap:14px}
.b-rules-l li{counter-increment:r;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;font-family:var(--read);font-size:var(--fs-read);line-height:1.35;color:var(--ink)}
.b-rules-l li::before{content:counter(r);display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:var(--paper);font-family:var(--data);font-weight:800;font-size:var(--fs-field)}
/* the answers: the layer's .b-faq in orange, on a panel of its own, a little larger */
.rf-faq{padding:36px 36px 38px}
.rf-faq .b-ph-h{margin-bottom:22px}
.rf-faq .b-faq{--faq-k:var(--orange)}
.rf-faq .b-faq button{min-height:64px;padding:12px 20px;font-size:clamp(18px,1.6vw,21px)}
.rf-faq .b-faq button svg{stroke-width:2.4}
.rf-faq .b-faq-a{padding:14px 20px 16px}
.rf-faq .b-faq-a p{font-size:17px}
/* ═════ rungs ═════ */
@media (max-width:1180px){
  .b-inv{grid-template-columns:1fr}.b-inv-h{padding-right:0;border-right:0}
  .b-crew-side{display:none}
}
@media (max-width:1023px){
  .b-kpis{grid-template-columns:1fr 1fr}.b-kpi-fees{grid-column:1 / -1}
  .b-crew-art{inset:0 0 0 30%}
  .b-crew-you{left:65%}
}
@media (max-width:760px){
  .rfv9 .rf-hero-sec{padding-top:16px}
  .rfv9 .rf-tick-sec{padding-top:24px}
  .rfv9 .rf-first{padding-top:32px}
  .b-crew-f{height:auto;display:flex;flex-direction:column}
  .b-crew-art{position:relative;inset:auto;aspect-ratio:16/10;-webkit-mask-image:none;mask-image:none}
  .b-crew-art img{object-position:50% 50%}
  .b-crew-you{left:50%;top:calc(62.5cqw * .7)}
  .b-crew-sign{position:relative;left:auto;top:auto;transform:none;max-width:none;padding:0 18px 26px;margin-top:-28px;gap:18px}
  .b-crew-h{font-size:clamp(40px,12.4vw,56px);padding:22px 30px 26px 24px}
  .b-inv{padding:22px 18px 24px 16px;gap:16px}
  .b-inv-row{grid-template-columns:1fr 1fr;gap:14px}
  .b-inv-f{grid-column:1 / -1}
  .b-inv-row .plate{padding:0 12px;font-size:19px}
  .b-kpis{gap:16px;margin-top:22px}
  .b-kpi{min-height:0;padding:20px 18px 22px}
  .b-kpi dt{font-size:22px}.b-kpi dd{font-size:40px}
  .b-kpi-fees .b-kpi{padding-right:130px}
  .b-kpi-art{width:92px;height:92px;right:22px}
  .b-rules{padding:26px 22px 30px 20px}
  .b-rules-l li{font-size:17px}
  .rf-faq{padding:26px 18px 28px 16px}
  .rf-faq .b-faq button{min-height:58px;padding:10px 14px;font-size:18px}
}
@media (max-width:360px){
  .b-inv-row{grid-template-columns:1fr}
  .b-kpi-fees .b-kpi{padding-right:104px}
  .b-kpi-art{width:76px;height:76px;right:16px}
  .b-kpi dd{font-size:34px}
}
@media (max-width:760px){.b-inv{padding-right:24px}.b-crewt.b-list{padding-right:24px}}