/* Security-First Trust Center — page layout on Granite tokens.
   Type styles mirror tokens.json type groups; layout follows the Granite LandingPage component. */
html, body { margin: 0; }
body { background: var(--surface-000); color: var(--ink-900); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.lp { font-feature-settings: "tnum" 1; }
.lp .wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }
.lp .measure { max-width: 720px; }
.lp h1, .lp h2, .lp h3, .lp p { margin: 0; text-wrap: pretty; }
.lp .eyebrow { font: 600 14px/20px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-600); margin-bottom: var(--space-4); }
.lp .display-xl { font: 300 64px/68px var(--font-sans); letter-spacing: -.02em; }
.lp .display-lg { font: 300 44px/50px var(--font-sans); letter-spacing: -.015em; }
.lp .heading-lg { font: 500 24px/30px var(--font-sans); letter-spacing: -.005em; }
.lp .heading-md { font: 500 18px/24px var(--font-sans); }
.lp .body-lg { font: 400 17px/26px var(--font-sans); }
.lp .body { font: 400 14px/20px var(--font-sans); }
.lp .body-sm { font: 400 12px/16px var(--font-sans); }
.lp .data-sm { font: 400 11px/16px var(--font-mono); letter-spacing: .02em; }
.lp .ink-600 { color: var(--ink-600); }
.lp .ink-400 { color: var(--ink-400); }

/* Top bar: anchors in place of the component's buttons */
.lp .gr-topbar { position: sticky; top: 0; z-index: 10; }
.lp a.gr-topbar__item { text-decoration: none; }
.lp .gr-topbar__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.lp a.gr-btn { text-decoration: none; }

/* Sections */
.lp .section { padding: var(--space-24) 0; }
.lp .section--panel { background: var(--surface-100); }
.lp .hero { padding: var(--space-16) 0 var(--space-24); }
.lp .lede { margin-top: var(--space-6); max-width: 640px; }
.lp .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-8); }
.lp .caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); margin-top: var(--space-12); }
.lp .cap { border-top: 1px solid var(--hairline); padding: var(--space-6) 0 var(--space-8); }
.lp .cap .heading-md { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.lp .audience { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.lp .aud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.lp .aud:last-child { border-bottom: 1px solid var(--hairline); }
.lp .cta .body-lg { margin-top: var(--space-6); max-width: 640px; }

/* Footer */
.lp footer { border-top: 1px solid var(--hairline-strong); padding: var(--space-12) 0 var(--space-8); }
.lp .foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
.lp .foot-nav { display: flex; gap: var(--space-6); }
.lp .foot a, .lp .legal a { color: var(--ink-600); text-decoration: none; transition: color var(--duration-fast); }
.lp .foot a:hover, .lp .legal a:hover { color: var(--ink-900); }
.lp .legal { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--hairline); color: var(--ink-400); }

/* Dialog: the one floating layer. surface-raised, shadow-raised, radius-md, space-8 padding. */
.lp .dialog { width: min(520px, calc(100vw - 2 * var(--space-4))); padding: 0; border: 0; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink-900); box-shadow: var(--shadow-raised); }
.lp .dialog::backdrop { background: rgba(18, 20, 23, 0.4); }
.lp .dialog__inner { padding: var(--space-8); }
.lp .dialog .heading-lg { margin-bottom: var(--space-6); }
.lp .fields { display: grid; gap: var(--space-4); }
.lp .gr-field { min-width: 0; }
.lp .gr-field__input--multiline { height: auto; min-height: 120px; padding: var(--space-2) var(--space-3); resize: vertical; font-family: var(--font-sans); }
.lp .dialog__error { color: var(--danger); margin-top: var(--space-3); }
.lp .dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
.lp .dialog__done .body { margin-bottom: 0; }

@media (max-width: 960px) {
  .lp .display-xl { font-size: 44px; line-height: 50px; }
  .lp .display-lg { font-size: 32px; line-height: 38px; }
  .lp .section { padding: var(--space-16) 0; }
  .lp .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .audience { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
}
@media (max-width: 600px) {
  .lp .caps, .lp .aud { grid-template-columns: minmax(0, 1fr); }
  .lp .gr-topbar { padding: 0 var(--space-4); }
  .lp .gr-topbar__nav { display: none; }
  .lp .wrap { padding: 0 var(--space-4); }
  .lp .dialog__inner { padding: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }