/* Compact product spotlight homepage. All product colors come from global-theme.css. */
:root {
  --spot-max: 1280px;
  --spot-gutter: clamp(18px, 3.4vw, 52px);
  --spot-radius: 16px;
  --spot-shadow: 0 22px 70px color-mix(in srgb, var(--app-bg) 72%, transparent);
}

body {
  background:
    radial-gradient(760px 360px at 9% -8%, color-mix(in srgb, var(--app-accent) 12%, transparent), transparent 68%),
    radial-gradient(720px 360px at 92% 6%, color-mix(in srgb, var(--app-secondary) 11%, transparent), transparent 66%),
    var(--app-bg);
  color: var(--app-text);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}

img, video { display: block; max-width: 100%; }
a { transition: color .18s ease, border-color .18s ease, transform .18s ease; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }

.spotlight-header,
.spotlight-hero,
.spotlight-pwa-band,
.spotlight-section,
.spotlight-difference,
.spotlight-footer {
  width: min(calc(100% - var(--spot-gutter) * 2), var(--spot-max));
  margin-inline: auto;
}

.spotlight-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 66px;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--app-line) 86%, transparent);
  background: color-mix(in srgb, var(--app-bg) 91%, transparent);
  backdrop-filter: blur(18px);
}
.spotlight-header .brand { flex: 0 0 auto; gap: 9px; color: var(--app-text); }
.spotlight-header .brand-mark-img, .spotlight-footer .brand-mark-img { width: 32px; height: 32px; flex: none; }
.spotlight-header .brand span { font-size: 16px; }
.spotlight-header .brand small { color: var(--app-faint); font-size: 8px; letter-spacing: .12em; }
.spotlight-header nav { flex: 1 1 auto; justify-content: center; gap: clamp(12px, 2vw, 28px); color: var(--app-muted); font-size: 12px; }
.spotlight-header nav a { white-space: nowrap; }
.spotlight-header nav a:hover { color: var(--app-accent); }
.spotlight-header .header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; }
.spotlight-header .header-account { color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.spotlight-header .header-account:hover { color: var(--app-text); }
.spotlight-header .header-online {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--app-accent);
  border-radius: 10px;
  background: var(--app-accent);
  color: var(--app-accent-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--app-accent) 22%, transparent);
}
.spotlight-header .header-online:hover { background: color-mix(in srgb, var(--app-accent) 84%, var(--app-text)); transform: translateY(-1px); }
.spotlight-header .header-download { border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 9%, transparent); color: var(--app-accent); white-space: nowrap; }
.spotlight-header .header-download:hover { background: color-mix(in srgb, var(--app-accent) 17%, transparent); transform: translateY(-1px); }
.homepage-candidate-download { position: relative; z-index: 29; display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; min-height: 38px; margin: 12px auto 0; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--app-accent) 52%, var(--app-line)); border-radius: 10px; background: color-mix(in srgb, var(--app-accent-soft) 42%, var(--app-panel)); color: var(--app-accent); font-size: 12px; font-weight: 750; white-space: nowrap; }
.homepage-candidate-download span { color: var(--app-text); font-size: 12px; }
.homepage-candidate-download:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent-soft) 62%, var(--app-panel)); transform: translateY(-1px); }

.landing-campaign {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) auto minmax(180px, .72fr) auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  width: min(calc(100% - var(--spot-gutter) * 2), var(--spot-max));
  margin: 14px auto 0;
  padding: 13px 15px 13px 17px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 58%, var(--app-line));
  border-radius: 14px;
  background: linear-gradient(108deg, color-mix(in srgb, var(--app-accent) 12%, var(--app-panel)), color-mix(in srgb, var(--app-secondary) 7%, var(--app-panel)) 68%);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--app-shadow) 24%, transparent);
  overflow: hidden;
}
.landing-campaign[hidden] { display: none !important; }
.landing-campaign::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--app-accent); }
.landing-campaign-copy { display: flex; min-width: 0; align-items: center; gap: 12px; }
.landing-campaign-copy > span { flex: none; padding: 6px 8px; border-radius: 999px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.landing-campaign-copy > div { display: grid; min-width: 0; gap: 2px; }
.landing-campaign-copy strong { font-size: 14px; }
.landing-campaign-copy small { color: var(--app-muted); font-size: 10px; }
.landing-campaign-price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.landing-campaign-price del { color: var(--app-faint); font-size: 10px; }
.landing-campaign-price strong { color: var(--app-accent); font-size: 27px; letter-spacing: -.05em; }
.landing-campaign-price span { color: var(--status-warning-text); font-size: 10px; font-weight: 750; }
.landing-campaign time { color: var(--app-text); font: 700 11px ui-monospace, "SFMono-Regular", Consolas, monospace; text-align: center; }
.landing-campaign-actions { display: flex; align-items: center; gap: 8px; }
.landing-campaign-actions a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.landing-campaign-actions a:first-child { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.landing-campaign-actions a:hover { border-color: var(--app-accent); color: var(--app-accent); transform: translateY(-1px); }
.landing-campaign-actions a:first-child:hover { background: color-mix(in srgb, var(--app-accent) 84%, var(--app-text)); color: var(--app-accent-ink); }
.landing-campaign.is-ended .landing-campaign-price del,
.landing-campaign.is-ended .landing-campaign-price span { display: none; }

.spotlight-hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: 520px;
  padding: 42px 0 30px;
}
.spotlight-hero-copy { min-width: 0; max-width: 590px; }
.spotlight-live-badge {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 7px 9px 7px 7px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent) 8%, var(--app-panel));
  color: var(--app-text);
  font-size: 11px;
}
.spotlight-live-badge span { flex: none; padding: 5px 8px; border-radius: 999px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.spotlight-live-badge strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotlight-live-badge i { flex: none; color: var(--app-accent); font-size: 15px; font-style: normal; }
.spotlight-live-badge:hover { border-color: var(--app-accent); transform: translateY(-1px); }
.spotlight-hero .eyebrow,
.spotlight-section .eyebrow { margin: 0 0 13px; color: var(--app-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.spotlight-hero h1 { margin: 0; max-width: 570px; font-family: "Newsreader", "Songti SC", serif; font-size: clamp(34px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.spotlight-hero h1 span { display: block; color: var(--app-accent); }
.spotlight-hero-lede { max-width: 560px; margin: 20px 0 0; color: var(--app-muted); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.75; }
.spotlight-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.button { min-height: 40px; border-radius: 10px; padding: 9px 14px; font-size: 12px; font-weight: 750; }
.button.primary { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.button.primary:hover { background: color-mix(in srgb, var(--app-accent) 84%, var(--app-text)); transform: translateY(-1px); }
.spotlight-pwa-action { min-height: 58px; gap: 20px; padding-inline: 18px; box-shadow: 0 14px 34px color-mix(in srgb, var(--app-accent) 26%, transparent); }
.spotlight-pwa-action > span { display: grid; gap: 2px; text-align: left; }
.spotlight-pwa-action small { font-size: 9px; font-weight: 750; letter-spacing: .08em; opacity: .78; }
.spotlight-pwa-action b { font-size: 20px; }
.button.secondary { border-color: var(--button-secondary-border); background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.spotlight-install .install-actions .spotlight-install-secondary { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-text); }
.spotlight-install .install-actions .spotlight-install-secondary:hover { border-color: var(--app-accent); color: var(--app-accent); }
.button.secondary:hover { border-color: var(--app-accent); background: var(--button-secondary-bg-hover); color: var(--app-accent); transform: translateY(-1px); }
.spotlight-pwa-detail { max-width: 560px; display: grid; gap: 4px; margin: 14px 0 0; padding: 11px 13px; border-left: 3px solid var(--app-accent); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--app-accent) 7%, var(--app-panel)); }
.spotlight-pwa-detail strong { color: var(--app-text); font-size: 12px; }
.spotlight-pwa-detail span { color: var(--app-muted); font-size: 11px; line-height: 1.55; }
.spotlight-proof { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 18px; color: var(--app-faint); font-size: 11px; }
.spotlight-proof i { margin-right: 4px; color: var(--app-accent); font-style: normal; }
.spotlight-hero .release-line { min-height: 18px; margin: 13px 0 0; color: var(--app-faint); font-size: 11px; }

.spotlight-hero-board { min-width: 0; margin: 0; border: 1px solid var(--app-line); border-radius: var(--spot-radius); background: var(--app-panel); box-shadow: var(--spot-shadow); overflow: hidden; }
.spotlight-board-head { min-height: 37px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border-bottom: 1px solid var(--app-line); color: var(--app-faint); font-size: 10px; letter-spacing: .08em; }
.spotlight-board-head b { color: var(--app-text); font-size: 11px; letter-spacing: 0; }
.spotlight-board-head em { margin-left: auto; color: var(--app-accent); font-size: 10px; font-style: normal; letter-spacing: 0; }
.spotlight-board-image { position: relative; aspect-ratio: 16 / 9.5; background: var(--app-panel-2); overflow: hidden; }
.spotlight-board-image img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 25%; opacity: 1; transform: scale(1.03); }
.spotlight-callout { position: absolute; display: inline-flex; align-items: center; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 88%, transparent); color: var(--app-text); font-size: 10px; box-shadow: 0 7px 22px color-mix(in srgb, var(--app-bg) 48%, transparent); backdrop-filter: blur(10px); }
.spotlight-callout::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--app-accent); }
.spotlight-callout-a { top: 15%; left: 10%; }
.spotlight-callout-b { top: 27%; right: 7%; }
.spotlight-callout-c { right: 9%; bottom: 12%; }
.spotlight-hero-board figcaption { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.spotlight-hero-board figcaption strong { font-size: 14px; }
.spotlight-hero-board figcaption span { color: var(--app-muted); font-size: 11px; }

.spotlight-pwa-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 7px;
  padding: 20px 23px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 62%, var(--app-line));
  border-radius: var(--spot-radius);
  background: linear-gradient(105deg, color-mix(in srgb, var(--app-accent) 12%, var(--app-panel)), color-mix(in srgb, var(--app-secondary) 8%, var(--app-panel)));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 24%, transparent);
}
.spotlight-pwa-band > div:first-child { min-width: 0; }
.spotlight-pwa-band .eyebrow { margin: 0 0 7px; color: var(--app-accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.spotlight-pwa-band h2 { margin: 0; font-family: "Newsreader", "Songti SC", serif; font-size: clamp(23px, 2.4vw, 31px); line-height: 1.1; }
.spotlight-pwa-band p:not(.eyebrow) { max-width: 680px; margin: 8px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.65; }
.spotlight-pwa-band-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.spotlight-pwa-band-actions .button { white-space: nowrap; }

.spotlight-difference { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); }
.spotlight-difference > div { min-height: 87px; display: grid; align-content: center; gap: 4px; padding: 13px 17px; border-right: 1px solid var(--app-line); background: var(--app-panel) !important; }
.spotlight-difference > div:last-child { border-right: 0; }
.spotlight-difference span { color: var(--app-faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.spotlight-difference strong { font-size: 14px; }
.spotlight-difference small { color: var(--app-muted); font-size: 10px; }
.spotlight-difference .is-accent { background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel)); }
.spotlight-difference .is-accent span, .spotlight-difference .is-accent strong { color: var(--app-accent); }

.spotlight-section { padding-top: 56px; }
.spotlight-section-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; }
.spotlight-section-head > div { max-width: 680px; }
.spotlight-section h2 { margin: 0; font-family: "Newsreader", "Songti SC", serif; font-size: clamp(27px, 3vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.spotlight-section-head > div > p:last-child { max-width: 630px; margin: 12px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.7; }
.spotlight-section-link { flex: 0 0 auto; color: var(--app-accent); font-size: 12px; font-weight: 750; white-space: nowrap; }
.spotlight-section-link:hover { color: var(--app-text); }
.spotlight-section-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 11px; }
.spotlight-pwa-link { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--app-accent) 58%, var(--app-line)); border-radius: 9px; background: color-mix(in srgb, var(--app-accent) 8%, var(--app-panel)); }

.spotlight-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 25px; }
.spotlight-feature-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 270px; border: 1px solid var(--app-line); border-radius: var(--spot-radius); background: var(--app-panel); overflow: hidden; }
.spotlight-feature-card:hover { border-color: color-mix(in srgb, var(--app-accent) 68%, var(--app-line)); background: var(--app-panel-2); transform: translateY(-2px); }
.spotlight-feature-card:nth-child(-n+2) { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); box-shadow: 0 12px 30px color-mix(in srgb, var(--app-shadow) 26%, transparent); }
.spotlight-feature-card:nth-child(-n+2):hover { border-color: var(--app-accent); box-shadow: 0 16px 34px color-mix(in srgb, var(--app-shadow) 38%, transparent); transform: translateY(-4px); }
.spotlight-feature-card.is-wide { grid-column: span 2; }
.spotlight-feature-media { position: relative; min-height: 116px; margin: 0; border-bottom: 1px solid var(--app-line); background: var(--app-panel-2); overflow: hidden; }
.spotlight-feature-media img { width: 100%; height: 100%; min-height: 116px; object-fit: cover; object-position: center; opacity: 1; transition: transform .25s ease; }
.spotlight-feature-card:hover .spotlight-feature-media img { transform: scale(1.07); }
.spotlight-feature-media span { position: absolute; left: 10px; bottom: 9px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--app-accent) 38%, var(--app-line)); border-radius: 999px; background: color-mix(in srgb, var(--app-bg) 82%, transparent); color: var(--app-accent); font-size: 9px; letter-spacing: .08em; backdrop-filter: blur(8px); }
.spotlight-feature-media.is-alignment img, .spotlight-feature-media.is-lyrics img { object-position: 48% 24%; transform: scale(1.12); }
.spotlight-feature-media.is-pitch img, .spotlight-feature-media.is-live img { object-position: 54% 48%; transform: scale(1.08); }
.spotlight-feature-media.is-pitch-line img { object-position: 50% 42%; transform: scale(1.12); }
.spotlight-feature-media.is-stems img, .spotlight-feature-media.is-record img, .spotlight-feature-media.is-mix img, .spotlight-feature-media.is-master img { object-position: 70% 24%; transform: scale(1.13); }
.spotlight-feature-media.is-voice img { object-position: 50% 20%; transform: scale(1.1); }
.spotlight-feature-media.is-library img, .spotlight-feature-media.is-sync img { object-position: 18% 35%; transform: scale(1.1); }
.spotlight-feature-media img[src*="feature-media/"] { object-position: center; transform: none; }
.spotlight-feature-card:hover .spotlight-feature-media img[src*="feature-media/"] { transform: scale(1.05); }
.spotlight-feature-body { display: flex; flex-direction: column; min-width: 0; padding: 14px 15px 13px; }
.spotlight-feature-body > p:first-child { margin: 0; color: var(--app-accent); font-size: 10px; letter-spacing: .08em; }
.spotlight-feature-body h3 { margin: 8px 0 7px; font-size: 17px; line-height: 1.25; }
.spotlight-feature-body h3 + p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.6; }
.spotlight-feature-card:nth-child(-n+2) .spotlight-feature-body h3 { font-size: 21px; }
.spotlight-feature-problem { display: block; margin-top: 10px; color: var(--app-text); font-size: 11px; line-height: 1.55; }
.spotlight-card-link { margin-top: auto; padding-top: 13px; color: var(--app-accent); font-size: 11px; font-weight: 750; }
.spotlight-feature-card:hover .spotlight-card-link { color: var(--app-text); }

.spotlight-reel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 24px; }
.spotlight-reel-grid a { min-width: 0; }
.spotlight-reel-grid figure { position: relative; margin: 0; border: 1px solid var(--app-line); border-radius: var(--spot-radius); background: var(--app-panel); overflow: hidden; }
.spotlight-reel-grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--app-bg) 86%, transparent), transparent 58%); pointer-events: none; }
.spotlight-reel-grid img { width: 100%; aspect-ratio: 16 / 8.8; object-fit: cover; object-position: center; opacity: 1; transition: transform .25s ease; }
.spotlight-reel-grid a:hover img { transform: scale(1.05); }
.spotlight-reel-grid figcaption { position: absolute; z-index: 1; right: 15px; bottom: 13px; left: 15px; display: grid; gap: 3px; }
.spotlight-reel-grid figcaption b { font-size: 15px; }
.spotlight-reel-grid figcaption span { color: var(--app-muted); font-size: 11px; }

.spotlight-theme-showcase { padding-bottom: 12px; }
.spotlight-theme-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 24px; }
.spotlight-theme-principles > div { min-height: 150px; padding: 16px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.spotlight-theme-principles > div:nth-child(2n) { background: color-mix(in srgb, var(--app-accent) 5%, var(--app-panel)); }
.theme-gallery-swatch { display: inline-flex; min-height: 28px; margin-bottom: 13px; }
.theme-gallery-swatch i { width: 11px; height: 26px; }
.spotlight-theme-principles strong { display: block; font-size: 14px; }
.spotlight-theme-principles p { margin: 7px 0 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.spotlight-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 11px; }
.spotlight-theme-card { min-width: 0; margin: 0; border: 1px solid var(--app-line); border-radius: var(--spot-radius); background: var(--app-panel); overflow: hidden; }
.spotlight-theme-card:hover { border-color: color-mix(in srgb, var(--app-accent) 68%, var(--app-line)); transform: translateY(-2px); }
.spotlight-theme-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--app-panel-2); overflow: hidden; }
.spotlight-theme-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.spotlight-theme-card:hover .spotlight-theme-card-media img { transform: scale(1.035); }
.spotlight-theme-card-media span { position: absolute; right: 12px; bottom: 11px; left: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); border-radius: 999px; background: color-mix(in srgb, var(--app-bg) 84%, transparent); color: var(--app-text); font-size: 12px; font-weight: 750; backdrop-filter: blur(9px); }
.spotlight-theme-card figcaption { display: grid; gap: 5px; padding: 13px 15px 15px; }
.spotlight-theme-card figcaption strong { font-size: 14px; }
.spotlight-theme-card figcaption p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.spotlight-theme-footnote { margin: 13px 0 0; color: var(--app-faint); font-size: 12px; line-height: 1.6; }

.spotlight-step-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 25px 0 0; padding: 0; list-style: none; }
.spotlight-step-grid li { min-height: 112px; display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.spotlight-step-grid li.is-active { border-color: color-mix(in srgb, var(--app-accent) 65%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 9%, var(--app-panel)); }
.spotlight-step-grid b { color: var(--app-accent); font-size: 10px; letter-spacing: .12em; }
.spotlight-step-grid strong { font-size: 16px; }
.spotlight-step-grid span { color: var(--app-muted); font-size: 11px; line-height: 1.45; }

.spotlight-convert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 24px; }
.spotlight-plan { min-height: 265px; display: flex; flex-direction: column; padding: 21px; border: 1px solid var(--app-line); border-radius: var(--spot-radius); background: var(--app-panel); }
.spotlight-plan.is-featured { border-color: color-mix(in srgb, var(--app-accent) 72%, var(--app-line)); box-shadow: inset 0 2px 0 var(--app-accent); }
.spotlight-plan > span { color: var(--app-accent); font-size: 10px; letter-spacing: .12em; }
.spotlight-plan h3 { margin: 9px 0 0; font-size: 22px; }
.spotlight-plan > strong { margin-top: 8px; font-size: 32px; letter-spacing: -.04em; }
.spotlight-plan > strong small { color: var(--app-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.spotlight-plan > p { margin: 8px 0 0; color: var(--app-muted); font-size: 12px; }
.spotlight-plan ul { display: grid; gap: 5px; margin: 14px 0 16px; padding: 0; list-style: none; color: var(--app-muted); font-size: 11px; }
.spotlight-plan li::before { content: "✓"; margin-right: 6px; color: var(--app-accent); }
.spotlight-plan .button { margin-top: auto; align-self: start; }
.spotlight-plan-link { align-self: start; margin-top: 10px; color: var(--app-accent); font-size: 12px; font-weight: 700; }
.spotlight-plan-link:hover { color: var(--app-text); }
.spotlight-install { grid-column: 1 / -1; }
.spotlight-install .install-guide { padding: 19px; border: 1px solid var(--app-line); border-radius: var(--spot-radius); background: var(--app-bg); }
.spotlight-install .install-guide-head { display: grid; gap: 6px; }
.spotlight-install .install-platform { color: var(--app-accent); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.spotlight-install .install-guide-head strong { font-size: 18px; }
.spotlight-install .install-guide-head p { margin: 0; color: var(--app-muted); font-size: 12px; }
.spotlight-install .install-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: install; }
.spotlight-install .install-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 9px; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-muted); font-size: 11px; }
.spotlight-install .install-steps li::before { counter-increment: install; content: counter(install); width: 19px; height: 19px; display: grid; place-items: center; flex: none; border-radius: 6px; background: var(--app-accent-soft); color: var(--app-accent); font-size: 10px; font-weight: 750; }
.spotlight-install .install-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.spotlight-install .install-status { min-height: 17px; margin: 10px 0 0; color: var(--app-accent); font-size: 11px; }
.spotlight-release { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding: 14px 16px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.spotlight-release > div { display: grid; gap: 3px; }
.spotlight-release span { color: var(--app-accent); font-size: 9px; letter-spacing: .12em; }
.spotlight-release strong { font-size: 13px; }
.spotlight-release p { margin: 0; color: var(--app-muted); font-size: 11px; }

.spotlight-article-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 23px; }
.spotlight-article-strip a { display: grid; gap: 7px; min-height: 126px; padding: 15px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.spotlight-article-strip a:hover { border-color: var(--app-accent); transform: translateY(-2px); }
.spotlight-article-strip span { color: var(--app-accent); font-size: 10px; letter-spacing: .12em; }
.spotlight-article-strip strong { font-size: 14px; line-height: 1.35; }
.spotlight-article-strip small { color: var(--app-muted); font-size: 11px; }
.spotlight-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.spotlight-faq details { border: 1px solid var(--app-line); border-radius: 11px; background: var(--app-panel); }
.spotlight-faq summary { cursor: pointer; padding: 13px 15px; font-size: 12px; font-weight: 750; }
.spotlight-faq details p { margin: -2px 15px 14px; color: var(--app-muted); font-size: 11px; line-height: 1.6; }

.spotlight-footer { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 26px; margin-top: 68px; padding: 28px 0 20px; border-top: 1px solid var(--app-line); }
.spotlight-footer-brand p { max-width: 240px; margin: 11px 0 0; color: var(--app-muted); font-size: 12px; }
.spotlight-footer-pwa { display: inline-flex; width: fit-content; margin-top: 12px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--app-accent) 58%, var(--app-line)); border-radius: 9px; background: color-mix(in srgb, var(--app-accent) 8%, var(--app-panel)); color: var(--app-accent) !important; font-size: 12px !important; font-weight: 750; }
.spotlight-footer-pwa:hover { background: color-mix(in srgb, var(--app-accent) 15%, var(--app-panel)); transform: translateY(-1px); }
.spotlight-footer > div:not(.spotlight-footer-brand):not(.spotlight-footer-bottom) { display: grid; align-content: start; gap: 7px; }
.spotlight-footer strong { margin-bottom: 3px; font-size: 11px; }
.spotlight-footer > div a { color: var(--app-muted); font-size: 11px; }
.spotlight-footer > div a:hover { color: var(--app-accent); }
.spotlight-footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--app-line); color: var(--app-faint); font-size: 10px; }

@media (max-width: 1120px) {
  .spotlight-header nav { gap: 14px; }
  .spotlight-header .header-account { display: none; }
  .landing-campaign { grid-template-columns: minmax(230px, 1fr) auto auto; }
  .landing-campaign time { grid-column: 1 / 3; grid-row: 2; text-align: left; }
  .landing-campaign-actions { grid-column: 3; grid-row: 1 / 3; }
  .landing-campaign-actions a:last-child { display: none; }
  .spotlight-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spotlight-feature-card.is-wide { grid-column: span 1; }
  .spotlight-feature-card:nth-child(1), .spotlight-feature-card:nth-child(2) { grid-column: span 3; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: 1fr; }
  .spotlight-feature-card:nth-child(1) .spotlight-feature-media, .spotlight-feature-card:nth-child(2) .spotlight-feature-media { border-right: 1px solid var(--app-line); border-bottom: 0; }
  .spotlight-theme-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .spotlight-header nav { display: none; }
  .landing-campaign { grid-template-columns: 1fr auto; }
  .landing-campaign-copy { grid-column: 1 / -1; }
  .landing-campaign time { grid-column: 1; grid-row: 2; text-align: left; }
  .landing-campaign-actions { grid-column: 2; grid-row: 2 / 4; }
  .landing-campaign-price { grid-column: 1; grid-row: 3; }
  .spotlight-hero { grid-template-columns: 1fr; padding-top: 31px; }
  .spotlight-hero-copy { max-width: none; }
  .spotlight-hero-board { order: -1; }
  .spotlight-pwa-band { grid-template-columns: 1fr; }
  .spotlight-pwa-band-actions { justify-content: flex-start; }
  .spotlight-difference { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight-difference > div:nth-child(2) { border-right: 0; }
  .spotlight-difference > div:nth-child(-n+2) { border-bottom: 1px solid var(--app-line); }
  .spotlight-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight-feature-card:nth-child(1), .spotlight-feature-card:nth-child(2) { grid-column: span 2; }
  .spotlight-reel-grid, .spotlight-article-strip { grid-template-columns: 1fr; }
  .spotlight-theme-grid { grid-template-columns: 1fr; }
  .spotlight-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spotlight-step-grid li:nth-child(4), .spotlight-step-grid li:nth-child(5) { grid-column: span 1; }
  .spotlight-convert-grid { grid-template-columns: 1fr 1fr; }
  .spotlight-install { grid-column: 1 / -1; }
  .spotlight-footer { grid-template-columns: repeat(2, 1fr); }
  .spotlight-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .spotlight-header { min-height: 60px; }
  .spotlight-header .brand small, .spotlight-header .header-account, .spotlight-header .theme-switcher { display: none; }
  .homepage-candidate-download { width: calc(100% - 28px); margin-top: 10px; }
  .spotlight-header .header-download { display: none; }
  .spotlight-header .header-online { min-height: 36px; padding: 7px 10px; font-size: 10px; }
  .landing-campaign { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 10px; padding: 13px 14px; }
  .landing-campaign-copy, .landing-campaign-price, .landing-campaign time, .landing-campaign-actions { grid-column: 1; grid-row: auto; }
  .landing-campaign-copy { align-items: flex-start; }
  .landing-campaign-copy > span { margin-top: 1px; }
  .landing-campaign-price { justify-content: flex-start; }
  .landing-campaign time { text-align: left; }
  .landing-campaign-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .landing-campaign-actions a:last-child { display: inline-flex; }
  .spotlight-hero { min-height: auto; padding: 27px 0 23px; }
  .spotlight-hero h1 { font-size: clamp(40px, 12vw, 54px); }
  .spotlight-hero-lede { font-size: 14px; }
  .spotlight-live-badge strong { font-size: 10px; }
  .spotlight-pwa-action { width: 100%; justify-content: space-between; }
  .spotlight-hero-board figcaption { display: grid; gap: 4px; }
  .spotlight-difference { grid-template-columns: 1fr 1fr; }
  .spotlight-difference > div { min-height: 81px; padding: 11px 12px; }
  .spotlight-section { padding-top: 43px; }
  .spotlight-section-head { display: block; }
  .spotlight-section-head-actions { justify-content: flex-start; margin-top: 13px; }
  .spotlight-section-link { display: inline-flex; margin-top: 13px; }
  .spotlight-feature-grid { grid-template-columns: 1fr; }
  .spotlight-feature-card:nth-child(1), .spotlight-feature-card:nth-child(2) { grid-column: span 1; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .spotlight-feature-card:nth-child(1) .spotlight-feature-media, .spotlight-feature-card:nth-child(2) .spotlight-feature-media { border-right: 0; border-bottom: 1px solid var(--app-line); }
  .spotlight-reel-grid { grid-template-columns: 1fr; }
  .spotlight-theme-principles, .spotlight-theme-grid { grid-template-columns: 1fr; }
  .spotlight-theme-principles > div { min-height: auto; }
  .spotlight-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight-convert-grid { grid-template-columns: 1fr; }
  .spotlight-install { grid-column: auto; }
  .spotlight-install .install-guide { padding: 18px; }
  .spotlight-install .install-steps { grid-template-columns: 1fr; }
  .spotlight-install .install-actions { display: grid; }
  .spotlight-install .install-actions .button { width: 100%; }
  .spotlight-release { display: grid; }
  .spotlight-release .button { justify-self: start; }
  .spotlight-faq { grid-template-columns: 1fr; }
  .spotlight-footer { grid-template-columns: 1fr 1fr; margin-top: 49px; }
  .spotlight-footer-bottom { display: grid; }
}