/* Reuse the site's established Nord palette, type scale, layout, and modules. */
@import url('/styles/css/document.css');
@import url('/styles/css/theme.css');
@import url('/styles/css/base.css');

html { scroll-behavior: smooth; }
body { background: var(--surface-glow); color: var(--color-text-primary); line-height: var(--line-height-normal); }
img { max-width: 100%; height: auto; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-strong); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The static HTML uses the same header and centered hero layout as the former app. */
.container { width: min(var(--page-max-width), calc(100% - var(--space-xl))); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: var(--space-sm); z-index: 100; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); background: var(--color-elevated); }
.skip-link:focus { left: var(--space-sm); }
.site-header { position: sticky; top: 0; z-index: 50; min-height: var(--nav-height); border-bottom: 1px solid var(--color-divider); background: rgb(26 31 46 / 0.85); backdrop-filter: blur(12px) saturate(180%); }
.header-inner { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2xl); min-height: var(--nav-height); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-text-primary); font-size: var(--font-size-lg); font-weight: 700; letter-spacing: .05em; text-decoration: none; }
.brand img { display: block; width: 2rem; height: 2rem; }
.site-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); }
.site-header nav a { position: relative; padding-block: var(--space-sm); color: var(--color-text-secondary); font-size: var(--font-size-sm); text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--color-text-primary); }
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: var(--radius-full); background: var(--gradient-brand); content: ''; }
.legacy-header { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2xl); padding-inline: max(var(--space-lg), calc((100% - var(--page-max-width)) / 2)); }
.legacy-header > nav { width: auto; margin: 0; }

.hero { padding-block: var(--space-4xl); text-align: center; }
.hero-copy { max-width: 65ch; margin-inline: auto; }
.hero-mark { display: block; width: min(600px, 90%); margin: 0 auto var(--space-2xl); filter: drop-shadow(0 4px 12px rgb(0 0 0 / .3)); }
.eyebrow { margin-bottom: var(--space-md); color: var(--color-accent); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3 { color: var(--color-text-primary); line-height: var(--line-height-tight); }
h1 { margin: 0; font-size: var(--font-size-4xl); text-wrap: balance; }
h2 { margin: 0 0 var(--space-lg); font-size: var(--font-size-4xl); }
h3 { margin: 0 0 var(--space-sm); font-size: var(--font-size-lg); }
.lead { margin-top: var(--space-lg); color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: .625rem var(--space-lg); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; }
.button:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); color: var(--color-text-primary); }
.button-primary { border-color: transparent; background: var(--gradient-brand); color: var(--color-background); font-weight: 700; }
.button-primary:hover { box-shadow: var(--shadow-glow); color: var(--color-background); }
.hero-note { margin-top: var(--space-xl); color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.hero-visual { width: min(100%, 930px); margin: var(--space-3xl) auto 0; }
.hero-visual, .screen-figure { overflow: hidden; border: 1px solid var(--color-surface-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xl); }
.hero-visual img, .screen-figure img { display: block; width: 100%; }
.visual-heading { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); color: var(--color-text-secondary); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; }
.window-dots { display: inline-flex; gap: 4px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); }
figcaption { padding: var(--space-sm) var(--space-md); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }

/* Content continues in the existing section, card, and screenshot language. */
.section { padding-block: var(--space-4xl); border-top: 1px solid var(--color-divider); }
.section-contrast { background: var(--gradient-brand-subtle); }
.section-intro { max-width: 70ch; margin-bottom: var(--space-2xl); }
.section-intro p:not(.eyebrow), .final-call > p:not(.eyebrow) { color: var(--color-text-secondary); font-size: var(--font-size-lg); }
.call-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-xl); }
.call-steps { display: grid; gap: var(--space-md); }
.call-step { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.step-number, .feature-index { color: var(--color-accent); font-size: var(--font-size-sm); font-weight: 700; }
.call-step p, .feature-card p { color: var(--color-text-secondary); }
.text-link { align-self: start; font-weight: 600; }
.screen-figure { margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.feature-card { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.feature-card:hover { border-color: var(--color-surface-border); box-shadow: var(--shadow-md); }
.feature-card h3 { margin: 0; }
.feature-card a { margin-top: auto; font-weight: 600; }
.questions-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
.question-list { display: grid; gap: var(--space-md); }
.question-list details { padding: var(--space-lg); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.question-list summary { color: var(--color-text-primary); cursor: pointer; font-weight: 600; }
.question-list details p { margin-top: var(--space-md); color: var(--color-text-secondary); }
.final-call { text-align: center; }
.final-call > p:not(.eyebrow) { max-width: 65ch; margin-inline: auto; }
.site-footer { margin-top: var(--space-4xl); padding-block: var(--space-3xl); border-top: 1px solid var(--color-divider); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xl); }
.footer-brand { color: var(--color-text-primary); font-weight: 700; text-decoration: none; }
.site-footer p { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.site-footer nav a { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* The documentation keeps the previous shell proportions and code treatment. */
.docs-page, .docs-content { width: min(var(--content-max-width), calc(100% - var(--space-xl))); margin: var(--space-4xl) auto; }
.docs-page h1, .docs-content h1 { font-size: var(--font-size-3xl); }
.docs-page h2, .docs-content h2 { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--font-size-2xl); }
.docs-page h3, .docs-content h3 { margin: var(--space-xl) 0 var(--space-sm); }
.docs-page p, .docs-content p, .docs-page li, .docs-content li { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.docs-page p, .docs-content p { margin-block: var(--space-md); }
.docs-page ul, .docs-content ul { padding-left: var(--space-xl); list-style: disc outside; }
.docs-page ol, .docs-content ol { padding-left: var(--space-xl); list-style: decimal outside; }
.docs-page li::marker, .docs-content li::marker { color: var(--color-accent); font-weight: 700; }
.docs-page li, .docs-content li { margin-block: var(--space-sm); }
.docs-content article > section:first-of-type { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-surface-border); border-radius: var(--radius-lg); background: var(--gradient-brand-subtle); }
.docs-content article > section:first-of-type h2 { margin: 0 0 var(--space-md); font-size: var(--font-size-lg); }
.docs-content article > section:first-of-type ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.docs-content article > section:first-of-type li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .55rem; margin: 0; }
.docs-content article > section:first-of-type li::before { color: var(--color-accent); content: '✓'; font-weight: 700; }
.docs-page section, .docs-content section { scroll-margin-top: calc(var(--nav-height) + var(--space-lg)); }
.docs-page pre, .docs-content pre { overflow-x: auto; margin: var(--space-lg) 0; padding: var(--space-lg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-background-alt); color: var(--color-text-primary); font-family: var(--font-mono); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.docs-page pre code, .docs-content pre code { white-space: pre; }
.docs-page aside, .docs-content .callout { margin: var(--space-xl) 0; padding: var(--space-lg); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); background: var(--gradient-brand-subtle); }
.docs-page aside h2 { margin: 0; font-size: var(--font-size-lg); }
.docs-page nav[aria-label='Related guides'] { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-divider); }
.docs-content figure { margin: var(--space-xl) 0; padding: var(--space-md); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); background: var(--color-surface); }
.docs-content figure img { display: block; width: 100%; }
.docs-footer-links { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-divider); }
.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; gap: var(--space-3xl); width: min(var(--page-max-width), calc(100% - var(--space-xl))); margin-inline: auto; }
.docs-layout .docs-content { width: 100%; margin-inline: 0; }
.docs-sidebar { padding-top: var(--space-4xl); }
.docs-sidebar nav { position: sticky; top: calc(var(--nav-height) + var(--space-md)); max-height: calc(100vh - var(--nav-height) - var(--space-xl)); overflow: auto; padding-right: var(--space-md); border-right: 1px solid var(--color-divider); }
.docs-sidebar h2 { margin: 0 0 var(--space-md); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .08em; }
.docs-sidebar ul { margin: 0; padding: 0; list-style: none; }
.docs-sidebar li { margin: .2rem 0; font-size: var(--font-size-sm); }
.docs-sidebar a { display: block; padding: .25rem .4rem; border-radius: var(--radius-sm); color: var(--color-text-secondary); text-decoration: none; }
.docs-sidebar a:hover { color: var(--color-text-primary); background: var(--color-surface); }
.docs-sidebar a[aria-current='page'] { color: var(--color-text-primary); background: rgb(94 129 172 / .18); }
.docs-toc { position: sticky; top: calc(var(--nav-height) + var(--space-md)); align-self: start; margin-top: var(--space-4xl); padding-left: var(--space-md); border-left: 1px solid var(--color-surface-border); }
.docs-toc h2 { margin: 0 0 var(--space-sm); color: var(--color-text-secondary); font-size: var(--font-size-xs); letter-spacing: .09em; text-transform: uppercase; }
.docs-toc a { display: block; margin-block: var(--space-sm); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.docs-toc a:hover { color: var(--color-text-primary); }
.docs-content .lede { font-size: var(--font-size-lg); }
.site-header > nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); width: auto; min-height: 0; margin: 0; }
body > footer:not(.site-footer) { width: min(var(--content-max-width), calc(100% - var(--space-xl))); margin: 0 auto var(--space-2xl); color: var(--color-text-muted); }

@media (max-width: 900px) {
  .call-grid, .questions-grid { grid-template-columns: 1fr; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { padding-top: var(--space-xl); }
  .docs-toc { display: none; }
  .docs-sidebar nav { position: static; max-height: none; padding: 0 0 var(--space-lg); border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .docs-layout .docs-content { margin-top: var(--space-xl); }
}
@media (max-width: 640px) {
  .container, .docs-layout { width: calc(100% - var(--space-lg)); }
  .header-inner { align-items: flex-start; flex-direction: column; padding-block: var(--space-md); }
  .legacy-header { align-items: flex-start; flex-direction: column; padding-block: var(--space-md); }
  .hero, .section { padding-block: var(--space-2xl); }
  .feature-grid { grid-template-columns: 1fr; }
  .actions .button { width: 100%; }
  .docs-page, .docs-content { margin-block: var(--space-2xl); }
}