/* Figma frame 4720:9744, adapted to the current landing-page content. */
:root.ivory-variation[data-theme="light"] {
  --theme-surface: color-mix(in srgb, var(--palette-holly-50) 50%, var(--palette-greyscale-50));
  --theme-surface-raised: var(--palette-spanish-50);
  --theme-ink-soft: var(--palette-greyscale-800);
}
.ivory-variation .theme-header {
  width: min(1152px, calc(100% - 2 * clamp(24px, 5vw, 64px)));
  margin: 24px auto 0;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ivory-brand { gap: 5px; flex: none; min-height: 44px; text-decoration: none; }
.ivory-brand img { display: block; object-fit: contain; }
.ivory-nav { display: none; }
.ivory-grid { display: none; }
.ivory-variation .theme-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.ivory-variation .theme-toggle .theme-label { display: none; }
.ivory-variation .theme-toggle:hover { background: var(--theme-surface-raised); }
.ivory-variation .v12-bg::before { display: none; }
.ivory-variation .vhero-art { width: 100%; max-width: 600px; }
.ivory-variation .ivory-footer-word { margin: 64px -16px 0; }
.ivory-footer-word img { display: block; width: 100%; height: auto; }
.ivory-variation .vnav { position: static; max-width: calc(100% - 32px); width: fit-content; margin: 20px auto; overflow-x: auto; border-radius: 16px; }
.ivory-variation .vnav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex: none; }
.ivory-variation footer.ft { background: var(--theme-surface-warm); }
.ivory-variation[data-theme="light"] .ft-bolt { filter: none; }
.ivory-variation[data-theme="dark"] .ivory-wordmark,
.ivory-variation[data-theme="dark"] .ft-bolt { filter: brightness(0) invert(0.9); }
.ivory-variation[data-theme="dark"] .ivory-footer-word {
  background: var(--accent);
  mask: url('/img/ivory-footer-wordmark.svg') center / 100% 100% no-repeat;
}
.ivory-variation[data-theme="dark"] .ivory-footer-word img { visibility: hidden; }
.ivory-variation .security-page { background: var(--bg); }
.ivory-variation .security-main h1 span,
.ivory-variation .security-contact h2,
.ivory-variation .security-caveat strong { color: var(--ink); }
.ivory-variation .security-caveat,
.ivory-variation .security-boundary,
.ivory-variation .security-contact { border-radius: 20px; }
.ivory-variation .security-contact { border-color: var(--line); }
.ivory-variation .security-section a:hover,
.ivory-variation .security-contact a:hover { color: var(--soft); }
.ivory-variation .security-main { overflow-wrap: anywhere; }
.ivory-variation .security-page footer.ft { background: var(--theme-surface-raised); }
.ivory-variation .security-page footer.ft { background: var(--theme-surface-warm); }
.ivory-brand:focus-visible, .ivory-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ivory-variation .ft .f-links a { display: inline-flex; align-items: center; min-height: 44px; }
.review-page-link { display: inline-flex; align-items: center; min-height: 44px; }
.ivory-variation[data-theme="light"] .ivory-mock-frame { background: color-mix(in srgb, var(--theme-surface-raised-strong) 65%, var(--theme-surface)); }
.ivory-variation[data-theme="dark"] .ivory-grid { color: color-mix(in srgb, var(--palette-golden-400) 22%, transparent); }
@media (min-width: 768px) {
  .ivory-grid {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 720px;
    z-index: -1;
    pointer-events: none;
    color: color-mix(in srgb, var(--palette-golden-600) 9%, transparent);
    /* Requested opacity fade; the grid itself stays a single flat colour. */
    mask-image: linear-gradient(to bottom, var(--palette-greyscale-950) 30%, transparent 100%);
  }
  .ivory-variation .theme-header { padding: 8px 0; }
  .ivory-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 20px; }
  .ivory-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 14px; }
  .ivory-nav a:hover { color: var(--soft); }
  .ivory-variation .ivory-mock-frame { padding: 32px; background: var(--theme-surface-raised); border-radius: 32px; }
  .ivory-variation .ivory-footer-word { margin-top: 140px; }
}
@media (min-width: 960px) {
  .ivory-variation .vhero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; padding-top: 24px !important; min-height: 580px; }
  .ivory-variation .vpage h1:has(.l) { font-size: min(3.6rem, calc((min(100vw, 1280px) - 2 * clamp(20px, 5vw, 64px) - 40px) * 0.45 / 10.5)); }
  .ivory-variation .vhero-art { max-width: none; }
  .ivory-variation .vhero .vlead { font-size: 1rem; max-width: 42ch; }
  .ivory-variation .hero-actions { gap: 24px; }
}

/* Section separators use the same orange as the CTA base in either theme. */
.ivory-variation .security-section,
.ivory-variation .security-faq,
.ivory-variation .security-faq details,
.ivory-variation .security-data-list article,
.ivory-variation .security-table tr,
.ivory-variation footer.ft { border-color: var(--section-divider); }

/* Page surfaces stay flat; the explicitly requested card shine is an optical effect. */
.ivory-variation .security-page { background: var(--bg); }
.ivory-variation .cd-glow::before { background: none; }

/* Marketing headings share the landing-page face and weight across routes. */
.ivory-variation :is(h2, h3) { font-family: var(--font-heading); font-weight: 400; }