@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root{--blue:#247eaf;--dark:#263743;--muted:#718493}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--dark);font-family:'Kanit',Arial,sans-serif;font-weight:300}h1,h2,h3,h4,.en,.num{font-family:'Montserrat',Arial,sans-serif}header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(15px);border-bottom:1px solid #eaf0f4}nav{max-width:1300px;margin:auto;display:flex;align-items:center;justify-content:space-between;min-height:76px;padding:0 36px;gap:20px}.logo{font:700 27px Montserrat;color:#2a343e;letter-spacing:-1.5px;text-decoration:none}.logo span{color:#2794c6}.navlinks{display:flex;gap:25px;flex-wrap:wrap}.navlinks a{text-decoration:none;font:500 10px Montserrat;letter-spacing:1px;color:#556b7c}.navlinks a:hover{color:#1886bb}.hero{position:relative;min-height:650px;background:url('../../images/products/j-pro/hero.png') center/cover no-repeat;display:flex;align-items:center}.hero-inner{width:min(1300px,100%);margin:auto;padding:70px 7%;position:relative}.eyebrow{font:600 12px Montserrat;letter-spacing:3px;color:#438fb9;text-transform:uppercase}.hero h1{font-size:clamp(44px,5.4vw,82px);line-height:1.06;letter-spacing:-3px;margin:23px 0 25px;max-width:570px}.hero .desc{font:500 17px Montserrat;letter-spacing:1px}.hero .sub{font-size:14px;color:#5c7485;margin-top:10px}.cta{display:inline-block;margin-top:30px;padding:14px 28px;background:#288cbd;color:white;text-decoration:none;font:600 11px Montserrat;letter-spacing:1.5px}.wrap{max-width:1230px;margin:auto;padding:0 40px}.section-intro{text-align:center;padding:115px 15px 38px}.section-intro h2{font-size:clamp(34px,4vw,58px);margin:10px 0;letter-spacing:-1.5px}.section-intro .eyebrow{color:#87a6b8}.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6%;min-height:530px;padding:55px 0;border-bottom:1px solid #edf3f6}.feature.reverse .visual{order:-1}.feature .visual img{width:100%;display:block;border-radius:5px}.feature .copy{padding:0 4%}.num{color:#9cc9df;font-size:13px;font-weight:600;letter-spacing:3px}.feature h3{font-size:clamp(25px,3.1vw,43px);line-height:1.18;letter-spacing:-1px;margin:19px 0 10px}.feature h4{font:600 12px Montserrat;letter-spacing:1.5px;color:#338db7;margin:0 0 24px}.feature p,.science p,.aesthetic p,.texture p{font-size:17px;line-height:2;color:#5b6d79}.note{font-size:12px!important;color:#83939c!important}.tint{background:linear-gradient(125deg,#fff 0%,#f0f8fc 100%)}.science,.aesthetic,.texture{padding:110px 0}.split{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:6%}.split img{width:100%;display:block;border-radius:6px}.split h2{font-size:clamp(31px,3.4vw,49px);line-height:1.2;letter-spacing:-1.5px;margin:18px 0}.smallcap{font:600 12px Montserrat;color:#318cba;letter-spacing:2px}.nerves{width:100%;max-height:270px;object-fit:cover;margin-top:22px;border-radius:6px}.aesthetic{background:#f5f9fc}.texture{background:linear-gradient(110deg,#fff,#e9f4fa)}.faq{padding:95px 0 120px}.faq h2{text-align:center;font-size:46px;margin:12px 0}.faq .lead{text-align:center;color:#6e8491;margin-bottom:55px}.faq details{border-bottom:1px solid #e4edf2;padding:23px 10px}.faq summary{cursor:pointer;font-size:17px;font-weight:400;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'+';font:300 25px Montserrat;color:#4e9fc6}.faq details[open] summary:after{content:'−'}.faq details p{color:#607481;line-height:1.9;max-width:1000px}.contact{padding:95px 0;background:#eaf5fa}.contact h2{font-size:45px;margin:15px 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.placeholder{border-bottom:1px solid #b8d3e1;padding:14px 0;color:#8196a3}.pro{display:inline-block;margin-top:25px;border:1px solid #418cb1;padding:15px 21px;text-decoration:none;color:#286f95;font:600 12px Montserrat;letter-spacing:1px}footer{padding:26px;text-align:center;font:11px Montserrat;color:#8c9fa9}.mobile-menu{display:none}@media(max-width:850px){nav{padding:0 20px;min-height:66px}.navlinks{display:none}.hero{min-height:610px;background-position:62% center}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.3))}.hero-inner{padding:55px 7%}.hero h1{font-size:52px}.wrap{padding:0 24px}.feature,.split,.contact-grid{grid-template-columns:1fr;gap:22px}.feature{min-height:0;padding:55px 0}.feature .copy{padding:0}.feature .visual,.feature.reverse .visual{order:2}.science,.aesthetic,.texture{padding:70px 0}.section-intro{padding:80px 0 20px}.contact-grid{gap:10px}}@media(max-width:480px){.hero{min-height:570px;background-position:66% center}.hero h1{font-size:42px}.hero .desc{font-size:13px}.feature h3{font-size:31px}.faq h2,.contact h2{font-size:35px}}

.faq .eyebrow{font-size:clamp(19px,2.6vw,32px);letter-spacing:1.4px;color:#263743;font-weight:600}.faq .lead{font-size:17px;margin-top:18px}.feature .note{line-height:1.8;margin-top:18px}

/* J-PRO v1.6 — premium seamless design pass */
:root{--blue:#58afe0;--dark:#303b48;--muted:#617686}
body{background:#f6fafe;color:var(--dark)}
header{background:rgba(246,251,255,.79);border-color:rgba(189,216,231,.4);box-shadow:0 6px 26px rgba(102,156,189,.045)}
nav{min-height:70px}.navlinks a{color:#536879}
.hero{min-height:710px;background-position:center center;isolation:isolate}
.hero:after{content:'';position:absolute;z-index:-1;inset:auto 0 0;height:105px;background:linear-gradient(to bottom,transparent,#f6fafe)}
.hero-inner{padding-left:7.5%}.hero h1{font-weight:400;letter-spacing:-3.8px;color:#343943}.hero h1::first-line{color:#343943}
.hero .eyebrow{letter-spacing:4px}.hero .sub{line-height:1.8}
#benefits{position:relative;overflow:hidden;background:linear-gradient(165deg,#f6fafe 0%,#fdfefe 25%,#edf7fd 49%,#f8fcff 72%,#eaf5fb 100%)}
#benefits:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 16% at 4% 19%,rgba(161,209,237,.18),transparent),radial-gradient(ellipse 38% 22% at 98% 63%,rgba(165,213,242,.23),transparent)}
.section-intro{position:relative;padding-top:110px;padding-bottom:5px}.section-intro h2{font-weight:500;letter-spacing:-2px}.section-intro .eyebrow{color:#5daed8;letter-spacing:3.6px}
.wrap{max-width:1330px}.feature{position:relative;min-height:580px;gap:1%;padding:48px 0;border-bottom:1px solid rgba(166,203,224,.18);grid-template-columns:49% 51%}
.feature.reverse{grid-template-columns:51% 49%}.feature .copy{position:relative;z-index:2;padding:0 6%}.feature .visual{position:relative;isolation:isolate;overflow:visible}
.feature .visual:before{content:'';position:absolute;inset:13% 2%;border-radius:50%;background:radial-gradient(ellipse,rgba(157,212,244,.17),transparent 70%);filter:blur(23px)}
.feature .visual img{position:relative;width:113%;max-width:none;margin-left:-6%;border-radius:0;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 49%,#000 59%,transparent 100%);mask-image:radial-gradient(ellipse 70% 66% at 50% 49%,#000 59%,transparent 100%)}
.feature.reverse .visual img{margin-left:-5%}.feature h3{font-weight:500;letter-spacing:-1.8px;color:#303b48}.feature h4{color:#57addb;font-size:14px;letter-spacing:1.3px}.feature p{max-width:520px}.feature .num{color:#6fb8e0;letter-spacing:3px}
.fast-metric{font-family:Montserrat,Arial,sans-serif;font-weight:500;color:#55ade0;font-size:clamp(20px,2.4vw,33px);letter-spacing:-1.5px;white-space:nowrap;margin:14px 0 24px;line-height:1.1}
.fast-metric strong{font-weight:500;font-size:clamp(76px,10vw,145px);letter-spacing:-10px;vertical-align:-.1em;line-height:.9;color:#55b2e8;text-shadow:0 10px 28px rgba(97,185,230,.12)}
.fast-metric span{font-size:clamp(18px,2.25vw,30px);letter-spacing:-1px}
.feature .note{font-size:12px!important;line-height:1.85!important;color:#728a9a!important;border-left:2px solid rgba(101,177,220,.35);padding-left:15px;margin-top:24px}
.science,.texture,.aesthetic{position:relative;isolation:isolate;overflow:hidden;padding:110px 0;min-height:620px;display:flex;align-items:center}
.science{background:linear-gradient(100deg,#f2f9fd 0%,#f8fcff 43%,#e6f4fc 100%)}
.texture{background:linear-gradient(110deg,#f6f9fc 0%,#f9fcff 40%,#e5f3fb 100%)}
.aesthetic{background:linear-gradient(110deg,#edf7fc 0%,#f7fbff 48%,#e7f2f9 100%)}
.science:before,.texture:before,.aesthetic:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 45% 80% at 75% 50%,rgba(157,206,238,.24),transparent 78%),linear-gradient(180deg,rgba(255,255,255,.26),transparent 35%,rgba(255,255,255,.17))}
.split{grid-template-columns:47% 53%;gap:0}.split>div:first-child{position:relative;z-index:2;padding:10px 5% 10px 0}.split>img,.split>div:last-child>img{width:115%;max-width:none;margin-left:-4%;border-radius:0;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 83%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 83%,transparent 100%)}
.split h2{font-weight:500;letter-spacing:-2px}.split .accent{color:#5db3e4}.smallcap{color:#64abd2;letter-spacing:3.4px}
.texture .split{grid-template-columns:40% 60%}.texture .split>img{width:127%;margin-left:-7%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 90%,transparent 100%)}
.aesthetic .split>img{width:113%}
.faq{background:linear-gradient(180deg,#f8fcff,#fff 60%,#f0f8fc)}.faq .lead{color:#6b8394}
.contact{background:linear-gradient(130deg,#e8f4fc,#f9fcff 52%,#deeff9)}
@media(max-width:850px){.hero{min-height:630px;background-position:64% center}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.17))}.feature,.feature.reverse,.split,.texture .split{grid-template-columns:1fr;gap:15px}.feature{min-height:0;padding:68px 0 35px}.feature .copy{padding:0 2%}.feature .visual,.feature.reverse .visual{order:2}.feature .visual img{width:105%;margin-left:-2%}.science,.texture,.aesthetic{min-height:0;padding:78px 0 35px}.split>div:first-child{padding:0 0 25px}.split>img,.split>div:last-child>img,.texture .split>img{width:108%;margin-left:-4%}.fast-metric strong{font-size:clamp(82px,18vw,125px)}.fast-metric{font-size:clamp(18px,4vw,29px)}}
@media(max-width:480px){.hero{min-height:570px}.hero h1{font-size:46px}.feature h3{font-size:30px}.fast-metric strong{letter-spacing:-6px}.fast-metric span{font-size:17px}.fast-metric{font-size:18px}.science,.texture,.aesthetic{padding-top:65px}}

/* v1.7: only the approved WHY J-PRO introduction and TEXTURE proportions */
.benefits-introduction{max-width:870px;margin:26px auto 0;padding:0 24px;color:#617684;font-size:17px;line-height:1.95;font-family:'Kanit',Arial,sans-serif;font-weight:300}
.benefits-introduction p{margin:0 auto 13px}
.benefits-introduction .benefits-introduction-highlight{color:#348bb7;font-weight:400;margin-top:18px}
.texture .split{grid-template-columns:51% 49%;gap:3%}
.texture .split>img{width:100%;max-width:570px;margin-left:0;justify-self:center;object-fit:contain}
@media(max-width:850px){.texture .split{grid-template-columns:1fr;gap:15px}.texture .split>img{width:min(94%,490px);max-width:100%;margin:0 auto}.benefits-introduction{font-size:16px;padding:0 10px}}

/* v1.8 — Benefit 04 only: balanced hourglass, clear copy spacing and seamless edges */
@media (min-width:851px){
  #benefits .feature.benefit-hourglass{grid-template-columns:minmax(0,47%) minmax(0,48%);column-gap:5%;min-height:520px}
  #benefits .benefit-hourglass .visual{min-width:0;display:flex;align-items:center;justify-content:center}
  #benefits .benefit-hourglass .visual img{width:94%;max-width:100%;height:auto;margin:0;mix-blend-mode:multiply;
    -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 56%,rgba(0,0,0,.85) 70%,transparent 100%);
    mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 56%,rgba(0,0,0,.85) 70%,transparent 100%)}
  #benefits .benefit-hourglass .copy{padding-left:2%;padding-right:3%}
}
@media (max-width:850px){
  #benefits .benefit-hourglass .visual img{width:94%;max-width:100%;margin:0 auto;mix-blend-mode:multiply;
    -webkit-mask-image:radial-gradient(ellipse 72% 74% at 50% 50%,#000 55%,transparent 100%);
    mask-image:radial-gradient(ellipse 72% 74% at 50% 50%,#000 55%,transparent 100%)}
}

.clay-site-nav{max-width:none;margin:0;min-height:0;padding:0}
.jpro-header{top:80px;z-index:9000}
@media(max-width:820px){.clay-site-nav{max-width:none;min-height:0;padding:24px}.jpro-header{top:76px}}

/* Layout review pass: full media columns, paired experience cards, product-style Q&A and closing section. */
#benefits>.wrap{
  width:100%;
  max-width:1440px;
  padding:0;
}

#benefits .feature,
#benefits .feature.reverse,
#benefits .feature.benefit-hourglass{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:0;
  min-height:520px;
  padding:0;
}

#benefits .feature .copy,
#benefits .benefit-hourglass .copy{
  padding:clamp(48px,6vw,92px);
}

#benefits .feature .visual,
#benefits .benefit-hourglass .visual{
  min-width:0;
  min-height:520px;
  display:block;
  align-self:stretch;
  overflow:hidden;
}

#benefits .feature .visual::before{display:none}

#benefits .feature .visual img,
#benefits .benefit-hourglass .visual img{
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}

.science{
  min-height:620px;
  padding:0;
}

.science>.wrap{
  width:100%;
  max-width:1440px;
  min-height:620px;
  padding:0;
}

.science .split{
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-height:620px;
}

.science .split>div:first-child{
  padding:clamp(48px,6vw,92px);
}

.science .split>div:last-child{
  min-width:0;
  min-height:620px;
  overflow:hidden;
}

.science .split>div:last-child>img{
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  object-fit:cover;
  border-radius:0;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}

.experience-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

.experience-pair>section{
  min-width:0;
  min-height:720px;
  padding:0;
  display:block;
}

.experience-pair .split,
.experience-pair .texture .split{
  width:100%;
  max-width:none;
  min-height:720px;
  height:100%;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(320px,1fr);
  gap:0;
}

.experience-pair .split>div:first-child{
  padding:clamp(44px,5vw,74px);
}

.experience-pair .split>img,
.experience-pair .texture .split>img,
.experience-pair .aesthetic .split>img{
  width:100%;
  max-width:none;
  height:100%;
  min-height:320px;
  margin:0;
  align-self:stretch;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}

.faq{
  padding:clamp(84px,9vw,132px) 0;
}

.faq>.wrap{
  width:min(100% - 48px,1200px);
  max-width:none;
  padding:0;
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);
  gap:clamp(48px,7vw,100px);
  align-items:start;
}

.faq-heading{
  position:sticky;
  top:190px;
}

.faq .faq-heading .eyebrow{
  font-size:12px;
  text-align:left;
}

.faq .faq-heading h2{
  margin:18px 0;
  font-size:clamp(34px,4vw,52px);
  line-height:1.12;
  text-align:left;
}

.faq .faq-heading .lead{
  margin:0;
  font-size:16px;
  line-height:1.8;
  text-align:left;
}

.faq-list{
  border-top:1px solid #dce9f1;
}

.faq-list details{
  padding:0;
  border-bottom:1px solid #dce9f1;
}

.faq-list summary{
  position:relative;
  padding:24px 46px 24px 0;
  font-size:17px;
  font-weight:400;
}

.faq-list summary::after{
  position:absolute;
  top:50%;
  right:4px;
  transform:translateY(-50%);
}

.faq-list details p{
  margin:0;
  padding:0 46px 26px 0;
}

.contact{
  padding:clamp(88px,10vw,142px) 24px;
  text-align:center;
  background:linear-gradient(145deg,#edf8fe 0%,#fafdff 48%,#dceff9 100%);
  border-top:1px solid rgba(113,177,210,.22);
}

.contact-inner{
  width:min(100%,820px);
  margin:0 auto;
}

.contact-brand{
  margin:20px 0 4px;
  color:#303b48;
  font:600 clamp(54px,8vw,94px)/1 Montserrat,Arial,sans-serif;
  letter-spacing:-.06em;
}

.contact-brand span{color:#58afe0}

.contact h2{
  margin:22px 0 18px;
  font-size:clamp(28px,4vw,44px);
  line-height:1.15;
}

.contact p{
  color:#617684;
  font-size:16px;
  line-height:1.8;
}

.contact .pro{
  margin-top:28px;
  padding:16px 24px;
  background:#fff;
}

.contact .contact-legal{
  max-width:680px;
  margin:38px auto 0;
  font-size:12px;
  color:#7b8f9c;
}

@media(max-width:900px){
  #benefits .feature,
  #benefits .feature.reverse,
  #benefits .feature.benefit-hourglass{
    grid-template-columns:1fr;
    min-height:0;
  }

  #benefits .feature .copy,
  #benefits .benefit-hourglass .copy{
    padding:58px 24px 42px;
  }

  #benefits .feature .visual,
  #benefits .benefit-hourglass .visual{
    min-height:clamp(280px,70vw,480px);
    order:2;
  }

  .science>.wrap,
  .science .split{
    min-height:0;
    grid-template-columns:1fr;
  }

  .science .split>div:first-child{padding:64px 24px 42px}
  .science .split>div:last-child{min-height:clamp(320px,78vw,520px)}

  .experience-pair{grid-template-columns:1fr}
  .experience-pair>section,
  .experience-pair .split,
  .experience-pair .texture .split{min-height:0}
  .experience-pair .split>div:first-child{padding:58px 24px 36px}
  .experience-pair .split>img,
  .experience-pair .texture .split>img,
  .experience-pair .aesthetic .split>img{min-height:clamp(300px,72vw,480px)}

  .faq>.wrap{
    width:min(100% - 40px,720px);
    grid-template-columns:1fr;
    gap:44px;
  }

  .faq-heading{position:static}
}

/* Three-column experience row requested in the second browser review. */
.experience-trio{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  background:#fff;
}

.experience-trio>section,
.experience-trio .science,
.experience-trio .texture,
.experience-trio .aesthetic{
  min-width:0;
  min-height:0;
  padding:0;
  display:block;
  overflow:hidden;
  background:#fff;
  border-right:1px solid #e1edf4;
}

.experience-trio>section:last-child{border-right:0}

.experience-card{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.experience-card>img{
  width:100%;
  max-width:none;
  height:auto;
  aspect-ratio:4/3;
  margin:0;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}

.experience-card-copy{
  flex:1;
  padding:clamp(34px,3.6vw,58px);
}

.experience-card-copy h2{
  margin:18px 0 22px;
  color:#303b48;
  font-size:clamp(27px,2.8vw,42px);
  line-height:1.15;
  font-weight:500;
  letter-spacing:-1.5px;
}

.experience-card-copy .accent{color:#5db3e4}
.experience-card-copy p{margin:0}

.faq{background:#fff}

.contact h2{
  margin:18px 0 8px;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.04em;
}

@media(max-width:900px){
  .experience-trio{grid-template-columns:1fr}
  .experience-trio>section,
  .experience-trio .science,
  .experience-trio .texture,
  .experience-trio .aesthetic{
    border-right:0;
    border-bottom:1px solid #e1edf4;
  }
  .experience-trio>section:last-child{border-bottom:0}
  .experience-card>img{aspect-ratio:16/11}
  .experience-card-copy{padding:42px 24px 54px}
}

/* Standalone science story: full-bleed visual with an editorial overlay. */
.science-showcase{
  position:relative;
  isolation:isolate;
  min-height:720px;
  padding:clamp(54px,7vw,104px);
  display:grid;
  align-items:center;
  overflow:hidden;
  background:#eaf5fb;
}

.science-showcase::before{display:none}

.science-showcase::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(231,245,252,.98) 0%,rgba(239,248,253,.88) 34%,rgba(239,248,253,.18) 66%,rgba(239,248,253,0) 100%);
}

.science-showcase-image{
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.science-showcase-panel{
  width:min(100%,590px);
  padding:clamp(38px,5vw,68px);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(157,203,228,.46);
  box-shadow:0 24px 70px rgba(73,126,157,.13);
  backdrop-filter:blur(14px);
}

.science-showcase-panel h2{
  margin:20px 0 24px;
  color:#303b48;
  font-size:clamp(34px,4.2vw,60px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-2px;
}

.science-showcase-panel .accent{color:#58afe0}
.science-showcase-panel p{margin:0}

.experience-trio.experience-duo{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.contact{
  padding:clamp(52px,6vw,80px) 24px;
}

.contact-brand{
  font-size:clamp(48px,6vw,72px);
}

.contact h2{
  margin:16px 0 6px;
  font-size:clamp(17px,1.5vw,20px);
  font-weight:500;
  letter-spacing:.1em;
}

.contact .pro{margin-top:22px}
.contact .contact-legal{margin-top:28px}

@media(max-width:900px){
  .science-showcase{
    min-height:0;
    padding:0;
    display:flex;
    flex-direction:column;
    background:#edf8fd;
  }

  .science-showcase::after{display:none}

  .science-showcase-image{
    position:relative;
    z-index:auto;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:16/11;
    object-fit:cover;
  }

  .science-showcase-panel{
    width:100%;
    padding:48px 24px 58px;
    background:#edf8fd;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
  }

  .experience-trio.experience-duo{grid-template-columns:1fr}
}

.product-experience-section{
  background:#fff;
}

.product-experience-heading{
  padding:clamp(70px,8vw,116px) 24px clamp(38px,5vw,64px);
  text-align:center;
}

.product-experience-heading h2{
  margin:0;
  color:#303b48;
  font-size:clamp(42px,6vw,76px);
  line-height:1;
  font-weight:500;
  letter-spacing:-.045em;
}

@media(max-width:900px){
  .product-experience-heading{
    padding:62px 24px 36px;
    text-align:left;
  }

  .product-experience-heading h2{
    font-size:clamp(36px,11vw,54px);
    line-height:1.04;
  }
}

/* Hero review: brand-led centered video masthead (temporary demo footage). */
.hero{
  min-height:calc(100svh - 80px);
  background:#dfeff8 url('../../images/products/j-pro/hero.png') center/cover no-repeat;
  isolation:isolate;
  justify-content:center;
  overflow:hidden;
}

.hero-video,
.hero-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hero-video{
  z-index:-3;
  object-fit:cover;
  object-position:center;
}

.hero-overlay{
  z-index:-2;
  background:linear-gradient(180deg,rgba(241,249,253,.64),rgba(225,242,251,.78));
  backdrop-filter:saturate(.7);
}

.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.72),rgba(255,255,255,.16) 64%,rgba(220,239,249,.22));
}

.hero-inner{
  width:min(100%,720px);
  margin:auto;
  padding:clamp(72px,10vw,130px) 24px;
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
}

.hero-brand{
  color:#303b48;
  font:600 clamp(42px,5vw,68px)/1 Montserrat,Arial,sans-serif;
  letter-spacing:-.06em;
}

.hero-brand span{color:#58afe0}

.hero h1{
  max-width:none;
  margin:32px 0 26px;
  font-size:clamp(48px,6.2vw,88px);
  line-height:1.02;
  letter-spacing:-.055em;
  text-align:center;
}

.hero .desc,
.hero .sub{text-align:center}

/* Two product-experience cards grouped directly beneath the section title. */
.product-experience-section{
  padding:clamp(78px,8vw,118px) clamp(22px,5vw,72px);
  background:linear-gradient(180deg,#f7fbfe,#fff);
}

.product-experience-heading{
  width:min(100%,1240px);
  margin:0 auto;
  padding:0 0 clamp(38px,5vw,58px);
}

.product-experience-heading h2{
  font-size:clamp(42px,5vw,68px);
}

.product-experience-section .experience-duo{
  width:min(100%,1240px);
  margin:0 auto;
  gap:clamp(20px,2.5vw,34px);
  background:transparent;
}

.product-experience-section .experience-duo>section,
.product-experience-section .experience-duo .texture,
.product-experience-section .experience-duo .aesthetic{
  overflow:hidden;
  background:#fff;
  border:1px solid #dcebf3;
  border-radius:18px;
  box-shadow:0 20px 55px rgba(70,129,163,.1);
}

.product-experience-section .experience-card>img{
  aspect-ratio:16/10;
}

.product-experience-section .experience-card-copy{
  padding:clamp(30px,3.5vw,48px);
}

@media(max-width:820px){
  .hero{min-height:calc(100svh - 76px)}
}

@media(max-width:900px){
  .product-experience-section{padding:62px 20px 78px}
  .product-experience-heading{padding:0 4px 34px}
  .product-experience-section .experience-duo{gap:22px}
  .product-experience-heading h2{font-size:clamp(36px,11vw,54px)}
}

/* Typography and responsive refinements from browser review. */
body > section h2{
  font-size:clamp(36px,4vw,48px)!important;
}

.hero-inner{
  width:min(100%,1200px);
}

.hero-brand{
  font-size:clamp(54px,5.2vw,72px);
}

.hero h1{
  margin:18px 0 20px;
  font-size:clamp(48px,5.2vw,72px);
  line-height:1;
  white-space:nowrap;
}

.hero .sub{
  white-space:nowrap;
}

.section-intro,
.section-intro .benefits-introduction,
.section-intro .benefits-introduction p{
  text-align:center;
}

.product-experience-heading .smallcap{
  margin-bottom:18px;
  color:#58afe0;
  text-align:center;
}

.product-experience-heading h2 span{
  color:#58afe0;
}

@media(max-width:900px){
  body > section h2{
    font-size:clamp(32px,9vw,38px)!important;
  }

  #benefits .feature .visual,
  #benefits .feature.reverse .visual,
  #benefits .feature.benefit-hourglass .visual{
    order:-1;
  }

  .product-experience-heading .smallcap{
    text-align:left;
  }
}

@media(max-width:480px){
  .hero-inner{
    padding:54px 16px;
  }

  .hero-brand{
    font-size:54px;
  }

  .hero h1{
    margin:14px 0 18px;
    font-size:34px;
    letter-spacing:-.045em;
  }

  .hero .desc{font-size:12px}
  .hero .sub{
    font-size:11px;
    white-space:nowrap;
  }
}

/* Closing-section actions and final type scale. */
body > section.contact h2{
  font-size:18px!important;
}

.contact-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:22px;
}

.contact-actions .pro{
  margin-top:0;
}

.contact-social-link{
  display:inline-grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid #418cb1;
  border-radius:50%;
  color:#286f95;
  background:#fff;
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}

.contact-social-link svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.contact-social-link:hover,
.contact-social-link:focus-visible{
  color:#fff;
  background:#286f95;
}

/* Benefits introduction and standalone highlight band. */
#benefits > .section-intro{
  padding:75px 15px;
}

.benefits-highlight-band{
  width:100%;
  padding:clamp(28px,3.2vw,44px) 24px;
  color:#fff;
  background:#58afe0;
  text-align:center;
}

.benefits-highlight-band p{
  width:min(100%,920px);
  margin:0 auto;
  font-size:clamp(18px,1.8vw,26px);
  font-weight:500;
  line-height:1.55;
}

@media(max-width:700px){
  #benefits > .section-intro{
    padding:60px 20px;
  }

  .benefits-highlight-band{
    padding:26px 20px;
  }
}

@media(max-width:480px){
  body > section.product-experience-section .experience-card-copy h2{
    font-size:clamp(26px,7.13vw,28px)!important;
  }
}

/* Unified benefits introduction and compact mobile hero. */
#benefits > .section-intro,
.benefits-highlight-band{
  color:#fff;
  background:#58afe0;
  font-family:'Montserrat','Kanit',Arial,sans-serif;
}

#benefits > .section-intro{
  padding:75px 15px 24px;
}

#benefits > .section-intro h2,
#benefits > .section-intro .benefits-introduction,
#benefits > .section-intro .benefits-introduction p{
  color:#fff;
}

.benefits-highlight-band{
  padding:0 24px 48px;
}

.benefits-highlight-band p{
  font-family:'Montserrat','Kanit',Arial,sans-serif;
  font-weight:600;
}

@media(max-width:700px){
  #benefits > .section-intro{
    padding:54px 20px 20px;
  }

  .benefits-highlight-band{
    padding:0 20px 38px;
  }
}

@media(max-width:480px){
  .hero{
    min-height:clamp(520px,62svh,600px);
  }

  .hero-inner{
    padding-top:36px;
    padding-bottom:36px;
  }
}

/* Single light-blue benefits intro, matching the product closing section. */
#benefits > .section-intro{
  padding:75px 24px;
  color:#303b48;
  background:linear-gradient(145deg,#edf8fe 0%,#fafdff 48%,#dceff9 100%);
}

#benefits > .section-intro h2,
#benefits > .section-intro .benefits-introduction,
#benefits > .section-intro .benefits-introduction p{
  color:#303b48;
}

#benefits > .section-intro .benefits-introduction{
  margin-top:24px;
}

#benefits > .section-intro .benefits-highlight-band{
  width:min(100%,920px);
  margin:30px auto 0;
  padding:24px 0 0;
  border-top:1px solid rgba(74,153,197,.28);
  color:#2d91c2;
  background:transparent;
}

@media(max-width:700px){
  #benefits > .section-intro{
    padding:54px 20px;
  }

  #benefits > .section-intro .benefits-highlight-band{
    margin-top:24px;
    padding-top:20px;
  }
}

/* Clay theme system: J-PRO single-line hero statement */
.hero h1{max-width:none;white-space:nowrap;font-size:clamp(38px,5.4vw,76px);letter-spacing:-.055em}@media(max-width:850px){.hero h1{font-size:clamp(28px,8.4vw,52px);letter-spacing:-.06em}}@media(max-width:480px){.hero h1{font-size:clamp(23px,7.5vw,38px)}}

/* Keep J-PRO hero separators inline */
#jpro-top .hero-inner h1 span{display:inline!important;margin:0!important}



/* Clay mobile hero system v2: full-bleed video and no decorative ellipse */
@media (max-width:820px){body.j-pro-page main#main-content{padding-top:0!important}body.j-pro-page #jpro-top.hero{position:relative;min-height:clamp(520px,68svh,600px)!important;height:auto!important;padding:0!important;overflow:hidden}body.j-pro-page #jpro-top .hero-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}body.j-pro-page #jpro-top .hero-inner{position:relative;z-index:2;min-height:inherit;display:flex;justify-content:center;padding:36px 16px!important}body.j-pro-page #jpro-top::after{display:none!important;content:none!important}}