/* An English reading island inside the shared, translated marketing shell. */
.backup-example {
  /* 2026-10-16: the island keeps the site face under an Arabic shell, where html[lang="ar"] swaps the root tokens
     for Arabic stacks. Same stack as the root tokens in styles-prototype.css (tests/unit/fonts.test.mjs holds that). */
  --serif: 'Literata', 'Iowan Old Style', Georgia, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', serif;
  --sans: 'Literata', 'Iowan Old Style', Georgia, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', serif;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  text-align: start;
  overflow-wrap: anywhere;
}
.backup-example .backup-intro { margin-top: 20px; color: var(--ink-soft); }
.backup-example-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-block: 28px 16px; }
.backup-example-actions .cta-button { white-space: normal; text-align: center; }
.backup-example .backup-example-note { font-size: 15px; color: var(--ink-muted); }
.backup-example-warning { margin-top: 28px; padding: 20px 24px; border-inline-start: 3px solid var(--oxblood); background: var(--cream-soft); font-size: 16px; }
.backup-example-section { padding-block: clamp(32px, 5vw, 64px); }
.backup-example-section + .backup-example-section { border-top: 1px solid var(--paper-line-soft); }
.backup-example-copy { max-width: 70ch; }
.backup-example-copy h2 { margin-bottom: 20px; }
.backup-example-copy p + p { margin-top: 20px; }
.backup-example-files { margin-block: 24px 32px; }
.backup-example-files dt { font-weight: 500; margin-top: 20px; }
.backup-example-files dd { margin: 4px 0 0; color: var(--ink-soft); }
.backup-example-report { max-width: 46rem; margin-top: 28px; }
.backup-example-report > .trr-warn { font-size: 15px; margin-bottom: 16px; }
.backup-example #sample-report { scroll-margin-top: 100px; }
.backup-example-section:last-child { padding-bottom: 72px; }
@media (max-width: 560px) {
  .backup-example { font-size: 17px; }
  .backup-example .container { padding-inline: 16px; }
  .backup-example-warning { padding: 16px; }
  .backup-example-actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .backup-example *, .backup-example *::before, .backup-example *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}