@import url("/css/tokens.css");
@layer site {
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-padding-top: var(--space-24); }
  body { margin: 0; font-family: var(--font-system); font-size: var(--type-body); line-height: 1.5; color: var(--text); background: var(--bg); }
  button, input { font: inherit; }
  button, a, input { -webkit-tap-highlight-color: var(--transparent); }
  button, a { touch-action: manipulation; }
  a { color: var(--accent-text); text-decoration: none; }
  a:hover { text-decoration: underline; }
  button { cursor: pointer; }
  button:disabled { cursor: default; color: var(--text-disabled); }
  :focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: var(--space-4); }
  svg { width: var(--size-20); height: var(--size-20); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  p { margin: 0; overflow-wrap: anywhere; }
  h1, h2, h3 { margin: 0; letter-spacing: var(--tracking-page); }
  h1 { font-size: var(--size-38); line-height: 1.18; font-weight: var(--weight-bold); }
  h2 { font-size: var(--type-page); line-height: var(--leading-page); font-weight: var(--weight-semibold); }
  h3 { font-size: var(--type-section); line-height: var(--leading-section); font-weight: var(--weight-semibold); }
  .skip { position: fixed; top: var(--space-8); left: var(--space-16); z-index: 10; padding: var(--space-12); background: var(--surface); transform: translateY(-200%); }
  .skip:focus { transform: none; }
  .site-header, main, footer { width: min(100% - var(--space-48), var(--size-1220)); margin-inline: auto; }
  .site-header { display: flex; justify-content: space-between; align-items: center; min-height: var(--size-88); }
  .brand { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text); font-size: var(--brand-type); letter-spacing: var(--tracking-heading); }
  .brand:hover { text-decoration: none; }
  .brand > span { width: var(--size-28); height: var(--size-28); display: grid; place-items: center; border-radius: var(--r-sm); background: var(--text); color: var(--surface); font-size: var(--size-20); font-weight: var(--weight-semibold); }
  .header-tools { display: flex; align-items: center; gap: var(--space-16); color: var(--text-2); font-size: var(--type-caption); }
  #appearance { display: grid; place-items: center; width: var(--size-44); height: var(--size-44); border: 0; border-radius: var(--r-md); color: var(--text); background: var(--surface); }
  #appearance:hover { background: var(--fill-hover); }
  section { padding-block: var(--space-48); }
  .hero { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: var(--space-40); padding-top: var(--space-32); }
  .hero-copy { display: grid; justify-items: start; gap: var(--space-24); }
  .eyebrow { font-size: var(--type-support); color: var(--text-2); font-weight: var(--weight-medium); }
  .intro { font-size: var(--type-list); max-width: var(--size-400); color: var(--text-2); }
  .primary, .secondary { min-height: var(--size-44); display: inline-flex; justify-content: center; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--r-md); border: 0; font-weight: var(--weight-semibold); font-size: var(--type-support); transition: background var(--dur-fast) var(--ease-standard); }
  .primary { color: var(--on-accent); background: var(--accent); }
  .primary:hover { background: var(--accent-hover); text-decoration: none; }
  .secondary { color: var(--text); background: var(--surface); box-shadow: var(--shadow-ring); }
  .secondary:hover:not(:disabled) { background: var(--fill-hover); text-decoration: none; }
  .support { font-size: var(--type-caption); color: var(--text-2); }
  .product { min-width: 0; margin: 0; }
  .product img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-doc), var(--shadow-ring); }
  .product figcaption { margin-top: var(--space-12); text-align: center; color: var(--text-2); font-size: var(--type-caption); }
  .section-intro { display: grid; gap: var(--space-12); margin-bottom: var(--space-32); }
  .section-intro > p:last-child { color: var(--text-2); max-width: var(--size-560); }
  .flow-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-40); align-items: start; }
  .flow-tabs { display: grid; gap: var(--space-8); }
  .flow-tabs button { display: flex; align-items: center; gap: var(--space-16); min-height: var(--size-88); padding: var(--space-16); background: var(--transparent); border: 0; border-radius: var(--r-lg); text-align: left; color: var(--text); transition: background var(--dur-base) var(--ease-standard); }
  .flow-tabs button:hover { background: var(--fill-hover); }
  .flow-tabs button[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset var(--size-3) 0 var(--accent); }
  .flow-tabs strong, .flow-tabs small { display: block; }
  .flow-tabs strong { font-size: var(--type-list); font-weight: var(--weight-semibold); }
  .flow-tabs small { margin-top: var(--space-4); color: var(--text-2); font-size: var(--type-support); }
  .flow-tabs svg { margin-left: auto; color: var(--text-2); }
  .step-number { font-size: var(--type-support); font-variant-numeric: tabular-nums; color: var(--accent-text); }
  .document { min-width: 0; overflow-wrap: anywhere; padding: var(--space-32); border-radius: var(--r-lg); background: var(--sheet); box-shadow: var(--shadow-doc), var(--shadow-ring); min-height: var(--size-360); }
  .document-heading { display: flex; justify-content: space-between; gap: var(--space-16); font-size: var(--type-caption); color: var(--text-2); margin-bottom: var(--space-24); }
  .sample { white-space: nowrap; }
  .client { color: var(--text-2); margin-top: var(--space-8); font-size: var(--type-support); }
  dl { margin: var(--space-24) 0; display: grid; gap: var(--space-16); }
  dt { color: var(--text-2); font-size: var(--type-caption); }
  dd { margin: var(--space-4) 0 0; }
  .document-note { padding-top: var(--space-16); border-top: var(--line) solid var(--border); color: var(--text-2); font-size: var(--type-support); }
  .configurator { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-48); }
  .module-options { padding: var(--space-8) var(--space-24); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-ring); }
  .base-module { display: flex; gap: var(--space-16); align-items: center; padding-block: var(--space-24); border-bottom: var(--line) solid var(--border); }
  .base-module p { color: var(--text-2); font-size: var(--type-support); }
  .base-module > span { margin-left: auto; color: var(--text-2); font-size: var(--type-caption); text-align: right; }
  .base-module strong, .module-option strong { font-size: var(--type-list); font-weight: var(--weight-semibold); }
  .module-option { display: flex; align-items: center; gap: var(--space-16); min-height: var(--size-88); border-bottom: var(--line) solid var(--border); cursor: pointer; }
  .module-option:last-child { border-bottom: 0; }
  .module-option input { width: var(--size-20); height: var(--size-20); flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
  .module-option small { display: block; color: var(--text-2); font-size: var(--type-support); margin-top: var(--space-4); }
  .price-summary { display: grid; align-content: start; justify-items: start; gap: var(--space-16); padding-block: var(--space-24); }
  .price-summary > p { color: var(--text-2); font-size: var(--type-support); }
  .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8); padding-block: var(--space-8); }
  .price strong { font-size: var(--type-quote-total); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
  .price-note { max-width: var(--size-360); }
  .module-note { margin-top: var(--space-24); color: var(--text-2); max-width: var(--size-680); font-size: var(--type-caption); }
  .next-section { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-48); border-top: var(--line) solid var(--border); }
  .next-section > div:first-child { display: grid; align-content: start; gap: var(--space-16); }
  .next-section p { color: var(--text-2); }
  .roadmap { display: grid; gap: var(--space-24); }
  .roadmap strong { display: block; color: var(--text); font-size: var(--type-body); font-weight: var(--weight-medium); }
  .roadmap span { display: block; margin-top: var(--space-4); font-size: var(--type-support); }
  .questions { max-width: var(--size-760); }
  .questions h2 { margin-bottom: var(--space-24); }
  details { border-bottom: var(--line) solid var(--border); }
  summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-block: var(--space-20); cursor: pointer; list-style: none; font-weight: var(--weight-medium); }
  summary::-webkit-details-marker { display: none; }
  summary svg { transition: transform var(--dur-base) var(--ease-standard); }
  details[open] summary svg { transform: rotate(180deg); }
  details > p { color: var(--text-2); margin-bottom: var(--space-24); }
  .interest { display: grid; justify-items: start; gap: var(--space-16); border-top: var(--line) solid var(--border); }
  .interest > p { color: var(--text-2); max-width: var(--size-560); }
  footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); border-top: var(--line) solid var(--border); padding-block: var(--space-32); }
  footer p { font-size: var(--type-caption); color: var(--text-2); }
  @media (max-width: 1023px) { .hero, .flow-layout { grid-template-columns: 1fr 1fr; gap: var(--space-24); } h1 { font-size: var(--size-32); } }
  @media (max-width: 767px) {
    .site-header, main, footer { width: calc(100% - var(--space-32)); }
    .site-header { min-height: var(--size-72); }
    .header-tools { gap: var(--space-8); }
    section { padding-block: var(--space-32); }
    .hero, .flow-layout, .configurator, .next-section { grid-template-columns: 1fr; gap: var(--space-24); }
    .hero-copy { gap: var(--space-16); }
    .intro { max-width: none; }
    .document { min-width: 0; overflow-wrap: anywhere; padding: var(--space-24); }
    .module-options { padding-inline: var(--space-16); }
    .base-module { gap: var(--space-12); }
    .base-module > svg { display: none; }
    .price-summary { padding-block: var(--space-8); }
    .next-section { margin-top: var(--space-8); }
    footer { flex-direction: column; align-items: start; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
}