/* Homepage Desktop Backup showcase only — a quiet, ruled product row with a
   real build capture. The downloads page has its own stylesheet
   (desktop-downloads.css) since its 2026-10 redesign. */
.desktop-showcase {
  --desktop-ink: #0a2e47;
  --desktop-text: #385064;
  --desktop-blue: #1767a0;
  --desktop-teal: #15705f;
  --desktop-rule: #cad9e0;
  color: var(--desktop-ink);
  background: #fff;
  font-family: Inter, sans-serif;
  overflow-wrap: anywhere;
}

.desktop-showcase { padding-block: clamp(48px, 6vw, 88px); border-block: 1px solid var(--desktop-rule); scroll-margin-top: calc(var(--header-h, 67px) + 16px); }
.desktop-showcase *, .desktop-showcase *::before, .desktop-showcase *::after { box-sizing: border-box; }
/* Shared page container used by the showcase layout. */
.desktop-backup-container { width: min(100% - 64px, 1240px); margin-inline: auto; }
.desktop-showcase__layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.desktop-showcase__copy, .desktop-showcase__visual { min-width: 0; }
.desktop-showcase :is(h2, h3) { color: var(--desktop-ink); font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; margin: 0; }
.desktop-showcase h2 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.desktop-showcase h3 { font-size: 1.05rem; line-height: 1.4; }
.desktop-showcase p { color: var(--desktop-text); margin: 0; line-height: 1.65; }
.desktop-showcase .desktop-showcase__eyebrow { color: var(--desktop-teal); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 14px; }
.desktop-showcase .desktop-showcase__description { margin-top: 20px; }
.desktop-showcase__benefits { padding: 0; margin: 28px 0 0; list-style: none; border-bottom: 1px solid var(--desktop-rule); }
.desktop-showcase__benefits li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding-block: 16px; border-top: 1px solid var(--desktop-rule); }
.desktop-showcase__benefits svg { color: var(--desktop-teal); width: 22px; height: 22px; margin-top: 2px; }
.desktop-showcase__benefits p { font-size: 0.9rem; margin-top: 5px; }
.desktop-showcase__actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
.desktop-showcase__actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; line-height: 1.4; text-align: center; transition: background-color 180ms, color 180ms; }
.desktop-showcase__primary { color: #fff; background: var(--desktop-ink); border: 1px solid var(--desktop-ink); border-radius: 3px; padding: 12px 18px; text-decoration: none; }
.desktop-showcase__primary:hover { background: var(--desktop-blue); color: #fff; }
.desktop-showcase__secondary { color: var(--desktop-blue); text-decoration: underline; text-underline-offset: 5px; }
.desktop-showcase__secondary:hover { color: var(--desktop-teal); }
.desktop-showcase a:focus-visible { outline: 3px solid var(--desktop-blue); outline-offset: 5px; }
.desktop-showcase .desktop-showcase__availability { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 0.8rem; }
.desktop-showcase__availability svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--desktop-teal); }
.desktop-showcase__visual { border-top: 3px solid var(--desktop-teal); padding-top:  20px; }
.desktop-showcase .desktop-screenshot { margin: 0; }
.desktop-showcase .desktop-screenshot__caption { margin-top: 14px; font-size: 0.8rem; line-height: 1.6; color: var(--desktop-text); }

@media (max-width: 900px) {
  .desktop-showcase__layout { grid-template-columns: minmax(0, 1fr); }
  .desktop-showcase__visual { padding-top: 16px; }
}

@media (max-width: 480px) {
  .desktop-showcase__actions { flex-direction: column; gap: 12px; }
  .desktop-showcase__actions a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-showcase *, .desktop-showcase *::before, .desktop-showcase *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}