:root{
  --black:#000000;
  --purple:#B400FA;
  --gold:#C4B187;
  --grey:#9EA5A1;
  --bluegrey:#D1D8E6;
  --white:#FFFFFF;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:"Roboto",Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.shell{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.eyebrow{margin:0 0 10px;color:var(--purple);font:800 14px/1.1 "Montserrat",Arial,sans-serif;text-transform:uppercase}
.eyebrow.centered{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-width:235px;padding:14px 22px;border-radius:10px;font:600 14px/1 "Montserrat",Arial,sans-serif;text-transform:uppercase;transition:transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn span{font-size:28px;line-height:10px}
.btn-solid{background:#B400FA;color:var(--white)}
.btn-outline{border:2px solid #B400FA;color:var(--white);background:transparent}

/* HERO: keep the navigation and artwork on the same proportional grid as the supplied design. */
.hero{
  --hero-art-top:clamp(58px,4vw,78px);
  --hero-art-height:56.3889vw; /* Faucet.jpg is 1080 x 609. Keep its full aspect ratio visible. */
  position:relative;
  min-height:calc(var(--hero-art-top) + var(--hero-art-height));
  background:var(--black);
  color:var(--white);
  overflow:hidden
}
.hero-art{position:absolute;inset:0;background-color:var(--black);background-image:url('../images/Faucet.jpg');background-repeat:no-repeat;background-size:100% auto;background-position:center var(--hero-art-top)}
.hero .hero-content.shell{width:100%;max-width:none;margin:0}
.site-nav{position:relative;z-index:5;height:clamp(86px,7vw,112px);display:grid;grid-template-columns:42% 58%;align-items:center;padding:0 clamp(26px,4.8vw,92px) 0 0}
.brand{display:flex;align-items:center;justify-content:center;width:100%;min-width:0}
.brand img{width:clamp(160px,14vw,270px);height:auto}
.nav-links{display:flex;justify-content:space-between;gap:clamp(18px,2.7vw,52px);align-items:center;width:100%}
.nav-links a{position:relative;padding:12px 0;color:var(--white);font:800 clamp(12px,.86vw,16px)/1 "Montserrat",Arial,sans-serif;text-transform:uppercase;transition:color .25s ease}
.nav-links a:hover,.nav-links a.active{color:var(--grey)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#B400FA}
.nav-toggle{display:none;background:transparent;border:0;width:42px;padding:6px;cursor:pointer;justify-self:end}
.nav-toggle span{display:block;height:3px;margin:6px 0;background:var(--white)}
.hero-content{position:relative;z-index:2;min-height:calc(var(--hero-art-top) + var(--hero-art-height) - clamp(86px,7vw,112px));display:flex;align-items:flex-start;padding:clamp(105px,11vw,190px) clamp(28px,6.5vw,124px) 0 42.5%}
.hero-copy{width:100%;max-width:920px}
.hero h1{margin:0;font:800 clamp(38px,4.2vw,78px)/1.06 "Montserrat",Arial,sans-serif;text-transform:uppercase;letter-spacing:-1.5px}
.hero-line{display:block;white-space:nowrap;color:var(--white)}
.hero-line-purple{color:#B400FA}
.accent-rule{width:100%;height:5px;background:#B400FA;margin:clamp(24px,2.5vw,42px) 0 clamp(22px,2.1vw,34px)}
.hero-copy p{font-size:clamp(16px,1.28vw,22px);line-height:1.55;margin:0 0 32px;color:var(--white)}

.product-section{padding:48px 0 56px;background:var(--white)}
.product-grid{display:grid;grid-template-columns:.92fr 1.48fr;gap:54px;align-items:center}
.product-copy h2,.mission-copy h2{margin:0;font:800 clamp(46px,5vw,68px)/.88 "Montserrat",Arial,sans-serif;text-transform:uppercase;letter-spacing:-2px}
.product-copy .subhead{margin:17px 0 24px;font-size:16px}
.feature-list{display:grid;gap:9px;margin-bottom:28px}
.feature-row{display:flex;align-items:center;gap:16px;font-size:15px}
.feature-row img{width:38px;height:38px;object-fit:contain;transition:transform .25s ease}
.feature-row:hover img{transform:scale(1.28)}

.dashboard{background:var(--black);border:3px solid #B400FA;border-radius:20px;color:var(--white);padding:16px 16px 18px;font-family:"Roboto",Arial,sans-serif;overflow:hidden}
.dash-top{height:48px;display:flex;align-items:flex-start;justify-content:space-between;padding:0 6px;font-weight:900;font-size:17px}
.dash-top a{background:#B400FA;color:var(--white);padding:10px 19px;border-radius:6px;font-size:13px;font-weight:900}
.dash-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px}
.dash-sidebar{background:var(--black);border-radius:14px;padding:8px 12px;display:grid;align-content:start;gap:2px}
.dash-sidebar>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--grey);font-size:12px}
.dash-sidebar strong{font-size:12px}
.dash-sidebar .folder-total{margin-top:6px;padding:12px 8px;background:var(--black);border:0;border-radius:9px;align-items:center}
.dash-main h3{margin:0 0 15px;font:900 17px/1 "Roboto",Arial,sans-serif}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat-card{background:var(--black);border:1px solid var(--grey);border-radius:10px;padding:15px 13px;min-height:91px}
.stat-card span{display:block;font-size:11px;font-weight:900;margin-bottom:11px}
.stat-card strong{font-size:26px}
.chart-card{margin-top:16px;overflow:hidden}
.chart-card h4{font-size:12px;margin:0 0 3px}
.chart{display:block;width:100%;overflow:hidden}
.grid-lines line{stroke:var(--grey);stroke-width:1}
.chart-labels{fill:var(--white);font-size:10px;font-family:"Roboto",Arial,sans-serif}
.chart-line{fill:none;stroke:#B400FA;stroke-width:4;stroke-linecap:round}
.chart-dots circle{fill:#B400FA;stroke:#B400FA;opacity:0;r:0px}
.chart-dots circle.visible{opacity:1;r:5px;transition:opacity .35s ease,r .35s ease}
.chart-line.chart-alive{animation:chartBreathe 6s ease-in-out infinite}
.chart-dots circle.alive{animation:dotPulse 4.4s ease-in-out infinite}
.chart-dots circle.alive:nth-child(2n){animation-delay:.75s}
.chart-dots circle.alive:nth-child(3n){animation-delay:1.4s}
@keyframes chartBreathe{0%,100%{stroke-width:4;opacity:1}50%{stroke-width:4.6;opacity:.86}}
@keyframes dotPulse{0%,100%{r:5px}50%{r:6.5px}}

.features-section{position:relative;z-index:2;background:var(--black);color:var(--white);padding:34px 0 164px;overflow:visible}
.features-inner h2{text-align:center;margin:0 0 44px;font:800 clamp(28px,3.6vw,44px)/1 "Montserrat",Arial,sans-serif;text-transform:uppercase}
.feature-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:45px;text-align:center}
.feature-columns article img{width:72px;height:72px;object-fit:contain;margin:0 auto 14px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.feature-columns article:hover img{transform:scale(1.25)}
.feature-columns h3{font:800 13px/1.2 "Montserrat",Arial,sans-serif;text-transform:uppercase;margin:0 0 14px}
.feature-columns p{max-width:220px;margin:auto;font-size:13px;line-height:1.5}
/* Use the entire supplied image, including its white bottom strip. Never crop it with background-size:cover. */
.wave-overlap{position:absolute;left:0;right:0;bottom:-1px;width:100%;z-index:3;pointer-events:none;line-height:0;transform:translateY(34%)}
.wave-overlap img{display:block;width:100%;height:auto;max-width:none}

.mission-section{position:relative;padding:126px 0 64px;background:var(--white);overflow:hidden}
.mission-section::before{content:"";position:absolute;right:0;top:40px;width:55%;height:70%;background:url('../images/Grey_Hills_Behind_Computer.jpg') center/contain no-repeat}
.mission-grid{position:relative;display:grid;grid-template-columns:1fr 1.35fr;gap:55px;align-items:center}
.mission-copy{z-index:2}
.mission-copy p:not(.eyebrow){max-width:440px;line-height:1.48;margin:20px 0 28px;font-size:15px}
.mission-visual{position:relative;z-index:2}
.mission-visual img{width:82%;margin:auto}

.download-section{background:var(--black);color:var(--white);padding:24px 0}
.download-grid{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:50px}
.download-copy h2{margin:0;font:800 clamp(34px,4vw,48px)/1.05 "Montserrat",Arial,sans-serif;text-transform:uppercase}
.download-copy p{max-width:490px;line-height:1.5;margin:18px 0 25px;font-size:14px}
.water-image img{width:100%;height:245px;object-fit:cover}

.site-footer{position:relative;background:var(--white);padding:35px 0 12px;overflow:hidden}
.site-footer::before,.site-footer::after{content:"";position:absolute;bottom:0;width:36%;height:190px;background-size:cover;background-repeat:no-repeat}
.site-footer::before{left:0;background-image:url('../images/Grey_Circle_Fade_Background_Left_Side.jpg');background-position:left bottom}
.site-footer::after{right:0;background-image:url('../images/Grey_Circle_Fade_Background_Right_Side.jpg');background-position:right bottom}
.footer-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .55fr repeat(3,.8fr);gap:28px;align-items:start}
.footer-brand img{width:185px}
.footer-brand p{font-size:13px;line-height:1.45;margin-top:18px}
.footer-drop{height:135px;width:auto;margin:-8px auto 0}
.footer-column{padding-left:24px;border-left:1px solid var(--bluegrey);display:flex;flex-direction:column;gap:11px}
.footer-column h3{margin:0 0 6px;color:var(--purple);font:800 12px/1 "Montserrat",Arial,sans-serif;text-transform:uppercase}
.footer-column a{font-size:12px;font-weight:900}
.footer-column a:hover{color:var(--purple)}
.copyright{position:relative;z-index:2;text-align:center;font-size:11px;font-weight:900;margin-top:16px}

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


@media(max-width:1180px) and (min-width:1001px){
  .site-nav{grid-template-columns:39% 61%;padding-right:36px}
  .brand img{width:clamp(160px,15vw,205px)}
  .nav-links{gap:22px}
  .hero-content{padding-left:40%;padding-right:44px}
  .hero h1{font-size:clamp(40px,4.05vw,52px)}
}
@media(max-width:1000px){
  .site-nav{grid-template-columns:40% 60%;padding-right:28px}
  .brand img{width:clamp(150px,15vw,205px)}
  .nav-links{gap:18px}
  .hero{--hero-art-top:64px;--hero-art-height:56.3889vw}
  .hero-art{background-position:center var(--hero-art-top)}
  .hero-content{min-height:calc(var(--hero-art-top) + var(--hero-art-height) - 90px);padding:100px 42px 0 41%}
  .hero h1{font-size:clamp(36px,4.25vw,52px)}
  .hero-copy p{font-size:16px}
  .product-grid{grid-template-columns:1fr;gap:40px}
  .product-copy{display:grid;grid-template-columns:1fr 1.25fr;column-gap:45px}
  .product-copy .eyebrow,.product-copy h2,.product-copy .subhead,.product-copy .btn{grid-column:1}
  .feature-list{grid-column:2;grid-row:1/5;margin-top:20px}
  .product-copy .btn{justify-self:start}
  .feature-columns{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .mission-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.1fr .4fr repeat(3,1fr);gap:15px}
  .footer-column{padding-left:15px}
}
@media(max-width:760px){
  .shell{width:min(calc(100% - 32px),var(--max))}
  .site-nav{height:82px;display:flex;padding:0 18px;justify-content:space-between}
  .brand{width:auto;justify-content:flex-start}
  .brand img{width:clamp(150px,31vw,220px)}
  .nav-toggle{display:block;z-index:7}
  .nav-links{position:absolute;top:82px;left:0;right:0;display:none;flex-direction:column;gap:0;background:var(--black);border:1px solid var(--grey);padding:10px 20px 18px}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:15px 0}

  /* MOBILE HERO
     The illustration becomes a dimmed background layer behind the copy.
     It is always scaled from width, with an inset on both sides, so the
     complete faucet artwork can never be clipped by the viewport. */
  .hero{--hero-art-top:82px;--hero-art-height:56.3889vw;min-height:clamp(690px,128vw,900px)}
  .hero-art{
    top:82px;
    bottom:0;
    background-position:center top;
    background-size:calc(100% - 28px) auto;
    background-repeat:no-repeat;
    opacity:.46;
  }
  .hero-content{
    min-height:calc(clamp(690px,128vw,900px) - 82px);
    padding:clamp(150px,40vw,305px) 18px 48px;
    justify-content:flex-start;
  }
  .hero-copy{width:100%;max-width:none;background:transparent;padding:0}
  .hero h1{font-size:clamp(34px,9.5vw,50px);letter-spacing:-1px}
  .hero-line{white-space:normal}
  .accent-rule{margin:22px 0 20px}
  .hero-copy p{font-size:16px}.desktop-only{display:none}
  .product-section{padding-top:42px}
  .product-copy{display:block}.feature-list{margin-top:25px}.product-copy h2,.mission-copy h2{font-size:48px}
  .dashboard{padding:13px 10px}.dash-body{grid-template-columns:1fr}.dash-sidebar{grid-template-columns:repeat(2,1fr);gap:0 18px}.dash-sidebar .folder-total{margin-top:0}.dash-main{min-width:0}.dash-top{font-size:15px}.dash-top a{font-size:11px}.stats-row{gap:6px}.stat-card{padding:12px 8px}.stat-card strong{font-size:21px}.chart{min-width:520px}.chart-card{overflow-x:auto}
  .features-section{padding-bottom:124px}.feature-columns{grid-template-columns:1fr;gap:34px}.wave-overlap{transform:translateY(22%)}
  .mission-section{padding-top:100px}.mission-grid{grid-template-columns:1fr}.mission-section::before{width:100%;top:42%;height:50%}.mission-visual img{width:100%}
  .download-grid{grid-template-columns:1fr}.water-image img{height:auto}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1}.footer-drop{grid-column:2}.footer-column{border-left:0;border-top:1px solid var(--bluegrey);padding:18px 0 0}.copyright{margin-top:28px}
}
@media(max-width:480px){
  .btn{min-width:210px}.hero h1{font-size:34px}.product-copy h2,.mission-copy h2{font-size:42px}.dash-sidebar{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-drop{grid-column:1;margin:0}.footer-column{grid-column:1}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.feature-row img,.feature-columns article img,.btn{transition:none}.chart-line.chart-alive,.chart-dots circle.alive{animation:none}
}

/* v11 — PHONE-ONLY refinements. Desktop/tablet styles above remain unchanged. */
@media(max-width:760px){
  /* Keep the mobile hero compact and let the next section arrive sooner. */
  .hero{
    min-height:clamp(610px,150vw,690px);
  }
  .hero-art{
    opacity:.40;
    background-size:calc(100% - 24px) auto;
  }
  .hero-content{
    min-height:calc(clamp(610px,150vw,690px) - 82px);
    padding:clamp(278px,70vw,338px) 18px 28px;
  }
  .accent-rule{margin:18px 0 17px}
  .hero-copy p{margin-bottom:24px;line-height:1.48}

  /* Tighten section rhythm on phones only. */
  .product-section{padding:28px 0 32px}
  .product-grid{gap:28px}
  .product-copy .subhead{margin:12px 0 18px}
  .feature-list{margin:18px 0 20px;gap:7px}
  .feature-row{gap:12px}
  .feature-row img{width:34px;height:34px}

  /* Phone preview: retain the useful small counters and remove Analytics Overview/chart. */
  .dashboard{padding:12px 10px 14px}
  .dash-top{height:52px;padding:0 8px}
  .dash-body{display:block}
  .dash-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding:4px 10px}
  .dash-sidebar>div{padding:8px 0}
  .dash-main{display:none !important}

  .features-section{padding:28px 0 92px}
  .features-inner h2{margin-bottom:28px}
  .feature-columns{gap:26px}
  .feature-columns article img{margin-bottom:10px}
  .feature-columns h3{margin-bottom:9px}
  .wave-overlap{transform:translateY(18%)}

  .mission-section{padding:76px 0 38px}
  .mission-grid{gap:24px}
  .mission-copy p:not(.eyebrow){margin:14px 0 20px}
  .mission-visual img{width:92%}

  .download-section{padding:28px 0}
  .download-grid{gap:22px}
  .download-copy p{margin:14px 0 20px}
  .water-image img{max-height:230px;object-fit:contain}

  /* Use the supplied Faucet mark as a raster asset on phones so iOS cannot
     substitute a font inside the SVG. Keep the footer compact. */
  .site-footer{padding:26px 0 10px}
  .footer-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:0 12px;
    align-items:start;
  }
  .footer-brand{grid-column:1 / 5}
  .footer-brand img{width:170px;max-width:100%}
  .footer-brand p{margin:12px 0 0;font-size:12px;line-height:1.4}
  .footer-drop{grid-column:5 / 7;height:92px;margin:0 auto}
  .footer-column{
    grid-row:2;
    border:0;
    border-top:1px solid var(--bluegrey);
    padding:16px 0 0;
    margin-top:18px;
    min-width:0;
    gap:9px;
  }
  .footer-column:nth-of-type(1){grid-column:1 / 3}
  .footer-column:nth-of-type(2){grid-column:3 / 5}
  .footer-column:nth-of-type(3){grid-column:5 / 7}
  .footer-column h3{font-size:11px;margin-bottom:3px}
  .footer-column a{font-size:11px;line-height:1.25}
  .copyright{margin-top:22px;font-size:10px}
}

@media(max-width:480px){
  /* Override the older stacking rules: footer navigation stays three-up. */
  .dash-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .footer-drop{grid-column:5 / 7;margin:0 auto}
  .footer-column:nth-of-type(1){grid-column:1 / 3}
  .footer-column:nth-of-type(2){grid-column:3 / 5}
  .footer-column:nth-of-type(3){grid-column:5 / 7}
}

/* v12 — PHONE ONLY: remove faucet dimming. No other layout changes. */
@media(max-width:760px){
  .hero-art{opacity:1;}
}

/* Copy update — layout preserved; only accommodates approved longer copy. */
.hero h1{font-size:clamp(35px,3.65vw,68px)}
.hero-copy .hero-subhead{font-weight:900;margin-bottom:8px}
.hero-copy .hero-body{max-width:650px;margin-bottom:32px}
.product-copy h2{font-size:clamp(38px,3.25vw,58px);line-height:1.02}
.product-intro{font-size:15px;line-height:1.45;margin:0 0 18px}
.feature-row span{display:block}.feature-row strong{display:block;font:800 12px/1.2 "Montserrat",Arial,sans-serif;text-transform:uppercase}.feature-row small{display:block;margin-top:3px;font-size:12px;line-height:1.3}
.features-lead{max-width:760px;margin:-18px auto 42px;text-align:center;font-size:15px;line-height:1.5}.features-lead strong{font-family:"Montserrat",Arial,sans-serif;text-transform:uppercase}
.mission-copy p{margin-bottom:14px}.mission-tagline{font-weight:900}.browser-note{margin-top:14px!important;font-size:13px!important;font-weight:900}
@media(max-width:1180px) and (min-width:1001px){.hero h1{font-size:clamp(36px,3.5vw,48px)}}
@media(max-width:1000px){.hero h1{font-size:clamp(33px,3.8vw,46px)}.product-copy h2{font-size:42px}.product-intro{grid-column:1}.feature-list{grid-row:1/6}}
@media(max-width:760px){.hero h1{font-size:clamp(30px,8.2vw,43px)}.hero-copy .hero-subhead{margin-bottom:6px}.hero-copy .hero-body{margin-bottom:24px}.product-copy h2{font-size:40px}.features-lead{margin:-14px auto 28px;font-size:14px}}
@media(max-width:480px){.hero h1{font-size:31px}.product-copy h2{font-size:36px}}


/* v4 refinement — requested Featured Product / Why Faucet / footer adjustments. */
@media(min-width:1001px){
  /* Give the live dashboard more visual weight without changing the section structure. */
  body:not(.products-page) .product-grid{
    grid-template-columns:.78fr 1.62fr;
    gap:44px;
  }

  /* Add breathing room between the five feature/icon rows. */
  body:not(.products-page) .feature-list{
    gap:16px;
  }

  /* Keep the first headline line at its current scale and soften only line two. */
  body:not(.products-page) .featured-title-primary{
    font-size:1em;
  }
  body:not(.products-page) .featured-title-secondary{
    font-size:.88em;
    line-height:1.03;
  }

  /* Center the laptop vertically in the full Why Faucet content column. */
  body:not(.products-page) .mission-visual{
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  body:not(.products-page) .mission-visual img{
    margin:auto;
  }
}

/* Let the supplied grey-circle artwork fill the footer vertically so there is
   no blank band above either side image. Applies consistently to both pages. */
.site-footer::before,.site-footer::after{
  top:0;
  bottom:0;
  height:100%;
  background-size:cover;
}
.site-footer::before{background-position:left center}
.site-footer::after{background-position:right center}

/* v5 refinement — keep the Features wave below all feature copy and lower the Why Faucet laptop. */
@media(min-width:1001px){
  body:not(.products-page) .features-section{
    padding-bottom:230px;
  }
  body:not(.products-page) .wave-overlap{
    transform:translateY(52%);
  }
  body:not(.products-page) .mission-visual{
    transform:translateY(52px);
  }
}

/* v6 refinement — desktop/tablet layout only.
   Keep the Features illustration in normal flow beneath the copy, and widen
   the copy columns in Featured Product and Why Faucet to reduce tall stacking. */
@media(min-width:1001px){
  body:not(.products-page) .product-grid{
    grid-template-columns:1.02fr 1.55fr;
    gap:46px;
  }

  body:not(.products-page) .features-section{
    padding-bottom:0;
  }
  body:not(.products-page) .wave-overlap{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    margin-top:54px;
    transform:none;
  }

  body:not(.products-page) .mission-grid{
    grid-template-columns:1.18fr 1.32fr;
    gap:46px;
  }
  body:not(.products-page) .mission-copy p:not(.eyebrow){
    max-width:560px;
  }
  body:not(.products-page) .mission-visual{
    transform:none;
  }
  body:not(.products-page) .mission-visual img{
    width:90%;
  }
}

/* v7 refinement — desktop only: improve section proportions without changing phone layout. */
@media(min-width:1001px){
  /* Featured Product: give the copy enough width to stop the headline/body from stacking too tall. */
  body:not(.products-page) .product-grid{
    grid-template-columns:1.18fr 1.72fr;
    gap:42px;
    align-items:center;
  }
  body:not(.products-page) .product-copy h2{
    font-size:clamp(40px,3.05vw,55px);
  }
  body:not(.products-page) .product-intro{
    max-width:590px;
  }
  body:not(.products-page) .feature-row small{
    max-width:540px;
  }

  /* Add vertical presence to the dashboard itself rather than adding empty section space. */
  body:not(.products-page) .dashboard{
    min-height:500px;
    display:flex;
    flex-direction:column;
  }
  body:not(.products-page) .dash-body{
    flex:1;
    align-items:stretch;
  }
  body:not(.products-page) .dash-main{
    display:flex;
    flex-direction:column;
  }
  body:not(.products-page) .chart-card{
    flex:1;
    display:flex;
    flex-direction:column;
  }
  body:not(.products-page) .chart{
    flex:1;
    min-height:245px;
  }

  /* Why Faucet: remove excess top air and let the wider copy determine a shorter section. */
  body:not(.products-page) .mission-section{
    padding-top:64px;
    padding-bottom:54px;
  }
  body:not(.products-page) .mission-grid{
    grid-template-columns:1.3fr 1.4fr;
    gap:38px;
  }
  body:not(.products-page) .mission-copy p:not(.eyebrow){
    max-width:650px;
  }
  body:not(.products-page) .mission-visual img{
    width:92%;
  }
}

/* v8 refinement — Featured Product balance only (desktop/tablet).
   Bring the dashboard closer/larger, slightly reduce headline weight,
   and devote more vertical room to the graph. Phone layout remains unchanged. */
@media(min-width:1001px){
  body:not(.products-page) .product-grid{
    grid-template-columns:42fr 58fr;
    gap:26px;
    align-items:center;
  }

  /* Slightly reduce the headline's overall visual weight while preserving hierarchy. */
  body:not(.products-page) .product-copy h2{
    font-size:clamp(38px,2.86vw,52px);
    line-height:1.01;
  }
  body:not(.products-page) .featured-title-secondary{
    font-size:.88em;
  }

  /* Keep the left copy readable without allowing it to become narrow/tall again. */
  body:not(.products-page) .product-intro{
    max-width:610px;
  }
  body:not(.products-page) .feature-row small{
    max-width:565px;
  }

  /* Increase dashboard presence and pull it toward the copy. */
  body:not(.products-page) .dashboard{
    width:104%;
    min-height:545px;
    transform:translateX(-2.5%);
    align-self:center;
  }

  /* Preserve the upper dashboard proportions and give the chart the added height. */
  body:not(.products-page) .dash-top{
    flex:0 0 48px;
  }
  body:not(.products-page) .dash-body{
    flex:1;
  }
  body:not(.products-page) .dash-main{
    min-height:0;
  }
  body:not(.products-page) .chart-card{
    flex:1;
    margin-top:18px;
  }
  body:not(.products-page) .chart{
    min-height:290px;
    height:100%;
  }
}

/* v42 — Home featured product: move dashboard right only */
@media (min-width: 1001px) {
  #chat-manager .dashboard {
    transform: translateX(48px);
  }
}

/* v44 — Homepage hero CTA: opaque black fill only */
.hero .btn,
.hero .button,
.hero .hero-cta,
.hero a[class*="btn"],
.hero a[class*="button"] {
  background-color: #000000 !important;
}

/* v45 — closing homepage CTA: shorter and vertically centered */
@media (min-width: 1001px) {
  .closing-cta {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
  .closing-cta > .container,
  .closing-cta .container {
    align-items: center !important;
  }
}

/* v46 — closing CTA: exact equal space above and below content */
@media (min-width: 1001px) {
  .closing-cta {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
  .closing-cta > .container,
  .closing-cta .container {
    align-items: center !important;
  }
}

/* v47 — Closing CTA: true vertical centering */
@media (min-width: 1001px) {
  .closing-cta {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  .closing-cta > .container,
  .closing-cta .container {
    min-height: 620px !important;
    display: flex !important;
    align-items: center !important;
  }

  .closing-cta .closing-cta-copy,
  .closing-cta .cta-copy,
  .closing-cta .copy {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* v48 — Homepage closing CTA: optical vertical centering
   Correct selectors for the actual .download-section markup. */
@media (min-width: 1001px) {
  .download-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .download-grid {
    align-items: center !important;
  }

  .download-copy.reveal,
  .download-copy.reveal.visible,
  .download-copy {
    transform: translateY(23px) !important;
  }
}


/* v62 — HOME HERO ONLY
   Fit the full Faucet.jpg composition to the browser vertically.
   Do not force the artwork to 100% browser width on wide screens. */
@media (min-width: 1001px) {
  .hero {
    --hero-fit-height: calc(100vh - var(--hero-art-top));
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  .hero-art {
    background-size: auto var(--hero-fit-height) !important;
    background-position: center var(--hero-art-top) !important;
  }

  .hero-content {
    min-height: calc(100vh - clamp(86px,7vw,112px)) !important;
  }
}


/* v63 — HOME HERO ONLY
   Scale the complete hero artwork proportionally so both width and height fit.
   No cropping: any extra space simply remains black. */
@media (min-width: 1001px) {
  .hero {
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  .hero-art {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  .hero-content {
    min-height: calc(100vh - clamp(86px,7vw,112px)) !important;
  }
}

/* v65 — Home hero fine tuning only */
@media (min-width:1001px){
  body:not(.about-page):not(.products-page):not(.merch-page):not(.support-page):not(.contact-page) .hero-art{
    background-position:center calc(50% + 28px)!important;
  }
}
body:not(.about-page):not(.products-page):not(.merch-page):not(.support-page):not(.contact-page) .hero .accent-rule{
  height:3px!important;
}
@media (max-width:760px){
  body:not(.about-page):not(.products-page):not(.merch-page):not(.support-page):not(.contact-page) .hero .accent-rule{
    height:2px!important;
  }
}


/* v73 — SITE-WIDE TYPOGRAPHY GUIDE
   Consistent hierarchy across Home, About, Products, Merch, Support and Contact.
   Page-specific art/layout remains untouched. */

:root{
  --faucet-h1-desktop: clamp(35px, 3.65vw, 68px);
  --faucet-h1-tablet: clamp(36px, 3.5vw, 48px);
  --faucet-h1-mobile: clamp(30px, 8.2vw, 43px);

  --faucet-h2-desktop: 28px;
  --faucet-h2-mobile: 24px;

  --faucet-h3-desktop: 19px;
  --faucet-h3-mobile: 18px;

  --faucet-body-desktop: 17px;
  --faucet-body-mobile: 16px;

  --faucet-rule-desktop: 3px;
  --faucet-rule-mobile: 2px;
}

/* HERO H1 — same scale everywhere */
.home-page .hero h1,
.about-page .about-hero h1,
.about-page .about-hero-copy h1,
.products-page .products-hero h1,
.products-page .product-hero h1,
.products-page .product-hero-copy h1,
.support-page .support-hero h1,
.contact-page .contact-hero h1,
.merch-page .merch-hero h1{
  font-size: var(--faucet-h1-desktop) !important;
  line-height: 1.06 !important;
  letter-spacing: -1.5px !important;
}

/* HERO DIVIDER — same thickness everywhere */
.home-page .hero .accent-rule,
.about-page .about-hero .accent-rule,
.products-page .products-hero .accent-rule,
.products-page .product-hero .accent-rule,
.support-page .support-hero .accent-rule,
.contact-page .contact-hero .accent-rule,
.merch-page .merch-hero .accent-rule{
  height: var(--faucet-rule-desktop) !important;
}

/* SUBHEAD / INTRO HEADINGS — same scale everywhere */
.hero-subhead,
.contact-subhead,
.support-hero .hero-subhead,
.about-hero .hero-subhead,
.products-page .product-hero-subhead,
.products-page .hero-subhead,
main h2,
section h2{
  font-size: var(--faucet-h2-desktop) !important;
  line-height: 1.22 !important;
}

/* SMALLER SUBSECTION HEADINGS */
main h3,
section h3,
.faq-item summary,
.overview-callouts h3{
  font-size: var(--faucet-h3-desktop) !important;
  line-height: 1.3 !important;
}

/* BODY COPY */
main p,
section p,
.hero-body,
.contact-body{
  font-size: var(--faucet-body-desktop) !important;
  line-height: 1.5 !important;
}

/* Keep eyebrows intentionally small and consistent */
.eyebrow{
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

/* Support hero specifically: remove its oversized legacy typography */
.support-page .support-hero .hero-subhead{
  font-weight: 700 !important;
}
.support-page .support-hero .hero-body{
  font-weight: 400 !important;
}

/* Tablet */
@media (max-width:1180px) and (min-width:1001px){
  .home-page .hero h1,
  .about-page .about-hero h1,
  .about-page .about-hero-copy h1,
  .products-page .products-hero h1,
  .products-page .product-hero h1,
  .products-page .product-hero-copy h1,
  .support-page .support-hero h1,
  .contact-page .contact-hero h1,
  .merch-page .merch-hero h1{
    font-size: var(--faucet-h1-tablet) !important;
  }
}

/* Mobile */
@media (max-width:760px){
  .home-page .hero h1,
  .about-page .about-hero h1,
  .about-page .about-hero-copy h1,
  .products-page .products-hero h1,
  .products-page .product-hero h1,
  .products-page .product-hero-copy h1,
  .support-page .support-hero h1,
  .contact-page .contact-hero h1,
  .merch-page .merch-hero h1{
    font-size: var(--faucet-h1-mobile) !important;
    line-height: 1.06 !important;
  }

  .home-page .hero .accent-rule,
  .about-page .about-hero .accent-rule,
  .products-page .products-hero .accent-rule,
  .products-page .product-hero .accent-rule,
  .support-page .support-hero .accent-rule,
  .contact-page .contact-hero .accent-rule,
  .merch-page .merch-hero .accent-rule{
    height: var(--faucet-rule-mobile) !important;
  }

  .hero-subhead,
  .contact-subhead,
  .support-hero .hero-subhead,
  .about-hero .hero-subhead,
  .products-page .product-hero-subhead,
  .products-page .hero-subhead,
  main h2,
  section h2{
    font-size: var(--faucet-h2-mobile) !important;
  }

  main h3,
  section h3,
  .faq-item summary,
  .overview-callouts h3{
    font-size: var(--faucet-h3-mobile) !important;
  }

  main p,
  section p,
  .hero-body,
  .contact-body{
    font-size: var(--faucet-body-mobile) !important;
  }
}


/* v76 — Restore impact to homepage section display headers only.
   These are intentionally larger than the standard H2 hierarchy. */
.home-page .mission-copy h2{
  font-size:clamp(46px,5vw,68px) !important;
  line-height:.88 !important;
  letter-spacing:-2px !important;
  font-weight:800 !important;
}

.home-page .download-copy h2{
  font-size:clamp(34px,4vw,48px) !important;
  line-height:1.05 !important;
  letter-spacing:normal !important;
  font-weight:800 !important;
}

@media(max-width:760px){
  .home-page .mission-copy h2{
    font-size:48px !important;
  }
  .home-page .download-copy h2{
    font-size:clamp(32px,9.5vw,42px) !important;
  }
}

@media(max-width:480px){
  .home-page .mission-copy h2{
    font-size:42px !important;
  }
}


/* v77 — Unified section headline system
   Match major section headers sitewide to the larger Products-page treatment.
   Hero H1s remain governed by their existing hero rules. */
:root{
  --section-display-size: clamp(46px, 5vw, 68px);
  --section-display-weight: 800;
  --section-display-leading: .94;
  --section-display-tracking: -1.8px;
}

/* Major non-hero section headlines across all pages */
.home-page .mission-copy h2,
.home-page .download-copy h2,
.about-page .story-copy h2,
.products-page .overview-copy h2,
.products-page .privacy-copy h2,
.products-page .compat-copy h2,
.support-page .support-section-copy h2,
.support-page .support-cta-copy h2,
.contact-page .contact-copy h2,
.merch-page .merch-copy h2,
main section h2.section-title,
main section .section-heading h2{
  font-size: var(--section-display-size) !important;
  font-weight: var(--section-display-weight) !important;
  line-height: var(--section-display-leading) !important;
  letter-spacing: var(--section-display-tracking) !important;
}

/* About-page story headline specifically shown in the supplied reference */
.about-page .story-copy h2{
  font-size: var(--section-display-size) !important;
}

/* Product page secondary major headings, including the privacy panel */
.products-page .missing-pieces h2,
.products-page .privacy-section h2,
.products-page .browser-section h2{
  font-size: var(--section-display-size) !important;
  font-weight: var(--section-display-weight) !important;
  line-height: var(--section-display-leading) !important;
  letter-spacing: var(--section-display-tracking) !important;
}

/* Keep hierarchy responsive while preserving consistent relative impact */
@media(max-width:760px){
  :root{
    --section-display-size: clamp(38px, 11vw, 48px);
    --section-display-leading: .96;
    --section-display-tracking: -1px;
  }
}


/* v78 — About page secondary headline correction
   The WHY FAUCET headline was still inheriting a smaller page-specific rule.
   Force it to use the same major secondary-header scale as the rest of the site. */
.about-page .story-copy h2,
.about-page .story-copy .story-title,
.about-page .why-faucet-copy h2,
.about-page .why-faucet h2{
  font-size: clamp(58px, 5.6vw, 78px) !important;
  font-weight: 800 !important;
  line-height: .93 !important;
  letter-spacing: -2px !important;
}

@media(max-width:760px){
  .about-page .story-copy h2,
  .about-page .story-copy .story-title,
  .about-page .why-faucet-copy h2,
  .about-page .why-faucet h2{
    font-size: clamp(42px, 12vw, 54px) !important;
    line-height: .95 !important;
    letter-spacing: -1.2px !important;
  }
}


/* v81 — Home page: match the two undersized section headlines
   to the approved About-page secondary headline scale. */
.home-page .product-copy h2,
.home-page .features-inner h2{
  font-family:Montserrat,Arial,sans-serif !important;
  font-size:clamp(46px,4.15vw,60px) !important;
  font-weight:800 !important;
  line-height:.96 !important;
  letter-spacing:-.035em !important;
  text-transform:uppercase !important;
}

/* Preserve the existing section spacing/layout. */
.home-page .features-inner h2{
  margin-bottom:44px !important;
}

@media(max-width:1000px) and (min-width:761px){
  .home-page .product-copy h2,
  .home-page .features-inner h2{
    font-size:clamp(44px,5vw,54px) !important;
  }
}

@media(max-width:760px){
  .home-page .product-copy h2,
  .home-page .features-inner h2{
    font-size:clamp(36px,10vw,46px) !important;
    line-height:.98 !important;
    letter-spacing:-.03em !important;
  }
  .home-page .features-inner h2{
    margin-bottom:28px !important;
  }
}


/* v82 — ACTUAL home selectors.
   The home <body> has no .home-page class, so the v81 rules never matched.
   These target the real home-page elements and match the approved About
   secondary-heading scale. */
body:not(.products-page) .product-copy h2,
body:not(.products-page) .features-inner h2{
  font-family:Montserrat,Arial,sans-serif !important;
  font-size:clamp(46px,4.15vw,60px) !important;
  font-weight:800 !important;
  line-height:.96 !important;
  letter-spacing:-.035em !important;
  text-transform:uppercase !important;
}

/* Remove the older rule that made the second Featured Product line smaller. */
body:not(.products-page) .product-copy h2 .featured-title-primary,
body:not(.products-page) .product-copy h2 .featured-title-secondary{
  font-size:1em !important;
  font-weight:800 !important;
}

/* Keep existing section composition while restoring headline impact. */
body:not(.products-page) .features-inner h2{
  margin-bottom:44px !important;
}

@media(max-width:1000px) and (min-width:761px){
  body:not(.products-page) .product-copy h2,
  body:not(.products-page) .features-inner h2{
    font-size:clamp(44px,5vw,54px) !important;
  }
}

@media(max-width:760px){
  body:not(.products-page) .product-copy h2,
  body:not(.products-page) .features-inner h2{
    font-size:clamp(36px,10vw,46px) !important;
    line-height:.98 !important;
    letter-spacing:-.03em !important;
  }
  body:not(.products-page) .features-inner h2{
    margin-bottom:28px !important;
  }
}


/* v83 — Home page remaining section headers matched to approved secondary-header scale */
body:not(.products-page) .mission-copy h2,
body:not(.products-page) .download-copy h2{
  font-family:Montserrat,Arial,sans-serif !important;
  font-size:clamp(46px,4.15vw,60px) !important;
  font-weight:800 !important;
  line-height:.96 !important;
  letter-spacing:-.035em !important;
  text-transform:uppercase !important;
}

@media(max-width:1000px) and (min-width:761px){
  body:not(.products-page) .mission-copy h2,
  body:not(.products-page) .download-copy h2{
    font-size:clamp(44px,5vw,54px) !important;
  }
}

@media(max-width:760px){
  body:not(.products-page) .mission-copy h2,
  body:not(.products-page) .download-copy h2{
    font-size:clamp(36px,10vw,46px) !important;
    line-height:.98 !important;
    letter-spacing:-.03em !important;
  }
}