/* Dead Signal Audio redesign, 2026-11-03: the six mockup pages, plus the shared header and footer.
   Loaded after style.css. New components are prefixed rd-/pc-/ft-; the few overrides at the top touch only the header, footer and buttons. */

:root {
  --rd-card: #0f0f11;
  --rd-card-2: #151518;
  --rd-line: #25252a;
  --rd-line-2: #34343a;
  --rd-ember: #ff4a1c;
  --rd-ember-hi: #ff6a3d;
  --rd-text: #f2eee7;
  --rd-muted: #9a9892;
  --rd-r: 14px;
}
.rd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.rd-header { background: rgba(10, 10, 11, 0.86); }
.rd-header .bar { min-height: 72px; }
.rd-header .brand span { font: 700 13px var(--sans); letter-spacing: 0.34em; padding-left: 18px; margin-left: 2px; border-left: 1px solid var(--rd-line-2); line-height: 30px; }
.rd-header .site-nav { gap: 6px; }
.rd-header .site-nav a { position: relative; color: #cfcbc4; font: 500 15px var(--sans); letter-spacing: 0; padding: 10px 14px; }
.rd-header .site-nav a:hover { color: #fff; }
.rd-header .site-nav a[aria-current="page"] { color: #fff; }
.rd-header .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--rd-ember); border-radius: 2px; }

/* ---------- footer ---------- */
.rd-footer { background: #080809; border-top: 1px solid var(--rd-line); padding: 60px 0 34px; margin-top: 40px; }
.rd-footer .ft-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) auto; gap: 40px; align-items: start; }
.rd-footer .brand span { font: 700 13px var(--sans); letter-spacing: 0.34em; }
.rd-footer .ft-brand p { margin: 16px 0 0; color: var(--rd-muted); font-size: 15px; line-height: 1.5; max-width: 260px; }
.rd-footer .ft-col { display: flex; flex-direction: column; gap: 9px; }
.rd-footer .ft-col h4 { margin: 0 0 6px; font: 700 14px var(--sans); color: #fff; letter-spacing: 0; }
.rd-footer .ft-col a { color: var(--rd-muted); text-decoration: none; font-size: 14.5px; }
.rd-footer .ft-col a:hover { color: #fff; }
.rd-footer .ft-social { display: flex; gap: 18px; padding-left: 28px; border-left: 1px solid var(--rd-line); height: 100%; align-items: flex-start; }
.rd-footer .ft-social a { color: #e8e4dc; opacity: 0.85; }
.rd-footer .ft-social a:hover { color: var(--rd-ember-hi); opacity: 1; }
.rd-footer .ft-line { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--rd-line); color: var(--dim); font-size: 13px; }
.rd-footer .ft-line a { color: var(--rd-muted); }
@media (max-width: 900px) { .rd-footer .ft-grid { grid-template-columns: 1fr 1fr; } .rd-footer .ft-brand { grid-column: 1 / -1; } .rd-footer .ft-social { border-left: 0; padding-left: 0; grid-column: 1 / -1; } }

/* ---------- type ---------- */
.rd h1, .rd h2, .rd h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.035em; color: var(--rd-text); margin: 0; }
.rd-h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 0.98; letter-spacing: -0.045em; }
.rd-h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -0.04em; }
.rd-h3 { font-size: 22px; letter-spacing: -0.02em; }
.rd-eyebrow { display: flex; align-items: center; gap: 14px; font: 600 12px var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: #e8e4dc; margin: 0 0 14px; }
.rd-eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--rd-ember); }
.rd-eyebrow.bar::before { content: ""; width: 34px; height: 2px; background: var(--rd-ember); }
.rd-eyebrow.bar::after { display: none; }
.rd-lede { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: #d8d4cc; max-width: 560px; margin: 18px 0 0; }
.rd-sec { padding: 72px 0; }
.rd-sec.tight { padding: 40px 0; }
.rd-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.rd-sec-head .link { color: var(--rd-ember-hi); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.rd-sec-head .link:hover { color: #fff; }

/* ---------- buttons ---------- */
.rd-btn, .btn { border-radius: 9px; }
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; font: 700 17px var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s, background .2s, border-color .2s, color .2s; letter-spacing: -0.01em; }
.rd-btn.primary { color: #fff; background: linear-gradient(180deg, var(--rd-ember-hi), var(--rd-ember)); box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--rd-ember) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.22); }
.rd-btn.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--rd-ember-hi) 85%, #fff), var(--rd-ember-hi)); color: #fff; transform: translateY(-1px); }
.rd-btn.line { color: #fff; background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.55); }
.rd-btn.line:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
.rd-btn.sm { min-height: 42px; padding: 0 20px; font-size: 15px; }
.rd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- hero ---------- */
.rd-hero { position: relative; overflow: hidden; padding: 56px 0 28px; }
.rd-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 78% 10%, color-mix(in srgb, var(--rd-ember) 10%, transparent), transparent 70%); pointer-events: none; }
.rd-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 44px; align-items: center; }
.rd-hero.art { padding-bottom: 56px; }
.rd-hero .rd-art { position: absolute; inset: 0 0 0 38%; background-size: cover; background-position: center; opacity: 0.85; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
.rd-hero .rd-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0.15), rgba(10,10,11,0.9) 98%); }
.rd-hero-solo { position: relative; max-width: 760px; padding: 64px 0 56px; }
.rd-crumbs { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--rd-muted); margin-bottom: 34px; }
.rd-crumbs a { color: var(--rd-muted); text-decoration: none; } .rd-crumbs a:hover { color: #fff; }
.rd-crumbs b { color: #fff; font-weight: 600; }
.rd-shot { position: relative; border-radius: 16px; padding: 7px; background: linear-gradient(145deg, #3c3c42, #17171a 55%, #2a2a2f); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,255,255,0.05), 0 0 90px -30px color-mix(in srgb, var(--rd-ember) 35%, transparent); }
.rd-shot img { border-radius: 11px; width: 100%; height: auto; display: block; }
.rd-cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; font-size: 16px; color: #d6d2ca; flex-wrap: wrap; }
.rd-cap b { color: #fff; } .rd-cap .price { color: #fff; font-weight: 600; }
.rd-cap .sep { width: 1px; height: 18px; background: var(--rd-line-2); }
@media (max-width: 960px) { .rd-hero-grid { grid-template-columns: 1fr; } .rd-hero .rd-art { inset: 0; opacity: 0.4; -webkit-mask-image: none; mask-image: none; } }

/* ---------- player ---------- */
.rd-player { display: flex; align-items: center; gap: 22px; padding: 12px 22px 12px 14px; border: 1px solid var(--rd-line-2); border-radius: 12px; background: linear-gradient(180deg, #121214, #0d0d0f); margin: 8px 0 0; flex-wrap: wrap; }
.rd-player .play { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--rd-ember); background: radial-gradient(circle at 35% 30%, #3a1a12, #14090a); color: var(--rd-ember-hi); display: grid; place-items: center; cursor: pointer; font-size: 0; transition: transform .15s; }
.rd-player .play:hover { transform: scale(1.05); }
.rd-player .play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.rd-player .ttl { font-weight: 700; font-size: 17px; color: #fff; padding-right: 22px; border-right: 1px solid var(--rd-line-2); white-space: nowrap; }
.rd-player .wave { position: relative; flex: 1 1 280px; min-width: 200px; height: 46px; }
.rd-player .wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rd-player .wave .w-raw { fill: #6d6b66; } .rd-player .wave .w-mas { fill: var(--rd-ember); }
.rd-player .wave .head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--rd-ember-hi); left: 0; box-shadow: 0 0 10px var(--rd-ember); pointer-events: none; }
.rd-player .ab-flip { display: inline-flex; border: 1px solid var(--rd-line-2); border-radius: 9px; overflow: hidden; }
.rd-player .ab-flip button { background: transparent; color: #cfcbc4; border: 0; padding: 11px 18px; font: 600 15px var(--sans); cursor: pointer; }
.rd-player .ab-flip button[aria-pressed="true"] { background: color-mix(in srgb, var(--rd-ember) 18%, transparent); color: #fff; box-shadow: inset 0 0 0 1px var(--rd-ember); border-radius: 8px; }
.rd-player .lm { display: flex; align-items: center; gap: 10px; color: #d6d2ca; font-size: 15px; padding-left: 22px; border-left: 1px solid var(--rd-line-2); white-space: nowrap; cursor: pointer; }
.rd-player .lm input { accent-color: var(--rd-ember); width: 16px; height: 16px; }
.rd-player .ab-bar { display: none; }
.rd-player .meta-note { flex-basis: 100%; margin: 2px 4px 2px; color: var(--rd-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 780px) { .rd-player { gap: 14px; } .rd-player .ttl { border-right: 0; padding-right: 0; } .rd-player .lm { border-left: 0; padding-left: 0; } }

/* ---------- filters and search ---------- */
.rd-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 30px 0 0; }
.rd-search { flex: 1 1 320px; max-width: 520px; position: relative; }
.rd-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: #b8b4ac; fill: none; stroke-width: 2; }
.rd-search input { width: 100%; min-height: 52px; padding: 0 18px 0 48px; background: rgba(255,255,255,0.02); border: 1px solid var(--rd-line-2); border-radius: 11px; color: #fff; font: 400 17px var(--sans); outline: 0; }
.rd-search input::placeholder { color: #9a9892; }
.rd-search input:focus { border-color: var(--rd-ember); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-ember) 20%, transparent); }
.rd-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-left: 18px; border-left: 1px solid var(--rd-line-2); }
.rd-chip { min-height: 46px; padding: 0 22px; border-radius: 9px; border: 1px solid var(--rd-line-2); background: rgba(255,255,255,0.02); color: #e8e4dc; font: 500 16px var(--sans); cursor: pointer; transition: all .15s; }
.rd-chip:hover { border-color: #666; color: #fff; }
.rd-chip[aria-pressed="true"] { background: var(--rd-ember); border-color: var(--rd-ember); color: #fff; font-weight: 700; }
@media (max-width: 780px) { .rd-chips { border-left: 0; padding-left: 0; } }

/* ---------- plugin cards ---------- */
.rd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
@media (max-width: 1000px) { .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rd-grid { grid-template-columns: 1fr; } }
.pc { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); border: 1px solid var(--rd-line); border-radius: var(--rd-r); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.pc:hover { transform: translateY(-3px); border-color: var(--acc, var(--rd-ember)); box-shadow: 0 24px 50px -28px var(--acc, var(--rd-ember)); }
.pc[hidden] { display: none; }
.pc-shot { position: relative; display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; overflow: hidden; }
.pc-shot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,9,0.55), rgba(8,8,9,0.78)); }
.pc-shot img { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 8%; width: 86%; height: 84%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.6)); }
.pc-flag { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 10px; border-radius: 6px; font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(8,8,9,0.82); border: 1px solid var(--rd-line-2); color: #f2eee7; }
.pc-flag.soon { color: #ffd2b8; border-color: color-mix(in srgb, var(--rd-ember-hi) 50%, transparent); }
.pc-flag.free { color: #9ff0c0; border-color: rgba(120,230,170,0.45); }
.pc-body { position: relative; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-bar { position: absolute; left: 22px; top: -2px; width: 46px; height: 4px; border-radius: 0 0 3px 3px; background: var(--acc, var(--rd-ember)); }
.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; }
.pc-head h3 { font-size: 30px; letter-spacing: -0.04em; }
.pc-tag { font: 600 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #c9c5bd; border: 1px solid var(--rd-line-2); padding: 5px 9px; border-radius: 5px; white-space: nowrap; }
.pc p { margin: 0; color: #d0ccc4; font-size: 16.5px; line-height: 1.45; flex: 1; }
.pc-price { color: var(--rd-muted); font-size: 14.5px; }
.pc-price b { color: #fff; font-weight: 700; }
.pc-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rd-empty { text-align: center; color: var(--rd-muted); padding: 56px 0; display: none; }
.rd-empty.on { display: block; }

/* ---------- feature banner ---------- */
.rd-banner { position: relative; overflow: hidden; border: 1px solid var(--rd-line-2); border-radius: var(--rd-r); padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background-size: cover; background-position: right center; }
.rd-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,10,0.97) 0%, rgba(9,9,10,0.82) 42%, rgba(9,9,10,0.2) 100%); }
.rd-banner > * { position: relative; }
.rd-banner h2 { font-size: clamp(30px, 3.6vw, 48px); }
.rd-banner p { margin: 10px 0 0; color: #d8d4cc; font-size: 19px; }
.rd-banner .minis { display: flex; gap: 14px; flex: 1 1 420px; justify-content: flex-end; }
.rd-banner .minis a { flex: 1 1 0; max-width: 210px; padding: 6px; border-radius: 10px; background: linear-gradient(145deg, #34343a, #15151a); border: 1px solid #000; box-shadow: 0 18px 34px -14px #000; }
.rd-banner .minis img { border-radius: 6px; width: 100%; height: auto; }
@media (max-width: 760px) { .rd-banner { padding: 26px 22px; } .rd-banner::before { background: rgba(9,9,10,0.86); } .rd-banner .minis { justify-content: flex-start; } }

/* ---------- steps, stages, proof ---------- */
.rd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.rd-step { position: relative; border: 1px solid var(--rd-line); border-radius: var(--rd-r); background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); padding: 26px; min-height: 230px; overflow: hidden; display: flex; flex-direction: column; }
.rd-step h3 { font-size: 26px; display: flex; align-items: center; gap: 14px; }
.rd-step h3 i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rd-ember); color: #fff; font: 700 15px var(--sans); }
.rd-step p { margin: 10px 0 0; color: #d0ccc4; font-size: 17px; line-height: 1.45; max-width: 26ch; }
.rd-step .art { position: absolute; right: 0; bottom: 0; left: 38%; top: 42%; background-size: 430%; background-repeat: no-repeat; border-radius: 10px 0 0 0; border-left: 1px solid var(--rd-line-2); border-top: 1px solid var(--rd-line-2); opacity: 0.95; }
.rd-step .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,15,17,0.7), transparent 60%); }
@media (max-width: 900px) { .rd-steps { grid-template-columns: 1fr; } .rd-step { min-height: 210px; } }
.rd-stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.rd-stage { border: 1px solid var(--rd-line); border-radius: 12px; background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); padding: 22px 14px 20px; text-align: center; }
.rd-stage svg { width: 38px; height: 38px; stroke: var(--rd-ember-hi); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 12px; display: block; }
.rd-stage h3 { font-size: 20px; letter-spacing: -0.02em; }
.rd-stage p { margin: 6px 0 0; color: #bdb9b1; font-size: 14.5px; line-height: 1.4; }
@media (max-width: 1000px) { .rd-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rd-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-proof { display: grid; grid-template-columns: 0.85fr 1fr 1.05fr 0.95fr; gap: 14px; }
.rd-proof > div { padding: 18px 20px 18px; border: 1px solid var(--rd-line-2); border-radius: 10px; background: #0d0d0f; min-width: 0; }
.rd-proof > div:first-child { border: 0; background: none; padding: 14px 8px 0 4px; }
.rd-proof h2 { font-size: clamp(30px, 3vw, 42px); }
.rd-proof p { color: #d0ccc4; margin: 12px 0 18px; font-size: 17px; }
.rd-proof h4 { margin: 0 0 12px; font: 700 14px var(--sans); color: #fff; }
.rd-proof .wv { display: block; width: 100%; height: 44px; }
.rd-proof .wv.raw { fill: #77756f; } .rd-proof .wv.mas { fill: var(--rd-ember); }
.rd-proof .lbl { font-size: 13px; color: #b8b4ac; margin: 4px 0 8px; }
.rd-proof .curve { width: 100%; height: auto; }
.rd-proof ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rd-proof li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: #e8e4dc; line-height: 1.35; }
.rd-proof li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--rd-ember) 18%, transparent); border: 1px solid var(--rd-ember); color: #ffb099; display: grid; place-items: center; font-size: 12px; margin-top: 1px; }
@media (max-width: 860px) { .rd-proof { grid-template-columns: 1fr 1fr; } .rd-proof > div:first-child { grid-column: 1 / -1; padding: 0 0 6px; } }
@media (max-width: 560px) { .rd-proof { grid-template-columns: 1fr; } }
.rd-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 16px; }
.rd-table th { text-align: left; font: 600 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rd-muted); padding: 10px 14px; border-bottom: 1px solid var(--rd-line-2); }
.rd-table td { padding: 14px; border-bottom: 1px solid var(--rd-line); color: #d8d4cc; vertical-align: top; }
.rd-table td.n { font-family: var(--mono); color: #fff; white-space: nowrap; text-align: right; }

/* ---------- formats and faq ---------- */
.rd-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .rd-split { grid-template-columns: 1fr; gap: 28px; } }
.rd-os { display: flex; gap: 20px; flex-wrap: wrap; }
.rd-os > div { flex: 1 1 220px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--rd-line); background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); border-radius: 12px; padding: 18px 22px; }
.rd-os svg { width: 38px; height: 38px; fill: #fff; flex: none; }
.rd-os b { display: block; font-size: 21px; color: #fff; letter-spacing: -0.02em; }
.rd-os span { color: var(--rd-muted); font-size: 15px; font-family: var(--mono); letter-spacing: 0.06em; }
.rd-faq { display: grid; gap: 10px; }
.rd-faq details { border: 1px solid var(--rd-line-2); border-radius: 10px; background: rgba(255,255,255,0.015); }
.rd-faq summary { list-style: none; cursor: pointer; padding: 17px 22px; font-size: 17px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rd-faq summary::-webkit-details-marker { display: none; }
.rd-faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #aaa; border-bottom: 2px solid #aaa; transform: rotate(45deg) translateY(-3px); transition: transform .2s; flex: none; }
.rd-faq details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.rd-faq details[open] { border-color: var(--rd-ember); background: color-mix(in srgb, var(--rd-ember) 4%, transparent); }
.rd-faq .ans { padding: 0 22px 20px; color: #cfcbc4; font-size: 16.5px; line-height: 1.55; }
.rd-faq.plus summary::after { display: none; }
.rd-faq.plus summary::before { content: "+"; order: -1; font-size: 22px; color: #fff; width: 22px; text-align: center; line-height: 1; }
.rd-faq.plus details[open] summary::before { content: "–"; }
.rd-faq.plus summary { justify-content: flex-start; gap: 18px; }

/* ---------- closing CTA band ---------- */
.rd-cta { position: relative; overflow: hidden; border: 1px solid var(--rd-line-2); border-radius: var(--rd-r); padding: 38px 44px; background-size: cover; background-position: right center; }
.rd-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,10,0.97) 10%, rgba(9,9,10,0.86) 55%, rgba(9,9,10,0.35) 100%); }
.rd-cta > * { position: relative; }
.rd-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.rd-cta h2 { font-size: clamp(40px, 5vw, 66px); }
.rd-cta p { color: #d8d4cc; font-size: 19px; margin: 12px 0 0; max-width: 34ch; }
.rd-cta .side { border-left: 1px solid var(--rd-line-2); padding-left: 40px; }
.rd-cta .pricing { display: flex; align-items: center; gap: 20px; font-size: 22px; flex-wrap: wrap; }
.rd-cta .pricing b { font-size: 40px; letter-spacing: -0.04em; color: #fff; }
.rd-cta .fine { color: var(--rd-muted); font-size: 14px; margin-top: 12px; }
@media (max-width: 860px) { .rd-cta { padding: 28px 22px; } .rd-cta-grid { grid-template-columns: 1fr; gap: 24px; } .rd-cta .side { border-left: 0; padding-left: 0; } }
.rd-cta .buy, .rd-cta .signup { margin-top: 18px; max-width: 560px; }

/* ---------- mix notes ---------- */
.rd-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .rd-notes { grid-template-columns: 1fr; } }
.rd-note { display: flex; flex-direction: column; border: 1px solid var(--rd-line); border-radius: var(--rd-r); background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.rd-note:hover { transform: translateY(-3px); border-color: var(--acc, var(--rd-ember)); color: inherit; }
.rd-note .pic { aspect-ratio: 16 / 9; background-size: cover; background-position: center; position: relative; }
.rd-note .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,9,0.15), rgba(8,8,9,0.7)); }
.rd-note .tx { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rd-note .tg { font: 600 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc, var(--rd-ember-hi)); display: flex; align-items: center; gap: 8px; }
.rd-note .tg::before { content: ""; width: 18px; height: 3px; background: var(--acc, var(--rd-ember)); }
.rd-note h3 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.12; }
.rd-note p { margin: 0; color: #cfcbc4; font-size: 16px; line-height: 1.45; flex: 1; }
.rd-note .go { color: #fff; font-size: 22px; align-self: flex-end; }
.rd-feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 38px; align-items: center; border: 1px solid var(--rd-line-2); border-radius: var(--rd-r); padding: 34px; background: linear-gradient(180deg, #121214, #0c0c0e); }
@media (max-width: 900px) { .rd-feature { grid-template-columns: 1fr; padding: 24px; } }
.rd-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .rd-cats { grid-template-columns: 1fr; } }
.rd-cat { position: relative; display: block; min-height: 118px; border: 1px solid var(--rd-line-2); border-radius: 12px; overflow: hidden; padding: 20px 24px; text-decoration: none; background-size: cover; background-position: center; }
.rd-cat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,10,0.88), rgba(9,9,10,0.45)); }
.rd-cat > * { position: relative; }
.rd-cat::after { content: ""; position: absolute; left: 24px; top: 0; width: 38px; height: 4px; background: var(--acc, var(--rd-ember)); }
.rd-cat h3 { font-size: 30px; margin-top: 10px; } .rd-cat p { margin: 4px 0 0; color: #d6d2ca; font-size: 16px; }
.rd-cat:hover { border-color: var(--acc, var(--rd-ember)); }

/* ---------- roadmap timeline ---------- */
.rd-time { position: relative; padding-left: 64px; display: grid; gap: 22px; }
.rd-time::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--rd-ember), color-mix(in srgb, var(--rd-ember) 15%, transparent)); }
.rd-tl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 30px; align-items: center; border: 1px solid var(--rd-line); border-radius: var(--rd-r); background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); padding: 30px 34px; }
.rd-tl::before { content: ""; position: absolute; left: -57px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--rd-ember); background: #0a0a0b; box-shadow: 0 0 0 6px #0a0a0b, 0 0 16px var(--rd-ember); }
.rd-tl .date { display: inline-block; padding: 8px 16px; border: 1px solid var(--rd-ember); border-radius: 7px; color: var(--rd-ember-hi); font: 700 17px var(--sans); letter-spacing: 0.02em; text-transform: uppercase; }
.rd-tl h2 { font-size: clamp(34px, 3.6vw, 50px); margin: 16px 0 10px; }
.rd-tl .kind { font: 500 13px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #bdb9b1; }
.rd-tl .rule { width: 46px; height: 3px; background: var(--rd-ember); margin: 14px 0; }
.rd-tl p { margin: 0; color: #e0dcd4; font-size: 19px; line-height: 1.45; max-width: 30ch; }
.rd-tl a.more { display: inline-block; margin-top: 14px; color: var(--rd-ember-hi); font-weight: 600; text-decoration: none; }
.rd-tl a.more:hover { color: #fff; }
.rd-tl .pics { display: grid; gap: 12px; }
.rd-tl .pics .rd-shot { padding: 5px; border-radius: 12px; }
.rd-tl .pics .rd-shot img { border-radius: 8px; }
.rd-tl.free::before { border-color: #7fe3a8; box-shadow: 0 0 0 6px #0a0a0b, 0 0 16px #7fe3a8; }
.rd-tl.free .date { color: #9ff0c0; border-color: #7fe3a8; }
@media (max-width: 860px) { .rd-time { padding-left: 38px; } .rd-time::before { left: 9px; } .rd-tl { grid-template-columns: 1fr; padding: 24px 22px; } .rd-tl::before { left: -37px; } }

/* ---------- signup band ---------- */
.rd-signup { position: relative; overflow: hidden; border: 1px solid var(--rd-line-2); border-radius: var(--rd-r); padding: 34px 40px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 34px; align-items: center; background-size: cover; background-position: left center; }
.rd-signup::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,10,0.55) 0%, rgba(9,9,10,0.9) 55%); }
.rd-signup > * { position: relative; }
.rd-signup h2 { font-size: clamp(30px, 3.4vw, 46px); }
.rd-signup p.sub { margin: 10px 0 0; color: #d8d4cc; font-size: 18px; }
@media (max-width: 860px) { .rd-signup { grid-template-columns: 1fr; padding: 26px 22px; } }
.rd-signup form.signup, .rd-form form.signup { background: transparent; border: 0; padding: 0; margin: 0; max-width: none; box-shadow: none; }
.rd-signup form.signup h3, .rd-form form.signup h3 { display: none; }
.rd-signup form.signup > p:not(.fine):not(.msg), .rd-form form.signup > p:not(.fine):not(.msg) { display: none; }
.rd-signup .row, .rd-form .row { display: flex; gap: 12px; padding: 0; border: 0; background: transparent; border-radius: 0; flex-wrap: wrap; }
.rd-signup input[type=email], .rd-form input[type=email] { flex: 1 1 240px; min-height: 54px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--rd-line-2); background: rgba(8,8,9,0.7); color: #fff; font: 400 17px var(--sans); }
.rd-signup .nbtn, .rd-form .nbtn { min-height: 54px; padding: 0 26px; border-radius: 10px; border: 0; background: linear-gradient(180deg, var(--rd-ember-hi), var(--rd-ember)); color: #fff; font: 700 17px var(--sans); cursor: pointer; }
.rd-signup .fine, .rd-form .fine { color: var(--rd-muted); font-size: 13px; margin: 10px 0 0; }

/* ---------- download gate (free plugins) ---------- */
.rd-dl { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; align-items: center; border: 1px solid #5a2a1b; border-radius: var(--rd-r); padding: 28px 34px; background: linear-gradient(90deg, color-mix(in srgb, var(--rd-ember) 10%, transparent), color-mix(in srgb, var(--rd-ember) 3%, transparent) 60%), #0c0c0e; box-shadow: 0 0 60px -30px var(--rd-ember); }
.rd-dl .ico { width: 64px; height: 64px; border: 1px solid var(--rd-ember); border-radius: 10px; display: grid; place-items: center; }
.rd-dl .ico svg { width: 30px; height: 30px; stroke: var(--rd-ember-hi); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-dl h2 { font-size: 32px; } .rd-dl p.sub { margin: 6px 0 0; color: #d0ccc4; font-size: 16px; }
@media (max-width: 900px) { .rd-dl { grid-template-columns: 1fr; padding: 24px 22px; } }

.rd-reveal { animation: rd-in .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rd-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rd-reveal { animation: none; } }

/* ---------- home minis, catalog roadmap strip, free-plugin cards ---------- */
.rd-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
@media (max-width: 800px) { .rd-minis { grid-template-columns: 1fr; } }
.rd-mini { position: relative; display: block; min-height: 190px; padding: 26px 28px; border: 1px solid var(--rd-line-2); border-radius: var(--rd-r); overflow: hidden; background-size: cover; background-position: center; text-decoration: none; transition: transform .2s, border-color .2s; }
.rd-mini::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,10,0.82) 0%, rgba(9,9,10,0.35) 100%); }
.rd-mini::after { content: ""; position: absolute; left: 28px; top: 0; width: 46px; height: 4px; background: var(--acc, var(--rd-ember)); }
.rd-mini > * { position: relative; }
.rd-mini:hover { transform: translateY(-3px); border-color: var(--acc, var(--rd-ember)); }
.rd-mini h3 { font-size: 42px; letter-spacing: -0.045em; margin-top: 22px; }
.rd-mini p { margin: 6px 0 0; color: #e0dcd4; font-size: 18px; }
.rd-mini .arrow { position: absolute; right: 22px; bottom: 22px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; }
.rd-strip { display: flex; align-items: flex-start; gap: 0; position: relative; margin-top: 10px; overflow-x: auto; padding-bottom: 6px; }
.rd-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, var(--rd-ember), rgba(255,255,255,0.18)); }
.rd-node { position: relative; flex: 1 1 0; min-width: 150px; text-align: center; padding-top: 34px; text-decoration: none; color: #fff; }
.rd-node i { position: absolute; left: 50%; top: 2px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #0a0a0b; border: 2px solid var(--rd-ember); }
.rd-node:first-child i { background: var(--rd-ember); box-shadow: 0 0 16px var(--rd-ember); }
.rd-node b { display: block; font-size: 18px; letter-spacing: -0.02em; }
.rd-node span { display: block; margin-top: 4px; font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-muted); }
.rd-node:hover b { color: var(--rd-ember-hi); }
.rd-nus { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 6px; }
.rd-nu { position: relative; grid-column: span 2; display: block; padding: 24px 24px 22px; border: 1px solid var(--rd-line); border-radius: var(--rd-r); background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); text-decoration: none; transition: transform .2s, border-color .2s; }
.rd-nu:nth-child(n+4) { grid-column: span 3; }
.rd-nu:hover { transform: translateY(-3px); border-color: var(--acc, var(--rd-ember)); }
.rd-nu .bar { position: absolute; left: 24px; top: -2px; width: 46px; height: 4px; background: var(--acc, var(--rd-ember)); border-radius: 0 0 3px 3px; }
.rd-nu h3 { font-size: 34px; letter-spacing: -0.04em; margin-top: 6px; }
.rd-nu p { margin: 6px 0 18px; color: #d0ccc4; font-size: 17px; }
.rd-nu .rd-shot { padding: 5px; border-radius: 10px; }
.rd-nu .rd-shot img { border-radius: 7px; }
@media (max-width: 900px) { .rd-nus { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-nu, .rd-nu:nth-child(n+4) { grid-column: span 1; } }
@media (max-width: 560px) { .rd-nus { grid-template-columns: 1fr; } }
.rd-mores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
@media (max-width: 800px) { .rd-mores { grid-template-columns: 1fr; } }
.rd-more { display: block; padding: 18px 22px; border: 1px solid var(--rd-line); border-radius: 12px; background: var(--rd-card); text-decoration: none; transition: border-color .2s; }
.rd-more:hover { border-color: var(--rd-ember); }
.rd-more b { display: block; font-size: 22px; color: #fff; letter-spacing: -0.03em; }
.rd-more span { display: block; margin-top: 6px; color: #c7c3bb; font-size: 15.5px; line-height: 1.4; }
.rd .offer { margin: 0; }
.rd .chip { border-radius: 7px; }

/* player: the waveform shows the version you are hearing */
.rd-player .wave[data-which="0"] .w-mas { display: none; }
.rd-player .wave[data-which="1"] .w-raw { display: none; }
.rd-player .wave .ab-bar { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rd-player .wave .ab-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rd-ember) 0%, transparent), color-mix(in srgb, var(--rd-ember) 22%, transparent)); border-right: 2px solid var(--rd-ember-hi); box-shadow: 8px 0 18px -6px var(--rd-ember); }
/* workflow cards: the screenshot crop sits under the text, never over it */
.rd-step { min-height: 280px; }
.rd-step .art { left: 18%; right: 0; top: auto; height: 46%; }
.rd-feature video { background: #000; }

/* ---------- motion ---------- */
.rd-hero .rd-art { will-change: transform; transform: scale(1.06); }
.rd-embers { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 0; }
.rd-hero > .rd-wrap { position: relative; z-index: 1; }
.rd-pre { opacity: 0; transform: translateY(22px); }
.rd-pre, .rd-pre.rd-in { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rd-pre.rd-in { opacity: 1; transform: none; }
.pc, .rd-note, .rd-mini, .rd-nu { will-change: transform; }
.pc-shot, .rd-note .pic, .rd-mini, .rd-cat { transition: background-position .6s ease, transform .2s, border-color .2s; }
.pc:hover .pc-shot { background-position: 70% 40%; }
.pc-shot img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pc:hover .pc-shot img { transform: scale(1.035) translateY(-2px); }

.rd-step .art.wave { left: 0; right: 0; top: 46%; background-size: cover; background-position: center; border: 0; border-radius: 0 0 var(--rd-r) var(--rd-r); opacity: 1; }
.rd-step .art.wave::after { background: linear-gradient(180deg, rgba(15,15,17,0.85), transparent 55%); }

/* =====================================================================================================================================
   Shim: the old page classes, restyled so every page (product pages, packs, notes articles, guides, legal, about) reads as the new design.
   Scoped to .rd, so Nu pages (body.nu, their own stencil look) are untouched.
   ===================================================================================================================================== */
.rd { position: relative; }
.rd-pagebg { position: absolute; left: 0; right: 0; top: 0; height: 560px; background-size: cover; background-position: 70% 30%; opacity: 0.55; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 55%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 55%); mask-composite: intersect; }
.rd > section, .rd > div:not(.rd-pagebg), .rd > main { position: relative; z-index: 1; }
.rd section { padding: 64px 0; }
.rd .smoke::before, .rd .smoke::after, .rd .smoke > .veil { display: none; }
.rd .wrap { max-width: 1240px; padding: 0 24px; }
.rd .narrow { max-width: 820px; padding: 0 24px; }

.rd .eyebrow, .rd .kicker { display: flex; align-items: center; gap: 14px; font: 600 12px var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: #e8e4dc; margin: 0 0 14px; }
.rd .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--rd-ember); }
.rd .eyebrow.accent { color: #e8e4dc; }
.rd h1, .rd h2, .rd h3, .rd .h1, .rd .h2, .rd .display { font-family: var(--sans); font-weight: 800; letter-spacing: -0.04em; color: var(--rd-text); }
.rd .h1, .rd .display, .rd .page-hero h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 0.98; letter-spacing: -0.045em; text-transform: none; margin: 14px 0 18px; }
.rd .h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; margin: 12px 0 18px; }
.rd .h1 em, .rd .h2 em, .rd .display em { color: var(--rd-ember-hi); font-style: normal; }
.rd .lede { color: #d8d4cc; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 680px; }
.rd .lede strong, .rd strong { color: #fff; }
.rd .tagline { font: 500 22px var(--sans); color: #d8d4cc; }
.rd .meta, .rd .fine { color: #9a9892; }
.rd a { text-decoration-color: color-mix(in srgb, var(--rd-ember-hi) 55%, transparent); }
.rd .page-hero { padding: 80px 0 24px; }
.rd .pill { border-radius: 7px; border: 1px solid var(--rd-line-2); background: rgba(255,255,255,0.03); padding: 7px 12px; font: 600 11px var(--mono); letter-spacing: 0.16em; }

/* buttons */
.rd .btn { border-radius: 9px; min-height: 50px; font: 700 16px var(--sans); letter-spacing: -0.01em; }
.rd .btn.ember { background: linear-gradient(180deg, var(--rd-ember-hi), var(--rd-ember)); border-color: transparent; box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--rd-ember) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.22); }
.rd .btn.ember:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--rd-ember-hi) 85%, #fff), var(--rd-ember-hi)); }
.rd .btn.ghost { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.5); }
.rd .btn.ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
.rd .more { color: var(--rd-ember-hi); }

/* cards */
.rd .modules { display: grid; gap: 16px; background: none; border: 0; border-radius: 0; margin-top: 28px; }
.rd .modules > div, .rd .steps > div, .rd .principles > div, .rd .box, .rd .stats div { background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); border: 1px solid var(--rd-line); border-radius: var(--rd-r); padding: 24px 26px; }
.rd .modules h3 { font: 700 14px var(--mono); letter-spacing: 0.2em; color: var(--rd-ember-hi); text-transform: uppercase; margin: 0 0 10px; }
.rd .modules p, .rd .steps p, .rd .principles p { color: #cfcbc4; font-size: 16.5px; margin: 0; line-height: 1.5; }
.rd .steps { gap: 16px; }
.rd .steps > div { border-top: 1px solid var(--rd-line); }
.rd .steps > div:first-child { border-top-color: var(--rd-ember); }
.rd .steps h3, .rd .principles h3 { font-size: 22px; letter-spacing: -0.03em; margin: 10px 0 8px; }
.rd .box { margin: 26px 0; }
.rd .box h3 { font-size: 20px; margin: 0 0 10px; }
.rd .callout { border: 1px solid var(--rd-line); border-left: 3px solid var(--rd-ember); background: color-mix(in srgb, var(--rd-ember) 4%, transparent); border-radius: 0 12px 12px 0; padding: 16px 22px; }
.rd .stats { gap: 16px; border: 0; }
.rd .stats div { border: 1px solid var(--rd-line); }
.rd .stats b { font-weight: 800; letter-spacing: -0.04em; }
.rd .ticks li { color: #cfcbc4; } .rd .ticks li::before { background: var(--rd-ember); }
.rd .benefits li, .rd .prose li { color: #cfcbc4; }
.rd .receipts { margin-top: 26px; } .rd .receipts th { color: #9a9892; border-bottom-color: var(--rd-line-2); } .rd .receipts td { border-bottom-color: var(--rd-line); }
.rd .free-table th, .rd .free-table td { border-color: var(--rd-line); }
.rd .tall-vid { border-radius: 16px; padding: 6px; background: linear-gradient(145deg, #3c3c42, #17171a 55%, #2a2a2f); border: 1px solid #000; box-shadow: 0 30px 70px -26px rgba(0,0,0,0.9); }
.rd .tall-vid video, .rd .tall-vid img { border-radius: 11px; }
.rd .hero-shot, .rd .shot { border-radius: 12px; }
.rd figure.studio img { border-radius: 14px; border: 1px solid var(--rd-line-2); }

/* prose pages (about, install, legal, guides, articles) */
.rd .prose h2 { font: 800 clamp(26px, 2.8vw, 36px)/1.1 var(--sans); letter-spacing: -0.035em; margin: 48px 0 14px; color: #fff; }
.rd .prose h3 { font-size: 21px; margin: 28px 0 8px; }
.rd .prose p, .rd .prose li { color: #d0ccc4; font-size: 17.5px; line-height: 1.62; }
.rd .prose a { color: #fff; }

/* the old A/B players take the new player skin */
.rd .ab { border: 1px solid var(--rd-line-2); border-radius: 12px; background: linear-gradient(180deg, #121214, #0d0d0f); padding: 18px 20px; margin-top: 20px; }
.rd .ab h3 { font-size: 20px; }
.rd .ab-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rd .ab-row .btn { min-height: 46px; padding: 0 22px; }
.rd .ab-flip { display: inline-flex; border: 1px solid var(--rd-line-2); border-radius: 9px; overflow: hidden; }
.rd .ab-flip button { background: transparent; color: #cfcbc4; border: 0; padding: 10px 16px; font: 600 14.5px var(--sans); cursor: pointer; }
.rd .ab-flip button[aria-pressed="true"] { background: color-mix(in srgb, var(--rd-ember) 18%, transparent); color: #fff; box-shadow: inset 0 0 0 1px var(--rd-ember); border-radius: 8px; }
.rd .ab-match { color: #d6d2ca; font-size: 15px; display: flex; gap: 8px; align-items: center; } .rd .ab-match input { accent-color: var(--rd-ember); }
.rd .ab-bar { flex: 1 1 160px; height: 6px; border-radius: 4px; background: #060607; overflow: hidden; } .rd .ab-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff4a1c, #ff8a4d); }

/* forms and the free/paid download blocks */
.rd form.signup { background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); border: 1px solid var(--rd-line); border-radius: var(--rd-r); padding: 24px 26px; }
.rd form.signup h3 { font-size: 22px; margin: 0 0 8px; }
.rd form.signup p { color: #cfcbc4; }
.rd .signup .row { border-radius: 11px; }
.rd .signup input[type=email] { border-radius: 9px; }
.rd .nbtn { border-radius: 9px; }
.rd .nbtns .nbtn { border-radius: 10px; }
.rd .buy { border: 1px solid var(--rd-line-2); border-radius: var(--rd-r); background: rgba(8,8,9,0.55); padding: 22px 24px; }
.rd .buy .btn { margin-top: 6px; }
.rd .buy-price { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: #fff; margin: 0 0 8px; }
.rd .offer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.rd .offer .offer-now b { font-size: 40px; font-weight: 800; letter-spacing: -0.045em; color: #fff; margin-right: 6px; }
.rd .offer .offer-now s { color: #7d7b76; } .rd .offer em { font: 600 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9a9892; font-style: normal; }
.rd .chip { border-radius: 7px; border: 1px solid var(--rd-line-2); background: transparent; color: #d6d2ca; font: 600 12px var(--mono); letter-spacing: 0.1em; padding: 6px 11px; }
.rd .price-row { font-size: 20px; color: #d8d4cc; } .rd .price-row strong { font-size: 34px; letter-spacing: -0.04em; margin-right: 8px; }
.rd .proof { display: none; }
.rd-hero .proof, .rd-priceline .proof { display: none; }
.rd-priceline { margin-top: 22px; }
.rd-status { margin: 14px 0 0; color: #bdb9b1; font: 600 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }

/* the old release rows, the hub lists, the packs */
.rd .releases .rel { border: 1px solid var(--rd-line); border-radius: 12px; background: linear-gradient(180deg, var(--rd-card-2), var(--rd-card)); margin-bottom: 12px; }
.rd .releases .rel:hover { border-color: var(--rd-ember); }
.rd .releases { border: 0; gap: 12px; }

/* Vantage-style hero: art kept to the right and quiet, so the plugin is the star */
.rd-hero .rd-art { opacity: 0.55; }
.rd-hero.art .rd-shot { box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05), 0 0 120px -40px color-mix(in srgb, var(--rd-ember) 50%, transparent); }

.rd-shot .phone-vid { position: absolute; right: -18px; bottom: -34px; width: 22%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 24px 60px rgba(0,0,0,0.7); background: #000; }
.rd-shot .phone-vid video, .rd-shot video { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .rd-shot .phone-vid { right: 8px; bottom: -22px; width: 26%; } }


/* =====================================================================================================================================
   MATCH THE MOCKUP (Vantage page, 2026-11-03 late): flat near-black hero, small confident type, underlined eyebrow, split-waveform player,
   illustrated workflow cards, one divided Formats row, bordered CTA band with the explosion only on the right.
   ===================================================================================================================================== */
.rd-hero.plain { padding: 34px 0 22px; background: none; } .rd-hero.plain::before { display: none; }
.rd-hero.plain .rd-hero-grid { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: 36px; align-items: start; }
.rd-hero.plain .rd-crumbs { margin-bottom: 30px; font-size: 15px; }
.rd-hero .rd-h1, .rd .rd-h1 { font-size: clamp(34px, 4.1vw, 56px); line-height: 1.03; letter-spacing: -0.04em; }
.rd-hero.plain .rd-lede { font-size: 18px; max-width: 420px; margin-top: 18px; color: #d4d0c8; }
.rd-eyebrow.under { flex-direction: column; align-items: flex-start; gap: 8px; letter-spacing: 0.36em; font-size: 12.5px; margin-bottom: 18px; }
.rd-eyebrow.under::after { width: 28px; height: 2px; }
.rd-eyebrow.under.inline { margin-bottom: 14px; }
.rd-priceline .offer { gap: 0; flex-wrap: nowrap; margin-top: 0; }
.rd-priceline .offer-now b { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; }
.rd-priceline .offer-now s, .rd-priceline .offer-now em { display: none; }
.rd-priceline .offer .chip { border: 0; background: none; padding: 0 0 0 20px; margin-left: 20px; border-left: 1px solid var(--rd-line-2); border-radius: 0; font: 400 18px var(--sans); letter-spacing: 0; text-transform: none; color: #d6d2ca; }
.rd-priceline .offer .chip + .chip { display: none; }
.rd-priceline .offer .offer-now { display: inline; }
.rd-hero.plain .rd-actions { margin-top: 30px; gap: 12px; }
.rd-hero.plain .rd-btn { min-height: 52px; padding: 0 34px; font-size: 18px; border-radius: 8px; font-weight: 600; }
.rd-hero.plain .rd-shot { padding: 8px; background: linear-gradient(145deg, #b8b8bd, #6a6a70 40%, #2b2b30 75%, #7d7d83); border-radius: 13px; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.9); }
.rd-hero.plain .rd-shot img { border-radius: 7px; }
.rd-priceline .proof { display: none; }

/* player: split waveform, orange to the right of the playhead is the mastered half */
.rd-player { border-radius: 12px; padding: 10px 28px 10px 12px; background: #0d0d0e; gap: 20px; flex-wrap: nowrap; }
.rd-player .play { width: 52px; height: 52px; background: #17100e; }
.rd-player .ttl { padding: 0 22px 0 4px; font-size: 18px; }
.rd-player .wave { height: 44px; }
.rd-player .wave .w-raw { fill: #67655f; clip-path: inset(0 50% 0 0); }
.rd-player .wave .w-mas { fill: var(--rd-ember); clip-path: inset(0 0 0 50%); }
.rd-player .wave::after { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: var(--rd-ember-hi); box-shadow: 0 0 10px var(--rd-ember); }
.rd-player .ab-flip { border: 0; gap: 8px; overflow: visible; }
.rd-player .ab-flip button { border: 1px solid var(--rd-line-2); border-radius: 7px; padding: 9px 20px; font-weight: 500; font-size: 15px; background: #0a0a0b; }
.rd-player .ab-flip button[aria-pressed="true"] { border-color: var(--rd-ember); box-shadow: none; background: color-mix(in srgb, var(--rd-ember) 14%, transparent); color: #fff; }
.rd-player .lm { border-left: 1px solid var(--rd-line-2); padding-left: 22px; font-size: 14.5px; }
.rd-player .lm input { display: none; }
.rd-player .meta-note { display: none; }
@media (max-width: 900px) { .rd-player { flex-wrap: wrap; } .rd-player .wave::after { display: none; } }

/* workflow cards with the three illustrations */
.rd-steps { gap: 16px; }
.rd-step { min-height: 160px; padding: 20px 24px; }
.rd-step h3 { font-size: 22px; font-weight: 700; }
.rd-step p { font-size: 16px; margin-top: 8px; max-width: 18ch; }
.rd-step .art.wave { left: 36%; right: 0; top: 14%; bottom: 0; border: 0; border-radius: 0; background-size: cover; background-position: right bottom; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.rd-step .art.wave::after { display: none; }
.rd-step .art.tilt { left: 38%; top: 34%; right: -8%; bottom: -10%; border: 1px solid var(--rd-line-2); border-radius: 10px; background: #0a0a0b; transform: rotate(-8deg); padding: 12px 14px; overflow: hidden; }
.rd-step .art.tilt::after { display: none; }
.rd-step .art.tilt span { display: block; font: 700 11px var(--mono); letter-spacing: 0.14em; color: #ff6a3d; }
.rd-step .art.tilt b { display: block; margin-top: 8px; font: 700 16px/1.25 var(--mono); color: #e8e4dc; letter-spacing: -0.02em; }
.rd-step .art.ab2 { left: 34%; top: 38%; right: 0; bottom: 0; border: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 6px); -webkit-mask-image: radial-gradient(ellipse at 60% 80%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 60% 80%, #000, transparent 75%); }
.rd-step .art.ab2::after { display: none; }
.mini-ab { position: absolute; left: 6%; top: 20%; display: inline-flex; gap: 8px; -webkit-mask-image: none; }
.mini-ab span { border: 1px solid var(--rd-line-2); border-radius: 7px; padding: 8px 16px; font: 500 14px var(--sans); color: #d6d2ca; background: #0a0a0b; }
.mini-ab span.on { border-color: var(--rd-ember); background: color-mix(in srgb, var(--rd-ember) 14%, transparent); color: #fff; box-shadow: 0 0 20px -6px var(--rd-ember); }

/* six stages: tighter, as in the mockup */
.rd-stages { gap: 12px; }
.rd-stage { padding: 18px 10px 16px; border-radius: 10px; }
.rd-stage svg { width: 34px; height: 34px; margin-bottom: 8px; }
.rd-stage h3 { font-size: 18px; font-weight: 700; }
.rd-stage p { font-size: 13.5px; }

/* formats: one divided row between two hairlines */
.rule-y { border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); }
.rd-formats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr); align-items: center; gap: 0; }
.rd-formats > div:first-child { padding-right: 30px; }
.rd-formats .fmt { display: flex; align-items: center; justify-content: center; gap: 16px; border-left: 1px solid var(--rd-line); min-height: 64px; }
.rd-formats .fmt:last-child { border-right: 0; }
.rd-formats .fmt svg { width: 34px; height: 34px; fill: #fff; }
.rd-formats .fmt p { margin: 0; } .rd-formats .fmt b { display: block; font-size: 22px; color: #fff; letter-spacing: -0.02em; font-weight: 600; } .rd-formats .fmt span { color: #9a9892; font: 500 14px var(--mono); letter-spacing: 0.1em; }
@media (max-width: 760px) { .rd-formats { grid-template-columns: 1fr; gap: 16px; } .rd-formats .fmt { border-left: 0; justify-content: flex-start; } }
.rd-sec .rd-eyebrow.bar { letter-spacing: 0.34em; }
.rd-faq summary { font-size: 16px; padding: 15px 22px; } .rd-faq details { border-radius: 9px; }

/* closing band: bordered, explosion on the right only */
.rd-cta { border-radius: 14px; padding: 36px 40px; background-size: 62% auto; background-repeat: no-repeat; background-position: right center; background-color: #0d0d0e; }
.rd-cta::before { background: linear-gradient(90deg, #0d0d0e 0%, #0d0d0e 38%, rgba(13,13,14,0.55) 62%, rgba(13,13,14,0.05) 100%); }
.rd-cta h2 { font-size: clamp(38px, 4.6vw, 64px); font-weight: 700; }
.rd-cta p { font-size: 17px; max-width: 30ch; color: #d4d0c8; }
.rd-cta .pricing { font-size: 20px; } .rd-cta .pricing b { font-size: 38px; font-weight: 600; } .rd-cta .pricing .sep { width: 1px; height: 24px; background: var(--rd-line-2); display: inline-block; }
.rd-cta .rd-btn { padding: 0 32px; border-radius: 8px; font-size: 18px; font-weight: 600; }


/* ============ theming: each plugin page wears its plugin's own colours ============ */
.rd { background: var(--pg-bg, transparent); }
.rd:not([style*="--pg-bg"]) { background: none; }
.rd-hero.themed { background: radial-gradient(1100px 520px at 76% 6%, color-mix(in srgb, var(--rd-ember) 14%, transparent), transparent 72%); }
.rd-hero.themed .rd-art { opacity: 0.95; inset: 0 0 -1px 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.rd-hero.themed::before { display: none; }
.rd-hero.themed .rd-hero-grid { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: 36px; align-items: start; }
.rd-hero.themed { padding: 34px 0 36px; }
.rd-hero.themed .rd-crumbs { margin-bottom: 30px; font-size: 15px; }
.rd-hero.themed .rd-lede { font-size: 18px; max-width: 440px; }
.rd-hero.themed .rd-btn { min-height: 52px; padding: 0 30px; font-size: 18px; border-radius: 8px; font-weight: 600; }
.rd-hero.themed .rd-shot { padding: 8px; background: linear-gradient(145deg, #b8b8bd, #6a6a70 40%, #2b2b30 75%, #7d7d83); border-radius: 13px; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.9), 0 0 110px -36px var(--rd-ember); }
.rd-hero.themed .rd-shot img { border-radius: 7px; }
.rd-hero.themed .rd-priceline .offer-now b { font-size: 38px; font-weight: 600; }
.rd-hero.themed .rd-priceline .offer .chip { border: 0; background: none; padding: 0 0 0 20px; margin-left: 20px; border-left: 1px solid var(--rd-line-2); border-radius: 0; font: 400 18px var(--sans); letter-spacing: 0; text-transform: none; color: #d6d2ca; }
.rd-hero.themed .rd-priceline .offer .chip + .chip { display: none; }
.rd-hero.themed .rd-priceline .offer-now s, .rd-hero.themed .rd-priceline .offer-now em { display: none; }
.rd-hero.themed .rd-status { font-size: 11.5px; }
.rd .rd-cta { background-size: 62% auto; background-repeat: no-repeat; background-position: right center; background-color: color-mix(in srgb, var(--pg-bg, #0d0d0e) 70%, #000); }
.rd .rd-cta::before { background: linear-gradient(90deg, color-mix(in srgb, var(--pg-bg, #0d0d0e) 70%, #000) 0%, color-mix(in srgb, var(--pg-bg, #0d0d0e) 70%, #000) 38%, transparent 100%); }
.pc:hover { box-shadow: 0 24px 50px -28px var(--acc, var(--rd-ember)); }

/* sizes closer to the mockup */
.rd-h2 { font-size: clamp(26px, 3.1vw, 42px); }
.rd .h2 { font-size: clamp(26px, 3.1vw, 42px); }
.rd-formats .rd-h2 { font-size: clamp(26px, 2.8vw, 36px); white-space: nowrap; }
/* workflow cards: art sits to the right of the copy, never under it */
.rd-step p { max-width: 15ch; }
.rd-step .art.tilt { left: 54%; top: 40%; right: -14%; bottom: -14%; }
.rd-step .art.wave { left: 46%; }
.rd-step .art.ab2 { left: 50%; top: 30%; }
.mini-ab { left: 4%; top: 12%; flex-direction: column; } .mini-ab span { padding: 6px 14px; font-size: 13px; }


/* ===== workflow illustrations, from the mockup crops ===== */
.rd-step { min-height: 170px; padding: 20px 24px; overflow: hidden; }
.rd-step p { max-width: 14ch; }
.rd-step .art { position: absolute; border: 0; background: none; opacity: 1; -webkit-mask-image: none; mask-image: none; transform: none; padding: 0; }
.rd-step .art::after { display: none; }
.rd-step .art.ridge { left: 30%; right: 0; top: 24%; bottom: 0; background-size: cover; background-position: right bottom; background-repeat: no-repeat; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rd-ember) 45%, transparent)); border-radius: 0 0 var(--rd-r) 0; }
.rd-step .art.tilt { left: 46%; right: -6%; top: 38%; bottom: -16%; border: 1px solid var(--rd-line-2); border-radius: 10px; background: #08080a; transform: rotate(-6deg); transform-origin: left bottom; padding: 14px 16px; }
.rd-step .art.tilt span { display: block; font: 700 12px var(--mono); letter-spacing: 0.12em; color: var(--rd-ember-hi); }
.rd-step .art.tilt b { display: block; margin-top: 8px; font: 500 15px/1.2 var(--mono); color: #ece8e0; letter-spacing: -0.02em; white-space: nowrap; }
.rd-step .art.tilt svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
.rd-step .art.ab2 { left: 40%; right: 0; top: 0; bottom: 0; }
.rd-step .art.ab2 .bgwave { position: absolute; inset: 14% 4% 14% 8%; width: 88%; height: 72%; fill: #6d6b66; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse at 55% 50%, #000 15%, transparent 72%); }
.mini-ab { position: absolute; left: 12%; top: 50%; transform: translateY(-50%); display: inline-flex; flex-direction: row; gap: 8px; }
.mini-ab span { border: 1px solid #3a3a40; border-radius: 8px; padding: 8px 16px; font: 500 14px var(--sans); color: #d6d2ca; background: #0b0b0c; }
.mini-ab span.on { border-color: var(--rd-ember); background: color-mix(in srgb, var(--rd-ember) 16%, #0b0b0c); color: #fff; box-shadow: 0 0 22px -6px var(--rd-ember); }

/* ===== closing band: the photographic explosion, right-aligned ===== */
.rd-cta.photo { background-size: auto 100%; background-position: right center; background-repeat: no-repeat; background-color: #0d0d0e; padding: 34px 40px; min-height: 230px; }
.rd-cta.photo::before { background: linear-gradient(90deg, #0d0d0e 0%, #0d0d0e 46%, rgba(13,13,14,0.35) 66%, transparent 100%); }


/* ===== fixes after review: copy never sits under the art; the toggle stays inside its card; CTA text stays left of the photo ===== */
.rd-step .art.ridge { left: 46%; top: 30%; }
.rd-step .art.ab2 { left: 38%; }
.mini-ab { left: 4%; top: 64%; gap: 6px; }
.mini-ab span { padding: 7px 12px; font-size: 13px; }
.rd-step .art.tilt { left: 50%; }
.rd-cta.photo .rd-cta-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.85fr); gap: 36px; }
.rd-cta.photo .rd-cta-grid > .side { grid-column: 2; }
.rd-cta.photo { background-size: auto 100%; }
.rd-cta.photo::before { background: linear-gradient(90deg, #0d0d0e 0%, #0d0d0e 52%, rgba(13,13,14,0.3) 72%, transparent 100%); }
@media (max-width: 960px) { .rd-cta.photo .rd-cta-grid { grid-template-columns: 1fr; } .rd-cta.photo .rd-cta-grid > .side { grid-column: auto; } .rd-cta.photo { background-size: auto 60%; background-position: right bottom; } .rd-cta.photo::before { background: rgba(13,13,14,0.78); } }


/* ===== second pass on the three workflow cards and the CTA band ===== */
.rd-step { min-height: 190px; }
.rd-step p { max-width: 12ch; }
.rd-step .art.ridge { left: 52%; right: -2%; top: 30%; bottom: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); border-radius: 0; background-size: 135% 100%; background-position: right bottom; }
.rd-step .art.tilt { left: 52%; top: 44%; }
.rd-step .art.ab2 { left: 36%; top: 0; bottom: 0; right: 0; }
.mini-ab { left: 14%; top: 66%; transform: translateY(-50%); }
.rd-cta.photo::before { background: linear-gradient(90deg, #0d0d0e 0%, #0d0d0e 60%, rgba(13,13,14,0.55) 74%, transparent 90%); }
.rd-cta .pricing { flex-wrap: nowrap; gap: 14px; font-size: 18px; white-space: nowrap; }
.rd-cta .pricing b { font-size: 34px; }

.rd-step .art.ridge { left: 44%; right: 0; top: 26%; background-size: cover; background-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); }
.rd-cta .side .fine { margin-top: 10px; }


/* ===== workflow cards, high-resolution renders ===== */
.rd-step .art.ridge { left: 28%; right: 0; top: 18%; bottom: 0; background-size: auto 112%; background-position: right bottom; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); filter: none; }
.rd-step .art.ab2 { left: 30%; right: 0; top: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.9; }
.rd-step .art.tilt { left: 48%; top: 42%; right: -8%; bottom: -14%; }
.rd-cta.photo { background-size: auto 100%; background-position: right center; min-height: 260px; }

.rd-cta.photo { background-size: auto 118%; background-position: 100% 60%; }
.rd-cta.photo::before { background: linear-gradient(90deg, #0d0d0e 0%, #0d0d0e 46%, rgba(13,13,14,0.4) 62%, transparent 80%); }
.rd-step .art.ridge { -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 62%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 75% 70% at 70% 62%, #000 45%, transparent 100%); left: 22%; top: 8%; background-size: auto 118%; }
.rd-step .art.ab2 { opacity: 1; filter: brightness(1.6); }

.rd-step { min-height: 200px; }
.rd-step .art.ridge { left: 36%; right: 4%; top: auto; bottom: 0; height: 62%; background-size: 100% 100%; background-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, #000 70%, transparent 100%); mask-composite: intersect; }
.rd-step .art.ab2 { left: 40%; right: 2%; top: 8%; bottom: 8%; background-size: 100% 100%; filter: brightness(1.8); }

.rd-step .art.ridge { right: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 88%, transparent 100%), linear-gradient(0deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 88%, transparent 100%), linear-gradient(0deg, #000 70%, transparent 100%); }
.rd-step .art.ab2 { top: 34%; bottom: 6%; left: 42%; right: 0; }
.rd-step .art.ab2 .mini-ab { top: 50%; left: 8%; }


/* ===== shorter closing band (Jeremy: shrink it) ===== */
.rd-cta.photo { min-height: 0; padding: 22px 34px; background-size: auto 140%; background-position: 100% 55%; }
.rd-cta.photo .rd-cta-grid { gap: 28px; align-items: center; }
.rd-cta.photo h2 { font-size: clamp(30px, 3.3vw, 46px); margin: 0 0 6px; }
.rd-cta.photo p { font-size: 15.5px; margin: 6px 0 0; line-height: 1.4; }
.rd-cta.photo .rd-eyebrow.under { margin-bottom: 8px; }
.rd-cta.photo .pricing { font-size: 16px; gap: 12px; } .rd-cta.photo .pricing b { font-size: 28px; }
.rd-cta.photo .rd-actions { margin-top: 12px !important; gap: 10px; flex-wrap: nowrap; }
.rd-cta.photo .rd-btn { min-height: 42px; padding: 0 22px; font-size: 16px; }
.rd-cta.photo .fine { margin-top: 8px; font-size: 12.5px; }
.rd-cta.photo .side { padding-left: 28px; }
#buy-vantage .buy { margin-top: 10px; padding: 12px 14px; }


/* ===== HOME, matched to the new mockup (2026-11-03 night) ===== */
.rd.home .rd-sec { padding: 30px 0; }
.rd.home .rd-sec.tight { padding: 18px 0 10px; }
.rd-hero.plain.home { padding: 44px 0 14px; }
.rd-hero.plain.home .rd-hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 34px; align-items: center; }
.rd-hero.home .rd-h1 { font-size: clamp(46px, 6.2vw, 84px); line-height: 1; letter-spacing: -0.045em; font-weight: 700; }
.rd-hero.home .rd-lede { font-size: clamp(19px, 2.1vw, 27px); line-height: 1.28; max-width: 440px; margin-top: 22px; }
.rd-hero.plain.home .rd-actions { margin-top: 34px; }
.rd-hero.plain.home .rd-btn { padding: 0 30px; }
.rd-cap .sep { display: inline-block; vertical-align: middle; margin: 0 14px; }
.rd-hero.home .rd-cap { margin-top: 14px; font-size: 17px; }
.rd.home .rd-sec-head { align-items: center; margin-bottom: 20px; }
.rd-chips.plain { border: 0; padding: 0; }
.rd-chips.sm { gap: 10px; }
.rd-chips.sm .rd-chip { min-height: 36px; padding: 0 20px; font-size: 14.5px; border-radius: 7px; }
.rd-chip.on { background: var(--rd-ember); border-color: var(--rd-ember); color: #fff; font-weight: 700; }
.rd-pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .rd-pcards { grid-template-columns: 1fr; } }
.rd-pcard { display: block; border: 1px solid var(--rd-line-2); border-radius: 12px; overflow: hidden; background: #0e0e10; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.rd-pcard:hover { transform: translateY(-3px); border-color: var(--acc, var(--rd-ember)); box-shadow: 0 22px 46px -28px var(--acc, var(--rd-ember)); }
.rd-pcard .im { aspect-ratio: 16 / 10.6; background-size: cover; background-position: center; display: grid; place-items: center; padding: 8px; }
.rd-pcard .im img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.55)); }
.rd-pcard .tx { padding: 8px 14px 16px; }
.rd-pcard h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.rd-pcard p { margin: 4px 0 0; color: #cfcbc4; font-size: 15.5px; }
.rd-btn.orange { color: var(--rd-ember-hi); background: transparent; border-color: var(--rd-ember); }
.rd-btn.orange:hover { background: color-mix(in srgb, var(--rd-ember) 14%, transparent); color: #fff; }
.rd-proof h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1; }
.rd-proof p { font-size: 17px; margin: 12px 0 16px; max-width: 18ch; }
.rd-proof li { font-size: 14px; }
.rd-proof .lbl { font-size: 12.5px; }
.rd-banner.slim { padding: 16px 30px; min-height: 0; flex-wrap: nowrap; background-position: right center; background-size: cover; }
.rd-banner.slim::before { background: linear-gradient(90deg, rgba(9,9,10,0.96) 0%, rgba(9,9,10,0.55) 55%, rgba(9,9,10,0.1) 100%); }
.rd-banner.slim h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; }
.rd-banner.slim p { margin: 4px 0 0; font-size: 17px; }
.rd-banner.slim .rd-btn { min-height: 46px; padding: 0 26px; font-size: 16px; }
@media (max-width: 700px) { .rd-banner.slim { flex-wrap: wrap; } }
.rd-note.over { position: relative; min-height: 158px; flex-direction: row; align-items: flex-end; justify-content: space-between; background-size: cover; background-position: center; }
.rd-note.over::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,9,0.94) 0%, rgba(8,8,9,0.6) 52%, rgba(8,8,9,0.2) 100%); }
.rd-note.over > * { position: relative; }
.rd-note.over .tx { padding: 14px 8px 14px 18px; flex: 1; min-width: 0; }
.rd-note.over h3 { font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
.rd-note.over p { font-size: 14px; line-height: 1.35; color: #d6d2ca; flex: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rd-note.over .go { align-self: flex-end; margin: 0 18px 16px 0; color: var(--rd-ember-hi); font-size: 20px; }
.rd-signup.slim { padding: 22px 30% 22px 34px; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 28px; background-position: right center; background-size: cover; }
.rd-signup.slim::before { background: linear-gradient(90deg, rgba(9,9,10,0.97) 0%, rgba(9,9,10,0.94) 62%, rgba(9,9,10,0.12) 100%); }
.rd-signup.slim h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; }
.rd-signup.slim p.sub { font-size: 16px; margin-top: 6px; }
@media (max-width: 860px) { .rd-signup.slim { padding: 24px 22px; grid-template-columns: 1fr; } }

/* home fixes after first preview: headline fits two lines, buttons share a row, signup is a bare input + button */
.rd-hero.plain.home .rd-hero-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
.rd-hero.home .rd-h1 { font-size: clamp(42px, 5.4vw, 74px); }
.rd-hero.plain.home .rd-actions { flex-wrap: nowrap; gap: 12px; }
.rd-hero.plain.home .rd-btn { white-space: nowrap; padding: 0 24px; font-size: 17px; }
.rd .rd-signup.slim form.signup { background: none; border: 0; padding: 0; box-shadow: none; }
.rd-signup.slim .row { flex-wrap: nowrap; padding: 4px; border: 1px solid var(--rd-line-2); border-radius: 10px; background: rgba(8,8,9,0.7); }
.rd-signup.slim input[type=email] { border: 0; background: transparent; min-height: 46px; flex: 1 1 auto; min-width: 0; }
.rd-signup.slim .nbtn { min-height: 46px; flex: none; }
.rd-signup.slim .fine { display: none; }
.rd-footer .ft-brand p { font-family: var(--sans); }


/* ===== MATCH THE NEW MOCKUPS EXACTLY (2026-11-04: DSA-Homepage.png, DSA-Vantage.png) ===== */
.rd-shot.flat, .rd-hero.plain .rd-shot.flat, .rd-hero.plain.home .rd-shot.flat { padding: 0; background: #0b0b0c; border: 1px solid #2d2d31; border-radius: 6px; box-shadow: 0 30px 60px -34px rgba(0,0,0,0.95); }
.rd-shot.flat img { border-radius: 5px; }
.rd-pcard { background: #0d0d0f; }
.rd-pcard .im { background: none; padding: 14px 14px 6px; aspect-ratio: 16 / 10.4; }
.rd-pcard .im img { filter: none; border-radius: 4px; }
.rd-proof > div:first-child { border-right: 1px solid var(--rd-line-2); border-radius: 0; padding-right: 22px; margin-right: 0; }
.rd-proof { gap: 14px; }
.rd-banner.slim { background-size: cover; background-position: right center; }
.rd-banner.slim::before { background: linear-gradient(90deg, rgba(8,8,9,0.97) 0%, rgba(8,8,9,0.7) 38%, rgba(8,8,9,0.08) 100%); }
.rd-note.over { background-size: cover; background-position: center; }
.rd-note.over::before { background: linear-gradient(0deg, rgba(8,8,9,0.92) 0%, rgba(8,8,9,0.5) 50%, rgba(8,8,9,0.05) 100%); }
.rd-signup.slim { background-size: cover; background-position: 78% center; }
.rd-signup.slim::before { background: linear-gradient(90deg, rgba(8,8,9,0.97) 0%, rgba(8,8,9,0.93) 62%, rgba(8,8,9,0.05) 100%); }
/* vantage workflow: the clipboard and the big A / B pair, as drawn in the mockup */
.rd-step .art.clip { left: auto; right: 22px; top: 50%; bottom: auto; width: 64px; height: 78px; margin-top: -39px; transform: none; -webkit-mask-image: none; mask-image: none; background: none; filter: none; }
.rd-step .art.clip svg { width: 100%; height: 100%; }
.rd-step .art.abbig { left: auto; right: 24px; top: 50%; bottom: auto; width: auto; height: auto; transform: translateY(-50%); display: flex; gap: 14px; background: none; opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; }
.rd-step .art.abbig span { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid #8d8b86; border-radius: 6px; color: #f2eee7; font: 600 22px var(--sans); background: #0b0b0c; }
.rd-step .art.abbig span.on { border-color: var(--rd-ember); color: #fff; box-shadow: 0 0 22px -4px var(--rd-ember), inset 0 0 12px -6px var(--rd-ember); background: color-mix(in srgb, var(--rd-ember) 12%, #0b0b0c); }
.rd-cta.photo { background-size: cover; background-position: right center; background-color: #0d0d0e; }
.rd-cta.photo::before { background: linear-gradient(90deg, #0d0d0e 0%, #0d0d0e 38%, rgba(13,13,14,0.55) 58%, rgba(13,13,14,0.0) 100%); }
/* the mockup footer */
.rd-footer { padding: 36px 0 26px; margin-top: 30px; }
.rd-footer .ft-grid { grid-template-columns: 1.55fr 1fr 1fr 1fr auto; gap: 30px; }
.rd-footer.v3 .ft-grid { grid-template-columns: 1.5fr 0.9fr 1fr 0.9fr 1fr auto; gap: 24px; }
.rd-footer .ft-brand p { max-width: 300px; font-size: 14.5px; margin-top: 14px; }
.rd-footer .ft-col { gap: 7px; } .rd-footer .ft-col h4 { font-size: 14.5px; margin-bottom: 4px; } .rd-footer .ft-col a { font-size: 14px; }
.rd-footer .ft-social { padding-left: 24px; }
.rd-footer .ft-line { margin: 22px 0 0; padding-top: 14px; font-size: 12px; line-height: 1.7; }

.rd-player { min-width: 0; } .rd-player .wave { flex: 1 1 120px; min-width: 110px; } .rd-player .ttl { white-space: normal; }

/* the checkout block stays in the page (Paddle needs its button) but the band shows only price + two buttons, as in the mockup */
#buy-vantage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd-footer.v3 .ft-grid { grid-template-columns: 1.9fr 0.8fr 0.95fr 0.8fr 1.05fr auto; gap: 16px; }