/* Under the leaderboard: matchmaking and the audience vote.
   2026-10-29, the founder, in two passes the same day: first "we need a
   longer landing page" (five sections), then "make much shorter - remove
   the youtube section, explain audience vote simply - remove credential".
   Two sections remain. Each gets its own picture (a pairing card, a
   three-step ticket) so they do not read as one repeated template, and
   both sit on the homepage depth tokens from homepage-design.css. No
   number here that the product does not produce. */
.lx{width:min(1240px,calc(100vw - 48px));margin:0 auto;padding:clamp(40px,5vw,72px) 0 0;color:var(--text,#1a1a1f);font-family:var(--font-body)}
.lx:last-of-type{padding-bottom:clamp(36px,4.5vw,64px)}
.lx-title{margin:0;max-width:22ch;font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--text,#1a1a1f)}
.lx-sub{margin:12px 0 0;max-width:46ch;font-size:1.02rem;line-height:1.55;color:var(--text-dim,#4b443d)}
.lx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.lx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.lx-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--accent-solid,#b91c1c);color:#fff;font-size:1rem;font-weight:700;text-decoration:none;box-shadow:var(--home-glow,0 10px 24px -10px rgba(185,28,28,.55));transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.lx-cta:hover{background:#991b1b;transform:translateY(-1px)}
.lx-alt,.lx-link{font-size:.95rem;font-weight:700;color:var(--text,#1a1a1f);text-decoration:none;border-bottom:1px solid var(--home-rule,rgba(0,0,0,.18));padding-bottom:2px;transition:color .14s ease,border-color .14s ease}
.lx-alt:hover,.lx-link:hover{color:var(--accent-solid,#b91c1c);border-color:currentColor}
.lx-link{display:inline-block;margin-top:20px}
/* .lx-tag retired 2026-10-31 (Aidan: "get rid of saying example obviously they are") */

/* ── Matchmaking: two answers, one pairing ─────────────────────── */
.lx-pair{position:relative;margin:0;padding:clamp(26px,3vw,38px) clamp(18px,2.4vw,30px) clamp(18px,2vw,24px);border:1px solid var(--home-rule,rgba(0,0,0,.1));border-radius:22px;background:var(--bg,#fff);box-shadow:var(--home-shadow-lg,0 24px 48px -18px rgba(0,0,0,.28))}
.lx-pair-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px}
.lx-pair-vs{align-self:center}
.lx-person{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border-radius:16px;background:var(--home-soft,rgba(0,0,0,.04));box-shadow:var(--home-shadow-sm,0 2px 6px -2px rgba(0,0,0,.12))}
/* A face on each side, so the card reads as two people being matched
   (2026-10-29, "add a face on left and a face on the right", then "bigger
   images not circle thumbnails"). Consented live-round stills, framed as
   call tiles. */
.lx-person{padding:10px 10px 16px}
.lx-person-face{display:block;width:100%;height:auto;aspect-ratio:4/3;margin-bottom:8px;border-radius:12px;object-fit:cover;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.lx-person--you .lx-person-face{box-shadow:0 0 0 2px var(--accent-solid,#b91c1c),0 8px 18px -10px rgba(0,0,0,.45)}
.lx-person-face{transition:opacity .3s ease}
.lx-person-face.is-out{opacity:0}
.lx-person-pick,.lx-pair-topic span,.lx-pair-topic b{transition:opacity .3s ease}
.lx-pair.is-swapping .lx-person-pick,.lx-pair.is-swapping .lx-pair-topic span,.lx-pair.is-swapping .lx-pair-topic b{opacity:0}
.lx-person-who,.lx-person-pick{padding:0 6px}
.lx-person--them{text-align:right}
.lx-person-who{font-size:.8rem;font-weight:700;color:var(--text-dim,#4b443d)}
.lx-person-pick{font-size:1.02rem;font-weight:700;line-height:1.3;color:var(--text,#1a1a1f)}
.lx-person--you{box-shadow:var(--home-shadow-sm),inset 0 0 0 2px color-mix(in srgb,var(--accent-solid,#b91c1c) 55%,transparent)}
.lx-person--you .lx-person-who{color:var(--accent-solid,#b91c1c)}
.lx-pair-vs{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--text,#1a1a1f);color:var(--bg,#fff);font-size:.8rem;font-weight:800;box-shadow:var(--home-shadow-sm)}
.lx-pair-topic{display:flex;flex-direction:column;gap:4px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--home-rule,rgba(0,0,0,.18));font-size:.85rem;color:var(--text-dim,#4b443d)}
.lx-pair-topic b{font-family:var(--font-deck,var(--font-display));font-size:1.25rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--text,#1a1a1f)}


/* ── Audience vote: an example round ───────────────────────────── */
.lx-split--flip > .lx-room{order:-1}
.lx-room{position:relative;margin:0;padding:clamp(14px,1.8vw,20px);border:1px solid var(--home-rule,rgba(0,0,0,.1));border-radius:22px;background:var(--bg,#fff);box-shadow:var(--home-shadow-lg,0 24px 48px -18px rgba(0,0,0,.28))}
.lx-room-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.lx-room-motion{min-width:0;font-size:.95rem;font-weight:700;line-height:1.3;color:var(--text,#1a1a1f)}
.lx-room-clock{flex:none;padding:5px 10px;border-radius:8px;background:var(--text,#1a1a1f);color:var(--bg,#fff);font-family:var(--font-mono,ui-monospace,monospace);font-size:.78rem;font-variant-numeric:tabular-nums;opacity:.92}
.lx-room-clock b{font-weight:700}
.lx-room-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lx-room-tile{position:relative;overflow:hidden;border-radius:14px;background:#111;aspect-ratio:4/3;box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.lx-room-tile video{display:block;width:100%;height:100%;object-fit:cover}
.lx-room-chip{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:.75rem;font-weight:700}
.lx-room-chip i{width:8px;height:8px;border-radius:50%}
.lx-room-chip .is-for{background:#22c55e}.lx-room-chip .is-against{background:#ef4444}
.lx-room-chart{margin-top:14px}
.lx-room-chart-top{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:.8rem;font-weight:700;color:var(--text,#1a1a1f)}
.lx-room-key{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--text-dim,#4b443d)}
.lx-room-key i,.lx-room-tap{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #1a1a1f}
.lx-room-ex{margin-left:auto;font-size:.7rem;font-weight:600;color:var(--text-dim,#4b443d)}
.lx-room-plot{position:relative;height:96px;overflow:hidden;border-radius:10px}
.lx-room-plot svg{display:block;width:100%;height:100%}
.lx-room-rest{fill:var(--home-soft,rgba(0,0,0,.05))}
.lx-room-lab{position:absolute;left:10px;font-size:.72rem;font-weight:700;color:#fff}
.lx-room-lab--against{top:8px}.lx-room-lab--for{bottom:8px}
.lx-room-tap{position:absolute;margin:-4.5px 0 0 -4.5px}
.lx-room-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--text,#1a1a1f)}
.lx-room-axis{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--font-mono,ui-monospace,monospace);font-size:.68rem;font-variant-numeric:tabular-nums;color:var(--text-dim,#4b443d)}
.lx-room-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;padding:12px 0 0;list-style:none;border-top:1px solid var(--home-rule,rgba(0,0,0,.08))}
.lx-room-steps li{display:flex;flex-direction:column;gap:2px;font-size:.8rem;line-height:1.3;color:var(--text-dim,#4b443d)}
.lx-room-steps b{font-size:.85rem;color:var(--text,#1a1a1f)}

@media(max-width:900px){
  .lx-split{grid-template-columns:1fr}
  .lx-split--flip > .lx-room{order:0}
}
@media(max-width:560px){
  .lx{width:calc(100vw - 32px)}
  .lx-pair-row{gap:8px}
  .lx-pair-vs{width:30px;height:30px;font-size:.7rem}
  .lx-person-pick{font-size:.9rem}
  .lx-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){.lx-cta{transition:none}}

/* ── Leaderboard podium ─────────────────────────────────────────────
   2026-10-29, "make the leaderboard look cooler", then the same evening
   off a screenshot: "fix the way this is lame and square" and "add more
   depth / shadow". Three raised cards stand on a lit stage, each card
   ends in its own step with the place number on it (first place's step
   is tallest), people sit in ringed circles, and Challenge is a pill. */
#ranked-band .rb-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(10px,1.4vw,18px);margin:0;padding:clamp(26px,3vw,36px) clamp(12px,1.8vw,22px) 0;list-style:none;border-bottom:1px solid var(--home-rule,rgba(0,0,0,.1));background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--accent-solid,#b91c1c) 8%,transparent),transparent 72%)}
#ranked-band .rb-pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 12px 0;text-align:center;cursor:pointer;overflow:hidden;border:1px solid var(--home-rule,rgba(0,0,0,.1));border-bottom:0;border-radius:20px 20px 0 0;background:var(--bg,#fff);box-shadow:var(--home-shadow,0 10px 28px -10px rgba(0,0,0,.18));transition:transform .2s ease,box-shadow .2s ease}
#ranked-band .rb-pod:hover{transform:translateY(-4px);box-shadow:var(--home-shadow-lg,0 24px 48px -18px rgba(0,0,0,.28))}
#ranked-band .rb-pod--1{padding-top:24px;border-color:color-mix(in srgb,var(--accent-solid,#b91c1c) 40%,transparent);box-shadow:var(--home-shadow-lg,0 24px 48px -18px rgba(0,0,0,.28)),0 0 0 4px color-mix(in srgb,var(--accent-solid,#b91c1c) 9%,transparent)}
#ranked-band .rb-pod-place{display:none}
#ranked-band .rb-ava.rb-ava--pod{width:58px;height:58px;border:0;box-shadow:0 0 0 3px var(--bg,#fff),0 0 0 4px var(--home-rule,rgba(0,0,0,.18)),0 10px 20px -8px rgba(0,0,0,.35)}
#ranked-band .rb-pod--1 .rb-ava.rb-ava--pod{width:74px;height:74px;box-shadow:0 0 0 3px var(--bg,#fff),0 0 0 5px var(--accent-solid,#b91c1c),0 14px 26px -10px color-mix(in srgb,var(--accent-solid,#b91c1c) 60%,transparent)}
#ranked-band .rb-pod-nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:8px;font-size:1.02rem;font-weight:800;letter-spacing:-.015em;color:var(--text,#1a1a1f);text-decoration:none}
#ranked-band .rb-pod-nm:hover{color:var(--accent-solid,#b91c1c)}
#ranked-band .rb-pod-val{display:flex;align-items:baseline;gap:5px;font-family:var(--font-mono);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--text,#1a1a1f)}
#ranked-band .rb-pod--1 .rb-pod-val{font-size:1.65rem;color:var(--accent-solid,#b91c1c)}
#ranked-band .rb-pod-val small{font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-dim,#4b443d)}
#ranked-band .rb-pod-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:.8rem;color:var(--text-dim,#4b443d)}
#ranked-band .rb-pod-stats b{color:var(--text,#1a1a1f);font-variant-numeric:tabular-nums}
#ranked-band .rb-pod-chal{margin-top:8px}
/* The step: the bottom of each card, carrying the place number. */
#ranked-band .rb-pod-step{display:grid;place-items:center;align-self:stretch;margin:14px -12px 0;height:38px;font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--text-dim,#4b443d);background:linear-gradient(180deg,color-mix(in srgb,var(--text,#1a1a1f) 4%,transparent),color-mix(in srgb,var(--text,#1a1a1f) 9%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text,#1a1a1f) 10%,transparent)}
#ranked-band .rb-pod--1 .rb-pod-step{height:64px;font-size:1.7rem;color:var(--accent-solid,#b91c1c);background:linear-gradient(180deg,color-mix(in srgb,var(--accent-solid,#b91c1c) 10%,transparent),color-mix(in srgb,var(--accent-solid,#b91c1c) 20%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-solid,#b91c1c) 25%,transparent)}
#ranked-band .rb-pod--2 .rb-pod-step{height:48px}
#ranked-band .rb-pod--3 .rb-pod-step{height:36px}

/* How ratings work, under the globe. */
#ranked-band .rb-how{align-self:stretch;margin-top:14px;padding:18px 20px;border:1px solid var(--home-rule,rgba(0,0,0,.1));border-radius:18px;background:var(--bg,#fff);box-shadow:var(--home-shadow,0 10px 28px -10px rgba(0,0,0,.18));text-align:left}
#ranked-band .rb-how-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--text,#1a1a1f);cursor:pointer;list-style:none}
#ranked-band .rb-how-title::-webkit-details-marker{display:none}
#ranked-band .rb-how-title::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
#ranked-band .rb-how[open] .rb-how-title{margin-bottom:10px}
#ranked-band .rb-how[open] .rb-how-title::after{transform:translateY(2px) rotate(-135deg)}
#ranked-band .rb-how-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
#ranked-band .rb-how-list li{position:relative;padding-left:18px;font-size:.92rem;line-height:1.45;color:var(--text-dim,#4b443d)}
#ranked-band .rb-how-list li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent-solid,#b91c1c)}
#ranked-band .rb-how-list li:last-child{color:var(--text,#1a1a1f);font-weight:600}

@media(max-width:760px){
  #ranked-band .rb-podium{padding:22px 8px 0;gap:8px}
  #ranked-band .rb-pod{padding:16px 4px 0;border-radius:16px 16px 0 0}
  #ranked-band .rb-ava.rb-ava--pod{width:46px;height:46px}
  #ranked-band .rb-pod--1 .rb-ava.rb-ava--pod{width:58px;height:58px}
  #ranked-band .rb-pod-val{font-size:1.1rem}
  #ranked-band .rb-pod--1 .rb-pod-val{font-size:1.35rem}
  #ranked-band .rb-pod-nm{font-size:.86rem}
  #ranked-band .rb-pod-stats{font-size:.7rem}
  #ranked-band .rb-pod-chal{display:none}
  #ranked-band .rb-pod-step{margin:10px -4px 0;height:30px;font-size:1.05rem}
  #ranked-band .rb-pod--1 .rb-pod-step{height:48px;font-size:1.35rem}
  #ranked-band .rb-pod--2 .rb-pod-step{height:38px}
}
@media(prefers-reduced-motion:reduce){#ranked-band .rb-pod{transition:none}}

/* 2026-11-01: the try-it vote under "Watch live. Vote for who is convincing you." */
.lx-vote{margin-top:22px;max-width:520px;padding:16px;border:1px solid var(--home-rule,rgba(0,0,0,.12));border-radius:18px;background:var(--bg,#fff);box-shadow:var(--home-shadow,0 10px 28px -16px rgba(0,0,0,.25))}
.lx-vote-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:1.02rem;color:var(--text,#1a1a1f)}
.lx-vote-ex{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim,#6b645d);border:1px solid var(--home-rule,rgba(0,0,0,.14));border-radius:999px;padding:3px 9px}
.lx-vote-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lx-vote-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:12px 14px;border-radius:14px;border:2px solid;background:transparent;cursor:pointer;font:inherit;text-align:left;transition:background .15s,color .15s,transform .1s}
.lx-vote-btn:active{transform:scale(.98)}
.lx-vote-btn--for{border-color:#15803d;color:#15803d}
.lx-vote-btn--against{border-color:#b91c1c;color:#b91c1c}
.lx-vote-btn--for[aria-pressed="true"]{background:#15803d;color:#fff}
.lx-vote-btn--against[aria-pressed="true"]{background:#b91c1c;color:#fff}
.lx-vote-role{font-size:1.15rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.lx-vote-claim{font-size:.82rem;line-height:1.35;font-weight:600;opacity:.9}
.lx-vote-status{margin:12px 0 0;font-size:.86rem;line-height:1.45;color:var(--text-dim,#4b443d)}
html[data-theme="crimson"] .lx-vote-btn--for:not([aria-pressed="true"]),html[data-theme="dark"] .lx-vote-btn--for:not([aria-pressed="true"]){color:#4ade80;border-color:#22c55e}
html[data-theme="crimson"] .lx-vote-btn--against:not([aria-pressed="true"]),html[data-theme="dark"] .lx-vote-btn--against:not([aria-pressed="true"]){color:#f87171;border-color:#ef4444}
@media(max-width:480px){.lx-vote-sides{gap:8px}.lx-vote-btn{min-height:56px;padding:10px 12px}}

/* 2026-11-01, Aidan: "make some of the words in this text red to stand
   out, like it would be bolded, but for this its red". Upright, same
   weight, brand red; the lighter red on the dark themes. */
.lx-red{font-style:normal;color:#b91c1c}
.lx-sub .lx-red{font-weight:600}
html[data-theme="crimson"] .lx-red,html[data-theme="dark"] .lx-red{color:#f87171}