﻿/* Product pages use the same bright visual language */
.product-v3{
  background: #f7faff;
  color: #071d55
}
.product-v3 .top-strip{
  display: none
}
.product-v3 .site-header{
  height: 80px;
  background: rgba(255, 255, 255, .97);
  padding: 0 max(25px, calc((100vw - 1280px)/2));
  border-color: #e5edf8
}
.product-v3 .site-header .brand{
  font-size: 24px
}
.product-v3 .site-header .main-nav{
  font-size: 13px
}
.product-v3 .inner-hero{
  background: #fff;
  color: #071d55;
  padding: 88px 0 72px
}
.product-v3 .inner-hero-grid{
  grid-template-columns: .9fr 1.1fr
}
.product-v3 .inner-hero .eyebrow.light{
  color: #0860ea
}
.product-v3 .inner-hero h1{
  font-size: clamp(50px, 5.2vw, 70px);
  color: #071d55
}
.product-v3 .inner-hero p{
  font-size: 16px;
  color: #64738d;
  max-width: 570px
}
.product-v3 .button-ghost{
  color: #0960e9;
  border-color: #9dc0fa;
  background: #fff
}
.product-v3 .inner-visual{
  background: radial-gradient(circle, #e6f1ff, transparent 68%);
  border-radius: 40px
}
.product-v3 .subnav{
  top: 80px;
  background: #edf5ff;
  border-color: #dbe9fb
}
.product-v3 .subnav .container{
  height: 64px
}
.product-v3 .subnav a{
  font-size: 12px;
  color: #31517e
}
.product-v3 .section{
  padding: 92px 0
}
.product-v3 .section-heading{
  max-width: 700px
}
.product-v3 .section-heading h2, .product-v3 .split-copy h2{
  font-size: clamp(38px, 4vw, 52px);
  color: #071d55
}
.product-v3 .section-heading p, .product-v3 .split-copy>p{
  font-size: 15px
}
.product-v3 .eyebrow{
  font-size: 11px
}
.product-v3 .outcome-strip{
  background: #fff;
  border-color: #d7e5f7;
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(26, 73, 139, .07)
}
.product-v3 .outcome-strip div{
  padding: 30px
}
.product-v3 .outcome-strip b{
  font-size: 16px
}
.product-v3 .outcome-strip span{
  font-size: 11px;
  line-height: 1.6
}
.product-v3 .feature-showcase{
  background: #f1f7ff
}
.product-v3 .dark-section{
  background: #f1f7ff;
  color: #071d55
}
.product-v3 .dark-section .split-copy>p, .product-v3 .dark-list small{
  color: #64738d
}
.product-v3 .dark-list>div{
  border-color: #d7e5f7
}
.product-v3 .benefit-list b{
  font-size: 15px
}
.product-v3 .benefit-list small{
  font-size: 12px
}
.product-v3 .benefit-list i{
  font-size: 12px
}
.product-v3 .feature-card-grid{
  gap: 18px
}
.product-v3 .feature-card{
  min-height: 250px;
  padding: 28px;
  border-radius: 12px;
  border-color: #d7e5f7;
  box-shadow: 0 8px 26px rgba(26, 73, 139, .06)
}
.product-v3 .feature-card .feature-icon{
  width: 54px;
  height: 54px;
  font-size: 14px;
  margin-bottom: 32px;
  border-radius: 11px
}
.product-v3 .feature-card h3{
  font-size: 18px
}
.product-v3 .feature-card p{
  font-size: 12px
}
.product-v3 .feature-card span{
  font-size: 10px
}
.product-v3 .feature-card.accent-card{
  background: #0962ed;
  color: #fff
}
.product-v3 .feature-card.accent-card h3{
  color: #fff
}
.product-v3 .feature-card.accent-card p{
  color: #d5e4ff
}
.product-v3 .step-card{
  padding: 34px;
  border: 1px solid #d7e5f7;
  border-left: 4px solid #0962ed;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(26, 73, 139, .07)
}
.product-v3 .step-card i{
  font-size: 11px;
  color: #0962ed
}
.product-v3 .step-card h3{
  font-size: 18px
}
.product-v3 .step-card p{
  font-size: 12px
}
.product-v3 .page-cta{
  background: linear-gradient(110deg, #075ce8, #003cbd)
}
.product-v3 .page-cta h2{
  font-size: 40px
}
.product-v3 .page-cta p{
  font-size: 13px
}
.product-v3 .site-footer{
  padding-top: 60px
}
.product-v3 .site-header.home-header{
  position: fixed;
  top: 14px;
  left: 50%;
  width: min(1240px,calc(100% - 32px));
  height: 70px;
  padding: 0 16px 0 22px;
  border: 1px solid rgba(198,214,236,.82);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  transform: translateX(-50%)
}
.product-v3 .inner-hero{
  padding-top: 145px
}
.product-v3 .subnav{
  top: 0
}
@media(max-width:980px){
  .product-v3 .site-header.home-header{
    top: 8px;
    height: 62px
  }
  .product-v3 .site-header.home-header .main-nav{
    top: 72px
  }
}
@media(max-width:640px){
  .product-v3 .site-header.home-header{
    top: 8px;
    left: 50%;
    width: calc(100% - 20px);
    height: 62px;
    padding: 0 14px;
    transform: translateX(-50%)
  }
  .product-v3 .site-header.home-header .main-nav{
    top: 72px
  }
  .product-v3 .inner-hero{
    padding-top: 115px
  }
}
.product-faq{
  background: #f5f8fd
}
.product-faq-list{
  max-width: 820px;
  display: grid;
  gap: 9px;
  margin: auto
}
.product-faq-list details{
  padding: 20px 22px;
  border: 1px solid #d7e2ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(25, 67, 128, .05)
}
.product-faq-list summary{
  color: #17345e;
  font: 700 12px "Manrope";
  cursor: pointer
}
.product-faq-list p{
  margin: 14px 0 0;
  color: #718199;
  font-size: 10px;
  line-height: 1.7
}

/* Larger readable product-page typography */
.product-v3 .site-header .main-nav{font-size:15px}
.product-v3 .inner-hero p,.product-v3 .section-heading p,.product-v3 .split-copy>p{font-size:17px}
.product-v3 .eyebrow,.product-v3 .subnav a{font-size:13px}
.product-v3 .outcome-strip b,.product-v3 .benefit-list b,.product-v3 .step-card h3{font-size:17px}
.product-v3 .outcome-strip span,.product-v3 .benefit-list small,.product-v3 .step-card p{font-size:14px}
.capability-chapter>header span,.capability-chapter>header p,.capability-list small,.capability-list em,.capability-demo span,.capability-demo i{font-size:12px}
.capability-list b,.capability-demo b{font-size:16px}
.product-faq-list summary{font-size:16px}
.product-faq-list p{font-size:14px}
@media(max-width:980px){
  .product-v3 .inner-hero-grid{
    grid-template-columns: 1fr
  }
  .product-v3 .site-header .main-nav{
    top: 80px
  }
}
@media(max-width:640px){
  .product-v3 .site-header{
    height: 66px
  }
  .product-v3 .site-header .main-nav{
    top: 66px
  }
  .product-v3 .inner-hero h1{
    font-size: 43px
  }
  .product-v3 .subnav{
    top: 66px
  }
  .product-v3 .section{
    padding: 68px 0
  }
  .product-v3 .outcome-strip div{
    padding: 20px
  }
  .product-v3 .feature-card{
    min-height: 220px
  }
}

/* Refined product-page mobile */
@media(max-width:640px){
  .product-v3 .site-header{
    height: 68px
  }
  .product-v3 .site-header .main-nav{
    top: 76px
  }
  .product-v3 .inner-hero{
    padding: 52px 0 38px
  }
  .product-v3 .inner-hero-grid{
    gap: 32px
  }
  .product-v3 .inner-hero h1{
    font-size: clamp(38px, 11vw, 48px);
    line-height: 1.04
  }
  .product-v3 .inner-hero p{
    font-size: 15px;
    line-height: 1.65
  }
  .product-v3 .subnav{
    top: 68px
  }
  .product-v3 .subnav .container{
    height: 54px
  }
  .product-v3 .section{
    padding: 58px 0
  }
  .product-v3 .section-heading h2,
  .product-v3 .split-copy h2{
    font-size: clamp(30px, 9vw, 39px)
  }
  .product-v3 .outcome-strip div{
    padding: 18px
  }
  .product-v3 .inner-visual{
    min-height: 380px;
    overflow: hidden;
    border: 1px solid #dce8f7;
    border-radius: 22px
  }
  .product-v3 .inner-visual .phone-stage{
    bottom: -54px
  }
  .product-v3 .inner-visual .phone{
    transform: translateX(-50%) rotate(2deg) scale(.82)
  }
  .product-v3 .feature-card{
    min-height: 0;
    padding: 22px;
    border-radius: 15px
  }
  .product-v3 .feature-card .feature-icon{
    width: 46px;
    height: 46px;
    margin-bottom: 22px
  }
  .product-v3 .feature-card h3{
    font-size: 17px
  }
  .product-v3 .feature-card p{
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65
  }
  .product-v3 .step-card{
    padding: 26px;
    border-radius: 14px
  }
  .product-v3 .page-cta h2{
    font-size: clamp(28px, 9vw, 36px)
  }
}

@media(max-width:390px){
  .product-v3 .inner-hero h1{
    font-size: 36px
  }
  .product-v3 .inner-visual{
    min-height: 350px
  }
}

@media(max-width:480px){
  .product-v3 .site-header .main-nav{
    top: 68px
  }
  .product-v3 .inner-hero{
    padding-top: 44px
  }
  .product-v3 .inner-hero h1{
    font-size: clamp(34px, 11vw, 42px)
  }
  .product-v3 .inner-visual{
    min-height: 340px
  }
  .product-v3 .feature-card-grid,
  .product-v3 .steps-grid{
    grid-template-columns: 1fr
  }
  .product-v3 .feature-card{
    padding: 20px
  }
  .product-v3 .page-cta .button{
    width: 100%
  }
}

/* Smart ID feature modules */
.smart-page #features{
  position: relative;
  background:
    radial-gradient(circle at 88% 8%, rgba(28, 105, 235, .09), transparent 24%),
    #f6f9fe
}
.smart-page #features .feature-card-grid{
  counter-reset: smart-feature;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}
.smart-page #features .feature-card{
  counter-increment: smart-feature;
  position: relative;
  min-height: 235px;
  overflow: hidden;
  padding: 25px 24px 23px;
  border: 1px solid #dbe6f4;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 32px rgba(22, 66, 126, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.smart-page #features .feature-card:before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #0962ed
}
.smart-page #features .feature-card:after{
  content: counter(smart-feature, decimal-leading-zero);
  position: absolute;
  right: 20px;
  top: 20px;
  color: #dfe9f7;
  font: 800 30px/1 "Manrope"
}
.smart-page #features .feature-card:nth-child(3n+2):before{
  background: #f18a3a
}
.smart-page #features .feature-card:nth-child(3n):before{
  background: #25a66f
}
.smart-page #features .feature-card:hover{
  transform: translateY(-5px);
  border-color: #b5cef0;
  box-shadow: 0 20px 44px rgba(22, 66, 126, .12)
}
.smart-page #features .feature-icon{
  width: 48px;
  height: 48px;
  margin-bottom: 25px;
  border-radius: 14px;
  color: #0962ed;
  background: linear-gradient(145deg, #edf5ff, #dceaff);
  box-shadow: inset 0 0 0 1px rgba(9, 98, 237, .07);
  font-size: 11px
}
.smart-page #features .feature-card:nth-child(3n+2) .feature-icon{
  color: #d96b19;
  background: linear-gradient(145deg, #fff5ea, #ffe4cd)
}
.smart-page #features .feature-card:nth-child(3n) .feature-icon{
  color: #138555;
  background: linear-gradient(145deg, #e8faf1, #d5f4e4)
}
.smart-page #features .feature-card>span{
  color: #71839b;
  font-size: 9px;
  letter-spacing: .12em
}
.smart-page #features .feature-card h3{
  margin: 9px 0;
  color: #071d55;
  font-size: 17px;
  letter-spacing: -.025em
}
.smart-page #features .feature-card p{
  margin: 0;
  color: #6b7c93;
  font-size: 11px;
  line-height: 1.7
}
.smart-page #features .feature-card.accent-card{
  border-color: #0962ed;
  background: linear-gradient(145deg, #0a66ef, #0642ba)
}
.smart-page #features .feature-card.accent-card:before{
  background: #ff9a4f
}
.smart-page #features .feature-card.accent-card:after{
  color: rgba(255, 255, 255, .16)
}
.smart-page #features .feature-card.accent-card .feature-icon{
  color: #fff;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15)
}
.smart-page #features .feature-card.accent-card>span{
  color: #bcd4ff
}
.smart-page #features .feature-card.accent-card a{
  display: inline-flex;
  margin-top: 18px;
  color: #fff;
  font-size: 10px;
  font-weight: 700
}

@media(max-width:640px){
  .smart-page #features .feature-card-grid{
    grid-template-columns: 1fr;
    gap: 11px
  }
  .smart-page #features .feature-card{
    min-height: 0;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 0 14px;
    padding: 18px 45px 18px 18px;
    border-radius: 15px
  }
  .smart-page #features .feature-card:after{
    right: 14px;
    top: 16px;
    font-size: 22px
  }
  .smart-page #features .feature-icon{
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 12px
  }
  .smart-page #features .feature-card>span,
  .smart-page #features .feature-card h3,
  .smart-page #features .feature-card p,
  .smart-page #features .feature-card a{
    grid-column: 2
  }
  .smart-page #features .feature-card h3{
    margin: 4px 0 5px;
    font-size: 15px
  }
  .smart-page #features .feature-card p{
    font-size: 10px;
    line-height: 1.55
  }
  .smart-page #features .feature-card.accent-card a{
    margin-top: 9px
  }
}

/* Editorial capability index: feature presentation without cards */
.smart-page #features .section-heading{
  max-width: 760px
}
.capability-index{
  border-top: 1px solid #cad9ec
}
.capability-chapter{
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 70px;
  padding: 62px 0;
  border-bottom: 1px solid #cad9ec
}
.capability-chapter>header{
  position: sticky;
  top: 155px;
  align-self: start
}
.capability-chapter>header i{
  display: block;
  margin-bottom: 42px;
  color: #a8b9cf;
  font: 800 12px "Manrope";
  font-style: normal
}
.capability-chapter>header span{
  color: #0962ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase
}
.capability-chapter>header h3{
  margin: 12px 0 13px;
  color: #071d55;
  font-size: 29px;
  letter-spacing: -.045em
}
.capability-chapter>header p{
  max-width: 360px;
  color: #6a7d96;
  font-size: 12px;
  line-height: 1.75
}
.capability-list{
  border-top: 1px solid #d9e4f1
}
.capability-list a{
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid #d9e4f1;
  transition: padding .2s ease, background .2s ease
}
.capability-list a:hover{
  padding-left: 14px;
  padding-right: 14px;
  background: rgba(255, 255, 255, .72)
}
.capability-list a>i{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0962ed;
  background: #e7f0ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800
}
.capability-list a:nth-child(3n+2)>i{
  color: #d96b19;
  background: #fff0e3
}
.capability-list a:nth-child(3n)>i{
  color: #138555;
  background: #e0f6ea
}
.capability-list span{
  display: flex;
  flex-direction: column;
  gap: 5px
}
.capability-list b{
  color: #071d55;
  font: 700 14px "Manrope"
}
.capability-list small{
  color: #718299;
  font-size: 10px
}
.capability-list em{
  color: #8999ae;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase
}
.capability-demo{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 38px;
  padding: 28px 0;
  border-top: 1px solid #cad9ec;
  border-bottom: 1px solid #cad9ec
}
.capability-demo span{
  color: #73849a;
  font-size: 10px
}
.capability-demo b{
  color: #071d55;
  font: 700 17px "Manrope"
}
.capability-demo i{
  margin-left: auto;
  color: #0962ed;
  font-size: 10px;
  font-style: normal;
  font-weight: 700
}

@media(max-width:760px){
  .capability-chapter{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 42px 0
  }
  .capability-chapter>header{
    position: static
  }
  .capability-chapter>header i{
    margin-bottom: 22px
  }
  .capability-chapter>header h3{
    font-size: 25px
  }
  .capability-list a{
    grid-template-columns: 38px 1fr;
    gap: 13px;
    padding: 17px 0
  }
  .capability-list a>i{
    width: 38px;
    height: 38px
  }
  .capability-list em{
    display: none
  }
  .capability-list small{
    font-size: 9px;
    line-height: 1.5
  }
  .capability-demo{
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0
  }
  .capability-demo i{
    margin: 8px 0 0
  }
}

