/* Replay Coach site styles.
   Everything is namespaced with "rc-" so this sheet can also load on the match page, where the viewer has its own class names.
   Colours come from tokens (--bg, --surface, --ink, --muted, --line, --accent, --accent-ink) set per theme in web/themes.js.
   The defaults below are the "slate" theme, which follows the visitor's light or dark setting. */
:root {
  --bg: #e8ecef; --surface: #f6f8f9; --ink: #17212b; --muted: #566573; --line: #cbd3da; --accent: #c96a00; --accent-ink: #ffffff;
  --threat: #c3303b; --good: #0c7f61; --storm: #7440ad; --me: #c96a00; --mate: #0f8f86; --other: #2f6aa0;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --bg: #0f151b; --surface: #17202a; --ink: #e5ebf1; --muted: #93a1af; --line: #2a3642; --accent: #ffb13a; --accent-ink: #14100a; --threat: #ff626c; --good: #41cfa5; --storm: #a873ff; --me: #ffb13a; --mate: #57e0d6; --other: #7fb4e4; color-scheme: dark; }
}
:root[data-theme="dark"] { --me: #ffb13a; --mate: #57e0d6; --other: #7fb4e4; }

/* ---------- derived tones, so every theme gets the same depth without new tokens */
.rc, .rc-nav, .rc-foot {
  --raise: color-mix(in srgb, var(--surface) 82%, var(--ink) 4%);
  --sink: color-mix(in srgb, var(--bg) 88%, #000 12%);
  --hair: color-mix(in srgb, var(--line) 70%, transparent);
  --glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --wide: 1180px;
}

/* ---------- page base (only on our own pages: <body class="rc">) */
.rc { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
.rc *, .rc *::before, .rc *::after, .rc-nav *, .rc-foot * { box-sizing: border-box; }
.rc a { color: inherit; }
.rc h1, .rc h2, .rc h3, .rc h4 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: 0.003em; margin: 0; text-wrap: balance; }
.rc p { margin: 0; text-wrap: pretty; }
.rc code { font-family: ui-monospace, Consolas, monospace; font-size: 0.82em; background: color-mix(in srgb, var(--ink) 10%, transparent); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rc [hidden] { display: none !important; }
.rc :focus-visible, .rc-nav :focus-visible, .rc-foot :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.rc-wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; }
.rc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rc-skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 6px; font-weight: 600; z-index: 100; }
.rc-skip:focus { left: 12px; }

/* ---------- navigation */
.rc-nav { position: sticky; top: 0; z-index: 50; font-family: var(--body); color: var(--ink); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--hair); }
.rc-nav-in { max-width: var(--wide); margin-inline: auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 28px; }
.rc-mark { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.rc-mark svg { width: 26px; height: 26px; flex: none; }
.rc-mark b { color: var(--accent); font-weight: 700; }
.rc-nav-in > nav { flex: 1; min-width: 0; }
.rc-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rc-links a { display: block; padding: 8px 12px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s, background .15s; }
.rc-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.rc-links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 6px 6px 0 0; }
.rc-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rc-acts form { margin: 0; }
.rc-who { font-size: 13px; color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--hair); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }
.rc-burger svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .rc-nav-in { gap: 12px; height: 58px; padding: 0 16px; }
  .rc-burger { display: inline-flex; }
  .rc-nav-in > nav, .rc-acts { display: none; }
  .rc-nav[data-open] .rc-nav-in > nav { display: block; order: 3; flex: 0 0 100%; }
  .rc-nav[data-open] .rc-acts { display: flex; }
  .rc-nav[data-open] .rc-nav-in { height: auto; flex-wrap: wrap; padding-bottom: 16px; }
  .rc-nav[data-open] .rc-mark { height: 58px; }
  .rc-nav[data-open] .rc-links { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 6px; border-top: 1px solid var(--hair); }
  .rc-nav[data-open] .rc-links a { font-size: 17px; padding: 12px 8px; }
  .rc-nav[data-open] .rc-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 6px 6px 0; }
  .rc-nav[data-open] .rc-acts { order: 4; flex: 0 0 100%; margin: 8px 0 0; flex-wrap: wrap; }
  .rc-nav[data-open] .rc-acts .rc-btn, .rc-nav[data-open] .rc-acts form { flex: 1; }
  .rc-nav[data-open] .rc-acts form .rc-btn { width: 100%; }
  .rc-nav[data-open] .rc-who { flex: 0 0 100%; max-width: none; }
}

/* ---------- buttons */
.rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .2s ease, background .15s, border-color .15s; }
.rc-btn:active { transform: translateY(1px); }
.rc-btn svg { width: 18px; height: 18px; flex: none; }
.rc-btn.is-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0 var(--glow), 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset; }
.rc-btn.is-primary:hover { box-shadow: 0 6px 28px -6px var(--glow), 0 0 0 4px var(--glow), 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset; }
.rc-btn.is-secondary { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); border-color: var(--hair); }
.rc-btn.is-secondary:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); border-color: var(--line); }
.rc-btn.is-quiet { background: transparent; color: var(--muted); padding: 0 10px; }
.rc-btn.is-quiet:hover { color: var(--ink); }
.rc-btn.is-danger { background: transparent; color: var(--threat); border-color: color-mix(in srgb, var(--threat) 45%, transparent); }
.rc-btn.is-danger:hover { background: color-mix(in srgb, var(--threat) 12%, transparent); }
.rc-btn.is-google { background: #fff; color: #1f1f1f; border-color: #747775; }
.rc-btn.is-big { min-height: 54px; padding: 0 26px; font-size: 17px; border-radius: 10px; }
.rc-btn[disabled], .rc-btn[aria-disabled="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); border-color: var(--hair); cursor: not-allowed; box-shadow: none; }
.rc-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rc-linkbtn:hover { color: var(--ink); }
.rc-more { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.rc-more:hover { color: var(--accent); }

/* ---------- type helpers */
.rc-kicker { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.rc-h1 { font-size: clamp(46px, 7.4vw, 92px); letter-spacing: -0.005em; }
.rc-h2 { font-size: clamp(34px, 4.6vw, 56px); }
.rc-h3 { font-size: 26px; }
.rc-lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 54ch; }
.rc-sub { color: var(--muted); max-width: 60ch; }
.rc-fine { font-size: 14px; color: var(--muted); }
.rc-num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- sections */
.rc-sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.rc-sec.is-tight { padding: clamp(40px, 6vw, 72px) 0; }
.rc-sec.is-band { background: var(--sink); border-block: 1px solid var(--hair); }
.rc-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 780px; }
.rc-head.is-center { margin-inline: auto; text-align: center; justify-items: center; }
/* the map grid: a faint tactical grid used behind heroes and bands */
.rc-gridbg { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(to right, var(--hair) 1px, transparent 1px), linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 20%, transparent 78%); }

/* ---------- hero */
.rc-hero { position: relative; padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 8vw, 104px); overflow: hidden; isolation: isolate; }
.rc-hero::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: -320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--storm) 34%, transparent), transparent 62%); }
.rc-hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.rc-hero-copy { display: grid; gap: 22px; justify-items: start; }
.rc-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.rc-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.rc-ticks li { display: inline-flex; align-items: center; gap: 8px; }
.rc-ticks svg { width: 16px; height: 16px; color: var(--good); flex: none; }
@media (max-width: 960px) { .rc-hero-in { grid-template-columns: 1fr; } }

/* ---------- the live replay (hero) and other "screen" frames */
.rc-screen { position: relative; border-radius: 14px; border: 1px solid var(--line); background: var(--sink); box-shadow: 0 30px 80px -30px #000a, 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset; overflow: hidden; }
.rc-screen-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.rc-screen-bar b { font-family: var(--display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.rc-tag { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--hair); color: var(--muted); }
.rc-replay { position: relative; aspect-ratio: 1 / 0.86; }
.rc-replay svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc-hud { position: absolute; left: 12px; top: 12px; display: flex; align-items: baseline; gap: 12px; padding: 7px 12px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--hair); font-size: 13px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rc-hud b { font-family: var(--display); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1; }
.rc-hud i { font-style: normal; color: var(--storm); font-weight: 600; }
.rc-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-left: 4px solid var(--accent); font-size: 14.5px; line-height: 1.4; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .35s ease, transform .35s ease; }
.rc-cap[data-off] { opacity: 0; transform: translateY(8px); }
.rc-cap strong { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 18px; letter-spacing: .02em; margin-bottom: 3px; }

/* verdict chips: same five verdicts the coaching uses */
.rc-v { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.rc-v::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rc-v.is-good { color: var(--good); } .rc-v.is-mistake { color: var(--threat); } .rc-v.is-unlucky { color: var(--muted); } .rc-v.is-plan { color: var(--other); } .rc-v.is-mixed { color: var(--accent); }

/* ---------- cards and panels */
.rc-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 26px; }
.rc-card.is-flat { background: transparent; }
.rc-card h3 { font-size: 24px; margin-bottom: 8px; }
.rc-card p { color: var(--muted); }
.rc-stack { display: grid; gap: 18px; }
.rc-cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.rc-split.is-flip > :first-child { order: 2; }
@media (max-width: 900px) { .rc-split { grid-template-columns: 1fr; } .rc-split.is-flip > :first-child { order: 0; } }
.rc-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); margin-bottom: 16px; }
.rc-icon svg { width: 22px; height: 22px; }
.rc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.rc-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.rc-list svg { width: 18px; height: 18px; margin-top: 4px; color: var(--good); }
.rc-list.is-no svg { color: var(--muted); }
.rc-list b { font-weight: 600; }
.rc-list span { color: var(--muted); }

/* ---------- feature tabs */
.rc-tabs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.rc-tablist { display: grid; gap: 6px; }
.rc-tab { text-align: left; background: transparent; color: var(--ink); border: 1px solid transparent; border-left: 3px solid var(--hair); border-radius: 0 10px 10px 0; padding: 16px 18px; cursor: pointer; font: inherit; display: grid; gap: 4px; transition: background .15s, border-color .15s; }
.rc-tab b { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: .01em; }
.rc-tab span { color: var(--muted); font-size: 15px; }
.rc-tab:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rc-tab[aria-selected="true"] { background: var(--surface); border-color: var(--hair); border-left-color: var(--accent); }
.rc-panels { position: relative; min-height: 380px; }
@media (max-width: 900px) { .rc-tabs { grid-template-columns: 1fr; } .rc-tablist { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; padding-bottom: 6px; } .rc-tab { border-left: 0; border-bottom: 3px solid var(--hair); border-radius: 10px 10px 0 0; } .rc-tab[aria-selected="true"] { border-bottom-color: var(--accent); } .rc-tab span { display: none; } }

/* ---------- mock interface pieces (all illustrative, built from the real page's parts) */
.rc-mock { font-size: 14.5px; }
.rc-mock-row { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--hair); }
.rc-mock-row:first-child { border-top: 0; }
.rc-mock-row time { font-family: var(--display); font-weight: 700; font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.rc-mock-row h4 { font-family: var(--body); font-weight: 600; font-size: 15.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 3px; }
.rc-mock-row p { color: var(--muted); }
.rc-mock-row small { display: block; color: var(--muted); font-weight: 600; font-size: 12.5px; margin-bottom: 2px; }
.rc-beats { margin: 0; padding: 6px 16px 14px; list-style: none; display: grid; gap: 9px; }
.rc-beats li { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: baseline; }
.rc-beats time { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-beats .is-you { color: var(--good); font-weight: 600; } .rc-beats .is-them { color: var(--threat); font-weight: 600; }
.rc-bars { display: grid; gap: 12px; padding: 18px 16px; }
.rc-bar { display: grid; grid-template-columns: 62px 1fr 52px; gap: 12px; align-items: center; font-size: 13.5px; color: var(--muted); }
.rc-bar i { display: block; height: 10px; border-radius: 5px; background: var(--hair); position: relative; overflow: hidden; }
.rc-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 5px; background: var(--c, var(--accent)); transition: width .9s cubic-bezier(.2,.7,.2,1); }
.rc-bar b { color: var(--ink); font-family: var(--display); font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.rc-js [data-reveal]:not(.is-in) .rc-bar i::after { width: 0; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 16px 16px; font-size: 13px; color: var(--muted); }
.rc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rc-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.rc-quote { padding: 18px 18px 20px; display: grid; gap: 12px; }
.rc-quote p { color: var(--ink); font-size: 15.5px; }
.rc-quote .rc-next { color: var(--muted); border-top: 1px solid var(--hair); padding-top: 12px; }
.rc-quote .rc-next b { color: var(--ink); }

/* ---------- steps (a real sequence, so numbered) */
.rc-steps { counter-reset: step; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); }
.rc-steps li { counter-increment: step; padding: 28px 26px 30px; border-left: 1px solid var(--hair); display: grid; gap: 8px; align-content: start; }
.rc-steps li:first-child { border-left: 0; }
.rc-steps li::before { content: counter(step); font-family: var(--display); font-weight: 700; font-size: 60px; line-height: .9; color: var(--accent); }
.rc-steps h3 { font-size: 25px; }
.rc-steps p { color: var(--muted); font-size: 16px; }
@media (max-width: 800px) { .rc-steps { grid-template-columns: 1fr; } .rc-steps li { border-left: 0; border-top: 1px solid var(--hair); } .rc-steps li:first-child { border-top: 0; } }
.rc-flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; position: relative; }
.rc-flow > li { counter-increment: step; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 26px; padding-bottom: clamp(36px, 5vw, 64px); position: relative; }
.rc-flow > li::before { content: counter(step); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 30px; background: var(--bg); border: 2px solid var(--accent); color: var(--accent); position: relative; z-index: 1; }
.rc-flow > li::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: linear-gradient(var(--accent), var(--hair)); }
.rc-flow > li:last-child::after { display: none; }
.rc-flow h3 { font-size: 32px; margin: 8px 0 10px; }
.rc-flow .rc-flow-body { display: grid; gap: 16px; }
.rc-flow .rc-flow-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.rc-flow .rc-flow-2 > div { display: grid; gap: 16px; align-content: start; }
@media (max-width: 960px) { .rc-flow .rc-flow-2 { grid-template-columns: 1fr; } }
.rc-files { margin: 0; padding: 6px 0; list-style: none; font-size: 14px; }
.rc-files li { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 9px 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-files li.is-pick { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.rc-pathbar { margin: 12px 16px 6px; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--hair); background: var(--bg); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 640px) { .rc-flow > li { grid-template-columns: 50px minmax(0, 1fr); gap: 0 16px; } .rc-flow > li::before { width: 40px; height: 40px; font-size: 22px; } .rc-flow > li::after { left: 19px; top: 40px; } .rc-flow h3 { margin-top: 2px; font-size: 27px; } }

/* ---------- comparison and plan tables */
.rc-tablewrap { position: relative; overflow-x: auto; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); }
.rc-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 16px; }
.rc-table th, .rc-table td { padding: 15px 20px; text-align: left; border-top: 1px solid var(--hair); vertical-align: top; }
.rc-table thead th { border-top: 0; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.rc-table tbody th { font-weight: 500; color: var(--muted); width: 34%; }
@media (max-width: 620px) {
  .rc-table { min-width: 0; font-size: 14px; table-layout: fixed; }
  .rc-table th, .rc-table td { padding: 12px 10px; overflow-wrap: anywhere; }
  .rc-table thead th { font-size: 17px; }
  .rc-table tbody th { width: 32%; }
  .rc-yes, .rc-no { gap: 6px; align-items: flex-start; }
  .rc-yes svg, .rc-no svg { flex: none; margin-top: 2px; }
}
.rc-table .is-ours { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rc-table thead .is-ours { box-shadow: inset 0 3px 0 var(--accent); }
.rc-yes, .rc-no { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.rc-yes svg { width: 18px; height: 18px; color: var(--good); } .rc-no svg { width: 18px; height: 18px; color: var(--muted); }
.rc-no { color: var(--muted); }

/* ---------- pricing */
.rc-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; max-width: 900px; margin-inline: auto; }
.rc-plan { position: relative; display: grid; gap: 18px; align-content: start; grid-template-rows: auto auto auto 1fr auto; padding: 30px 28px 28px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface); }
.rc-plan.is-main { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 46%); box-shadow: 0 30px 70px -40px var(--glow); }
.rc-plan h3 { font-size: 30px; }
.rc-plan .rc-price { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 1; }
.rc-plan .rc-price small { font-family: var(--body); font-weight: 500; font-size: 15px; color: var(--muted); }
.rc-plan .rc-price.is-soon { font-size: 34px; }
.rc-ribbon { position: absolute; top: -13px; left: 26px; background: var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; }
@media (max-width: 760px) { .rc-plans { grid-template-columns: 1fr; } }

/* ---------- faq */
.rc-faq { display: grid; gap: 10px; }
.rc-faq details { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.rc-faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 600; font-size: 17.5px; position: relative; border-radius: 12px; }
.rc-faq summary::-webkit-details-marker { display: none; }
.rc-faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.rc-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.rc-faq details > div { padding: 0 20px 20px; color: var(--muted); display: grid; gap: 10px; max-width: 76ch; }
.rc-faq details > div b { color: var(--ink); font-weight: 600; }
.rc-faqtools { display: grid; gap: 14px; margin-bottom: 26px; }
.rc-search { width: 100%; min-height: 50px; padding: 0 16px 0 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface) no-repeat 16px 50% / 18px; color: var(--ink); font: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1af' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
.rc-search::placeholder { color: var(--muted); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chip { border: 1px solid var(--hair); background: transparent; color: var(--muted); border-radius: 99px; padding: 8px 14px; font: 500 14px/1 var(--body); cursor: pointer; }
.rc-chip:hover { color: var(--ink); border-color: var(--line); }
.rc-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rc-faqgroup { margin: 0 0 14px; font-size: 28px; }
[data-group] + [data-group] { margin-top: 40px; }

/* ---------- call to action band */
.rc-final { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(64px, 9vw, 112px) 0; border-top: 1px solid var(--hair); }
.rc-final::before { content: ""; position: absolute; z-index: -1; inset: auto 50% -60% auto; width: 1100px; height: 700px; transform: translateX(50%); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--storm) 30%, transparent), transparent 64%); }
.rc-final .rc-wrap { display: grid; gap: 22px; justify-items: center; }

/* ---------- footer */
.rc-foot { border-top: 1px solid var(--hair); background: var(--sink); color: var(--muted); font-family: var(--body); font-size: 14.5px; }
.rc-foot-in { max-width: var(--wide); margin-inline: auto; padding: 48px 24px 28px; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.rc-foot h4 { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.rc-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.rc-foot a { color: var(--muted); text-decoration: none; }
.rc-foot a.rc-mark, .rc-foot a.rc-mark:hover { color: var(--ink); text-decoration: none; }
.rc-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rc-foot-about { display: grid; gap: 12px; align-content: start; max-width: 34ch; }
.rc-foot-legal { max-width: var(--wide); margin-inline: auto; padding: 18px 24px 30px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; font-size: 13px; }
@media (max-width: 800px) { .rc-foot-in { grid-template-columns: 1fr 1fr; } .rc-foot-about { grid-column: 1 / -1; } }

/* ---------- page headers for inner pages */
.rc-pagehead { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--hair); }
.rc-pagehead::before { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -220px; top: -420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--storm) 28%, transparent), transparent 62%); }
.rc-pagehead .rc-wrap { display: grid; gap: 18px; }
.rc-pagehead .rc-h1 { font-size: clamp(42px, 6vw, 76px); }

/* ---------- dashboard */
.rc-dash { padding-block: clamp(28px, 4vw, 48px) 72px; display: grid; gap: 26px; }
.rc-dash-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.rc-dash-top h1 { font-size: clamp(34px, 4.4vw, 50px); }
.rc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rc-tile { padding: 18px 20px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface); display: grid; gap: 4px; align-content: space-between; }
.rc-tile dt { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rc-tile dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-tile dd small { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; }
@media (max-width: 820px) { .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-dash-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 960px) { .rc-dash-grid { grid-template-columns: 1fr; } }
.rc-drop { position: relative; display: grid; justify-items: center; gap: 8px; padding: 38px 18px; border: 2px dashed var(--line); border-radius: 12px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.rc-drop:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.rc-drop:hover, .rc-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rc-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-drop strong { font-family: var(--display); font-size: 27px; font-weight: 700; }
.rc-drop svg { width: 34px; height: 34px; color: var(--accent); }
.rc-prog { display: grid; gap: 12px; margin-top: 16px; }
.rc-track { height: 8px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.rc-track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.rc-track.is-busy i { width: 35%; animation: rc-slide 1.4s ease-in-out infinite; }
@keyframes rc-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.rc-stages { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.rc-stages li { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--hair); }
.rc-stages li.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.rc-stages li.is-done { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); }
.rc-note { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: 15.5px; }
.rc-note.is-bad { border-color: color-mix(in srgb, var(--threat) 60%, transparent); }
.rc-note.is-ok { border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.rc-notes { display: grid; gap: 10px; }
.rc-notes:empty { display: none; }
.rc-pay { display: grid; gap: 8px; justify-items: start; }
.rc-plan form, .rc-plan form .rc-btn { width: 100%; }
.rc-dash-top form { margin: 0; }
.rc-matches { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rc-match { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px 22px; align-items: center; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); transition: border-color .15s, transform .15s; }
.rc-match:hover { border-color: var(--line); transform: translateY(-1px); }
.rc-match a.rc-match-t { font-family: var(--display); font-size: 24px; font-weight: 700; text-decoration: none; text-transform: capitalize; line-height: 1.1; }
.rc-match a.rc-match-t:hover { color: var(--accent); }
.rc-match small { display: block; color: var(--muted); font-size: 13.5px; }
.rc-match .rc-stat { text-align: right; font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rc-match .rc-stat small { font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 640px) { .rc-match { grid-template-columns: 1fr auto; } .rc-match .rc-match-main { grid-column: 1 / -1; } }
.rc-focus { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.rc-focus li { counter-increment: f; display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.rc-focus li::before { content: counter(f); font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--accent); line-height: 1; }
.rc-focus b { display: block; font-weight: 600; }
.rc-focus span { color: var(--muted); font-size: 15px; }
.rc-empty { display: grid; gap: 10px; justify-items: start; padding: 26px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.rc-empty b { color: var(--ink); font-family: var(--display); font-size: 24px; }

/* ---------- long text pages */
.rc-prose { max-width: 70ch; padding-block: clamp(36px, 5vw, 64px) 80px; }
.rc-prose h1 { font-size: clamp(40px, 5vw, 60px); margin-bottom: 8px; }
.rc-prose h2 { font-size: 28px; margin: 36px 0 10px; }
.rc-prose p { margin: 0 0 12px; }
.rc-prose ul { margin: 0 0 12px; padding-left: 22px; }
.rc-prose li { margin-bottom: 7px; }

/* ---------- motion: one orchestrated entrance in the hero, quiet reveals elsewhere */
/* reveals only hide content once the script has confirmed it is running (html.rc-js), so nothing stays invisible without it */
.rc-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.rc-js [data-reveal].is-in { opacity: 1; transform: none; }
.rc-hero-copy > * { animation: rc-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.rc-hero-copy > :nth-child(2) { animation-delay: .07s; } .rc-hero-copy > :nth-child(3) { animation-delay: .14s; } .rc-hero-copy > :nth-child(4) { animation-delay: .21s; } .rc-hero-copy > :nth-child(5) { animation-delay: .28s; }
.rc-hero .rc-screen { animation: rc-rise .9s .18s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rc-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .rc-hero-copy > *, .rc-hero .rc-screen { animation: none; }
  .rc-bar i::after, .rc-btn, .rc-cap { transition: none; }
  .rc-track.is-busy i { animation: none; width: 100%; opacity: .5; }
}

/* without the site script: show every tab panel, and lay the phone menu out in the open */
html:not(.rc-js) .rc-panels > [hidden] { display: block !important; margin-top: 18px; }
@media (max-width: 900px) {
  html:not(.rc-js) .rc-burger { display: none; }
  html:not(.rc-js) .rc-nav-in { height: auto; flex-wrap: wrap; padding-block: 8px; }
  html:not(.rc-js) .rc-nav-in > nav { display: block; flex: 0 0 100%; order: 3; }
  html:not(.rc-js) .rc-links { flex-wrap: wrap; }
  html:not(.rc-js) .rc-acts { display: flex; margin-left: auto; }
  html:not(.rc-js) .rc-who { display: none; }
}

/* ==========================================================================
   2026-10 redesign: one path from "saw a Short" to "uploaded a replay".
   The one loud element is the demo stage. Everything else stays quiet.
   ========================================================================== */
.rc-h1 { font-size: clamp(48px, 7.6vw, 100px); line-height: .94; letter-spacing: -0.01em; }
.rc-hero-copy { gap: 20px; }
.rc-hero .rc-lede { color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
/* buttons sit on a darker base edge, like the in-game ones the audience knows */
.rc-btn.is-primary { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.rc-btn.is-primary:hover { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 0 0 4px var(--glow); }
.rc-btn.is-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.rc-btn.is-big { font-size: 18px; font-weight: 700; }

/* touch screens only: a phone cannot reach replay files */
.rc-phone { display: none; margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 15.5px; line-height: 1.4; max-width: 46ch; }
.rc-phone b { color: var(--accent); font-weight: 600; }
@media (hover: none) and (pointer: coarse) { .rc-phone { display: block; } }

/* the demo stage */
.rc-demo-sec { padding-top: clamp(40px, 6vw, 72px); }
.rc-demo { position: relative; height: min(78vh, 760px); min-height: 520px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--sink); box-shadow: 0 40px 90px -40px #000c; }
.rc-demo-poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px;
  background-image: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--storm) 26%, transparent) 0, transparent 55%), linear-gradient(to right, var(--hair) 1px, transparent 1px), linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px; }
.rc-demo-poster::before { content: ""; width: 220px; height: 220px; border-radius: 50%; border: 2px dashed color-mix(in srgb, #fff 55%, transparent); position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); pointer-events: none; }
.rc-demo-poster .rc-btn { position: relative; }
.rc-demo-poster a { color: var(--ink); }
.rc-demo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
@media (max-width: 640px) { .rc-demo { height: 82vh; min-height: 560px; border-radius: 12px; margin-inline: -8px; } }

/* the banner on the full-screen demo page */
.rc-demobar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font-family: var(--body); font-size: 15px; }
.rc-demobar p { margin: 0; } .rc-demobar b { font-weight: 700; }
.rc-demobar .rc-btn.is-primary { background: var(--accent-ink); color: var(--accent); box-shadow: none; min-height: 38px; }

/* getting a replay: a real sequence, so numbered */
.rc-get { counter-reset: get; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.rc-get > li { counter-increment: get; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 3px solid var(--accent); }
.rc-get > li::before { content: counter(get); font-family: var(--display); font-weight: 700; font-size: 64px; line-height: .85; color: var(--accent); }
.rc-get-t { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; margin: 0; }
.rc-get p { color: var(--muted); }
.rc-get p b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .rc-get { grid-template-columns: 1fr; } .rc-get > li { grid-template-columns: 52px 1fr; column-gap: 14px; } .rc-get > li::before { grid-row: span 3; font-size: 52px; } }
/* inside the narrow upload-page card the steps always stack */
.rc-card .rc-get { grid-template-columns: 1fr; gap: 18px; }
.rc-card .rc-get > li { grid-template-columns: 40px 1fr; column-gap: 12px; padding-top: 0; border-top: 0; }
.rc-card .rc-get > li::before { grid-row: span 3; font-size: 40px; }
.rc-card .rc-get-t { font-size: 22px; }
.rc-copy { display: flex; align-items: stretch; gap: 8px; margin-top: 4px; max-width: 520px; }
.rc-copy code { flex: 1; min-width: 0; display: flex; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--sink); border: 1px solid var(--line); font-size: 13.5px; }
.rc-copy .rc-btn { min-height: 0; }