/* DBX ONE homepage product presentation
   APPLE-STYLE MARKETING INVARIANT (v0.12.4+):
   - Name INSIGHTS and STOCKROOM directly; do not count products as a marketing message.
   - Keep both equally prominent and within the same DBX ONE blue visual system.
   - State the job simply, show proof, and avoid unnecessary labels or audience taxonomy.
   - Product-specific FAQs live on their own pages; the homepage FAQ stays general.
*/

/* ------------------------------
   Homepage: calmer umbrella hero
   ------------------------------ */
.home-clarity-hero{
  min-height:auto!important;
  padding:118px 0 92px!important;
}
.home-clarity-hero .v134-home-copy{
  max-width:1080px;
}
.home-clarity-hero .v134-home-copy h1{
  font-size:clamp(58px,7.7vw,104px);
  line-height:.91;
}
.home-clarity-hero .v134-home-copy>p:not(.v134-kicker){
  max-width:850px;
}
.home-single-action{
  justify-content:center!important;
  margin-top:30px;
}
.home-clarity-trustline{
  justify-content:center;
  gap:12px 28px;
  flex-wrap:wrap;
  margin-top:28px;
}
.home-clarity-trustline span{
  white-space:nowrap;
}

/* -------------------------------------------
   Homepage: product gateway, equal weight
   ------------------------------------------- */
.home-product-gateway{
  padding:92px 0 110px!important;
  background:#02050a!important;
}
.home-product-intro{
  max-width:920px;
  margin-bottom:42px!important;
}
.home-product-intro h2{
  font-size:clamp(42px,5.4vw,72px)!important;
}
.home-product-gateway .v134-product-grid-v3{
  gap:22px;
  align-items:stretch;
}
.home-product-card{
  min-height:620px!important;
  padding:42px!important;
  border-radius:34px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
}
.home-product-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  z-index:2;
  background:#238cff;
}
.home-product-card.stock::before{
  background:#238cff;
}
.home-product-card .v063-product-wordmark{
  min-height:150px!important;
  gap:7px!important;
}
.home-product-gateway .v063-product-parent,
.home-product-gateway .v063-product-name{
  font-size:clamp(48px,4.5vw,70px)!important;
}
.home-product-gateway .v134-product-v3.stock .v063-product-name{
  color:#238cff!important;
}
.home-product-job{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:4px 0 18px!important;
  padding:8px 11px;
  border:1px solid rgba(76,166,255,.2);
  border-radius:999px;
  background:rgba(35,140,255,.08);
  color:#9fd5ff!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1.25!important;
  letter-spacing:.015em!important;
}
.home-product-card.stock .home-product-job{
  border-color:rgba(76,166,255,.2);
  background:rgba(35,140,255,.08);
  color:#9fd5ff!important;
}
.home-product-summary{
  margin:0!important;
  max-width:570px!important;
  color:#d8e4ef!important;
  font-size:20px!important;
  line-height:1.52!important;
}
.home-product-list{
  list-style:none;
  display:grid;
  gap:10px;
  margin:24px 0 0;
  padding:0;
}
.home-product-list li{
  position:relative;
  padding:13px 14px 13px 38px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.028);
  color:#aebfd0;
  font-size:14.5px;
  line-height:1.45;
}
.home-product-list li::before{
  content:"";
  position:absolute;
  left:15px;
  top:18px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#3a9cff;
  box-shadow:0 0 0 4px rgba(58,156,255,.1);
}
.home-product-card.stock .home-product-list li::before{
  background:#3a9cff;
  box-shadow:0 0 0 4px rgba(58,156,255,.1);
}
.home-product-bottom{
  margin-top:34px;
}
.home-product-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.home-secondary-link{
  color:#a9cde9;
  font-size:14px;
  font-weight:780;
  text-decoration:none;
}
.home-secondary-link:hover{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ----------------------------------
   Homepage: umbrella explanation
   ---------------------------------- */
.home-umbrella-section{
  padding:108px 0!important;
}
.home-umbrella-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  max-width:1040px;
  margin:0 auto;
}
.home-umbrella-grid article{
  min-height:220px;
  padding:28px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}
.home-umbrella-grid article>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:11px;
  background:rgba(35,140,255,.11);
  color:#70c7ff;
  font-size:12px;
  font-weight:900;
}
.home-umbrella-grid h3{
  margin:18px 0 10px;
  color:#fff;
  font-size:25px;
  line-height:1.12;
  letter-spacing:-.035em;
}
.home-umbrella-grid p{
  margin:0;
  color:#9eb0c2;
  font-size:15.5px;
  line-height:1.62;
}

/* ----------------------------------
   Homepage: try-before-deciding
   ---------------------------------- */
.home-try-section{
  padding:104px 0;
  background:#020710;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.home-try-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.home-try-grid article{
  position:relative;
  overflow:hidden;
  min-height:330px;
  padding:32px;
  border:1px solid rgba(104,183,255,.17);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(10,28,48,.92),rgba(4,13,24,.95));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.home-try-grid article::after{
  content:"";
  position:absolute;
  inset:auto -20% -45% 30%;
  height:70%;
  background:radial-gradient(circle,rgba(35,140,255,.18),transparent 70%);
  pointer-events:none;
}
.home-try-grid article.stock::after{
  background:radial-gradient(circle,rgba(35,140,255,.18),transparent 70%);
}
.home-try-name{
  color:#69c6ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}
.home-try-grid article.stock .home-try-name{
  color:#69c6ff;
}
.home-try-grid h3{
  margin:14px 0 12px;
  color:#fff;
  font-size:clamp(30px,3.1vw,42px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.home-try-grid p{
  margin:0 0 26px;
  max-width:560px;
  color:#a5b7c8;
  line-height:1.62;
}
.home-try-grid .v134-btn{
  margin-top:auto;
  position:relative;
  z-index:1;
}

/* ------------------------------
   Reusable product FAQ accordion
   ------------------------------ */
.product-faq-section{
  padding:104px 0;
  background:linear-gradient(180deg,#06101d 0%,#020710 100%);
  color:#f5f9ff;
  border-top:1px solid rgba(255,255,255,.06);
}
.product-faq-section .v134-section-head{
  max-width:920px;
}
.product-faq-section .v134-section-head h2{
  color:#f6f9fd;
}
.product-faq-section .v134-section-head p{
  color:#9eb1c4;
}
.product-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:1120px;
  margin:0 auto;
  align-items:start;
}
.product-faq-grid details{
  border:1px solid rgba(102,183,255,.18);
  border-radius:18px;
  background:rgba(7,22,38,.92);
  overflow:hidden;
}
.product-faq-grid summary{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:13px;
  min-height:66px;
  padding:20px 48px 20px 20px;
  cursor:pointer;
  list-style:none;
  color:#f5f9ff;
  font-size:16px;
  font-weight:820;
  line-height:1.35;
}
.product-faq-grid summary::-webkit-details-marker{
  display:none;
}
.product-faq-grid summary::after{
  content:"+";
  position:absolute;
  right:19px;
  top:17px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(62,160,255,.1);
  color:#83ceff;
  font-size:22px;
  font-weight:500;
  line-height:1;
}
.product-faq-grid details[open] summary::after{
  content:"–";
}
.product-faq-grid details[open] summary{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.product-faq-grid details>p{
  margin:0;
  padding:17px 20px 21px;
  color:#aabccc;
  font-size:14.5px;
  line-height:1.68;
}
.product-faq-grid a{
  color:#74caff;
  text-underline-offset:3px;
}
.product-faq-grid details:hover{
  border-color:rgba(110,193,255,.32);
}

/* Homepage final keeps both products equal. */
.home-final-clarity .v134-actions{
  justify-content:center;
}

/* ------------------------------
   Responsive clarity
   ------------------------------ */
@media(max-width:980px){
  .home-product-card{
    min-height:640px!important;
    padding:34px!important;
  }
  .home-product-gateway .v063-product-parent,
  .home-product-gateway .v063-product-name{
    font-size:clamp(43px,6vw,62px)!important;
  }
}
@media(max-width:820px){
  .home-clarity-hero{
    padding:88px 0 72px!important;
  }
  .home-product-gateway .v134-product-grid-v3,
  .home-umbrella-grid,
  .home-try-grid,
  .product-faq-grid{
    grid-template-columns:1fr!important;
  }
  .home-product-card{
    min-height:auto!important;
  }
  .home-product-card .v063-product-wordmark{
    min-height:120px!important;
  }
  .home-umbrella-grid article{
    min-height:auto;
  }
}
@media(max-width:560px){
  .home-clarity-hero{
    padding:76px 0 60px!important;
  }
  .home-clarity-hero .v134-home-copy h1{
    font-size:clamp(45px,13vw,60px)!important;
    line-height:.94!important;
  }
  .home-clarity-hero .v134-home-copy>p:not(.v134-kicker){
    font-size:17px!important;
  }
  .home-clarity-trustline{
    align-items:center;
    flex-direction:column;
    gap:8px;
  }
  .home-product-gateway{
    padding:70px 0 82px!important;
  }
  .home-product-card{
    padding:28px 24px!important;
    border-radius:28px!important;
  }
  .home-product-gateway .v063-product-parent,
  .home-product-gateway .v063-product-name{
    font-size:clamp(40px,11vw,52px)!important;
  }
  .home-product-summary{
    font-size:17px!important;
  }
  .home-product-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .home-umbrella-section,
  .home-try-section,
  .product-faq-section{
    padding:78px 0!important;
  }
  .home-try-grid article{
    min-height:0;
    padding:26px 23px;
  }
  .product-faq-grid summary{
    min-height:0;
    padding:18px 46px 18px 17px;
    font-size:15px;
  }
  .product-faq-grid summary::after{
    right:14px;
    top:13px;
  }
  .product-faq-grid details>p{
    padding:15px 17px 19px;
    font-size:14px;
  }
}