:root {
        color-scheme: dark;
        --ink: #f7fbf6;
        --soft: rgba(247, 251, 246, 0.76);
        --muted: rgba(247, 251, 246, 0.58);
        --line: rgba(255, 255, 255, 0.2);
        --glass: rgba(255, 255, 255, 0.12);
        --glass-strong: rgba(255, 255, 255, 0.18);
        --petrol: #7fd3d8;
        --mint: #b5ead0;
        --warm: #f5ba83;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      * { box-sizing: border-box; }

      body {
        min-height: 100vh;
        margin: 0;
        color: var(--ink);
        background: #08100f;
        overflow-x: hidden;
      }

      body:before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        background-image: url("/hero-living-room-fan-high-small-angle.png");
        background-size: cover;
        background-position: center;
        transform: scale(1.02);
      }

      body:after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(90deg, rgba(5, 12, 11, 0.92), rgba(5, 12, 11, 0.68) 46%, rgba(5, 12, 11, 0.34)),
          linear-gradient(180deg, rgba(5, 12, 11, 0.1), rgba(5, 12, 11, 0.86));
      }

      a { color: inherit; }

      img,
      svg {
        max-width: 100%;
      }

      .site-header,
      .page,
      .site-footer {
        width: min(1120px, calc(100vw - 40px));
        margin: 0 auto;
      }

      .site-header {
        min-height: 82px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .brand,
      .language a,
      .back-link {
        border: 1px solid var(--line);
        background: rgba(8, 13, 12, 0.38);
        backdrop-filter: blur(22px) saturate(125%);
        text-decoration: none;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px 8px 9px;
        border-radius: 999px;
        font-weight: 780;
      }

      .brand img {
        width: 28px;
        height: 28px;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(8, 13, 12, 0.26);
        backdrop-filter: blur(22px) saturate(125%);
      }

      .nav-links a {
        padding: 10px 14px;
        border-radius: 999px;
        color: var(--soft);
        text-decoration: none;
        font-size: 0.94rem;
      }

      .nav-links a:hover {
        background: rgba(255, 255, 255, 0.13);
        color: #fff;
      }

      .menu-toggle {
        display: none;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(8, 13, 12, 0.38);
        color: var(--ink);
        font: inherit;
        font-weight: 780;
        backdrop-filter: blur(22px) saturate(125%);
        cursor: pointer;
      }

      .menu-toggle i,
      .menu-toggle i:before,
      .menu-toggle i:after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 99px;
        background: currentColor;
      }

      .menu-toggle i {
        position: relative;
      }

      .menu-toggle i:before,
      .menu-toggle i:after {
        content: "";
        position: absolute;
        left: 0;
      }

      .menu-toggle i:before {
        top: -6px;
      }

      .menu-toggle i:after {
        top: 6px;
      }

      .footer-row {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
      }

      .footer-links {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        flex-wrap: wrap;
      }

      .footer-links a {
        margin-left: 0;
      }

      .language-links {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .language-links a {
        color: inherit;
        text-decoration: none;
      }

      .language-links a[aria-current="true"] {
        color: inherit;
      }

      
      .page {
        padding: clamp(34px, 6vw, 78px) 0 74px;
      }

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);
        gap: clamp(24px, 5vw, 56px);
        align-items: start;
      }

      .hero > *,
      .grid > *,
      .faq-grid > * {
        min-width: 0;
      }

      .eyebrow {
        margin: 0 0 14px;
        color: var(--petrol);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.82rem;
      }

      h1 {
        max-width: 760px;
        margin: 0;
        font-size: clamp(3rem, 7.6vw, 6.7rem);
        line-height: 0.92;
        letter-spacing: 0;
      }

      .lead {
        max-width: 670px;
        margin: 24px 0 0;
        color: var(--soft);
        font-size: clamp(1.08rem, 2vw, 1.35rem);
        line-height: 1.55;
      }

      .support-card,
      .panel {
        border: 1px solid var(--line);
        border-radius: 28px;
        background: var(--glass);
        backdrop-filter: blur(24px) saturate(125%);
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.26);
      }

      .support-card {
        padding: clamp(22px, 3.4vw, 34px);
      }

      .support-card h2,
      .panel h2,
      .faq h2 {
        margin: 0;
        font-size: clamp(1.55rem, 3vw, 2.1rem);
        line-height: 1.1;
      }

      .support-card p,
      .panel p {
        color: var(--soft);
        line-height: 1.55;
      }

      form {
        display: grid;
        gap: 14px;
        margin-top: 22px;
      }

      label {
        display: grid;
        gap: 7px;
        color: var(--soft);
        font-weight: 720;
      }

      input,
      select,
      textarea {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.1);
        color: var(--ink);
        padding: 13px 14px;
        font: inherit;
      }

      textarea {
        min-height: 132px;
        resize: vertical;
      }

      .support-card button {
        min-height: 48px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--mint), var(--petrol));
        color: #07100f;
        font: inherit;
        font-weight: 840;
        cursor: pointer;
      }

      .hint {
        margin: 0;
        color: var(--muted);
        font-size: 0.94rem;
      }

      .hidden-field {
        position: absolute;
        left: -9999px;
        opacity: 0;
      }

      .form-status {
        min-height: 1.4em;
        margin: 0;
        color: var(--mint);
        font-weight: 720;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-top: clamp(30px, 5vw, 54px);
      }

      .panel {
        padding: 24px;
      }

      .panel strong {
        color: var(--ink);
      }

      .badge-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
      }

      .badge {
        padding: 8px 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        color: var(--soft);
        font-weight: 760;
      }

      .faq {
        width: min(60%, 760px);
        margin: clamp(34px, 6vw, 62px) auto 0;
        padding: clamp(22px, 3vw, 34px);
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.94);
        color: #172420;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.2);
      }

      .faq-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
      }

      details {
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(23, 36, 32, 0.14);
        border-radius: 18px;
        background: rgba(23, 36, 32, 0.04);
      }

      summary {
        cursor: pointer;
        padding: 20px 22px;
        font-weight: 820;
        list-style: none;
      }

      summary::-webkit-details-marker { display: none; }

      details p {
        margin: 0;
        padding: 0 22px 22px;
        color: rgba(23, 36, 32, 0.72);
        line-height: 1.58;
      }

      .site-footer {
        padding: 28px 0 40px;
        color: var(--muted);
        font-size: 0.94rem;
      }

      .site-footer a {
        margin-left: 16px;
        text-decoration: none;
      }

      @media (max-width: 1100px) {
        .site-header {
          flex-wrap: wrap;
          align-items: center;
        }

        .menu-toggle {
          display: inline-flex;
        }

        .nav-links {
          order: 3;
          width: 100%;
          display: none;
          grid-template-columns: 1fr;
          align-items: stretch;
          border-radius: 22px;
        }

        body.nav-open .nav-links {
          display: grid;
        }

        .nav-links a {
          width: 100%;
        }

        .hero,
        .grid,
        .faq-grid {
          grid-template-columns: 1fr;
        }

        .faq {
          width: 100%;
        }

        .site-header {
          padding: 18px 0 8px;
        }

        h1,
        .lead {
          max-width: none;
        }

        h1 {
          font-size: clamp(2.45rem, 12vw, 4.2rem);
          line-height: 0.98;
        }
      }

      @media (max-width: 760px) {
        .site-header,
        .page,
        .site-footer {
          width: min(100% - 28px, 1120px);
        }

        .site-header {
          min-height: 70px;
        }

        .support-card,
        .panel,
        .faq {
          border-radius: 20px;
        }

        .support-card,
        .panel,
        .faq {
          padding: 22px;
        }

        .page {
          padding-top: 24px;
        }

        .grid {
          grid-template-columns: 1fr;
        }

        summary {
          padding: 18px;
        }

        details p {
          padding: 0 18px 18px;
        }

        .footer-row {
          align-items: flex-start;
          flex-direction: column;
        }

        .footer-links {
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 8px;
        }
      }
    
.hero{grid-template-columns:minmax(0,1.15fr) minmax(290px,.8fr);align-items:center}
h1{font-size:clamp(2.65rem,6vw,5.3rem);line-height:1.02;letter-spacing:-.045em}.lead{font-size:1.16rem}
.section{margin-top:76px;scroll-margin-top:24px}.section h2{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.14;letter-spacing:-.025em;margin:0 0 18px}.section-intro{max-width:750px;color:var(--soft);line-height:1.65}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(181,234,208,.35);border-radius:999px;color:var(--mint);font-size:.8rem;font-weight:750}.tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:12px 20px;border-radius:999px;font-weight:750;text-decoration:none;background:var(--mint);color:#10231b;border:1px solid transparent}.button.secondary{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink)}.button:hover{filter:brightness(1.08)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--petrol);outline-offset:5px}
.integration-card{padding:30px;background:rgba(10,27,25,.85);border:1px solid var(--line);border-radius:28px;box-shadow:0 24px 70px #0004}.integration-brand{display:flex;align-items:center;gap:12px;margin:24px 0;font-weight:800;font-size:1.1rem}.integration-brand img{width:36px;height:36px}.integration-brand span{color:var(--muted)}.sample{border-top:1px solid var(--line);padding-top:20px}.sample-label{color:var(--soft);font-size:.85rem}.readings{display:flex;gap:30px;margin-top:16px}.reading strong{display:block;font-size:2.5rem;letter-spacing:-.05em;color:var(--mint)}.reading span{font-size:.8rem;color:var(--soft)}.small{font-size:.88rem;color:var(--soft);line-height:1.6}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}.benefit{padding:24px;border-top:1px solid var(--line)}.benefit h3{font-size:1.1rem;margin:0 0 10px}.benefit p{margin:0;color:var(--soft);line-height:1.65}
.flow{display:flex;align-items:center;gap:16px;padding:24px 0;flex-wrap:wrap}.flow strong{border:1px solid var(--line);border-radius:16px;padding:15px 20px;background:#0e211de0}.flow span{color:var(--petrol)}
.setup{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0;padding:0;list-style:none;counter-reset:steps}.setup li{counter-increment:steps;position:relative;padding:28px 28px 28px 80px;border:1px solid var(--line);border-radius:22px;background:rgba(10,24,21,.8)}.setup li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:24px;top:27px;color:var(--petrol);font-weight:800;font-size:1.15rem}.setup h3{margin:0 0 12px;font-size:1.15rem}.setup p{color:var(--soft);line-height:1.65;margin:0}.setup a{color:var(--mint);text-underline-offset:3px}
.notice{padding:22px 26px;border:1px solid #a88c5b80;border-radius:20px;background:#2b271ed9;color:#f5e8d3;line-height:1.7}.notice strong{display:block;margin-bottom:4px}.faq{margin-top:28px}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq summary{cursor:pointer;font-size:1.1rem;font-weight:700}.faq details p{max-width:850px;color:var(--soft);line-height:1.7}
.suggest{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;padding:clamp(24px,4vw,44px);border:1px solid #8ccab980;border-radius:28px;background:linear-gradient(135deg,#173b32f2,#0c201df2)}.suggest h2{margin-top:12px}.suggest p{color:var(--soft);line-height:1.65}.suggest ul{padding-left:20px;line-height:1.9;color:var(--soft)}.back-link{display:inline-block;margin-top:20px;padding:10px 18px;border-radius:999px}
@media(max-width:760px){.hero,.suggest{grid-template-columns:1fr}.benefits{grid-template-columns:1fr}.benefit{padding:20px 0}.setup{grid-template-columns:1fr}.section{margin-top:48px}.integration-card{padding:24px}.flow{gap:10px}.flow strong{padding:12px;font-size:.9rem}.setup li{padding:24px 22px 24px 68px}.setup li:before{left:20px;top:24px}}

.integration-brand{flex-wrap:wrap;gap:8px}.integration-brand img{width:28px;height:28px}

/* Compact integration overview; detailed setup remains on the download page. */
.labor-overview{max-width:920px;padding-top:clamp(34px,7vw,86px)}
.integration-overview{max-width:780px}
.labor-overview h1{font-size:clamp(2.75rem,7vw,5rem);line-height:1.05;overflow-wrap:break-word}
.labor-overview .lead{max-width:740px;margin-top:24px;font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.5;color:var(--ink)}
.integration-use{max-width:650px;margin:18px 0 28px;color:var(--soft);font-size:1.05rem;line-height:1.65}
.requirement{display:grid;gap:6px;max-width:650px;padding:20px 24px;border:1px solid var(--line);border-radius:18px;background:rgba(8,24,21,.76)}
.requirement span{color:var(--petrol);font-size:.85rem;font-weight:700}
.requirement strong{font-size:clamp(1rem,2vw,1.2rem);line-height:1.45}
.lab-status{max-width:650px;margin:16px 0 0}
.suggest-simple{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.suggest-simple h2{margin:0;font-size:1.2rem;line-height:1.4}
.suggest-simple a{color:var(--mint);text-underline-offset:5px;padding:10px 0;line-height:1.4}
@media(max-width:600px){.labor-overview{padding-bottom:40px}.requirement{padding:18px}.suggest-simple{margin-top:40px}.lab-status{font-size:.85rem}}