/* Shared website-ready tokens v1.6 and Core AI-ready page conventions.
   Header and footer come from assets/site-menu/simplewire-global-menu.js. */
:root {
  --font-display: "Exo 2", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
.sw-flex-page { margin: 0; color: var(--color-text); background: var(--color-bg); font: 16px/1.6 var(--font-text); -webkit-font-smoothing: antialiased; }
.sw-flex-page :where(main) h1, .sw-flex-page :where(main) h2, .sw-flex-page :where(main) h3 { margin: 0; font-family: var(--font-display); letter-spacing: 0; text-wrap: balance; }
.sw-flex-page h1 { max-width: 15ch; font-size: var(--sw-fs-h1); line-height: 1.08; font-weight: 700; }
.sw-flex-page h2 { max-width: 21ch; font-size: var(--sw-fs-h2); line-height: 1.12; font-weight: 700; }
.sw-flex-page h3 { font-size: var(--sw-fs-h3); line-height: 1.25; font-weight: 700; }
.sw-flex-page :where(main) p, .sw-flex-page :where(main) figure { margin: 0; }
.sw-flex-page :where(main) img { display: block; max-width: 100%; height: auto; }
.sw-flex-page :where(main) a { color: inherit; }
.sw-flex-page main :focus-visible, .sw-flex-skip:focus-visible { outline: 3px solid var(--color-action); outline-offset: 4px; }
.sw-flex-skip { position: fixed; top: 12px; left: 12px; z-index: 2147483647; padding: 12px 20px; background: var(--color-action); color: var(--color-text-on-action) !important; transform: translateY(-200%); }
.sw-flex-skip:focus { transform: translateY(0); }
.sw-flex-container { width: min(var(--container-max), calc(100% - 80px)); margin-inline: auto; }
.sw-flex-section { padding-block: var(--section-y-normal); }
.sw-flex-section-white { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.sw-flex-hero-copy .sw-flex-status { display: inline-block; margin-top: 16px; padding: 4px 9px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-surface-soft); color: var(--color-text); font-size: 13px; font-weight: 600; }
.sw-flex-lead { color: var(--color-text-soft); font-size: 19px; line-height: 1.6; }
.sw-flex-body { color: var(--color-text-soft); font-size: 16px; line-height: 1.65; }
.sw-flex-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 28px 20px; }
.sw-flex-btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 14px; padding: 12px 18px; border: 1px solid; border-radius: 6px; font: 700 15px/1.3 var(--font-display); text-decoration: none; transition: background-color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.sw-flex-btn-primary { background: var(--color-action); border-color: var(--color-action); color: var(--color-text-on-action) !important; }
.sw-flex-btn-primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.sw-flex-btn-secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.sw-flex-btn-secondary:hover { background: var(--color-action-soft); border-color: var(--color-action); }
.sw-flex-text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; margin-top: 20px; color: var(--color-action) !important; font: 700 15px/1.5 var(--font-display); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sw-flex-text-link:hover { color: var(--color-action-hover) !important; }
.sw-flex-text-link svg { width: 18px; height: 18px; }
.sw-flex-hero { padding-block: var(--section-hero-top) var(--section-hero-bottom); background: var(--color-surface); }
.sw-flex-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
.sw-flex-hero-copy .sw-flex-lead { margin-top: 24px; }
.sw-flex-hero-copy .sw-flex-body { margin-top: 14px; }
.sw-flex-stock { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 13px; }
.sw-flex-stock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); flex: 0 0 6px; }
.sw-flex-stock a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.sw-flex-hero-figure { min-width: 0; width: min(100%, 440px); justify-self: center; }
.sw-flex-hero-image { background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.sw-flex-hero-image img { width: 100%; height: auto; object-fit: contain; }
.sw-flex-hero-figure figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; color: var(--color-text-muted); font-size: 12px; }
.sw-flex-notice { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; margin-top: 24px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text-soft); font-size: 14px; }
.sw-flex-notice svg { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; color: var(--color-warning-text); }
.sw-flex-notice strong { color: var(--color-text); }
.sw-flex-installation-grid { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(32px, 6vw, 80px); }
.sw-flex-installation-image { min-width: 0; }
.sw-flex-installation-image img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 8px; }
.sw-flex-installation-image figcaption { padding-top: 12px; color: var(--color-text-muted); font-size: 12px; }
.sw-flex-installation-copy .sw-flex-lead { margin-top: 24px; }
.sw-flex-installation-copy .sw-flex-body { margin-top: 16px; }
.sw-flex-kit-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 64px); align-items: center; }
.sw-flex-kit-grid .sw-flex-body { margin-top: 24px; max-width: 42ch; }
.sw-flex-kit-image { min-width: 0; }
.sw-flex-kit-image a { display: block; border-radius: 8px; }
.sw-flex-kit-image img { width: 100%; height: auto; }
.sw-flex-kit-image figcaption { padding-top: 16px; color: var(--color-text-muted); font-size: 12px; }
.sw-flex-document { display: flex; align-items: center; gap: 16px; padding: 20px; margin-top: 28px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); text-decoration: none; transition: border-color var(--motion-base) var(--ease); }
.sw-flex-document:hover { border-color: var(--color-action); }
.sw-flex-document-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 52px; flex: 0 0 44px; border-radius: 4px; background: var(--color-action-soft); color: var(--color-action); font: 700 13px var(--font-display); }
.sw-flex-document strong { display: block; font: 700 18px/1.4 var(--font-display); color: var(--color-text); }
.sw-flex-document small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.sw-flex-document > span:last-child { margin-left: auto; color: var(--color-action); }
.sw-flex-contact-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 7vw, 88px); padding: clamp(28px, 5vw, 56px); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; }
.sw-flex-contact-panel .sw-flex-body { margin-block: 24px; }
.sw-flex-next-model { align-self: center; border-left: 1px solid var(--color-border-strong); padding-left: clamp(24px, 4vw, 48px); }
.sw-flex-next-model p { margin-top: 14px; color: var(--color-text-soft); font-size: 15px; }
@media (min-width: 1320px) { .sw-flex-hero-grid { gap: 64px; } }
@media (max-width: 1000px) {
  .sw-flex-container { width: calc(100% - 48px); }
  .sw-flex-hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .sw-flex-container { width: calc(100% - 40px); }
  .sw-flex-hero { padding-top: 32px; }
  .sw-flex-hero-grid, .sw-flex-installation-grid, .sw-flex-kit-grid, .sw-flex-contact-panel { grid-template-columns: 1fr; gap: 32px; }
  .sw-flex-page h1 { max-width: 14ch; }
  .sw-flex-page h2 { max-width: 22ch; }
  .sw-flex-hero-copy .sw-flex-lead { margin-top: 20px; }
  .sw-flex-lead { font-size: 18px; }
  .sw-flex-next-model p { font-size: 16px; }
  .sw-flex-notice { padding: 20px; font-size: 15px; }
  .sw-flex-installation-copy { grid-row: 1; }
  .sw-flex-next-model { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--color-border-strong); }
}
@media (max-width: 420px) {
  .sw-flex-actions { display: grid; }
  .sw-flex-btn { width: 100%; }
  .sw-flex-hero-figure figcaption { flex-wrap: wrap; gap: 4px 12px; }
  .sw-flex-contact-panel { padding: 24px; }
  .sw-flex-document { gap: 12px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sw-flex-page *, .sw-flex-page *::before, .sw-flex-page *::after { transition: none !important; animation: none !important; }
}