/* DiskClue’s platform-native type and interaction layer. SF Pro is provided by
   Apple operating systems; this stylesheet never bundles or redistributes it. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --type-hero: clamp(3.75rem, 7.6vw, 7.5rem);
  --type-section: clamp(2.55rem, 4.9vw, 4.65rem);
  --type-page: clamp(3.15rem, 6.6vw, 6rem);
  --type-card: 1.5rem;
  --type-large: clamp(1.04rem, 1.2vw, 1.18rem);
  --type-body: 1rem;
  --type-support: .84rem;
  --type-label: .69rem;
  --leading-display: .96;
  --leading-body: 1.56;
  --tracking-display: -.052em;
  --tracking-tight: -.025em;
  --tracking-label: .085em;
}

html { font-synthesis: none; }
body { font-family: var(--sans); font-optical-sizing: auto; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, .brand, .journey h3, .feature-art p, .privacy-grid b, .how li b, .faq summary, .tile b, .disk-ring b, .file-list b, .review-card h3 { font-family: var(--serif); }
h1 { font-size: var(--type-hero); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: 650; }
h2 { font-size: var(--type-section); line-height: .98; letter-spacing: var(--tracking-display); font-weight: 590; }
h3, .journey h3, .review-card h3 { letter-spacing: var(--tracking-tight); font-weight: 580; }
p { line-height: var(--leading-body); }
.hero-copy, .split-heading p, .feature-copy p, .pricing p, .privacy-grid p { font-size: var(--type-large); }
.eyebrow, .fine-print, .app-title small, .recommendation small, .review-card small { letter-spacing: var(--tracking-label); font-weight: 650; }
.button, .button-small, .text-link, .site-header nav, .app-sidebar, .console-top { font-weight: 590; letter-spacing: -.01em; }
.disk-ring b, .legend strong, .tile b, .file-list b, .recommendation > span, .number { font-variant-numeric: tabular-nums lining-nums; }
.hero h1 { max-width: 850px; }
.split-heading h2, .demo-copy h2, .feature-copy h2, .privacy h2, .how h2, .pricing h2, .faq h2, .final-cta h2 { font-size: var(--type-section); line-height: .98; }
.legal h1 { font-size: var(--type-page); font-weight: 640; }
.legal p { font-size: var(--type-body); }
.legal .lead { font-size: var(--type-large); }
.app-content h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 620; }
.app-sidebar b { font-weight: 650; }
.journey h3 { font-size: var(--type-card); }
.feature-art p { font-size: clamp(1.32rem, 2.2vw, 1.7rem); line-height: 1.12; }
.privacy-grid b { font-size: 1.25rem; }
.faq summary { font-size: clamp(1.12rem, 1.9vw, 1.38rem); line-height: 1.25; }
.faq details p { font-size: var(--type-support); }
.button { min-height: 46px; border-radius: 8px; transition: transform 180ms cubic-bezier(.2,.7,.3,1), background-color 180ms ease, box-shadow 180ms ease; }
.button:active { transform: scale(.98); }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.site-header { border-bottom-color: rgba(242,240,235,.08); }
.site-header nav a { transition: color 160ms ease; }
.hero-visual, .demo-console, .feature-art { box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.app-title button, .recommendation button { transition: border-color 160ms ease, background-color 160ms ease; }
.app-title button:hover, .recommendation button:hover { border-color: #aaa69b; background:#282723; }
.demo-tabs button { transition: color 160ms ease, border-color 160ms ease; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 760px) { h1 { font-size: clamp(3.45rem, 16vw, 5.25rem); letter-spacing: -.055em; } .hero-copy { font-size: 1rem; } .split-heading h2, .demo-copy h2, .feature-copy h2, .privacy h2, .how h2, .pricing h2, .faq h2, .final-cta h2 { font-size: clamp(2.5rem, 11vw, 3.55rem); } .faq summary { font-size: 1.1rem; } }