/* Genesis website, the Version B story ("One page"). Loaded after site.css, glass.css and vision.css;
   only the home page uses these sections. Big type, one idea per screen, the brand gradient on the line that lands. */

:root { --grad: linear-gradient(92deg, #FFB340 0%, #FF7A3D 55%, #FF453A 100%); --xl: clamp(40px, 6.4vw, 84px); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-contrast: more) { .grad { background: none; color: var(--accent-text); } }
.sec-head h2.xl, h2.xl { font-size: var(--xl); line-height: 1.04; letter-spacing: -0.038em; font-weight: 800; text-wrap: balance; }
.sec-head.center { max-width: 900px; }
.sec-head.center p { max-width: 60ch; }
.kicker { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-text); margin: 0 0 12px; }
.kicker .tag { font-size: 13px; }

/* ---------- Hero: centered, like a product page. Three phones fan out below. ---------- */
.hero2 { padding-top: clamp(36px, 6vw, 84px); padding-bottom: 0; text-align: center; }
.hero2::before { inset: 22% 0 auto 0; width: 100%; height: 90%; margin: 0 auto;
  background: radial-gradient(closest-side at 50% 50%, rgba(255, 179, 64, 0.24), transparent 72%),
              radial-gradient(closest-side at 62% 58%, rgba(255, 69, 58, 0.14), transparent 70%); }
.hero2 .wrap { display: block; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero2 .hero-icon { margin-bottom: 22px; }
.hero2 .lyric { font-size: clamp(52px, 7.4vw, 100px); letter-spacing: -0.045em; margin-bottom: 14px; }
.hero-tag { font-size: clamp(24px, 3.2vw, 40px); font-weight: 750; letter-spacing: -0.028em; line-height: 1.12; margin: 0 0 18px; text-wrap: balance; }
.hero2 .lead { max-width: 38ch; margin: 0 auto 28px; text-wrap: balance; }
.hero2 .cta-row { justify-content: center; }
.stage { position: relative; display: flex; justify-content: center; align-items: flex-start; margin-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px); }
.stage .phone.mid { width: min(310px, 56vw); z-index: 2; }
.stage .phone.side { width: min(250px, 40vw); position: relative; z-index: 1; margin-top: 12%; }
.stage .phone.left { margin-right: -2%; }
.stage .phone.right { margin-left: -2%; }
@media (max-width: 600px) {
  .stage .phone.mid { width: 58vw; }
  .stage .phone.side { width: 42vw; margin-top: 18%; }
  .stage .phone.left { margin-right: -16vw; }
  .stage .phone.right { margin-left: -16vw; }
}
.js-motion .stage .phone { animation: gm-phone 1.5s var(--ease-out) 0.35s backwards; }
.js-motion .stage .phone.left { transform: translate3d(calc(var(--hp, 0) * -70px), calc(var(--hp, 0) * 40px), 0) rotate(calc(var(--hp, 0) * -4deg)); animation-delay: 0.55s; }
.js-motion .stage .phone.right { transform: translate3d(calc(var(--hp, 0) * 70px), calc(var(--hp, 0) * 40px), 0) rotate(calc(var(--hp, 0) * 4deg)); animation-delay: 0.62s; }
.js-motion .stage .phone.mid { transform: translate3d(0, calc(var(--hp, 0) * -20px), 0) scale(calc(1 + var(--hp, 0) * 0.04)); }
.js-motion .hero-tag { animation: gm-up 1s var(--ease-out) 0.45s backwards; }

/* ---------- Statement: four lines that light up as you reach them ---------- */
.statement { padding: clamp(90px, 14vw, 200px) 0; }
.statement .wrap { max-width: 1040px; }
.st-line { font-size: clamp(34px, 5.6vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; margin: 0 0 0.42em; display: flex; align-items: center; gap: 0.32em; text-wrap: balance; }
.st-line:last-child { margin: 0.7em 0 0; }
.st-big { font-size: clamp(40px, 7vw, 96px); display: block; }
.st-ic { flex: none; width: 0.8em; height: 0.8em; border-radius: 0.2em; position: relative; }
.st-notes { background: linear-gradient(#FFD45A, #FFB340); }
.st-notes::after { content: ""; position: absolute; inset: 34% 18% 18%; background: repeating-linear-gradient(#fff 0 2px, transparent 2px 7px); opacity: 0.85; }
.st-memos { background: linear-gradient(#3A3A3E, #1C1C1E); }
.st-memos::after { content: ""; position: absolute; inset: 30% 16%; background: repeating-linear-gradient(90deg, #FF453A 0 2px, transparent 2px 5px);
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 50%, #000 60%, transparent 62%); mask: radial-gradient(ellipse 70% 60% at 50% 50%, #000 60%, transparent 62%); }
.st-head { background: radial-gradient(circle at 50% 42%, #FFB340 0 22%, transparent 23%), linear-gradient(135deg, #BF5AF2, #64D2FF); border-radius: 50%; }
.js-motion .st-line { opacity: 0.16; transform: translate3d(0, 20px, 0); filter: blur(2px); transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out), filter 0.8s var(--ease-out); }
.js-motion .st-line.lit { opacity: 1; transform: none; filter: none; }
.js-motion .st-line.past { opacity: 0.32; }

/* ---------- One page. The whole song. ---------- */
.onepage { padding-top: clamp(40px, 5vw, 80px); }
.anatomy { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; max-width: 1080px; margin: 0 auto; }
.anatomy-phone .phone { width: min(330px, 70vw); }
.co-col { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 56px); }
.co-col:first-child { text-align: right; }
.co h3 { font-size: 20px; font-weight: 750; letter-spacing: -0.015em; margin: 0 0 6px; display: inline-flex; align-items: center; gap: 10px; }
.co-col:first-child .co h3 { flex-direction: row-reverse; }
.co h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--write)); box-shadow: 0 0 12px var(--dot, var(--write)); flex: none; }
.co p { margin: 0; color: var(--text-2); font-size: 16px; max-width: 34ch; }
.co-col:first-child .co p { margin-left: auto; }
.c-yel { --dot: #FFB340; } .c-grn { --dot: #30D158; } .c-blu { --dot: #64D2FF; } .c-red { --dot: #FF453A; } .c-pur { --dot: #BF5AF2; }
@media (max-width: 860px) {
  .anatomy { grid-template-columns: 1fr 1fr; }
  .anatomy-phone { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: center; margin-bottom: 12px; }
  .co-col, .co-col:first-child { text-align: left; gap: 28px; align-content: start; }
  .co-col:first-child .co h3 { flex-direction: row; }
  .co-col:first-child .co p { margin-left: 0; }
}
@media (max-width: 520px) { .anatomy { grid-template-columns: 1fr; } .co-col { gap: 24px; } }

/* ---------- Three moves ---------- */
.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.move { background: var(--bg-soft); border-radius: 32px; padding: clamp(26px, 3vw, 38px) clamp(24px, 2.6vw, 34px) 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.move-k { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--accent-text); margin: 0 0 14px; }
.move-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: var(--on-write); background: var(--grad); }
.move h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.14; letter-spacing: -0.028em; font-weight: 800; margin: 0 0 12px; text-wrap: balance; }
.move > p:not(.move-k) { color: var(--text-2); font-size: 16px; margin: 0 0 24px; }
.move-media { margin-top: auto; display: flex; justify-content: center; height: clamp(360px, 34vw, 440px); overflow: hidden; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.move-media .phone { width: min(260px, 82%); flex: none; align-self: flex-start; }
.move-media .clip-toggle { top: 14px; bottom: auto; }
.moves-dots { display: none; }
@media (max-width: 980px) {
  .moves { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; scroll-padding: 0 var(--gutter); }
  .moves::-webkit-scrollbar { display: none; }
  .move { flex: 0 0 min(82vw, 380px); scroll-snap-align: start; }
  .moves-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .moves-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.3s, width 0.3s; }
  .moves-dots span.on { width: 22px; border-radius: 4px; background: var(--text-2); }
}

/* ---------- Genesis writes it down: always dark, like a stage ---------- */
.dark-band { --bg: #000; --bg-soft: #131317; --card: #1C1C1E; --line: rgba(235, 235, 245, 0.14); --text: #F5F5F7; --text-2: #A1A1A8; --accent-text: #FFB340;
  color-scheme: dark; background: #000; color: var(--text); position: relative; }
.dark-band .chips li { color: var(--text); }
.triad { list-style: none; margin: 0 auto clamp(56px, 7vw, 96px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); max-width: 1000px; }
.triad li { font-size: clamp(24px, 2.6vw, 34px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.tri-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px; color: #1C1000; background: var(--grad); box-shadow: 0 10px 30px -10px rgba(255, 110, 50, 0.7); }
.tri-ic svg { width: 28px; height: 28px; }
@media (max-width: 760px) { .triad { grid-template-columns: 1fr; max-width: 420px; } .triad li { display: flex; align-items: center; gap: 16px; } .tri-ic { margin: 0; flex: none; } }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: clamp(56px, 7vw, 88px) auto 0; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 26px; }
.tile h3 { font-size: 20px; letter-spacing: -0.015em; margin: 0 0 8px; }
.tile p { margin: 0; color: var(--text-2); font-size: 16px; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; max-width: 520px; } }

/* ---------- Never stuck for long ---------- */
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.help-card { background: var(--card); border-radius: 32px; padding: clamp(26px, 3vw, 36px) clamp(24px, 2.6vw, 32px) 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 0 var(--line) inset, 0 20px 40px -30px rgba(0, 0, 0, 0.25); }
.help-card h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.14; letter-spacing: -0.028em; font-weight: 800; margin: 0 0 10px; text-wrap: balance; }
.help-card p { color: var(--text-2); font-size: 16px; margin: 0 0 24px; }
.hc-media { margin-top: auto; display: flex; justify-content: center; height: clamp(320px, 30vw, 400px); overflow: hidden; -webkit-mask: linear-gradient(#000 80%, transparent); mask: linear-gradient(#000 80%, transparent); }
.hc-media .phone { width: min(250px, 80%); flex: none; align-self: flex-start; }
.help-more { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; }
.help-more .chips { justify-content: center; }
.help-more .req { margin-top: 12px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ---------- Catch it before it's gone ---------- */
.catch-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.catch-media { display: flex; justify-content: center; }
.catch-media .phone { width: min(320px, 70vw); }
.quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.quick svg { width: 28px; height: 28px; color: var(--accent-text); margin-bottom: 10px; }
.quick h3 { font-size: 18px; margin: 0 0 4px; letter-spacing: -0.01em; }
.quick p { margin: 0; color: var(--text-2); font-size: 15.5px; }
@media (max-width: 860px) { .catch-grid { grid-template-columns: 1fr; } .catch-media { order: 2; } }
@media (max-width: 480px) { .quick { grid-template-columns: 1fr; } }

/* ---------- Sound ---------- */
.sound { overflow: hidden; position: relative; }
.sound::before { content: ""; position: absolute; left: 50%; top: 40%; width: min(1100px, 150vw); height: 60%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side at 40% 50%, rgba(191, 90, 242, 0.14), transparent 70%), radial-gradient(closest-side at 62% 55%, rgba(255, 140, 50, 0.16), transparent 70%); }
.sound .wrap { position: relative; }
.sound-media { display: flex; justify-content: center; gap: clamp(14px, 3vw, 36px); align-items: flex-start; }
.sound-media .phone { width: min(280px, 44vw); }
.sound-media .phone.lower { margin-top: 10%; }
.sound .chips { justify-content: center; margin: clamp(36px, 4vw, 52px) auto 0; max-width: 760px; }

/* ---------- Export ---------- */
#export h2.xl { font-size: clamp(36px, 5vw, 64px); margin: 0 0 14px; }
.daw-note { margin-top: 26px; padding: 20px 22px; border-radius: 20px; background: var(--bg-soft); }
.daw-note h3 { font-size: 19px; margin: 0 0 4px; }
.daw-note p { margin: 0; color: var(--text-2); }

/* ---------- The bandmate who never forgets ---------- */
.bandmate { text-align: center; padding-top: clamp(80px, 11vw, 160px); }
.trio { display: flex; justify-content: center; gap: clamp(14px, 2vw, 22px); margin-bottom: 28px; }
.obj { width: clamp(60px, 7vw, 76px); height: clamp(60px, 7vw, 76px); border-radius: 22px; display: grid; place-items: center; background: var(--bg-soft); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 30px -18px rgba(0, 0, 0, 0.35); }
.obj svg { width: 58%; height: 58%; }
.obj:nth-child(2) { color: var(--record); } .obj:nth-child(3) { color: #FF8A3D; } .obj:nth-child(1) { color: #E59A00; }
.bandmate h2.xl { max-width: 18ch; margin: 0 auto 18px; }
.bandmate .sub { font-size: clamp(20px, 2.2vw, 26px); color: var(--text-2); font-weight: 600; letter-spacing: -0.015em; margin: 0 auto; }
.bandmate .smalls-head { text-align: left; margin-top: clamp(72px, 9vw, 120px); }
.bandmate .smalls { margin-top: 20px; text-align: left; }

/* ---------- Finale ---------- */
.finale h2 { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -0.04em; }

/* ---------- Reveals for the new sections (story.js adds .in) ---------- */
.js-motion .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s var(--ease-out), transform 1.2s var(--ease-out); }
.js-motion .rv.in { opacity: 1; transform: none; }
.js-motion .sound-media .phone.rv { transform: translate3d(0, 60px, 0) scale(0.95); }
.js-motion .sound-media .phone.rv.in { transform: none; }
.js-motion .anatomy-phone .phone { opacity: 0; transform: translate3d(0, 50px, 0) scale(0.94); transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out); }
.js-motion .anatomy-phone .phone.in { opacity: 1; transform: none; }
.js-motion .catch-media .phone, .js-motion .trio .obj { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 0.9s var(--ease-out), transform 1.2s var(--ease-out); }
.js-motion .catch-media .phone.in, .js-motion .trio .obj.in { opacity: 1; transform: none; }
@media print { .js-motion .rv, .js-motion .st-line { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* Old anchors (#why, #how) still land on the right part of the page. */
.anchor { display: block; height: 0; }

/* Press kit: the story, ready to quote. */
.press-story { margin: 0 0 12px; padding: 22px 26px; border-left: 3px solid var(--write); background: var(--bg-soft); border-radius: 0 18px 18px 0; font-size: 18px; line-height: 1.55; }
.press-story p:last-child { margin-bottom: 0; }

/* ---------- Chord Explorer (Pro) ---------- */

.explorer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.explorer .kicker, .sound .kicker { display: inline-flex; align-items: center; gap: 8px; }
.explorer .sec-head p strong { font-weight: 750; }
@media (max-width: 860px) { .explorer-grid { grid-template-columns: 1fr; } }

/* Small line icons beside the tile titles in "It writes it down". */
.tile h3 { display: flex; align-items: center; gap: 10px; }
.tile-ic { width: 24px; height: 24px; flex: none; color: var(--accent-text); }

/* ---------- Condensed (Nov 2026): tighter bands, slimmer sections ---------- */
main .band { padding-block: clamp(52px, 6.5vw, 88px); }
.statement { padding: clamp(56px, 8vw, 110px) 0 clamp(24px, 3vw, 40px); }
.moves-band { padding-top: clamp(36px, 4vw, 56px); }
.move-media { height: clamp(300px, 28vw, 360px); }
.stage { margin-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(36px, 5vw, 64px); }
.stage .phone.mid { width: min(280px, 56vw); }
.stage .phone.side { width: min(220px, 40vw); }
.writes-sub { font-size: clamp(20px, 2.2vw, 26px) !important; font-weight: 650; letter-spacing: -0.015em; color: var(--text) !important; margin-top: 18px !important; text-wrap: balance; }
.dark-band .ba-step .phone { width: min(240px, 100%); }
.tiles { margin-top: clamp(40px, 5vw, 64px); }
.dark-band .req { text-align: center; margin-top: 22px; }
.hc-media { height: clamp(280px, 26vw, 340px); }
.sound-media .phone { width: min(230px, 40vw); }
.export-slim .export-in { max-width: 760px; margin: 0 auto; text-align: center; }
.export-slim .intro { margin: 0 auto 22px; color: var(--text-2); font-size: clamp(18px, 1.8vw, 21px); max-width: 52ch; }
.export-slim .chips { justify-content: center; margin: 0 auto; }
.export-slim .daw-note { text-align: left; }
.finale .trio { margin-bottom: 22px; }
.band.beta.finale p.bm-line { font-size: clamp(32px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; max-width: 20ch; margin: 0 auto 14px; text-wrap: balance; }
.band.beta.finale p.bm-sub { font-size: clamp(18px, 2vw, 22px); color: var(--text-2); font-weight: 600; margin: 0 auto clamp(48px, 6vw, 72px); }
.finale h2 { font-size: clamp(28px, 3.6vw, 44px); }
.legal-more { margin-top: 18px; }
.legal-more > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2); list-style: none; text-align: center; padding: 8px; }
.legal-more > summary::-webkit-details-marker { display: none; }
.legal-more > summary::after { content: " \203A"; }
.legal-more[open] > summary::after { content: " \2039"; }
@media (max-width: 900px) {
  .help-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; max-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; scroll-padding: 0 var(--gutter); }
  .help-grid::-webkit-scrollbar { display: none; }
  .help-card { flex: 0 0 min(80vw, 360px); scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .explorer .quick { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .explorer .quick p { font-size: 14px; }
  .tiles { gap: 12px; }
  .tile { padding: 20px; }
}
@media (min-width: 901px) {
  .sound .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .sound .sec-head.center { text-align: left; margin: 0; }
  .sound .sec-head.center p { margin: 0; }
  .sound .kicker { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .dark-band .ba { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .dark-band .ba-step .phone { width: 100%; }
  .dark-band .listen { width: 44px; padding: 26px 0 0; }
  .dark-band .listen-label { display: none; }
  .dark-band .listen .arrow { transform: none; animation-name: gm-nudge; }
  .dark-band .listen .wave { gap: 2px; height: 26px; } .dark-band .listen .wave i { width: 3px; }
  .js-motion .magic .before, .js-motion .magic .after { --rx: 0px; --ry: 30px; }
}
.st-line { font-size: clamp(30px, 4.4vw, 58px); }
.st-big { font-size: clamp(36px, 5.6vw, 76px); }
.hero2 { padding-top: clamp(28px, 4vw, 56px); }
.hero2 .hero-icon { width: 60px; height: 60px; margin-bottom: 16px; }
.dark-band .sec-head { margin-bottom: clamp(32px, 4vw, 48px); }
.moves-band .sec-head, .stuck .sec-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
@media (min-width: 901px) { .sound h2.xl { font-size: clamp(36px, 4.4vw, 60px); } }
.band.beta.finale p.bm-line { color: var(--text); }
.help-card h3 .tag { font-size: 12px; vertical-align: middle; position: relative; top: -3px; letter-spacing: 0.01em; }

/* Pro list in the pricing table: paywall order, names and icons (7 Nov) */
:root { --ic-purple:#a259e6; --ic-blue:#2f7cf6; --ic-yellow:#d9a400; --ic-orange:#f08a12; --ic-indigo:#5b5ce2; --ic-pink:#ec3f78; --ic-cyan:#1ba9d6; --ic-red:#ec4136; --ic-green:#2fb457; --ic-teal:#1aa9a0; --ic-vocal:#e5534b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-purple:#bf7cf5; --ic-blue:#5a9bff; --ic-yellow:#ffd23d; --ic-orange:#ffa23a; --ic-indigo:#8384ff; --ic-pink:#ff6b98; --ic-cyan:#5ccfee; --ic-red:#ff6a5f; --ic-green:#4fd27a; --ic-teal:#4fd2c6; --ic-vocal:#ff7a70; } }
:root[data-theme="dark"] { --ic-purple:#bf7cf5; --ic-blue:#5a9bff; --ic-yellow:#ffd23d; --ic-orange:#ffa23a; --ic-indigo:#8384ff; --ic-pink:#ff6b98; --ic-cyan:#5ccfee; --ic-red:#ff6a5f; --ic-green:#4fd27a; --ic-teal:#4fd2c6; --ic-vocal:#ff7a70; }
.compare.key .pl-row { display: flex; align-items: flex-start; gap: 12px; }
.compare.key .pl-ic { flex: none; width: 30px; height: 30px; margin-top: 1px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.compare.key .pl-ic svg { width: 20px; height: 20px; display: block; }
.compare.key .pl-ic.cluster { background: color-mix(in srgb, var(--ic-purple) 10%, transparent); }
.compare.key .pl-ic.cluster svg { width: 22px; height: 22px; }
.compare.key .pl-t { min-width: 0; }
.compare.key .pl-group th { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: 0; padding-top: 22px; }
@media (max-width: 600px) {
  .compare.key .pl-row { gap: 9px; }
  .compare.key .pl-ic { width: 26px; height: 26px; border-radius: 7px; }
  .compare.key .pl-ic svg { width: 17px; height: 17px; }
}