/* ============================================================
   our-system.css — TRANSITIONAL stylesheet for the redesigned
   /our-system page.

   The page still uses the old-style header/footer (style.css),
   so everything here is scoped under .os-page to avoid clashes.
   Design tokens mirror new-style.css — when the whole site moves
   to the new design, merge this file into new-style.css and drop
   the .os- prefixes where they duplicate existing patterns.
   ============================================================ */

.os-page {
  --purple: #5D00DE;
  --purple-end: #8A0D3D;
  --purple-dark: #4800B0;
  --purple-pale: #F3EEFF;
  --gradient: linear-gradient(150deg, #5D00DE 0%, #8A0D3D 100%);
  --gradient-hover: linear-gradient(150deg, #4800B0 0%, #6D0830 100%);
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-900: #111827;

  background: #fff;
  color: var(--gray-900);
  font-size: 1rem;
  line-height: 1.6;
}

/* Override old-style globals (style.css sets Montserrat on *,
   div { overflow:auto }, and heavy link underlines) */
.os-page, .os-page * { font-family: 'Inter', -apple-system, sans-serif; }
.os-page *, .os-page *::before, .os-page *::after { box-sizing: border-box; }
/* style.css sets div { overflow:auto } which breaks position:sticky */
div.os-page, .os-page div { overflow: visible; }
.os-page a { border-bottom: none; }
.os-page h1, .os-page h2, .os-page h3, .os-page p { margin: 0; }

.os-wrap { width: 90%; max-width: 640px; margin: 0 auto; }
.os-wrap-wide { max-width: 960px; }

.os-section-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.os-section-head h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: 0.75rem;
}
.os-section-head p { color: var(--gray-600); font-size: 1.02rem; }

/* ============ HERO ============ */

.os-hero {
  background: linear-gradient(140deg, #F3EEFF 0%, #F5E8F7 45%, #fff 100%);
  padding: 3.5rem 0 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.os-hero::before {
  content: ''; position: absolute; top: -30%; right: -15%; width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle, rgba(93,0,222,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.os-hero .os-wrap { position: relative; z-index: 1; max-width: 760px; }
.os-hero h1 {
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  font-weight: 900; line-height: 1.12; letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
}
.os-hero h1 em {
  font-style: normal;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* .os-page prefix so the margin survives the .os-page p { margin: 0 } reset */
.os-page .os-hero-sub {
  color: var(--gray-700); font-size: 1.05rem; line-height: 1.75;
  max-width: 580px; margin: 0 auto;
}

/* ============ SYSTEM STACK ============ */

/* Tighter top padding than the old heading-led version, so the hero
   flows straight into the first component card */
.os-stack { padding: 2.5rem 0 3rem; }

/* The classic assemble-on-scroll effect. Component images sit absolutely at
   the top of each step; JS pins them (os-pinned) as they reach their spot,
   then anchors them to the ducting (os-anchored) so the assembled system
   scrolls away as one unit. Cards slide over the pinned images. */
.os-assemble { max-width: 640px; margin: 0 auto; }
.os-step { display: flow-root; } /* prevents margin collapse so image/card offsets hold */

.os-a-img { position: absolute; width: 190px; height: auto; }
.os-a-img.os-pinned { position: fixed; }
.os-a-img.os-anchored { position: absolute; }
.os-img-filter.os-pinned { top: 200px; }
.os-img-fan-back.os-pinned, .os-img-fan-front.os-pinned { top: 255px; }
.os-img-duct-back.os-pinned, .os-img-duct-front.os-pinned { top: 315px; }

.os-img-duct-back { z-index: 1; }
.os-img-fan-back  { z-index: 2; }
.os-img-filter    { z-index: 4; }
.os-img-duct-front{ z-index: 5; }
.os-img-fan-front { z-index: 6; }

/* The ceiling vent stays in normal flow so no card can ever swallow it.
   Its PNG shares the 969px-tall canvas of the other components (vent art
   sits at canvas y687-891, i.e. y217-282 at 190px wide), so the box crops
   the empty canvas above it. The JS reads the img's own top edge as the
   shared canvas origin when locking the assembly together. */
.os-page .os-vent-crop { height: 74px; width: 190px; overflow: hidden; }
.os-img-vent { position: relative; z-index: 0; width: 190px; height: auto; margin-top: -216px; display: block; }

.os-card {
  position: relative; z-index: 9;
  margin-top: 150px; margin-bottom: 50px;
  /* Frosted glass: the pinned components ghost through as cards
     slide over them (like the old design's 75%-opaque cards) */
  background: rgba(249, 250, 251, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: 16px;
  padding: 1.75rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.os-card.os-visible { opacity: 1; transform: translateY(0); }
/* Spacing tuned so each component image has room to pin before its card
   slides over it (mirrors the old page's offsets) */
.os-card-fan  { margin-bottom: 110px; }
.os-card-duct { margin-bottom: 110px; }
.os-card-vent { margin-top: 70px; }
.os-card-num {
  display: inline-block; font-size: 0.75rem; font-weight: 800;
  color: var(--purple); letter-spacing: 0.1em; margin-bottom: 0.5rem;
}
.os-card h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.os-card p { color: var(--gray-900); font-size: 0.98rem; margin-bottom: 0.75rem; }
.os-card p:last-of-type { margin-bottom: 1rem; }

.os-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.os-chip {
  font-size: 0.78rem; font-weight: 600; color: var(--purple-dark);
  background: var(--purple-pale); border: 1px solid rgba(93,0,222,0.15);
  border-radius: 20px; padding: 0.3rem 0.8rem; white-space: nowrap;
}
.os-chip-hero { background: var(--gradient); color: #fff; border-color: transparent; }

/* ============ COMPARISON ============ */

.os-compare { padding: 3.5rem 0 4rem; background: var(--gray-50); }

.os-table-wrap {
  overflow-x: auto;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(17, 24, 39, 0.05);
}
.os-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.os-table th, .os-table td {
  border: none; border-bottom: 1px solid var(--gray-200);
  background: none; width: auto;
  text-align: left; padding: 0.9rem 1.1rem;
  font-size: 0.95rem; color: var(--gray-600);
}
.os-table tbody tr:last-child td { border-bottom: none; }
.os-table th {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gray-500);
}
.os-table th h3 { margin: 0; }
.os-table .os-th-bv, .os-table .os-td-bv { background: var(--purple-pale); }
.os-table .os-th-bv { color: var(--purple-dark); }
.os-table td:first-child { font-weight: 600; color: var(--gray-900); white-space: nowrap; }
.os-table .os-td-bv strong { color: var(--purple-dark); font-weight: 700; }
.os-row-win td:last-child { color: var(--gray-500); }

/* ============ SET & FORGET ============ */

.os-auto {
  padding: 4rem 0;
  background: linear-gradient(140deg, #F3EEFF 0%, #F5E8F7 45%, #fff 100%);
}
.os-auto .os-section-head h2 em {
  font-style: normal;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.os-auto-copy { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.os-auto-copy p { color: var(--gray-700); font-size: 1.05rem; line-height: 1.75; }
.os-auto-copy p strong { color: var(--gray-900); }

/* Sits on the section's purple wash like a testimonial callout,
   breaking up the copy instead of reading as a third paragraph */
.os-auto-highlight {
  max-width: 640px; margin: 1.75rem auto 0;
  background: #fff;
  border: 1px solid rgba(93, 0, 222, 0.12);
  border-left: 4px solid var(--purple);
  border-radius: 12px;
  padding: 1.4rem 1.75rem;
  box-shadow: 0 4px 20px rgba(93, 0, 222, 0.08);
}
.os-auto-highlight p { color: var(--gray-700); font-size: 1.05rem; line-height: 1.75; }

/* ============ CTA ============ */

.os-cta {
  background: var(--gradient);
  padding: 4rem 0; text-align: center; color: #fff;
}
.os-cta h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.3rem); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 0.6rem;
}
.os-cta p { color: rgba(255,255,255,0.85); margin-bottom: 1.75rem; }
.os-cta-buttons { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.os-btn {
  display: inline-block; font-weight: 700; font-size: 0.98rem;
  padding: 0.85rem 1.9rem; border-radius: 10px;
  text-decoration: none; transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}
.os-btn:hover { opacity: 1; transform: translateY(-1px); }
.os-btn-primary { background: #fff; color: var(--purple-dark); box-shadow: 0 4px 18px rgba(0,0,0,0.2); }
.os-btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.4); }

/* ============ SCROLL REVEAL (non-card elements) ============ */

.os-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.os-reveal.os-visible { opacity: 1; transform: translateY(0); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .os-card, .os-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ RESPONSIVE ============ */

@media only screen and (max-width: 759px) {
  .os-card { padding: 1.4rem; }

  /* The table's own column dividers give it definition on desktop, but the
     stacked mobile card relies on its outer edge alone - the default
     gray-200 border blends into the section's near-white background, so
     strengthen it here */
  .os-table-wrap {
    border-color: rgba(17, 24, 39, 0.14);
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
  }

  /* Comparison table stacks: each row becomes a labelled
     Better Vent vs Other systems pair instead of a wide 3-column grid */
  .os-table { min-width: 0; }
  .os-table thead { display: none; }
  .os-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--gray-200); }
  .os-table tbody tr:last-child { border-bottom: none; }
  .os-table td { border-bottom: none; padding: 0.4rem 1rem 0.9rem; }
  .os-table td:first-child {
    grid-column: 1 / -1;
    padding: 0.9rem 1rem 0.35rem;
    white-space: normal;
  }
  .os-table td:nth-child(2)::before,
  .os-table td:nth-child(3)::before {
    display: block; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 0.25rem; color: var(--gray-500);
  }
  .os-table td:nth-child(2)::before { content: 'Better Vent'; color: var(--purple-dark); }
  .os-table td:nth-child(3)::before { content: 'Other systems'; }

  /* The Better Vent cell reads as its own block thanks to the purple fill;
     give the Other systems cell a matching top edge so it doesn't float */
  .os-table td:nth-child(3) {
    border-top: 1px solid var(--gray-200);
    padding-top: 0.65rem;
  }
}

@media only screen and (min-width: 760px) {
  .os-br-mobile { display: none; }
  .os-hero { padding: 5rem 0 4rem; }
}