:root {
  --ncsw-bg: #ffffff;
  --ncsw-ink: #09080e;
  --ncsw-body: #33353c;
  --ncsw-muted: #656565;
  --ncsw-line: #ececec;
  --ncsw-surface: #f5f5f5;
  --ncsw-accent: #0576cc;
  --ncsw-font-display: "Creato Display", Arial, sans-serif;
  --ncsw-font-body: "Inter", -apple-system, sans-serif;
  --ncsw-font-mono: "IBM Plex Mono", monospace;
  --ncsw-container-max: 1410px;
  --ncsw-radius-card: 16px;
  --ncsw-radius-control: 8px;
  --ncsw-radius-pill: 100px;

  /* Aliases used by ported source CSS (.vf-* etc) */
  --accent: var(--ncsw-accent);
  --fg-1: var(--ncsw-ink);
  --fg-2: #656565;
  --focus-ring: var(--ncsw-accent);
  --ease: ease-in-out;
  --font-mono: var(--ncsw-font-mono);
  --font-body: var(--ncsw-font-body);
}

/* ===== Page transitions — exact from source tokens.css (cross-document view transitions) ===== */
@view-transition { navigation: auto; }
@keyframes pt-in  { from { opacity: 0; transform: translateY(150px) scale(1, 1.004); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pt-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(150px) scale(1, 1.004); } }
::view-transition-old(root)            { animation: pt-out .7s cubic-bezier(.83, 0, .17, 1) .3s both; }
::view-transition-new(root),
html.first-load body                   { animation: pt-in  .7s cubic-bezier(.83, 0, .17, 1) .3s both; }

/* ===== Scroll-triggered section reveal: slide up 24px + fade in (expo-out) ===== */
.ncsw-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
.ncsw-reveal.is-in { opacity: 1; transform: translateY(0); }

/* ===== Hero wordmark entrance: translateY 40 -> 0 + fade, after preloader ===== */
@keyframes ncsw-hero-word { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.ncsw-hero-word { animation: ncsw-hero-word .6s cubic-bezier(.16, 1, .3, 1) .25s both; }

/* ===== Reduced motion: instant, no movement ===== */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), html.first-load body { animation: none; }
  .ncsw-reveal { opacity: 1; transform: none; transition: none; }
  .ncsw-hero-word { animation: none; }
}

/* ===== Dual-range price slider (PackageTable modal) =====
   Two stacked <input type=range>. The track ignores pointer events so clicks pass
   through to whichever thumb is nearest; only the thumbs catch events — this is what
   makes BOTH the min (left) and max (right) thumbs independently grabbable. */
.rng { -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; height: 16px; margin: 0; }
.rng::-webkit-slider-runnable-track { background: transparent; height: 16px; }
.rng::-moz-range-track { background: transparent; height: 16px; }
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: #0576cc; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #d3d7e0;
  cursor: pointer; margin-top: 0;
}
.rng::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: #0576cc; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #d3d7e0;
  cursor: pointer;
}

/* ===== SubwooferFrontierChart (.vf-*) — verbatim from source home.css ===== */
.vf-chart {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--fg-1);
}
.vf-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.vf-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
.vf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.vf-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vf-label span {
  color: var(--fg-1);
  text-transform: none;
  margin-left: 2px;
}
.vf-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  background: #fff;
  border: 1px solid var(--ncsw-line);
  border-radius: 5px;
  padding: 4px 7px;
  cursor: pointer;
  user-select: none;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.vf-chip:hover {
  color: var(--fg-1);
  border-color: #cfd3d9;
  background: #fafbfc;
}
.vf-chip.on {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.vf-chip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.vf-price input {
  width: 170px;
  accent-color: var(--accent);
}
.vf-canvas-wrap {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 300px;
}
.vf-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.vf-tooltip {
  position: absolute;
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--ncsw-line);
  border-radius: 8px;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  opacity: 0;
  transition: opacity .1s;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(9, 8, 14, .1);
}
.vf-tooltip.on { opacity: 1; }
.vf-tip-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-1);
  margin-bottom: 3px;
}
.vf-tip-row { color: var(--fg-2); }
.vf-tip-row b {
  color: var(--fg-1);
  font-weight: 500;
}
.vf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ncsw-line);
  align-items: center;
}
.vf-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--fg-2);
}
.vf-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.vf-dot-blue { background: var(--accent); }
.vf-dot-gray { background: rgba(9, 8, 14, .22); }
.vf-dash {
  width: 18px;
  height: 0;
  border-top: 2px dashed var(--accent);
  flex: none;
}