/* Leutz — component styles. Load after tokens.css. Plain CSS classes, no JavaScript required. */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lz-container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 640px) { .lz-container { padding: 0 var(--space-6); } }
.lz-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Logo swap: one <img> per theme */
.lz-logo { display: block; height: 24px; width: auto; }
[data-theme="light"] .lz-on-dark, .lz-on-light { display: none; }
[data-theme="light"] .lz-on-light { display: block; }

/* Button */
.lz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 1px solid transparent; font: inherit; font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, opacity .15s ease-out; }
.lz-btn--primary { background: var(--solid); color: var(--on-solid); }
.lz-btn--primary:hover { opacity: .88; }
.lz-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.lz-btn--secondary:hover { background: var(--surface-2); }
.lz-btn--sm { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.lz-btn:hover { text-decoration: none; }
.lz-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Site header */
.lz-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.lz-header__inner { display: flex; align-items: center; gap: var(--space-6); height: var(--header-height); }
.lz-header__brand { display: inline-flex; text-decoration: none; }
.lz-nav { display: none; gap: var(--space-6); margin-left: auto; }
.lz-nav a { color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.lz-nav a:hover, .lz-nav a[aria-current="page"] { color: var(--ink); }
.lz-header__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.lz-nav + .lz-header__tools { margin-left: 0; }
@media (min-width: 860px) { .lz-nav { display: flex; } }
.lz-lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px; }
.lz-lang a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink-muted); text-decoration: none; }
.lz-lang a[aria-current="true"] { background: var(--surface-2); color: var(--ink); }
.lz-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.lz-iconbtn:hover { background: var(--surface-2); }
.lz-iconbtn .lz-sun, [data-theme="light"] .lz-iconbtn .lz-moon { display: none; }
[data-theme="light"] .lz-iconbtn .lz-sun { display: block; }

/* Hero */
.lz-hero { padding: var(--space-16) 0; }
@media (min-width: 640px) { .lz-hero { padding: var(--space-24) 0; } }
.lz-eyebrow { margin: 0 0 var(--space-4); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lz-hero__title { margin: 0; max-width: 16ch; font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.015em; }
@media (min-width: 640px) { .lz-hero__title { font-size: 56px; line-height: 60px; letter-spacing: -0.02em; } }
.lz-hero__lead { margin: var(--space-6) 0 var(--space-8); max-width: var(--prose-max); font-size: 18px; line-height: 30px; color: var(--ink-muted); }

/* Card */
.lz-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lz-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lz-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); }
.lz-card__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.lz-card__body { margin: 0; color: var(--ink-muted); }

/* Notice */
.lz-notice { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-6); background: var(--surface-2); border-radius: var(--radius-md); }
.lz-notice__label { margin: 0 0 var(--space-1); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lz-notice__text { margin: 0; }
.lz-notice .lz-icon { margin-top: 3px; }

/* Prose — legal and long-form pages */
.lz-prose { max-width: var(--prose-max); }
.lz-prose h1 { margin: 0 0 var(--space-2); font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.015em; }
.lz-prose .lz-meta { margin: 0 0 var(--space-8); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.lz-prose h2 { margin: var(--space-12) 0 var(--space-4); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.lz-prose h3 { margin: var(--space-8) 0 var(--space-2); font-size: 20px; line-height: 28px; font-weight: 600; }
.lz-prose p, .lz-prose ul, .lz-prose ol { margin: 0 0 var(--space-4); }
.lz-prose ul, .lz-prose ol { padding-left: var(--space-6); }
.lz-prose li { margin-bottom: var(--space-2); }
.lz-prose strong { font-weight: 600; }
.lz-table-wrap { margin: var(--space-6) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lz-prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.lz-prose th { text-align: left; font-weight: 600; background: var(--surface-2); }
.lz-prose th, .lz-prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.lz-prose tr:last-child td { border-bottom: 0; }
.lz-prose td { color: var(--ink-muted); }
.lz-prose td:first-child { color: var(--ink); }
.lz-prose .lz-notice { margin: var(--space-6) 0; }
.lz-prose .lz-notice p { margin: 0; }
.lz-prose .lz-notice .lz-notice__label { margin-bottom: var(--space-1); }

/* Page sections */
.lz-section { padding: var(--space-16) 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .lz-section { padding: var(--space-24) 0; } }
.lz-section__title { margin: 0 0 var(--space-8); max-width: 22ch; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.lz-section__lead { margin: calc(var(--space-4) * -1) 0 var(--space-8); max-width: var(--prose-max); color: var(--ink-muted); }
.lz-page { padding: var(--space-16) 0 var(--space-24); }

/* Steps — a short numbered sequence */
.lz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: lz-step; }
.lz-steps li { counter-increment: lz-step; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.lz-steps li::before { content: counter(lz-step, decimal-leading-zero); display: block; margin-bottom: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .04em; color: var(--ink-muted); }
.lz-steps p { margin: 0; }

/* Facts — label/value pairs (contact and company data) */
.lz-facts { display: grid; gap: var(--space-4) var(--space-8); margin: var(--space-8) 0 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lz-facts div { padding: var(--space-4) 0 0; border-top: 1px solid var(--line); }
.lz-facts dt { margin: 0 0 var(--space-1); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lz-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Site footer */
.lz-footer { padding: var(--space-12) 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.lz-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .lz-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.lz-footer__title { margin: 0 0 var(--space-3); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.lz-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lz-footer a { color: var(--ink-muted); text-decoration: none; }
.lz-footer a:hover { color: var(--ink); text-decoration: underline; }
.lz-footer__legal { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; }
.lz-footer p { margin: 0; }

/* Site-specific (not part of the design system bundle) */
.lz-footer .lz-logo { margin-bottom: var(--space-3); }