/* ============================================================
   R-FOMO — five Player Page design candidates (+ the picker).
   Review-only stylesheet: each candidate imposes its own single
   look inside .pd{n}; the shared .pd-* vocabulary (fragments,
   locks, tips, CTAs) is restyled per scope. Dies with the losing
   candidates when David picks one.
   ============================================================ */

/* ---------- review chrome: switcher + picker ---------- */
.pd-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 16px; margin: 14px 0 0; border: 1px dashed rgba(127,127,127,.45);
  border-radius: 12px; font-size: 13px; position: relative; z-index: 5; }
.pd-switch a { color: inherit; text-decoration: none; opacity: .75; }
.pd-switch a:hover { opacity: 1; }
.pd-switch a.on { opacity: 1; font-weight: 800; text-decoration: underline; }
.pd-switch-designs { display: flex; flex-wrap: wrap; gap: 12px; }
.pd-switch-state { margin-left: auto; display: flex; gap: 8px; }
.pd-switch-state a { border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; }
.pd-switch-state a.on { background: rgba(127,127,127,.18); }

.pd-index { padding: 30px 0 60px; position: relative; z-index: 1; }
.pd-index-kicker { font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .7; }
.pd-index h1 { font-size: clamp(30px, 5vw, 52px); margin: 6px 0 10px; }
.pd-index-sub { max-width: 70ch; opacity: .85; line-height: 1.6; }
.pd-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 26px; }
.pd-index-card { border: 1px solid rgba(127,127,127,.35); border-radius: 14px; padding: 20px;
  background: rgba(127,127,127,.07); }
.pd-index-num { font-family: 'Courier New', monospace; font-weight: 800; font-size: 13px;
  border: 1px solid currentColor; border-radius: 8px; padding: 3px 9px; opacity: .8; }
.pd-index-card h2 { margin: 10px 0 8px; font-size: 22px; letter-spacing: .04em; }
.pd-index-card p { font-size: 14px; line-height: 1.55; opacity: .85; min-height: 66px; }
.pd-index-links { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- shared candidate vocabulary ---------- */
.pd { position: relative; z-index: 1; margin: 22px 0 60px; }
.pd h1, .pd h2, .pd h3, .pd h4 { margin: 0; }
.pd-avatar { border-radius: 16px; display: block; }
.pd-about { max-width: 62ch; line-height: 1.6; opacity: .85; font-size: 14.5px; margin: 8px 0 0; }
.pd-empty { opacity: .7; font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; }
.pd-stamp { display: inline-block; font-family: 'Courier New', monospace; font-weight: 800;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #ff5d76;
  border: 2px solid currentColor; border-radius: 8px; padding: 6px 12px; margin: 12px 0 0;
  transform: rotate(-1.4deg); }

.pd-upgrade { display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: .03em;
  padding: 12px 22px; border-radius: 10px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #ff2d95, #b3186a);
  box-shadow: 0 0 22px rgba(255, 45, 149, .4); border: 0; cursor: pointer; }
.pd-upgrade:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(255, 45, 149, .6); }
.pd-upgrade.ghost { background: transparent; color: inherit; border: 1px solid currentColor;
  box-shadow: none; }
.pd-upgrade-row { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pd-upgrade-note { margin: 0; font-size: 13px; opacity: .8; max-width: 44ch; }

.pd-earn { list-style: none; margin: 14px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pd-earn li { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(127,127,127,.3);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; min-width: 0; }
.pd-earn li b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-earn li.big { grid-column: 1 / -1; font-size: 14px; }
.pd-earn li.big b { font-size: 20px; }
.pd-earn-value { margin: 14px 0 0; font-size: 14px; }
.pd-earn-value i { display: block; margin-top: 4px; opacity: .8; }

.pd-favs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pd-fav { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(127,127,127,.3);
  border-radius: 12px; padding: 10px 14px; min-width: 0; }
.pd-fav-art { flex: 0 0 auto; width: 92px; height: 62px; border-radius: 8px; overflow: hidden;
  background: rgba(127,127,127,.2); display: flex; align-items: center; justify-content: center; }
.pd-fav-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-fav-initials { font-weight: 800; font-size: 20px; opacity: .6; }
.pd-fav-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pd-fav-title { font-weight: 700; color: inherit; text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pd-fav-meta { font-size: 12.5px; opacity: .7; }
.pd-start-t { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 12px; letter-spacing: .05em;
  text-decoration: none; color: #ffb02e; border: 1px solid currentColor; border-radius: 999px;
  padding: 7px 13px; }
.pd-start-t:hover { background: rgba(255, 176, 46, .15); }
.pd-start-t.locked { color: inherit; opacity: .5; }

.pd-board { list-style: none; margin: 12px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.pd-board li { display: flex; align-items: center; gap: 12px; font-size: 13.5px;
  border-bottom: 1px dashed rgba(127,127,127,.3); padding-bottom: 8px; min-width: 0; }
.pd-board li a { color: inherit; text-decoration: none; flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pd-board li b { font-variant-numeric: tabular-nums; }
.pd-board li span { opacity: .7; font-size: 12px; white-space: nowrap; }

.pd-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; margin-top: 14px; }
.pd-video { margin: 0; border: 1px solid rgba(127,127,127,.3); border-radius: 12px; overflow: hidden; }
.pd-video video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; }
.pd-video figcaption { padding: 9px 12px; font-size: 13px; }
.pd-video figcaption b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-video figcaption span { opacity: .7; font-size: 12px; }

.pd-lockbody { margin-top: 14px; }
.pd-lockbody p { max-width: 56ch; line-height: 1.6; font-size: 14px; margin: 0 0 14px; }

.pd-tstory { margin-top: 12px; max-width: 62ch; }
.pd-tstory p { line-height: 1.6; font-size: 14px; margin: 0 0 10px; }
.pd-quote { font-size: 17px; font-style: italic; font-weight: 700; }
.pd-unlock { margin-top: 16px; max-width: 460px; }
.pd-unlock-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
  margin-bottom: 6px; }
.pd-unlock-label b { font-variant-numeric: tabular-nums; }
.pd-meter { height: 12px; border-radius: 999px; background: rgba(127,127,127,.25); overflow: hidden; }
.pd-meter span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffb02e, #ff2d95); }
.pd-unlock-note { font-size: 12.5px; opacity: .8; margin: 8px 0 0; }
.pd-tcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 18px; }
.pd-tcols h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }

.pd-invite-pitch { margin: 12px 0 0; font-size: 14px; max-width: 56ch; line-height: 1.6; }
.pd-invite { display: flex; gap: 10px; margin-top: 12px; max-width: 520px; }
.pd-invite input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid rgba(127,127,127,.4); background: rgba(127,127,127,.12);
  color: inherit; }
.pd-copy { flex: 0 0 auto; font: inherit; font-weight: 800; font-size: 13px; padding: 10px 16px;
  border-radius: 10px; border: 1px solid currentColor; background: transparent; color: inherit;
  cursor: pointer; }
.pd-copy:hover { background: rgba(127,127,127,.15); }

.pd-ranks { list-style: none; margin: 12px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; max-width: 560px; }
.pd-ranks li { display: flex; align-items: center; gap: 12px; font-size: 13.5px;
  border: 1px solid rgba(127,127,127,.3); border-radius: 10px; padding: 8px 12px; }
.pd-rank-tag { font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pd-rank-pos { opacity: .75; font-size: 12px; }
.pd-ranks time { margin-left: auto; opacity: .65; font-size: 12px; }

/* tool-tip video popover */
.pdtip { position: relative; display: inline-block; vertical-align: middle; margin-left: 8px; }
.pdtip-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-weight: 800;
  font-size: 10.5px; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.pdtip-chip:hover { opacity: 1; }
.pdtip-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(340px, 82vw);
  display: none; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px;
  background: #101018; color: #f2f0fa; border: 1px solid rgba(127,127,127,.5);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); font-size: 13px; text-transform: none; letter-spacing: 0; }
.pdtip:hover .pdtip-pop, .pdtip.open .pdtip-pop { display: flex; }
.pdtip-pop video, .pdtip-pop iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px;
  background: #000; display: block; }

/* the grey-out: LOCKED sections in the regular state */
.pd.regular .locked { position: relative; }
.pd.regular .locked > *:not(.pd-lockbody):not(h2):not(.pd3-coin) { filter: grayscale(1) opacity(.45); pointer-events: none; }
.pd.regular .locked .pd-lockbody, .pd.regular .locked h2 { filter: none; }

/* ============================================================
   DESIGN 1 — THE LEDGER (slate + amber spine)
   ============================================================ */
.pd1 { --l-bg: #14151c; --l-ink: #ecebe4; --l-amber: #ffb02e; --l-line: #2c2e3a;
  background: var(--l-bg); color: var(--l-ink); border-radius: 18px; padding: 34px clamp(18px, 4vw, 46px);
  font-family: ui-sans-serif, system-ui, sans-serif; }
.pd1-id { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
  padding-bottom: 26px; border-bottom: 3px solid var(--l-amber); }
.pd1-id-main { flex: 1; min-width: 240px; }
.pd1-kicker { font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--l-amber); }
.pd1-id h1 { font-size: clamp(30px, 5vw, 50px); letter-spacing: -.5px; }
.pd1-id-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 26px; }
.pd1-id-stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.pd1-id-stats dd { margin: 2px 0 0; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd1-band { display: flex; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--l-line); }
.pd1-band.callout { background: linear-gradient(90deg, rgba(255,176,46,.1), transparent 70%);
  border-left: 4px solid var(--l-amber); padding-left: 18px; margin: 0 -18px; padding-right: 18px; border-radius: 4px; }
.pd1-num { flex: 0 0 auto; font-family: 'Courier New', monospace; font-weight: 800; font-size: 15px;
  color: var(--l-amber); border: 2px solid var(--l-amber); border-radius: 10px; height: 40px; width: 46px;
  display: flex; align-items: center; justify-content: center; }
.pd1-body { flex: 1; min-width: 0; }
.pd1-body h2 { font-size: 20px; letter-spacing: .06em; }
.pd1 .pd-upgrade { background: linear-gradient(135deg, var(--l-amber), #ff7a1a); box-shadow: 0 0 22px rgba(255,176,46,.35); color: #191104; }
@media (min-width: 900px) {
  .pd1 { container-type: inline-size; }
  .pd1-band.half { width: calc(50% - 12px); display: inline-flex; vertical-align: top; }
  .pd1-band.half + .pd1-band.half { margin-left: 20px; }
}

/* ============================================================
   DESIGN 2 — THE PLAYER CARD (indigo + cyan, sticky rail)
   ============================================================ */
.pd2 { --c-bg: #131329; --c-panel: #1b1b3d; --c-ink: #eef0ff; --c-cyan: #22d3ee; --c-line: #2e2e5c;
  background: var(--c-bg); color: var(--c-ink); border-radius: 18px; padding: clamp(16px, 3vw, 34px); }
.pd2-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; }
@media (max-width: 900px) { .pd2-grid { grid-template-columns: 1fr; } }
.pd2-card { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 16px;
  padding: 24px; text-align: center; align-self: start; position: sticky; top: 16px; }
.pd2-card .pd-avatar { margin: 0 auto 12px; }
.pd2-card h1 { font-size: 26px; }
.pd2-plaque { display: inline-block; margin-top: 8px; font-weight: 800; font-size: 12px;
  letter-spacing: .12em; color: #0b2530; background: var(--c-cyan);
  border-radius: 999px; padding: 5px 14px; }
.pd2-odometer { margin-top: 18px; }
.pd2-odometer b { display: block; font-size: 38px; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--c-cyan); }
.pd2-odometer span, .pd2-value span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.pd2-value { margin-top: 12px; }
.pd2-value b { display: block; font-size: 22px; }
.pd2-meter-wrap { margin-top: 16px; text-align: left; }
.pd2-meter-label { display: block; font-size: 11.5px; opacity: .75; margin-bottom: 6px; }
.pd2-standing { margin: 12px 0 0; font-size: 13px; opacity: .85; }
.pd2-since { margin: 14px 0 0; font-size: 12px; opacity: .6; }
.pd2-flow { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd2-panel { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 16px; padding: 22px; min-width: 0; }
.pd2-panel.callout { border-color: var(--c-cyan); box-shadow: 0 0 26px rgba(34,211,238,.15); }
.pd2-panel h2 { font-size: 18px; letter-spacing: .04em; }
.pd2-twin { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pd2 .pd-upgrade { background: linear-gradient(135deg, var(--c-cyan), #3b82f6); color: #06121f; box-shadow: 0 0 22px rgba(34,211,238,.3); }

/* ============================================================
   DESIGN 3 — THE ARCADE HUD (phosphor green + magenta on black)
   ============================================================ */
.pd3 { --h-bg: #050807; --h-green: #4ade80; --h-mag: #ff2d95; --h-line: #17301f;
  background: var(--h-bg); color: var(--h-green); border-radius: 18px; padding: clamp(14px, 3vw, 30px);
  font-family: 'Courier New', ui-monospace, monospace; }
.pd3::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 18px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.pd3 > * { position: relative; z-index: 1; }
.pd3-hud { display: flex; flex-wrap: wrap; gap: 10px 28px; border: 2px solid var(--h-green);
  border-radius: 12px; padding: 14px 18px; }
.pd3-hud-cell span { display: block; font-size: 10px; letter-spacing: .18em; opacity: .7; }
.pd3-hud-cell b { font-size: 19px; letter-spacing: .04em; }
.pd3-attract { margin: 12px 0 0; font-size: 13px; color: var(--h-mag); letter-spacing: .06em; }
.pd3-attract a { color: inherit; font-weight: 800; }
.pd3-marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--h-line);
  margin-top: 14px; padding: 8px 0; font-size: 12.5px; letter-spacing: .08em; display: flex; }
.pd3-marquee span { animation: pd3scroll 28s linear infinite; flex: 0 0 auto; }
@keyframes pd3scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .pd3-marquee span { animation: none; } }
.pd3-about { color: var(--h-green); }
.pd3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
.pd3-crt { border: 2px solid var(--h-line); border-radius: 14px; padding: 20px; min-width: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(74,222,128,.06), transparent 70%); }
.pd3-crt.wide { grid-column: 1 / -1; }
.pd3-crt.callout { border-color: var(--h-green); box-shadow: inset 0 0 30px rgba(74,222,128,.08); }
.pd3-crt h2 { font-size: 15px; letter-spacing: .12em; }
.pd3-coin { font-size: 22px; font-weight: 800; letter-spacing: .22em; color: var(--h-mag);
  margin: 14px 0 0; animation: pd3blink 1.1s steps(2, start) infinite; }
@keyframes pd3blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .pd3-coin { animation: none; } }
.pd3 .pd-upgrade { background: var(--h-mag); box-shadow: 0 0 22px rgba(255,45,149,.45); border-radius: 4px; }
.pd3 .pd-earn li, .pd3 .pd-fav, .pd3 .pd-ranks li { border-color: var(--h-line); border-radius: 4px; }
.pd3 .pd-start-t { color: var(--h-mag); border-radius: 4px; }

/* ============================================================
   DESIGN 4 — THE LADDER (deep purple + gold rail)
   ============================================================ */
.pd4 { --d-bg: #17102b; --d-ink: #f1eaff; --d-gold: #facc15; --d-line: #322350;
  background: var(--d-bg); color: var(--d-ink); border-radius: 18px; padding: clamp(16px, 3vw, 34px); }
.pd4-id { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.pd4-id h1 { font-size: clamp(28px, 4.5vw, 44px); }
.pd4-standing { margin: 4px 0 0; font-size: 14.5px; opacity: .9; }
.pd4-standing b { color: var(--d-gold); letter-spacing: .06em; }
.pd4-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; }
@media (max-width: 900px) { .pd4-grid { grid-template-columns: 1fr; } }
.pd4-rail { align-self: start; position: sticky; top: 16px; border-left: 3px solid var(--d-gold);
  padding-left: 16px; display: flex; flex-direction: column; gap: 10px; }
.pd4-rail-title { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.pd4-rung { border: 1px solid var(--d-line); border-radius: 10px; padding: 9px 12px; font-size: 12.5px;
  opacity: .55; }
.pd4-rung b { display: block; letter-spacing: .04em; }
.pd4-rung span { opacity: .8; font-variant-numeric: tabular-nums; }
.pd4-rung.reached { opacity: .85; border-color: rgba(250,204,21,.5); }
.pd4-rung.here { opacity: 1; border: 2px solid var(--d-gold); box-shadow: 0 0 20px rgba(250,204,21,.25); }
.pd4-you { display: inline-block; margin-top: 4px; font-weight: 800; color: var(--d-gold); }
.pd4-unlock-note { display: block; margin-top: 3px; font-size: 11px; color: var(--d-gold); font-style: normal; }
.pd4-flow { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pd4-block { border: 1px solid var(--d-line); border-radius: 14px; padding: 22px;
  background: rgba(255,255,255,.025); min-width: 0; }
.pd4-block.callout { border-color: var(--d-gold); background: linear-gradient(135deg, rgba(250,204,21,.08), transparent 60%); }
.pd4-block h2 { font-size: 18px; letter-spacing: .04em; }
.pd4 .pd-upgrade { background: linear-gradient(135deg, var(--d-gold), #f97316); color: #201302;
  box-shadow: 0 0 22px rgba(250,204,21,.3); }
.pd4 .pd-start-t { color: var(--d-gold); }

/* ============================================================
   DESIGN 5 — THE MAGAZINE (paper + red, editorial, LIGHT)
   ============================================================ */
.pd5 { --m-paper: #f4efe6; --m-ink: #1c1a16; --m-red: #d61f3d; --m-line: #d8d0c0;
  background: var(--m-paper); color: var(--m-ink); border-radius: 18px; padding: clamp(20px, 4vw, 52px);
  font-family: Georgia, 'Times New Roman', serif; }
.pd5-spread { text-align: center; padding-bottom: 30px; border-bottom: 4px double var(--m-ink); position: relative; }
.pd5-kicker { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: .22em; color: var(--m-red); }
.pd5-spread h1 { font-size: clamp(40px, 8vw, 84px); letter-spacing: -1px; line-height: 1; margin: 8px 0 10px; }
.pd5-deck { font-size: 15px; font-style: italic; opacity: .8; }
.pd5-avatar { margin: 16px auto 0; }
.pd5-spread .pd-about { margin-left: auto; margin-right: auto; }
.pd5-quote { text-align: center; padding: 30px 0; border-bottom: 1px solid var(--m-line); }
.pd5-quote blockquote { margin: 0; font-size: clamp(22px, 3.6vw, 34px); font-style: italic; color: var(--m-red); }
.pd5-quote p { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; margin: 10px 0 0; opacity: .7; }
.pd5-feature { padding: 28px 0; border-bottom: 1px solid var(--m-line); }
.pd5-feature h2 { font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd5-feature h2 span { border-bottom: 3px solid var(--m-red); padding-bottom: 4px; }
.pd5-feature.callout { background: #fff; margin: 0 -18px; padding: 28px 18px; border: 1px solid var(--m-line); border-radius: 8px; }
.pd5-feature.promo { background: #fff7f0; margin: 0 -18px; padding: 28px 18px; border-radius: 8px; }
.pd5-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 34px; }
.pd5 .pd-upgrade { background: var(--m-red); font-family: ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(214,31,61,.3); border-radius: 6px; }
.pd5 .pd-stamp { color: var(--m-red); }
.pd5 .pd-earn li, .pd5 .pd-fav, .pd5 .pd-ranks li, .pd5 .pd-video, .pd5 .pd-invite input { border-color: var(--m-line); background: #fff; }
.pd5 .pd-board li { border-color: var(--m-line); }
.pd5 .pd-start-t { color: var(--m-red); }
.pd5 .pdtip-pop { background: #171512; }
.pd5 .pd-fav-art { background: #e6dfd0; }

/* ============================================================
   R-FUSE — shared fusion vocabulary (designs 6-10):
   the live hero + Design 2's panels + the ladder + the four
   attraction-video sizes David specified.
   ============================================================ */
.pd-index-fusion { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  opacity: .75; margin-top: 6px; }

.pdf-hero { text-align: center; padding: 34px 0 26px; }
.pdf-hero-avatar { margin: 0 auto 12px; }
.pdf-hero h1 { font-size: clamp(32px, 5vw, 54px); letter-spacing: -.5px; }
.pdf-hero-tier { margin: 8px 0 0; }
.pdf-hero-tier span { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .1em;
  border: 2px solid currentColor; border-radius: 999px; padding: 5px 16px; }
.pdf-hero-stats { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.pdf-hero-stats b { display: block; font-size: clamp(19px, 3vw, 28px); font-variant-numeric: tabular-nums; }
.pdf-hero-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; opacity: .65; }
.pdf-hero-meter { max-width: 380px; margin: 18px auto 0; font-size: 12px; opacity: .9; }
.pdf-hero-meter .pd-meter { margin-top: 6px; }
.pdf-hero-about { margin-left: auto; margin-right: auto; }

.pdf-ladder-h { display: flex; gap: 10px; overflow-x: auto; padding: 16px 2px; }
.pdf-rung-h { flex: 1 0 130px; border: 1px solid rgba(127,127,127,.35); border-radius: 10px;
  padding: 10px 12px; font-size: 12px; opacity: .55; min-width: 0; }
.pdf-rung-h b { display: block; font-size: 12.5px; }
.pdf-rung-h span { opacity: .8; font-variant-numeric: tabular-nums; }
.pdf-rung-h i, .pdf-rung-v i { display: block; font-style: normal; font-size: 10.5px; margin-top: 3px; }
.pdf-rung-h em, .pdf-rung-v em { display: block; font-style: normal; font-weight: 800; margin-top: 4px; }
.pdf-rung-h.reached, .pdf-rung-v.reached { opacity: .85; }
.pdf-rung-h.here, .pdf-rung-v.here { opacity: 1; border-width: 2px; }

.pdf-ladder-v { display: flex; flex-direction: column; gap: 9px; align-self: start; }
.pdf-ladder-title { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pdf-rung-v { border: 1px solid rgba(127,127,127,.35); border-radius: 10px; padding: 9px 12px;
  font-size: 12px; opacity: .55; }
.pdf-rung-v b { display: block; }

.pdf-twin { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: inherit; }

/* the four attraction-video sizes */
.pd-attract { display: block; border-radius: 10px; overflow: hidden; background: #000; }
.pd-attract video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-attract.sm { width: 150px; height: 96px; flex: 0 0 auto; }
.pd-attract.md { width: 100%; aspect-ratio: 16/10; }
.pd-attract.wide { width: 100%; height: 150px; margin-top: 12px; }
.pd-runcards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pd-runcard { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(127,127,127,.3);
  border-radius: 12px; padding: 10px; min-width: 0; }
.pd-runcard-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pd-runcard-body a { color: inherit; text-decoration: none; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pd-runcard-body b { font-variant-numeric: tabular-nums; }
.pd-runcard-body span { font-size: 12px; opacity: .7; }
.pd-preroll-note { margin: 12px 0 0; font-size: 12.5px; opacity: .75; }
.pd-preroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
  margin-top: 10px; }
.pd-preroll-card { margin: 0; }
.pd-preroll-card figcaption { font-size: 12px; margin-top: 6px; opacity: .8; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pd-uploads { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
  margin-top: 14px; }
.pd-upload-card { margin: 0; border: 1px solid rgba(127,127,127,.3); border-radius: 12px; overflow: hidden; }
.pd-upload-card video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; }
.pd-upload-card figcaption { padding: 9px 12px; font-size: 13px; }
.pd-upload-card figcaption b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-upload-card figcaption span { opacity: .7; font-size: 12px; }

.pd6-panel h2, .pd7-panel h2, .pd8-panel h2, .pd9-panel h2, .pd10-panel h2 { font-size: 18px; letter-spacing: .03em; }

/* DESIGN 6 — THE MARQUEE (navy + cyan) */
.pd6 { --f-bg: #10132b; --f-panel: #191d40; --f-line: #2b2f5e; --f-acc: #22d3ee;
  background: var(--f-bg); color: #eef0ff; border-radius: 18px; padding: clamp(16px, 3vw, 36px); }
.pd6 .pdf-hero-tier span, .pd6 .pdf-rung-h.here { color: var(--f-acc); border-color: var(--f-acc); }
.pd6 .pdf-rung-h i { color: var(--f-acc); }
.pd6-flow { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.pd6-panel { background: var(--f-panel); border: 1px solid var(--f-line); border-radius: 16px; padding: 22px; min-width: 0; }
.pd6-panel.callout { border-color: var(--f-acc); box-shadow: 0 0 26px rgba(34,211,238,.14); }
.pd6 .pd-upgrade { background: linear-gradient(135deg, var(--f-acc), #3b82f6); color: #06121f; box-shadow: 0 0 22px rgba(34,211,238,.3); }

/* DESIGN 7 — THE RAILED RECORD (charcoal + amber) */
.pd7 { --f-bg: #16140f; --f-panel: #1e1b13; --f-line: #37311f; --f-acc: #ffb02e;
  background: var(--f-bg); color: #f0ead9; border-radius: 18px; padding: clamp(16px, 3vw, 36px); }
.pd7 .pdf-hero-tier span { color: var(--f-acc); border-color: var(--f-acc); }
.pd7-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; margin-top: 10px; }
@media (max-width: 900px) { .pd7-grid { grid-template-columns: 1fr; } }
.pd7 .pdf-ladder-v { position: sticky; top: 16px; border-left: 3px solid var(--f-acc); padding-left: 14px; }
.pd7 .pdf-rung-v.here { border-color: var(--f-acc); box-shadow: 0 0 18px rgba(255,176,46,.25); }
.pd7 .pdf-rung-v i, .pd7 .pdf-rung-v em { color: var(--f-acc); }
.pd7-flow { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pd7-panel { background: var(--f-panel); border: 1px solid var(--f-line); border-radius: 14px; padding: 22px; min-width: 0; }
.pd7-panel.callout { border-left: 4px solid var(--f-acc); }
.pd7 .pd-upgrade { background: linear-gradient(135deg, var(--f-acc), #ff7a1a); color: #191104; box-shadow: 0 0 22px rgba(255,176,46,.35); }
.pd7 .pd-start-t { color: var(--f-acc); }

/* DESIGN 8 — THE SCOREBOARD (phosphor scoreboard) */
.pd8 { --f-bg: #0a100c; --f-panel: #101812; --f-line: #1e3325; --f-acc: #4ade80;
  background: var(--f-bg); color: #dcffe6; border-radius: 18px; padding: clamp(16px, 3vw, 36px); }
.pd8 .pdf-hero { border: 2px solid var(--f-acc); border-radius: 16px; padding: 30px 18px;
  box-shadow: inset 0 0 40px rgba(74,222,128,.07); }
.pd8 .pdf-hero-tier span { color: var(--f-acc); border-color: var(--f-acc); }
.pd8-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 18px; }
.pd8-panel { background: var(--f-panel); border: 1px solid var(--f-line); border-radius: 14px; padding: 20px; min-width: 0; }
.pd8-panel.callout { grid-column: 1 / -1; border-color: var(--f-acc); }
.pd8-ladder-title { margin-top: 22px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pd8 .pdf-rung-h.here { color: var(--f-acc); border-color: var(--f-acc); }
.pd8 .pdf-rung-h i { color: var(--f-acc); }
.pd8 .pd-upgrade { background: var(--f-acc); color: #06210f; box-shadow: 0 0 22px rgba(74,222,128,.35); }

/* DESIGN 9 — THE CLIMB (violet + gold spine) */
.pd9 { --f-bg: #191030; --f-panel: #221743; --f-line: #392766; --f-acc: #facc15;
  background: var(--f-bg); color: #f1eaff; border-radius: 18px; padding: clamp(16px, 3vw, 36px); }
.pd9 .pdf-hero-tier span { color: var(--f-acc); border-color: var(--f-acc); }
.pd9-spine { border-block: 2px solid var(--f-acc); padding: 6px 0 10px; margin: 10px 0 8px;
  background: linear-gradient(90deg, rgba(250,204,21,.08), transparent 55%); }
.pd9-spine-title { margin: 10px 0 0; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--f-acc); }
.pd9 .pdf-rung-h.here { border-color: var(--f-acc); box-shadow: 0 0 20px rgba(250,204,21,.3); }
.pd9 .pdf-rung-h i, .pd9 .pdf-rung-h em { color: var(--f-acc); }
.pd9-flow { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.pd9-panel { background: var(--f-panel); border: 1px solid var(--f-line); border-radius: 14px; padding: 22px; min-width: 0; }
.pd9-panel.callout { border-color: var(--f-acc); }
.pd9 .pd-upgrade { background: linear-gradient(135deg, var(--f-acc), #f97316); color: #201302; box-shadow: 0 0 22px rgba(250,204,21,.3); }
.pd9 .pd-start-t { color: var(--f-acc); }

/* DESIGN 10 — THE PIT WALL (graphite + magenta mosaic) */
.pd10 { --f-bg: #141018; --f-panel: #1d1622; --f-line: #362a40; --f-acc: #ff2d95;
  background: var(--f-bg); color: #f5eefa; border-radius: 18px; padding: clamp(16px, 3vw, 36px); }
.pd10 .pdf-hero { padding-bottom: 18px; }
.pd10 .pdf-hero-tier span { color: var(--f-acc); border-color: var(--f-acc); }
.pd10-wall { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; margin-top: 10px; }
@media (max-width: 900px) { .pd10-wall { grid-template-columns: 1fr; } }
.pd10-ladder-card { background: var(--f-panel); border: 1px solid var(--f-line); border-radius: 14px;
  padding: 18px; align-self: start; position: sticky; top: 16px; }
.pd10 .pdf-rung-v.here { border-color: var(--f-acc); box-shadow: 0 0 18px rgba(255,45,149,.3); }
.pd10 .pdf-rung-v i, .pd10 .pdf-rung-v em { color: var(--f-acc); }
.pd10-flow { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pd10-panel { background: var(--f-panel); border: 1px solid var(--f-line); border-radius: 14px; padding: 20px; min-width: 0; }
.pd10-panel.callout { border-color: var(--f-acc); box-shadow: 0 0 24px rgba(255,45,149,.12); }
.pd10 .pd-upgrade { background: linear-gradient(135deg, var(--f-acc), #b3186a); box-shadow: 0 0 22px rgba(255,45,149,.4); }

/* phone safety across all candidates */
@media (max-width: 640px) {
  .pd1-band { flex-direction: column; gap: 10px; }
  .pd1-band.half { width: auto; display: flex; margin-left: 0 !important; }
  .pd-fav { flex-wrap: wrap; }
  .pd-runcard { flex-wrap: wrap; }
  .pd-attract.sm { width: 100%; height: auto; aspect-ratio: 16/10; }
  .pd-invite { flex-direction: column; }
  .pd3-hud { gap: 8px 18px; }
  .pd2-card { position: static; }
  .pd4-rail { position: static; }
  .pd7 .pdf-ladder-v, .pd10-ladder-card { position: static; }
  .pdf-hero-stats { gap: 18px; }
}