/* The redesigned pages (landing, games, profile, creator). Ported from the approved preview by docs/landing-preview/port-css.pl.
   Everything lives under the .rd wrapper and every class starts with rd-, so none of it can touch Bootstrap or the older site styles.
   The site has one look, graphite (a neutral near-black with orange), the same one site.css sets for the page itself. */
.rd {
  --bg: #060607;
  --ink: #f4f4f6;
  --soft: #b5b5bf;
  --mute: #85858f;
  --card: #17171b;
  --card-soft: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.12);
  --accent: #fd9425;
  --accent-deep: #fd9425;
  --on-accent: #1a0f00;
  --link: #fd9425;
  --chart: #fd9425;
  --panel: #2b2d31;
  --panel-deep: #1e1f22;
  --panel-row: #40424a;
  --panel-text: #f2f3f5;
  --panel-grey: #949ba4;
  --tile: #ffffff;
  --tile-edge: #c9c9d2;
  --tile-ink: #17171b;
  --bonus: #ffd9b8;
  --bonus-edge: #e0640c;
  --bonus-ink: #8a3604;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI Variable Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}
.rd a { color: var(--link); }
.rd h1, .rd h2, .rd h3 { font-family: var(--font-head); text-wrap: balance; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.rd p { margin: 0; }
.rd [hidden] { display: none !important; }

/* Layout: a short page. Hero with a live-sign mock, two utility panels, Weave on its own, a games grid, a profile band, four trust cards, one closing call. */
/* The site has one look (graphite), so there is nothing to switch. */

.rd .rd-wrap { max-width: 1120px; margin-inline: auto; padding-inline: 20px; }

/* preview ribbon */

/* nav */

/* buttons */
.rd .rd-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 16px var(--font-body); text-decoration: none; padding: 14px 24px; border-radius: 12px; }
.rd .rd-btn.rd-primary { background: var(--accent-deep); color: var(--on-accent); box-shadow: 0 10px 24px -10px var(--accent-deep); }
.rd .rd-btn.rd-ghost { color: var(--ink); border: 1px solid var(--line); background: var(--card-soft); }
.rd .rd-link-more { font-weight: 600; text-decoration: none; }
.rd .rd-link-more::after { content: " \2192"; }

.rd .rd-eyebrow { font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); }

/* hero */
.rd .rd-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding-block: 56px 72px; }
.rd .rd-hero h1 { font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; font-weight: 700; margin-block: 14px 20px; }
.rd .rd-hero h1 em { font-style: normal; color: var(--link); }
.rd .rd-hero .rd-lead { font-size: clamp(17px, 2vw, 21px); color: var(--soft); max-width: 34em; }
.rd .rd-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.rd .rd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
.rd .rd-chip { font: 600 13px var(--font-mono); padding: 7px 11px; border-radius: 8px; background: var(--card-soft); border: 1px solid var(--line); color: var(--link); }
.rd .rd-chips .rd-all { font-weight: 600; font-size: 14px; margin-inline-start: 4px; }

/* discord-style mocks */
.rd .rd-dc { background: var(--panel); color: var(--panel-text); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); font-size: 15px; }
.rd .rd-dc .rd-server { background: var(--panel-deep); margin: -14px -14px 12px; padding: 14px 18px; border-radius: 18px 18px 0 0; font: 700 16px var(--font-head); }
.rd .rd-dc .rd-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--panel-grey); }
.rd .rd-dc .rd-row.rd-live { background: var(--panel-row); color: var(--panel-text); font-weight: 700; font-size: 17px; padding: 13px 12px; }
.rd .rd-dc .rd-row .rd-lock { margin-inline-start: auto; font-size: 13px; opacity: 0.8; }
.rd .rd-dc .rd-cat { font: 700 11px var(--font-body); letter-spacing: 0.08em; color: var(--panel-grey); padding: 14px 12px 4px; }
.rd .rd-dc .rd-ico { width: 18px; text-align: center; flex: none; }
.rd .rd-dc .rd-embed { background: #2f3136; border-left: 4px solid var(--accent); border-radius: 6px; padding: 12px 14px; margin-top: 8px; }
.rd .rd-dc .rd-embed b { display: block; font-size: 16px; margin-bottom: 4px; }
.rd .rd-dc .rd-embed span { color: #c7cad1; }
.rd .rd-dc .rd-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rd .rd-dc .rd-btns i { font-style: normal; background: #4e5058; padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 14px; }
.rd .rd-dc .rd-msg { display: flex; gap: 12px; align-items: flex-start; }
.rd .rd-dc .rd-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #ffac2a, #dc2a0a); flex: none; }
.rd .rd-dc .rd-who { font-weight: 700; }
.rd .rd-dc .rd-tag { font-size: 10px; font-weight: 700; background: #5865f2; border-radius: 4px; padding: 2px 5px; margin-inline-start: 6px; vertical-align: 2px; }
.rd .rd-chart { background: var(--panel-deep); border-radius: 12px; padding: 14px 14px 12px; margin-top: 12px; }
.rd .rd-chart small { color: var(--panel-grey); font-weight: 600; font-size: 12px; }
.rd .rd-bars { display: flex; align-items: flex-end; gap: 5px; height: 84px; margin-top: 10px; }
.rd .rd-bars i { flex: 1; background: var(--chart); border-radius: 4px 4px 2px 2px; display: block; }

/* feature rows */
.rd .rd-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 64px; border-top: 1px solid var(--line); }
.rd .rd-panel.rd-flip .rd-copy { order: 2; }
.rd .rd-panel h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; margin-block: 10px 14px; }
.rd .rd-panel .rd-sub { color: var(--soft); font-size: 18px; max-width: 30em; }
.rd .rd-panel ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; }
.rd .rd-panel li { padding-inline-start: 22px; position: relative; font-weight: 500; }
.rd .rd-panel li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.rd .rd-panel .rd-note { color: var(--mute); font-size: 14px; margin-top: -10px; margin-bottom: 22px; }

/* weave */
.rd .rd-weave { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); }
.rd .rd-weave .rd-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.rd .rd-weave .rd-top b { font: 700 20px var(--font-head); }
.rd .rd-weave .rd-top span { font: 600 12px var(--font-mono); color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase; }
.rd .rd-tiles { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.rd .rd-tile { aspect-ratio: 0.88; background: var(--tile); border-radius: 10px; box-shadow: 0 4px 0 var(--tile-edge), 0 8px 14px -8px rgba(13, 33, 56, 0.4); display: grid; place-items: center; font: 700 clamp(15px, 2.6vw, 28px) var(--font-head); color: var(--tile-ink); position: relative; }
.rd .rd-tile.rd-bonus { background: var(--bonus); box-shadow: 0 4px 0 var(--bonus-edge), 0 8px 14px -8px rgba(13, 33, 56, 0.4); color: var(--bonus-ink); }
.rd .rd-tile sub { position: absolute; right: 5px; bottom: 3px; font: 500 9px var(--font-body); opacity: 0.7; }
.rd .rd-weave .rd-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.rd .rd-pill { font-weight: 600; font-size: 13px; padding: 7px 12px; border-radius: 99px; background: var(--card-soft); border: 1px solid var(--line); color: var(--soft); }

/* games */
.rd .rd-games { padding-block: 64px; border-top: 1px solid var(--line); }
.rd .rd-games h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; margin-block: 10px 28px; }
.rd .rd-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rd .rd-game { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0; }
.rd .rd-game code { font: 600 13px var(--font-mono); color: var(--link); }
.rd .rd-game h3 { font-size: 22px; margin-block: 8px 6px; }
.rd .rd-game p { color: var(--soft); font-size: 15px; }
.rd .rd-games .rd-more { margin-top: 26px; }

/* more band */
.rd .rd-more-band { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px 32px; box-shadow: var(--shadow); }
.rd .rd-more-band h3 { font-size: 26px; margin-block: 6px 6px; }
.rd .rd-more-band p { color: var(--soft); max-width: 36em; }
.rd .rd-mini-card { width: 230px; background: var(--panel-deep); color: var(--panel-text); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.rd .rd-mini-card .rd-top { display: flex; gap: 10px; align-items: center; }
.rd .rd-mini-card .rd-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #ffb04a, #f97316); }
.rd .rd-mini-card b { display: block; font-family: var(--font-head); }
.rd .rd-mini-card small { color: var(--panel-grey); }
.rd .rd-mini-card .rd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rd .rd-mini-card .rd-tags i { font-style: normal; font-size: 12px; padding: 4px 9px; border-radius: 99px; background: #3a3c44; }

/* trust cards */
.rd .rd-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 56px 24px; }
.rd .rd-trust div { background: var(--card-soft); border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-width: 0; }
.rd .rd-trust b { display: block; font: 700 18px var(--font-head); margin-bottom: 6px; }
.rd .rd-trust span { color: var(--soft); font-size: 14px; }

/* closing */
.rd .rd-close { text-align: center; padding-block: 72px 56px; }
.rd .rd-close h2 { font-size: clamp(30px, 4.4vw, 50px); }
.rd .rd-close .rd-cta-row { justify-content: center; }
.rd .rd-foot-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; padding-block: 8px 40px; font-size: 14px; }
.rd .rd-foot-links a { color: var(--mute); text-decoration: none; }

@media (max-width: 860px) {
  .rd .rd-hero, .rd .rd-panel { grid-template-columns: 1fr; gap: 36px; }
  .rd .rd-panel.rd-flip .rd-copy { order: 0; }
  .rd .rd-grid6 { grid-template-columns: repeat(2, 1fr); }
  .rd .rd-trust { grid-template-columns: repeat(2, 1fr); }
  .rd .rd-more-band { grid-template-columns: 1fr; }
  .rd .rd-mini-card { width: 100%; max-width: 320px; }
  .rd .rd-hero { padding-block: 32px 48px; }
  .rd .rd-panel, .rd .rd-games { padding-block: 48px; }
}
@media (max-width: 520px) {
  .rd .rd-grid6, .rd .rd-trust { grid-template-columns: 1fr; }
}

/* ---- games: dropdown extras, hub and game pages ---- */
.rd a.rd-game { display: block; color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.rd a.rd-game:hover { border-color: var(--link); transform: translateY(-2px); }
.rd a.rd-game:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .rd a.rd-game { transition: none; } .rd a.rd-game:hover { transform: none; } }

.rd .rd-crumbs { font-size: 14px; color: var(--mute); padding-top: 4px; }
.rd .rd-crumbs a { color: var(--mute); }
.rd .rd-gp-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; padding-block: 36px 64px; }
.rd .rd-gp-hero h1 { font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; margin-block: 12px 16px; }
.rd .rd-gp-hero .rd-lead { font-size: clamp(17px, 2vw, 21px); color: var(--soft); max-width: 32em; }
.rd .rd-cmd-chip { display: inline-block; font: 600 14px var(--font-mono); padding: 7px 12px; border-radius: 8px; background: var(--card-soft); border: 1px solid var(--line); color: var(--link); margin-top: 18px; }
.rd .rd-gp-sec { padding-block: 56px; border-top: 1px solid var(--line); }
.rd .rd-gp-sec h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; margin-bottom: 24px; }
.rd ol.rd-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 16px; max-width: 46em; }
.rd ol.rd-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.rd ol.rd-steps li::before { content: counter(s); font: 700 15px var(--font-mono); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--link); }
.rd ol.rd-steps b { display: block; margin-bottom: 2px; }
.rd ol.rd-steps span { color: var(--soft); }
.rd .rd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.rd .rd-fact { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; }
.rd .rd-fact small { display: block; font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin-bottom: 6px; }
.rd .rd-fact b { font: 700 20px var(--font-head); }
.rd .rd-fact span { display: block; color: var(--soft); font-size: 14px; margin-top: 4px; }
.rd .rd-cmds { display: grid; }
.rd .rd-cmds div { display: flex; gap: 8px 18px; align-items: baseline; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rd .rd-cmds code { font: 600 14px var(--font-mono); color: var(--link); min-width: 210px; }
.rd .rd-cmds span { color: var(--soft); flex: 1; min-width: 220px; }
.rd .rd-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; max-width: 46em; }
.rd .rd-cta-band { margin-block: 8px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: var(--shadow); }
.rd .rd-cta-band h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 6px; }
.rd .rd-cta-band p { color: var(--soft); }
.rd .rd-more-games { display: flex; gap: 10px; flex-wrap: wrap; }
.rd .rd-more-games a { font-weight: 600; font-size: 15px; text-decoration: none; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-soft); color: var(--ink); }
.rd .rd-more-games a:hover { background: var(--card); }
.rd .rd-hub-head { padding-block: 24px 8px; }
.rd .rd-hub-head h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; margin-block: 12px 14px; }
.rd .rd-hub-head .rd-lead { font-size: clamp(17px, 2vw, 21px); color: var(--soft); max-width: 36em; }
.rd .rd-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-block: 32px 24px; }
.rd .rd-hub-grid .rd-game { display: flex; flex-direction: column; gap: 0; }
.rd .rd-hub-grid .rd-game .rd-meta { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--mute); }
.rd .rd-hub-grid .rd-game .rd-play-link { color: var(--link); font-weight: 600; font-size: 14px; margin-top: 10px; }
.rd .rd-hub-grid .rd-game .rd-play-link::after { content: " \2192"; }
.rd .rd-dc .rd-big { font: 700 44px var(--font-mono); letter-spacing: 0.06em; text-align: center; padding: 14px 0 6px; }
.rd .rd-dc .rd-line { color: #c7cad1; font-size: 14px; margin-top: 4px; }
.rd .rd-dc .rd-digits { font: 700 34px var(--font-mono); letter-spacing: 0.18em; text-align: center; padding: 14px 0 6px; color: #ffd9b8; }
@media (max-width: 860px) {
  .rd .rd-gp-hero { grid-template-columns: 1fr; gap: 36px; padding-block: 24px 40px; }
  .rd .rd-hub-grid { grid-template-columns: repeat(2, 1fr); }
  .rd .rd-gp-sec { padding-block: 40px; }
}
@media (max-width: 520px) { .rd .rd-hub-grid { grid-template-columns: 1fr; } .rd .rd-cmds code { min-width: 0; } }

/* phone and small tablet: logo, log in and the look button on the first row, the links on their own row beneath */
@media (max-width: 860px) {
}

/* ---- profile preview ---- */
.rd .rd-btn.rd-dark { background: rgba(255, 255, 255, 0.1); color: #f2f3f5; border: 1px solid rgba(255, 255, 255, 0.2); }
.rd .rd-pf { --pf: #f97316; padding-bottom: 32px; }
.rd .rd-pf-head { background: var(--panel-deep); color: var(--panel-text); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.rd .rd-pf-banner { height: 150px; background: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.22), transparent 38%), radial-gradient(circle at 82% 70%, rgba(0, 0, 0, 0.28), transparent 45%), linear-gradient(120deg, var(--pf), #4f46e5 85%); }
.rd .rd-pf-body { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 22px; align-items: end; padding: 0 28px 14px; }
.rd .rd-pf-avatar { width: 108px; height: 108px; border-radius: 50%; margin-top: -54px; border: 6px solid var(--panel-deep); background: linear-gradient(135deg, #ffb04a, #f97316); }
.rd .rd-pf-id { min-width: 0; padding-top: 14px; }
.rd .rd-pf-id h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.1; color: #fff; }
.rd .rd-pf-tagline { color: #c7cad1; margin-top: 4px; }
.rd .rd-pf-stats { color: var(--panel-grey); font-size: 14px; margin-top: 6px; }
.rd .rd-pf-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 14px; }
.rd .rd-pf-actions .rd-btn { padding: 11px 20px; font-size: 15px; }
.rd .rd-pf-actions .rd-btn.rd-primary { background: var(--pf); color: #14110d; box-shadow: none; }
.rd .rd-pf-badges { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 28px 18px; align-items: center; }
.rd .rd-pf-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 99px; background: #2f3138; color: #e3e5e8; }
.rd .rd-pf-badge i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.rd .rd-pf-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #c7cad1; text-decoration: none; padding: 6px 4px; }
.rd .rd-pf-link:hover { color: #fff; }
.rd .rd-pf-tabs { display: flex; gap: 4px; padding: 0 20px; border-top: 1px solid #34363d; overflow-x: auto; scrollbar-width: none; }
.rd .rd-pf-tabs::-webkit-scrollbar { display: none; }
.rd .rd-pf-tabs button { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--panel-grey); font: 600 15px var(--font-body); padding: 15px 14px 12px; cursor: pointer; white-space: nowrap; }
.rd .rd-pf-tabs button:hover { color: #fff; }
.rd .rd-pf-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--pf); }
.rd .rd-pf-tabs button:focus-visible { outline: 2px solid var(--pf); outline-offset: -4px; border-radius: 8px; }
.rd .rd-pf-panel { padding-top: 20px; }
.rd .rd-pf-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
.rd .rd-pf-stack { display: grid; gap: 20px; min-width: 0; }
.rd .rd-pf-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; min-width: 0; }
.rd .rd-pf-card h2 { font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.rd .rd-pf-card p { color: var(--ink); }
.rd .rd-pf-common-pct { font: 700 22px var(--font-display, var(--font-body)); color: var(--pf); }
.rd .rd-pf-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rd .rd-pf-more { appearance: none; background: none; border: 0; padding: 0; color: var(--link); font: 600 14px var(--font-body); cursor: pointer; }
.rd .rd-pf-more:hover { text-decoration: underline; }
.rd .rd-pf-card p.rd-pf-muted { color: var(--mute); font-size: 14px; margin-top: 10px; }
.rd .rd-pf-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.rd .rd-pf-group small { width: 76px; font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); }
.rd .rd-pf-pill { padding: 6px 13px; border-radius: 99px; font-weight: 600; font-size: 14px; background: color-mix(in srgb, var(--pf) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--pf) 38%, var(--line)); color: var(--ink); }
.rd .rd-ph { border-radius: 12px; aspect-ratio: 4 / 3; }
.rd .rd-ph.rd-a { background: linear-gradient(135deg, #fbbf24, #f97316 60%, #b45309); }
.rd .rd-ph.rd-b { background: linear-gradient(135deg, #a3a3ad, #52525b 70%, #18181b); }
.rd .rd-ph.rd-c { background: linear-gradient(135deg, #34d399, #047857 65%, #064e3b); }
.rd .rd-ph.rd-d { background: linear-gradient(135deg, #f472b6, #be185d 65%, #4c1d95); }
.rd .rd-ph.rd-e { background: linear-gradient(135deg, #fdba74, #c2410c 70%, #431407); }
.rd .rd-ph.rd-f { background: linear-gradient(135deg, #fde68a, #f59e0b 60%, #b45309); }
.rd .rd-ph.rd-g { background: linear-gradient(135deg, #5eead4, #0d9488 60%, #134e4a); }
.rd .rd-ph.rd-h { background: linear-gradient(135deg, #fda4af, #e11d48 65%, #881337); }
.rd .rd-pf-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rd .rd-pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rd .rd-pf-jam { display: flex; gap: 14px; align-items: center; }
.rd .rd-pf-jam .rd-art { width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, #f43f5e, #f97316 60%, #fbbf24); flex: none; }
.rd .rd-pf-jam b { display: block; }
.rd .rd-pf-jam span { color: var(--soft); font-size: 14px; }
.rd .rd-pf-faces { display: flex; }
.rd .rd-pf-faces i { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--card); margin-inline-start: -10px; display: block; }
.rd .rd-pf-faces i:first-child { margin-inline-start: 0; }
.rd .rd-pf-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rd .rd-pf-list li { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rd .rd-pf-list li:last-child { border-bottom: 0; }
.rd .rd-pf-list li > i { width: 44px; height: 44px; border-radius: 50%; flex: none; display: block; }
.rd .rd-pf-list b { display: block; }
.rd .rd-pf-list small { font-weight: 500; color: var(--mute); margin-inline-start: 8px; }
.rd .rd-pf-list span { color: var(--soft); font-size: 14px; }
.rd .rd-pf-list.rd-comments li { align-items: flex-start; }
.rd .rd-pf-compose { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--soft); }
.rd .rd-pf-compose .rd-btn { padding: 10px 18px; font-size: 15px; }
.rd .rd-pf-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rd .rd-pf-numbers b { display: block; font: 700 34px var(--font-head); line-height: 1.05; }
.rd .rd-pf-numbers span { color: var(--soft); font-size: 14px; }
.rd .rd-pf-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 8px; }
.rd .rd-pf-bars i { flex: 1; background: var(--pf); border-radius: 5px 5px 2px 2px; display: block; }
.rd .rd-pf-level { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rd .rd-pf-level span { color: var(--soft); font-size: 14px; }
.rd .rd-pf-meter { height: 10px; border-radius: 99px; background: var(--line); margin-top: 12px; overflow: hidden; }
.rd .rd-pf-meter i { display: block; height: 100%; background: var(--pf); border-radius: 99px; }
@media (max-width: 860px) {
  .rd .rd-pf-body { grid-template-columns: 1fr; padding-inline: 20px; }
  .rd .rd-pf-avatar { width: 92px; height: 92px; margin-top: -46px; }
  .rd .rd-pf-id { padding-top: 0; }
  .rd .rd-pf-actions { padding-top: 6px; }
  .rd .rd-pf-badges { padding-inline: 20px; }
  .rd .rd-pf-cols { grid-template-columns: 1fr; }
  .rd .rd-pf-grid { grid-template-columns: repeat(2, 1fr); }
  .rd .rd-pf-group small { width: 100%; }
}


/* ---- banner button and popup ---- */
.rd .rd-pf-bannerwrap { position: relative; }
.rd .rd-pf-banner { background-size: cover; background-position: center; }
.rd .rd-pf-banner-edit { position: absolute; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: rgba(12, 12, 18, 0.62); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); font: 600 13px var(--font-body); cursor: pointer; backdrop-filter: blur(6px); }
.rd .rd-pf-banner-edit:hover { background: rgba(12, 12, 18, 0.82); }
.rd .rd-pf-banner-edit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rd .rd-pf-banner-edit .rd-lock { display: none; opacity: 0.85; }
.rd [data-plan="free"] .rd-pf-banner-edit .rd-lock { display: block; }
.rd .rd-pf-dialog { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 22px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); }
.rd .rd-pf-dialog::backdrop { background: rgba(8, 10, 22, 0.62); }
.rd .rd-bd-inner { position: relative; padding: 28px; }
.rd .rd-bd-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--soft); font: 400 26px/1 var(--font-body); cursor: pointer; }
.rd .rd-bd-x:hover { background: var(--card-soft); color: var(--ink); }
.rd .rd-bd-x:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.rd .rd-pf-dialog h2 { font-size: 24px; line-height: 1.15; margin-bottom: 8px; padding-right: 36px; }
.rd .rd-bd-lead { color: var(--soft); }
.rd .rd-bd-drop { display: grid; gap: 4px; justify-items: center; text-align: center; margin-top: 18px; padding: 26px 16px; border: 2px dashed var(--line); border-radius: 16px; cursor: pointer; background: var(--card-soft); }
.rd .rd-bd-drop:hover, .rd-bd-drop.rd-over { border-color: var(--link); }
.rd .rd-bd-drop span { color: var(--soft); }
.rd .rd-bd-drop small { color: var(--mute); }
.rd .rd-bd-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.rd .rd-bd-drop:has(+ .rd-bd-file:focus-visible) { border-color: var(--link); outline: 2px solid var(--link); outline-offset: 3px; }
.rd .rd-bd-preview { margin-top: 16px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.rd .rd-bd-preview-img { aspect-ratio: 3 / 1; background-size: cover; background-position: center; }
.rd .rd-bd-msg { min-height: 1.4em; margin-top: 10px; font-size: 14px; }
.rd .rd-bd-msg { color: #fca5a5; }
.rd .rd-bd-small { color: var(--mute); font-size: 13px; margin-top: 4px; }
.rd .rd-bd-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.rd .rd-bd-actions .rd-btn { padding: 11px 20px; font-size: 15px; }
.rd .rd-bd-actions .rd-btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.rd .rd-bd-spacer { flex: 1; }
.rd .rd-bd-lock { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--link); margin-bottom: 14px; }

/* ---- welcome screen (profile type) and creator profile ---- */
.rd .rd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd .rd-fork { padding-block: 24px 48px; }
.rd .rd-fork h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; margin-block: 10px 12px; }
.rd .rd-fork .rd-lead { font-size: 19px; color: var(--soft); }
.rd .rd-fork-form { margin-top: 28px; }
.rd .rd-fork-grid { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rd .rd-fork-opt { position: relative; display: block; }
.rd .rd-fork-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.rd .rd-fork-card { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 28px; border-radius: 22px; border: 2px solid var(--line); background: var(--card); transition: border-color 0.15s, box-shadow 0.15s; }
.rd .rd-fork-opt:hover .rd-fork-card { border-color: color-mix(in srgb, var(--link) 55%, var(--line)); }
.rd .rd-fork-opt input:checked + .rd-fork-card { border-color: var(--link); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 22%, transparent); }
.rd .rd-fork-opt input:focus-visible + .rd-fork-card { outline: 3px solid var(--link); outline-offset: 3px; }
.rd .rd-fork-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--link); }
.rd .rd-fork-title { font: 700 26px var(--font-head); letter-spacing: -0.02em; }
.rd .rd-fork-sub { color: var(--soft); }
.rd .rd-fork-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.rd .rd-fork-list li { padding-inline-start: 22px; position: relative; font-weight: 500; }
.rd .rd-fork-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.rd .rd-fork-foot { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; color: var(--mute); }
.rd .rd-fork-types { border: 0; padding: 0; margin: 24px 0 0; }
.rd .rd-fork-types legend { font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 10px; }
.rd .rd-type-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rd .rd-type-row label { position: relative; }
.rd .rd-type-row input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rd .rd-type-row span { display: inline-block; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-soft); font-weight: 600; font-size: 15px; }
.rd .rd-type-row input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rd .rd-type-row input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 3px; }
.rd .rd-fork-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.rd .rd-fork-note { color: var(--mute); font-size: 14px; }
.rd .rd-fork-peek { margin-top: 28px; color: var(--mute); font-size: 14px; }

.rd .rd-cta-big { display: inline-flex; align-items: center; gap: 8px; }
.rd .rd-only-you { margin-inline-start: 6px; font: 600 10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: #34363d; color: #c7cad1; }
.rd .rd-next-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rd .rd-next-when { display: block; font: 700 28px var(--font-head); letter-spacing: -0.02em; }
.rd .rd-next-title { display: block; color: var(--soft); margin-top: 2px; }
.rd .rd-next-count { display: block; color: var(--link); font-weight: 600; margin-top: 4px; }
.rd .rd-feat { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center; }
.rd .rd-feat-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(135deg, #fd9425, #c2410c 60%, #17171b); display: grid; place-items: center; overflow: hidden; }
.rd .rd-feat-thumb.rd-a { background: linear-gradient(135deg, #fbbf24, #f97316 55%, #b45309); }
.rd .rd-feat-thumb.rd-b { background: linear-gradient(135deg, #34d399, #047857 60%, #064e3b); }
.rd .rd-feat-thumb.rd-c { background: linear-gradient(135deg, #f43f5e, #f97316 60%, #fbbf24); }
.rd .rd-play { width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; }
.rd .rd-play::after { content: ""; margin-left: 4px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.rd .rd-note { font-size: 52px; color: rgba(255, 255, 255, 0.9); }
.rd .rd-feat-info { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.rd .rd-feat-info span { color: var(--soft); font-size: 14px; }
.rd .rd-feat-info .rd-btn, .rd-feat-card .rd-btn { padding: 10px 18px; font-size: 15px; margin-top: 6px; }
.rd .rd-content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rd .rd-feat-card { display: grid; gap: 8px; justify-items: start; }
.rd .rd-feat-card .rd-feat-thumb { width: 100%; }
.rd .rd-feat-card span { color: var(--soft); font-size: 14px; }
.rd .rd-linkhub { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rd .rd-linkhub a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-soft); color: var(--ink); text-decoration: none; }
.rd .rd-linkhub a:hover { border-color: var(--link); }
.rd .rd-linkhub a::after { content: "\2192"; color: var(--link); font-weight: 700; margin-inline-start: auto; order: 3; }
.rd .rd-linkhub span { color: var(--soft); font-size: 14px; order: 2; margin-inline-start: auto; margin-inline-end: 8px; }
.rd .rd-srv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rd .rd-srv-icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #fd9425, #ff5a1f); color: #fff; display: grid; place-items: center; font: 700 18px var(--font-head); flex: none; }
.rd .rd-srv-head b { display: block; font: 700 20px var(--font-head); }
.rd .rd-srv-head span { color: var(--soft); font-size: 14px; }
.rd .rd-srv .rd-btn { padding: 11px 20px; font-size: 15px; margin-top: 14px; }
.rd .rd-fans { list-style: none; margin: 0; padding: 0; display: grid; }
.rd .rd-fans li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); counter-increment: rank; }
.rd .rd-fans li:last-child { border-bottom: 0; }
.rd .rd-fans li::before { content: counter(rank); width: 22px; font: 700 14px var(--font-mono); color: var(--mute); text-align: center; }
.rd .rd-fans { counter-reset: rank; }
.rd .rd-fans i { width: 38px; height: 38px; border-radius: 50%; flex: none; display: block; }
.rd .rd-fans b { display: block; }
.rd .rd-fans span { color: var(--soft); font-size: 13px; }
.rd .rd-sched { list-style: none; margin: 0; padding: 0; display: grid; }
.rd .rd-sched li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rd .rd-sched li:last-child { border-bottom: 0; }
.rd .rd-sched .rd-when { font: 700 20px var(--font-head); }
.rd .rd-sched span { color: var(--soft); }
.rd .rd-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rd .rd-statgrid b { display: block; font: 700 40px var(--font-head); line-height: 1.05; letter-spacing: -0.02em; }
.rd .rd-statgrid span { color: var(--soft); font-size: 14px; }
.rd .rd-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rd .rd-hbars li { display: grid; grid-template-columns: 130px 1fr 44px; gap: 12px; align-items: center; font-size: 14px; }
.rd .rd-hbars li > div { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rd .rd-hbars li i { display: block; height: 100%; border-radius: 99px; background: var(--pf); }
.rd .rd-hbars b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .rd .rd-fork-grid { grid-template-columns: 1fr; }
  .rd .rd-feat { grid-template-columns: 1fr; }
  .rd .rd-content-grid { grid-template-columns: 1fr; }
  .rd .rd-statgrid { grid-template-columns: 1fr; gap: 12px; }
  .rd .rd-hbars li { grid-template-columns: 100px 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) { .rd .rd-fork-card { transition: none; } }


/* ---- the home page's showcase, ledger, closing panel and buttons (ported from the preview's src/shared.css by one-off script) ---- */
/* ---- bottom of the home page: why Sigil as a numbered list, and the closing "three steps" panel ---- */
.rd .rd-ledger { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; padding-block: 64px 24px; }
.rd .rd-ledger-head { position: sticky; top: calc(var(--nav-offset, 0px) + 28px); }
.rd .rd-ledger-head h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; margin-block: 12px 14px; }
.rd .rd-ledger-head p { color: var(--soft); font-size: 18px; max-width: 20em; }
.rd .rd-ledger-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rd .rd-ledger-list li { --t: var(--accent); position: relative; overflow: hidden; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 26px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--t) 30%, var(--line));
  background: linear-gradient(100deg, color-mix(in srgb, var(--t) 16%, var(--card)) 0%, var(--card) 62%);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.rd .rd-ledger-list li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--t); opacity: 0.85; }
.rd .rd-ledger-list li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--t) 60%, var(--line)); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--t) 55%, transparent); }
.rd .rd-ledger-list .rd-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: var(--t); background: color-mix(in srgb, var(--t) 20%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 35%, transparent); }
.rd .rd-ledger-list h3 { font-size: 23px; }
.rd .rd-ledger-list p { margin-top: 4px; color: var(--soft); font-size: 17px; max-width: 34em; }
.rd .rd-ledger-list .rd-n { font: 700 46px/1 var(--font-head); letter-spacing: -0.04em; color: color-mix(in srgb, var(--t) 38%, transparent); transition: color 0.25s ease; }
.rd .rd-ledger-list li:hover .rd-n { color: color-mix(in srgb, var(--t) 80%, transparent); }
.rd .rd-ledger-list code, .rd .rd-go code { font: 600 0.9em var(--font-mono); color: var(--link); }
@media (max-width: 560px) { .rd .rd-ledger-list li { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; } .rd .rd-ledger-list .rd-n { display: none; } }

.rd .rd-go { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; margin-block: 56px 72px; padding: clamp(28px, 5vw, 60px); border-radius: 28px; border: 1px solid var(--line);
  background: radial-gradient(70% 100% at 0% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--card); }
.rd .rd-go h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; margin-block: 12px 0; max-width: 12em; }
.rd .rd-go .rd-cta-row { margin-top: 32px; }
.rd .rd-go-note { margin-top: 18px; color: var(--soft); font-size: 15px; }
.rd .rd-go-steps { list-style: none; margin: 0; padding: 0; }
.rd .rd-go-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 30px; }
.rd .rd-go-steps li:last-child { padding-bottom: 0; }
.rd .rd-go-steps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; background: linear-gradient(var(--accent), transparent); opacity: 0.55; }
.rd .rd-go-steps .rd-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 700 17px var(--font-head); color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.rd .rd-go-steps b { display: block; font: 700 19px var(--font-head); padding-top: 2px; }
.rd .rd-go-steps .rd-t { color: var(--soft); font-size: 15px; }

/* ---- the "Add to your server" buttons: a rounded rectangle that breathes a warm glow, with a soft glint crossing it every few seconds ---- */
.rd .rd-btn.rd-beacon { --b1: #fd9425; --b2: #ffb83d; position: relative; overflow: hidden; isolation: isolate; gap: 10px; border-radius: 14px; padding: 15px 28px; color: var(--on-accent);
  background: linear-gradient(120deg, var(--b1), var(--b2)); box-shadow: 0 10px 28px -10px var(--b1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: beacon-breathe 3.2s ease-in-out infinite; transition: transform 0.2s ease; }
.rd .rd-btn.rd-beacon::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 28%; transform: translateX(-160%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: beacon-glint 4.4s ease-in-out infinite; }
.rd .rd-btn.rd-beacon:hover { transform: translateY(-2px); }
.rd .rd-btn.rd-beacon:active { transform: translateY(0); }
.rd .rd-btn.rd-beacon:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.rd .rd-btn.rd-beacon .rd-mark-i { flex: none; }
.rd .rd-btn.rd-beacon .rd-arr { display: inline-block; transition: transform 0.2s ease; }
.rd .rd-btn.rd-beacon:hover .rd-arr { transform: translateX(5px); }
@keyframes beacon-breathe { 0%, 100% { box-shadow: 0 10px 28px -10px var(--b1), inset 0 1px 0 rgba(255, 255, 255, 0.35); } 50% { box-shadow: 0 14px 40px -8px var(--b1), 0 0 30px 2px color-mix(in srgb, var(--b1) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); } }
@keyframes beacon-glint { 0%, 55% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(520%) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) { .rd .rd-btn.rd-beacon, .rd .rd-btn.rd-beacon::after { animation: none; } }
@media (max-width: 860px) { .rd .rd-ledger, .rd .rd-go { grid-template-columns: 1fr; gap: 32px; } .rd .rd-ledger-head { position: static; } }

/* ---- hero showcase: the mock fades away to the right and the next one arrives, one feature at a time ---- */
.rd .rd-showcase { position: relative; display: grid; gap: 16px; }
.rd .rd-sc-stage { display: grid; }
.rd .rd-sc-slide { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transform: translateX(-30px); transition: opacity 0.8s ease, transform 0.8s ease, visibility 0s linear 0.8s; }
.rd .rd-sc-slide.rd-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 1; }
.rd .rd-sc-slide.rd-out { opacity: 0; visibility: visible; transform: translateX(46px); transition-delay: 0s; }
.rd .rd-sc-slide.rd-instant { transition: none; }
.rd .rd-sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-inline: 6px; }
.rd .rd-sc-caption { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--soft); font-size: 15px; }
.rd .rd-sc-caption b { color: var(--ink); font: 700 16px var(--font-head); }
.rd .rd-sc-caption code { font: 600 13px var(--font-mono); color: var(--link); }
.rd .rd-sc-dots { display: flex; gap: 8px; align-items: center; }
.rd .rd-sc-dots button { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; cursor: pointer; background: color-mix(in srgb, var(--ink) 28%, transparent); transition: width 0.3s ease, background 0.3s ease; }
.rd .rd-sc-dots button::before { content: ""; position: absolute; inset: -8px -3px; }
.rd .rd-sc-dots button[aria-current="true"] { width: 26px; background: var(--accent); }
.rd .rd-sc-dots button:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* the mocks inside it */
.rd .rd-dc .rd-mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.rd .rd-dc .rd-btns i.rd-on { background: #5865f2; }
.rd .rd-dc .rd-btns i.rd-wave { background: #5865f2; }
.rd .rd-dc .rd-btns i u { text-decoration: none; opacity: 0.85; margin-inline-start: 4px; }
.rd .rd-wcard { position: relative; overflow: hidden; margin-top: 10px; border-radius: 12px; padding: 20px 22px; display: flex; align-items: center; gap: 18px; min-height: 124px;
  background: radial-gradient(120% 150% at 0% 0%, #4a3320 0%, transparent 55%), radial-gradient(90% 130% at 100% 100%, #f97316 0%, transparent 62%), linear-gradient(135deg, #26262c, #17171b); }
.rd .rd-wc-ring { flex: none; width: 88px; height: 88px; border-radius: 50%; padding: 4px; background: conic-gradient(#fd9425, #ffc552, #ff5a1f, #ffe066, #fd9425); box-shadow: 0 0 34px rgba(253, 148, 37, 0.55); animation: wc-spin 8s linear infinite; }
.rd .rd-wc-ring i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #17171b; background: linear-gradient(135deg, #ffb04a, #f97316); animation: wc-spin 8s linear infinite reverse; }
.rd .rd-wc-text { min-width: 0; display: grid; gap: 3px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.rd .rd-wc-text small { font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.rd .rd-wc-text b { font: 700 28px/1.1 var(--font-head); }
.rd .rd-wc-text span { color: rgba(255, 255, 255, 0.88); font-size: 14px; }
.rd .rd-wc-spark { position: absolute; color: #ffd9a0; font-size: 14px; animation: wc-twinkle 3s ease-in-out infinite; }
.rd .rd-wc-spark.rd-s1 { top: 12px; right: 22px; }
.rd .rd-wc-spark.rd-s2 { bottom: 16px; right: 74px; font-size: 20px; animation-delay: -1s; }
.rd .rd-wc-spark.rd-s3 { top: 44px; right: 96px; font-size: 10px; animation-delay: -2s; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
@keyframes wc-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
.rd .rd-sc-letters { display: grid; grid-template-columns: repeat(3, 56px); gap: 8px; justify-content: center; margin: 14px 0 10px; }
.rd .rd-sc-letters i { font-style: normal; display: grid; place-items: center; height: 56px; border-radius: 10px; background: var(--tile); color: var(--tile-ink); box-shadow: 0 4px 0 var(--tile-edge); font: 700 26px var(--font-head); }
.rd .rd-sc-letters i.rd-bonus { background: var(--bonus); color: var(--bonus-ink); box-shadow: 0 4px 0 var(--bonus-edge); }
.rd .rd-sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rd .rd-sc-stats div { background: var(--panel-deep); border-radius: 10px; padding: 10px 12px; }
.rd .rd-sc-stats b { display: block; font: 700 20px var(--font-head); }
.rd .rd-sc-stats span { color: var(--panel-grey); font-size: 12px; }
.rd .rd-sc-profile { display: flex; gap: 12px; align-items: center; padding: 4px 0; }
.rd .rd-sc-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #ffb04a, #f97316); flex: none; }
.rd .rd-sc-profile b { display: block; font: 700 20px var(--font-head); }
.rd .rd-sc-profile small { color: var(--panel-grey); }
.rd .rd-sc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rd .rd-sc-tags i { font-style: normal; font-size: 13px; padding: 5px 11px; border-radius: 99px; background: #3a3c44; }

/* small cards that hang out into the page margins on wide screens, so the extra width is used */
.rd .rd-peek { display: none; position: absolute; z-index: 2; background: var(--panel-deep); color: var(--panel-text); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); font-size: 13px; }
.rd .rd-peek b { display: block; font: 700 18px var(--font-head); }
.rd .rd-peek span { color: var(--panel-grey); }
.rd .rd-peek i { display: block; height: 6px; border-radius: 99px; margin-top: 8px; background: rgba(255, 255, 255, 0.12); position: relative; overflow: hidden; }
.rd .rd-peek i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 50%); background: linear-gradient(90deg, #fd9425, #ffc552); border-radius: inherit; }
.rd .rd-peek-level { left: -56px; bottom: 54px; min-width: 190px; animation: peek-float 6s ease-in-out infinite; }
.rd .rd-peek-streak { right: -34px; top: -22px; animation: peek-float 6s ease-in-out -3s infinite; }
@keyframes peek-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (min-width: 1360px) { .rd .rd-peek { display: block; } }
@media (min-width: 1500px) {
  .rd .rd-wrap { max-width: 1400px; }
  .rd .rd-hero { grid-template-columns: 1.05fr 0.95fr; gap: 80px; }
  .rd .rd-grid6 { grid-template-columns: repeat(6, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rd .rd-sc-slide, .rd .rd-sc-slide.rd-out { transform: none; transition-duration: 0.01s; }
  .rd .rd-wc-ring, .rd .rd-wc-ring i, .rd .rd-wc-spark, .rd .rd-peek-level, .rd .rd-peek-streak { animation: none; }
}


/* On wide screens the home page uses more of the width (the top bar and the page share the same container). */
@media (min-width: 1500px) {
  body.landing .container { max-width: 1480px; }
}

/* ---- the colour roles and bump reminder pictures, and the minigame cards ---- */
.rd .rd-cr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 2px 0 14px; }
.rd .rd-cr-grid i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.rd .rd-cr-grid i.rd-sel { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px #f2f3f5; }
.rd .rd-cr-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd .rd-cr-look { border-radius: 10px; padding: 10px 12px; font-size: 14px; min-width: 0; }
.rd .rd-cr-look small { display: block; font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 4px; }
.rd .rd-cr-look b { color: var(--c); font-size: 16px; }
.rd .rd-cr-look.rd-dark { background: #313338; color: #dbdee1; }
.rd .rd-cr-look.rd-light { background: #ffffff; color: #313338; }
.rd .rd-cr-chat { display: grid; gap: 6px; margin-top: 12px; padding: 12px 14px; background: var(--panel-deep); border-radius: 12px; font-size: 14px; color: #dbdee1; }
.rd .rd-cr-chat b { color: var(--c); margin-inline-end: 6px; }
.rd .rd-dc .rd-bump-text { font-size: 15px; color: #dbdee1; }
.rd .rd-dc .rd-bump-text code { background: #1e1f22; border-radius: 4px; padding: 1px 5px; font-size: 13px; color: #f2f3f5; }
.rd .rd-bump-set { background: var(--panel-deep); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.rd .rd-bump-set small { display: block; color: var(--panel-grey); font: 600 12px var(--font-body); }
.rd .rd-bump-set .rd-field { margin-top: 6px; padding: 9px 11px; border: 1px solid #3a3c44; border-radius: 8px; background: #17181b; color: #dbdee1; font: 500 13px var(--font-mono); overflow-wrap: anywhere; }
.rd .rd-bump-set .rd-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rd .rd-bump-set .rd-pills i { font-style: normal; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(88, 101, 242, 0.3); color: #c9cdfb; }
.rd .rd-game .rd-demo { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel-deep); color: var(--panel-text); display: grid; gap: 2px; }
.rd .rd-game .rd-demo span { color: var(--panel-grey); font-size: 12px; font-weight: 600; }
.rd .rd-game .rd-demo b { font: 700 22px var(--font-mono); letter-spacing: 0.08em; color: #ffd9b8; }
.rd .rd-grid6.rd-grid3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---- phones: the small "more" links on the landing, games and creator pages are easy to press ---- */
@media (max-width: 767.98px) {
  .rd .rd-link-more, .rd .rd-chips .rd-all { display: inline-block; padding-block: 8px; }
}

/* ---- the extra feature mocks of the longer showcase: scheduled posts, counters, invites, threads, role menus ---- */
.rd .rd-dc .rd-sc-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.rd .rd-dc .rd-sc-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; background: var(--panel-deep); border-radius: 10px; padding: 11px 14px; }
.rd .rd-dc .rd-sc-list b { font: 700 15px var(--font-head); color: #ffd9b8; }
.rd .rd-dc .rd-sc-list span { color: #c7cad1; font-size: 14px; }
.rd .rd-dc .rd-sc-thread { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; background: var(--panel-deep); border-radius: 8px; font-size: 14px; }
.rd .rd-dc .rd-sc-thread b { font-weight: 700; }
.rd .rd-dc .rd-sc-thread em { margin-inline-start: auto; font-style: normal; color: var(--panel-grey); font-size: 13px; }
/* a quiet stretch between two messages: a thin line with the length of the silence on it (the Pulse Check and UwU lock mocks) */
.rd .rd-dc .rd-sc-gap { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--panel-grey); font-size: 12px; }
.rd .rd-dc .rd-sc-gap::before, .rd .rd-dc .rd-sc-gap::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }

/* ---- the home page: the centered hero and the feature rail (Pages/Shared/_HomeHero.cshtml) ---- */

/* the centered hero: orbit rings and a gold star on each side, from the "Minimal centered" picture */
.rd .rd-hero-c { position: relative; display: block; text-align: center; overflow: hidden; isolation: isolate; border-radius: 28px; padding-block: 92px 72px; margin-top: 8px; }
.rd .rd-hero-c .rd-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-inline: calc(7% + 40px); }   /* everything stays between the two stars (they sit at 7% and 93%) */
.rd .rd-hero-c h1 { font-size: clamp(40px, 7.2vw, 88px); max-width: 11em; margin-block: 14px 18px; }   /* 11em: two lines on a wide screen instead of one line out to the stars */
.rd .rd-hero-c .rd-lead { max-width: 28em; margin-inline: auto; }
.rd .rd-hero-c .rd-cta-row, .rd .rd-hero-c .rd-chips { justify-content: center; }
.rd .rd-orbits { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rd .rd-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.rd .rd-ring-1 { width: 54%; height: 88%; }
.rd .rd-ring-2 { width: 72%; height: 128%; }
.rd .rd-ring-3 { width: 86%; height: 170%; border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 16%, transparent 30%, transparent 70%, #000 84%, #000 100%); mask-image: linear-gradient(90deg, #000 0, #000 16%, transparent 30%, transparent 70%, #000 84%, #000 100%); }
.rd .rd-spark { position: absolute; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; fill: var(--accent); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 85%, transparent)); animation: rd-twinkle 4.6s ease-in-out infinite; }
.rd .rd-spark-l { left: 7%; }
.rd .rd-spark-r { left: 93%; animation-delay: -2.3s; }
@keyframes rd-twinkle { 0%, 100% { opacity: 0.75; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.12) rotate(8deg); } }

/* the info on one side, the stage on the other, inside one wide panel */
.rd .rd-pin .rd-showcase { gap: 26px; margin-top: 12px; }
.rd .rd-sc-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 52px; align-items: center; min-height: 440px; padding: 44px 52px; border: 1px solid var(--line); border-radius: 28px; background: var(--card-soft); box-shadow: var(--shadow); }
.rd .rd-sc-info { display: grid; gap: 4px; justify-items: start; }
.rd .rd-sc-info h3 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.04; margin-block: 8px 12px; }
.rd .rd-sc-info p { color: var(--soft); font-size: 18px; max-width: 24em; }
.rd .rd-sc-info .rd-sc-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.rd .rd-sc-meta code { font: 600 14px var(--font-mono); color: var(--link); padding: 7px 13px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rd .rd-pin .rd-sc-stage { width: 100%; max-width: 540px; margin-inline: auto; min-height: 330px; }
.rd .rd-pin .rd-sc-stage .rd-dc { font-size: 16px; padding: 18px; }
.rd .rd-pin .rd-sc-stage .rd-dc .rd-server { margin: -18px -18px 14px; padding: 16px 20px; }

/* the rail: stars on a line that light up in turn; the stage stays pinned while the page scrolls through the features */
.rd .rd-pin { position: relative; height: calc(100vh + var(--n, 10) * 38vh); }
.rd .rd-pin-in { position: sticky; top: calc(var(--nav-offset, 72px) + 12px); }
.rd .rd-rail { position: relative; display: flex; justify-content: space-between; padding-inline: 4px; }
.rd .rd-rail::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 1px; background: var(--line); }
.rd .rd-rail::after { content: ""; position: absolute; left: 22px; top: calc(50% - 0.5px); height: 2px; width: calc((100% - 44px) * var(--prog, 0)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); transition: width 0.5s ease; }
.rd .rd-rail button { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 0 0 transparent); transition: filter 0.4s ease; }
.rd .rd-rail button i { display: block; width: 12px; height: 12px; background: color-mix(in srgb, var(--ink) 30%, transparent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transition: width 0.4s ease, height 0.4s ease, background 0.4s ease; }
.rd .rd-rail button[data-lit="true"] i { background: var(--accent); width: 18px; height: 18px; }
.rd .rd-rail button[aria-current="true"] { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 90%, transparent)); }
.rd .rd-rail button[aria-current="true"] i { width: 34px; height: 34px; }
.rd .rd-rail button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 8px; }

/* phones and reduced motion: the stage is not pinned (the script then turns it by itself, or leaves it to the buttons) */
@media (max-width: 860px) {
  .rd .rd-hero-c { padding-block: 64px 48px; border-radius: 22px; }
  .rd .rd-hero-c .rd-hero-copy { padding-inline: calc(7% + 20px); }
  .rd .rd-hero-c h1 { font-size: clamp(28px, 8.4vw, 60px); }
  .rd .rd-spark { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .rd .rd-sc-body { grid-template-columns: 1fr; gap: 28px; padding: 26px 20px; min-height: 0; border-radius: 22px; }
  .rd .rd-sc-info p { font-size: 16px; }
  .rd .rd-pin .rd-sc-stage { min-height: 300px; }
  .rd .rd-pin { height: auto; }
  .rd .rd-pin-in { position: static; }
  .rd .rd-rail { overflow-x: auto; justify-content: flex-start; gap: 2px; padding: 8px 12px; }
  .rd .rd-rail::before, .rd .rd-rail::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd .rd-pin { height: auto; }
  .rd .rd-pin-in { position: static; }
  .rd .rd-spark { animation: none; }
}

/* the cue to scroll (only where the stage is pinned), the Asterism band and the plans strip */
.rd .rd-scroll-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); transition: opacity 0.5s ease; }
.rd .rd-scroll-hint[data-state="mid"] { opacity: 0; }
.rd .rd-mouse { position: relative; flex: none; width: 18px; height: 28px; border: 1.5px solid currentColor; border-radius: 10px; }
.rd .rd-mouse i { position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); animation: rd-wheel 1.6s ease-in-out infinite; }
@keyframes rd-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }

.rd .rd-ast { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-block: 24px 8px; padding: 56px 52px; border: 1px solid rgba(245, 198, 90, 0.3); border-radius: 28px; color: #eef0ff;
  background: linear-gradient(100deg, rgba(7, 10, 28, 0.95) 0%, rgba(7, 10, 28, 0.82) 48%, rgba(7, 10, 28, 0.3) 100%), var(--sky) center / cover no-repeat, #07070c; }
.rd .rd-ast .rd-eyebrow { color: #f5c65a; }
.rd .rd-ast h2 { color: #fff; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; margin-block: 8px 12px; }
.rd .rd-ast p { color: #c9d0ee; font-size: 18px; max-width: 28em; }
.rd .rd-ast .rd-btn.rd-ast-gold { background: #f5c65a; color: #1a1405; box-shadow: 0 10px 26px -12px #f5c65a; }
.rd .rd-ast .rd-btn.rd-ast-ghost { color: #f5c65a; border: 1px solid rgba(245, 198, 90, 0.5); background: rgba(7, 10, 28, 0.4); }
.rd .rd-ast .rd-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rd .rd-ast-fan { width: 100%; height: auto; max-width: 560px; justify-self: center; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)); }

.rd .rd-plans { padding-block: 56px 8px; }
.rd .rd-plans-head { text-align: center; margin-bottom: 26px; }
.rd .rd-plans-head h2 { font-size: clamp(26px, 3.2vw, 40px); margin-top: 8px; }
.rd .rd-plans-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rd a.rd-plan { display: grid; align-content: start; gap: 6px; padding: 24px; color: inherit; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: border-color 0.15s, transform 0.15s; }
.rd a.rd-plan:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-2px); }
.rd a.rd-plan:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.rd .rd-plan b { font: 600 13px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); }
.rd .rd-plan strong { font-size: 32px; line-height: 1.1; }
.rd .rd-plan strong small { font-size: 15px; font-weight: 500; color: var(--mute); }
.rd .rd-plan span { color: var(--soft); }
.rd .rd-plans .rd-more { margin-top: 22px; text-align: center; }

@media (max-width: 860px) {
  .rd .rd-scroll-hint { display: none; }
  .rd .rd-ast { grid-template-columns: 1fr; gap: 24px; padding: 32px 22px; border-radius: 22px; }
  .rd .rd-ast p { font-size: 16px; }
  .rd .rd-plans-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rd .rd-scroll-hint { display: none; }
  .rd .rd-mouse i { animation: none; }
  .rd a.rd-plan { transition: none; }
  .rd a.rd-plan:hover { transform: none; }
}


/* The main button. Glass-ember fill, cut corners (the same notch as the app's buttons), the mark tracing itself, then a shimmer across the lettering.
   Mark and shimmer share one 4 second loop: the mark draws and fills, then the light crosses the words. */
.rd .rd-ember-wrap { display: inline-flex; filter: drop-shadow(0 10px 20px rgba(255, 90, 31, 0.38)); transition: filter 0.25s ease; }
.rd .rd-ember-wrap:hover { filter: drop-shadow(0 12px 26px rgba(255, 90, 31, 0.55)); }
.rd .rd-ember-wrap:focus-within { outline: 3px solid #fff; outline-offset: 5px; }
.rd .rd-btn.rd-ember { position: relative; gap: 11px; padding: 16px 30px; border-radius: 0; color: #2a0c00; outline: none;
  background: linear-gradient(180deg, #ffe066 0%, #ffa02e 45%, #ff5a1f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 8px rgba(160, 40, 0, 0.35);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
.rd .rd-btn.rd-ember:hover { filter: brightness(1.07); }
.rd .rd-ember-mark { flex: none; }
.rd .rd-ember-mark path { fill: #2a0c00; fill-opacity: 0; stroke: #2a0c00; stroke-width: 9; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: rd-ember-trace 4s ease-in-out infinite; }
.rd .rd-ember-tx { background: linear-gradient(100deg, #2a0c00 0 44%, #fff6d8 50%, #2a0c00 56% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rd-ember-shimmer 4s linear infinite; }
.rd .rd-btn.rd-ember .rd-arr { display: inline-block; transition: transform 0.2s ease; }
.rd .rd-btn.rd-ember:hover .rd-arr { transform: translateX(5px); }
@keyframes rd-ember-trace { 0% { stroke-dashoffset: 100; fill-opacity: 0; } 40% { stroke-dashoffset: 0; fill-opacity: 0; } 52%, 90% { stroke-dashoffset: 0; fill-opacity: 1; } 100% { stroke-dashoffset: 100; fill-opacity: 0; } }
@keyframes rd-ember-shimmer { 0%, 50% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .rd .rd-ember-mark path { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .rd .rd-ember-tx { animation: none; background: none; color: #2a0c00; }
}

/* The second button, same cut corners and size as the main one (see Pages/Shared/_HomeNotchGhost.cshtml). The notch is 11px outside and 10.4px inside the 1px line,
   which keeps the diagonal line the same thickness as the sides. Padding is 1px less on each side than the main button, so the two come out the same size. */
.rd .rd-notch-ring { display: inline-flex; }
.rd .rd-notch-ring:focus-within { outline: 3px solid #fff; outline-offset: 5px; }
.rd .rd-notch-wrap { display: inline-flex; padding: 1px; background: rgba(255, 255, 255, 0.22); transition: background 0.2s ease;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
.rd .rd-notch-wrap:hover { background: rgba(253, 148, 37, 0.8); }
.rd .rd-btn.rd-notch { padding: 15px 29px; border-radius: 0; background: var(--card); color: var(--ink); outline: none; transition: background 0.2s ease;
  clip-path: polygon(10.4px 0, 100% 0, 100% calc(100% - 10.4px), calc(100% - 10.4px) 100%, 0 100%, 0 10.4px); }
.rd .rd-notch-wrap:hover .rd-btn.rd-notch { background: #202026; }

/* the line above the headline is the Sigil mark and name; the bump slide shows the settings that make it custom */
.rd .rd-eyebrow-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: 0.18em; }
.rd .rd-eyebrow-mark { flex: none; color: var(--accent); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent)); }
.rd .rd-bump-set .rd-field b { color: #fd9425; font-weight: 600; }
.rd .rd-bump-set .rd-bump-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rd .rd-bump-set .rd-bump-row small { flex: none; width: 58px; }
.rd .rd-bump-set .rd-bump-row .rd-pills { margin-top: 0; }

/* on phones: the two buttons are one width, one under the other, and clear of the stars */
@media (max-width: 860px) {
  .rd .rd-hero-c .rd-cta-row > .rd-ember-wrap, .rd .rd-hero-c .rd-cta-row > .rd-notch-ring { width: 100%; max-width: 250px; }
  .rd .rd-hero-c .rd-btn.rd-ember { flex: 1; justify-content: center; padding: 15px 18px; }
  .rd .rd-hero-c .rd-notch-wrap { flex: 1; }
  .rd .rd-hero-c .rd-btn.rd-notch { flex: 1; justify-content: center; padding: 14px 17px; }
}

/* The small "New: ..." line above the home page's headline: a plain link to What's new, with the newest update's title. */
.rd .rd-whatsnew { display: inline-flex; align-items: center; gap: 0.5rem; max-width: min(100%, 30rem); padding: 0.2rem 0.75rem 0.2rem 0.25rem; margin-bottom: 1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: inherit; font-size: 0.85rem; text-decoration: none; }
.rd .rd-whatsnew:hover { border-color: var(--accent); }
.rd .rd-whatsnew b { flex: none; background: var(--accent); color: #1a0d02; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.08rem 0.55rem; border-radius: 999px; }
.rd .rd-whatsnew .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rd .rd-whatsnew .t code { font-size: inherit; }

/* The "Levels" slide of the home page's showcase: the level-up card Sigil posts, and the level roles. */
.rd .rd-lv-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: radial-gradient(120% 140% at 0 0, color-mix(in srgb, var(--accent) 28%, #1a1308), #14141a 70%); }
.rd .rd-lv-card small { display: block; color: var(--accent); font: 700 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.rd .rd-lv-card b { display: block; color: #fff; font: 700 16px var(--font-body); margin: 2px 0; }
.rd .rd-lv-card span { color: #c9c9d3; font: 500 13px var(--font-body); }
.rd .rd-lv-card i { font: 800 54px/1 var(--font-body); font-style: normal; color: var(--accent); }
.rd .rd-lv-roles { margin-top: 12px; background: var(--panel-deep); border-radius: 12px; padding: 10px 14px; }
.rd .rd-lv-roles small { display: block; color: var(--panel-grey); font: 600 12px var(--font-body); }
.rd .rd-lv-roles .rd-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rd .rd-lv-roles .rd-pills i { font-style: normal; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(88, 101, 242, 0.3); color: #c9cdfb; }

/* ---- first-profile setup (Pages/Setup): one question per screen, with a card that slides in ---- */
.rd .rd-setup { max-width: 640px; margin-inline: auto; padding-block: 12px 56px; overflow-x: clip; }
.rd .rd-setup-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rd .rd-setup-count { font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.rd .rd-setup-count b { color: var(--ink); }
.rd .rd-setup-track { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rd .rd-setup-fill { display: block; height: 100%; width: var(--to, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); animation: rd-setup-fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rd-setup-fill { from { width: var(--from, 0%); } to { width: var(--to, 0%); } }

.rd .rd-setup-card { position: relative; display: block; padding: 34px; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--card); box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05); animation: rd-setup-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-card[data-dir="back"] { --shift: -32px; }
@keyframes rd-setup-in { from { opacity: 0; transform: translateX(var(--shift, 32px)); } to { opacity: 1; transform: none; } }
@keyframes rd-setup-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rd-setup-pop { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

.rd .rd-setup-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--link); background: color-mix(in srgb, var(--accent) 16%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: 0 12px 28px -14px var(--accent); animation: rd-setup-pop 0.55s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.rd .rd-setup-card h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.08; letter-spacing: -0.02em; margin: 20px 0 8px; animation: rd-setup-rise 0.5s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-card .rd-lead { font-size: 17px; color: var(--soft); margin: 0; animation: rd-setup-rise 0.5s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-card > .alert { animation: rd-setup-rise 0.3s both; }

.rd .rd-setup-fields, .rd .rd-setup-facts, .rd .rd-setup-choices { animation: rd-setup-rise 0.5s 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-fields { margin-top: 26px; display: grid; gap: 20px; }
.rd .rd-setup-label { display: block; margin: 0 2px 8px; font: 600 12px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.rd .rd-setup-pick .dropdown-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: start; padding: 15px 18px; font-size: 17px; border-radius: 14px; border-color: var(--line); background: var(--card-soft); color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.rd .rd-setup-pick .dropdown-toggle:hover { border-color: color-mix(in srgb, var(--link) 55%, var(--line)); transform: translateY(-1px); }
.rd .rd-setup-pick .dropdown-toggle:focus-visible, .rd .rd-setup-pick .dropdown-toggle.show { border-color: var(--link); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 22%, transparent); }
.rd .rd-setup-pick .dropdown-menu { width: 100%; border-radius: 14px; }

.rd .rd-setup-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; min-height: 4px; }
.rd .rd-setup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 600 14px var(--font-body); color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); animation: rd-setup-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.rd .rd-setup-chip button { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--mute); font-size: 14px; line-height: 1; transition: background 0.15s, color 0.15s; }
.rd .rd-setup-chip button:hover, .rd .rd-setup-chip button:focus-visible { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.rd .rd-setup-chip.more { background: transparent; border-style: dashed; color: var(--mute); }
.rd .rd-setup-note { margin: 12px 2px 0; color: var(--mute); font-size: 14px; }

.rd .rd-setup-facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; animation: none; }
.rd .rd-setup-facts li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-soft); }
.rd .rd-setup-facts li:nth-child(1) { animation: rd-setup-rise 0.5s 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-facts li:nth-child(2) { animation: rd-setup-rise 0.5s 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-facts li:nth-child(3) { animation: rd-setup-rise 0.5s 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-fact-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--link); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.rd .rd-setup-facts b { display: block; font-size: 16px; }
.rd .rd-setup-facts small { display: block; margin-top: 2px; font-size: 14px; color: var(--soft); }
.rd .rd-setup-facts a { color: var(--link); }
.rd .rd-setup-choices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; animation-delay: 0.5s; }
.rd .rd-setup-choices .rd-btn { flex: 1 1 200px; justify-content: center; }

.rd .rd-setup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); animation: rd-setup-rise 0.5s 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup .rd-btn { transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, background 0.18s; }
.rd .rd-setup .rd-btn:hover { transform: translateY(-2px); }
.rd .rd-setup .rd-btn:active { transform: translateY(0) scale(0.98); }
.rd .rd-setup-link { background: none; border: 0; padding: 8px 4px; color: var(--mute); font: 600 15px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; }
.rd .rd-setup-link:first-of-type { margin-inline-start: auto; }
.rd .rd-setup-link:hover { color: var(--ink); }

@media (max-width: 560px) {
  .rd .rd-setup-card { padding: 24px 20px; border-radius: 22px; }
  .rd .rd-setup-choices .rd-btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rd .rd-setup-card, .rd .rd-setup-card *, .rd .rd-setup-fill { animation: none !important; transition: none !important; }
}

/* leaving a screen: the card slides and fades away before the next one slides in (see setup.js) */
@keyframes rd-setup-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-28px); } }
@keyframes rd-setup-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px); } }
.rd .rd-setup-card.rd-leaving { pointer-events: none; animation: rd-setup-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
.rd .rd-setup-card.rd-leaving[data-leave="back"] { animation-name: rd-setup-out-back; }
.rd .rd-setup-card.rd-leaving > * { animation: none; }
.rd .rd-setup-next { margin: 20px 2px 0; color: var(--soft); font-size: 16px; animation: rd-setup-rise 0.5s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---- the "All done!" screen at the end of the setup (Pages/SetupDone): no panel, just the Sigil mark drawing itself and filling (the same trace as the home page's "Add to your server" button) with the words underneath ---- */
.rd .rd-done { min-height: 62vh; display: grid; place-items: center; padding-block: 40px 72px; }
.rd .rd-done-stage { text-align: center; max-width: 520px; padding-inline: 20px; }
.rd .rd-done-logo { display: block; margin: 0 auto; overflow: visible; filter: drop-shadow(0 0 0 transparent); animation: rd-done-aura 1.4s 1.9s ease-out forwards; }
.rd .rd-done-logo path { fill: var(--accent); fill-opacity: 0; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: rd-done-trace 2.2s cubic-bezier(0.45, 0, 0.25, 1) forwards; }
.rd .rd-done-logo path:nth-of-type(2) { animation-delay: 0.18s; }
@keyframes rd-done-trace { 0% { stroke-dashoffset: 100; stroke-opacity: 1; fill-opacity: 0; } 58% { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; } 100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; } }
@keyframes rd-done-aura { from { filter: drop-shadow(0 0 0 transparent); } to { filter: drop-shadow(0 8px 26px color-mix(in srgb, var(--accent) 65%, transparent)); } }
.rd .rd-done-stage h1 { margin: 26px 0 8px; font-size: clamp(34px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.02em; animation: rd-setup-rise 0.6s 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-done-stage .rd-lead { margin: 0; font-size: 19px; color: var(--soft); animation: rd-setup-rise 0.6s 2.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-done-now { display: inline-block; margin-top: 22px; opacity: 0; animation: rd-setup-rise 0.5s 2.4s both; }
@keyframes rd-done-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.04); } }
.rd .rd-done-stage.rd-leaving { pointer-events: none; animation: rd-done-out 0.28s ease-in both; }
@media (prefers-reduced-motion: reduce) {
  .rd .rd-done-logo, .rd .rd-done-logo path, .rd .rd-done-stage h1, .rd .rd-done-stage .rd-lead, .rd .rd-done-now { animation: none; }
  .rd .rd-done-logo path { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
  .rd .rd-done-now { opacity: 1; }
}

/* ---- the screen of two choices (count my hours, message me on Discord): a card for each with a Yes / No pair ---- */
.rd .rd-setup-asks { display: grid; gap: 14px; margin-top: 24px; animation: rd-setup-rise 0.5s 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rd .rd-setup-ask { margin: 0; padding: 16px 18px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card-soft); min-width: 0; }
.rd .rd-setup-ask legend { float: none; width: auto; display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 0; font-size: 17px; }
.rd .rd-setup-ask legend b { font-weight: 700; }
.rd .rd-setup-ask p { margin: 0; color: var(--soft); font-size: 14.5px; }
.rd .rd-setup-ask a { color: var(--link); }
.rd .rd-setup-yesno { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rd .rd-setup-yesno label { position: relative; flex: 1 1 150px; cursor: pointer; }
.rd .rd-setup-yesno input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rd .rd-setup-yesno span { display: flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 15px var(--font-body); text-align: center; transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s; }
.rd .rd-setup-yesno label:hover span { border-color: color-mix(in srgb, var(--link) 55%, var(--line)); transform: translateY(-1px); }
.rd .rd-setup-yesno input:checked + span { border-color: var(--link); background: color-mix(in srgb, var(--accent) 18%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.rd .rd-setup-yesno input:focus-visible + span { outline: 3px solid var(--link); outline-offset: 2px; }

/* ---- the hero's profile button, the strip of example profiles and the matchmaking panel (home page) ---- */
@property --m { syntax: "<number>"; inherits: false; initial-value: 0; }

/* the second button: an orange edge that slowly shifts, two lines of text; signed in it is a small chip */
.rd .rd-notch-ring.rd-pro { filter: drop-shadow(0 8px 18px rgba(253, 148, 37, 0.28)); transition: filter 0.25s ease; }
.rd .rd-notch-ring.rd-pro:hover { filter: drop-shadow(0 10px 24px rgba(253, 148, 37, 0.5)); }
.rd .rd-pro .rd-notch-wrap { background: linear-gradient(135deg, #ffd08a, #fd9425 45%, #ff5a1f); background-size: 200% 200%; animation: rd-pro-edge 5s ease-in-out infinite alternate; }
.rd .rd-pro .rd-notch-wrap:hover { background: linear-gradient(135deg, #fff1c9, #ffb454 45%, #ff7a2f); }
.rd .rd-pro .rd-btn.rd-notch { display: inline-flex; align-items: center; gap: 14px; padding: 11px 26px 11px 18px; text-align: left; color: #ffe7c8; background: linear-gradient(180deg, #2a1a0b, #1d1209); }
.rd .rd-pro .rd-notch-wrap:hover .rd-btn.rd-notch { background: linear-gradient(180deg, #3a2410, #281809); }
.rd .rd-pro-ic { flex: none; color: #fd9425; }
.rd .rd-pro-t { display: grid; line-height: 1.2; min-width: 0; }
.rd .rd-pro-t b { font: 700 16px var(--font-head); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.rd .rd-pro-t small { font-size: 12.5px; font-weight: 500; color: #d9b98f; }
.rd .rd-pro-arr { display: inline-block; transition: transform 0.2s ease; }
.rd .rd-pro:hover .rd-pro-arr { transform: translateX(5px); }
.rd .rd-pro-me .rd-btn.rd-notch { padding: 9px 22px 9px 10px; gap: 12px; }
.rd .rd-pro-av { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; }
.rd .rd-pro-ini { display: grid; place-items: center; font: 700 15px var(--font-head); color: #fff; background: linear-gradient(135deg, #fd9425, #e11d48); }
.rd .rd-pro-bar { width: 84px; height: 5px; margin-top: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.rd .rd-pro-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #fd9425, #fbbf24); animation: rd-pro-grow 1.2s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes rd-pro-edge { to { background-position: 100% 100%; } }
@keyframes rd-pro-grow { from { width: 0; } }

/* a tighter hero: the buttons and the commands stay in view on a laptop screen */
.rd .rd-hero-c { padding-block: 44px 36px; }
.rd .rd-hero-c h1 { margin-block: 8px 12px; }
.rd .rd-hero-c .rd-cta-row { margin-top: 22px; }
.rd .rd-hero-c .rd-chips { margin-top: 22px; }
.rd .rd-hero-c .rd-whatsnew { margin-bottom: 0.7rem; }

@media (max-width: 860px) {
  .rd .rd-hero-c { padding-block: 36px 30px; }
  .rd .rd-hero-c .rd-cta-row > .rd-pro { width: 100%; max-width: 280px; }
  .rd .rd-pro .rd-notch-wrap { flex: 1; }
  .rd .rd-pro .rd-btn.rd-notch { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rd .rd-pro .rd-notch-wrap, .rd .rd-pro-bar i { animation: none; }
}