:root{
  --blue:#1267F2;
  --blue-dark:#0D5CDA;
  --blue-soft:#EEF5FF;
  --ink:#101828;
  --ink-2:#263244;
  --muted:#667085;
  --muted-2:#98A2B3;
  --line:#E2E8F0;
  --line-strong:#D5DDE7;
  --page:#F7F8FA;
  --soft:#F5F7FA;
  --white:#FFFFFF;
  --green:#138A5B;
  --green-soft:#EAF8F1;
  --radius:10px;
  --shadow:0 16px 42px rgba(16,24,40,.065);
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
img{display:block;max-width:100%}
.wrap{width:min(calc(100% - 48px),var(--max));margin-inline:auto}

/* Header: aligned with approved public homepage */
.site-header{
  height:76px;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(16,24,40,.07);
}
.nav{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand img{height:40px;width:auto}
.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px;
  font-weight:650;
  color:#344054;
}
.nav-links a:hover,.nav-links a.active,.nav-actions .login:hover{color:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:650}
.btn{
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:#fff;
  color:#253044;
  font-size:14px;
  font-weight:760;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.035);
  transition:.16s ease;
}
.btn:hover{background:#FBFCFD;border-color:#BAC6D4}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 2px 5px rgba(18,103,242,.14)}
.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.small{min-height:38px;padding:0 14px;font-size:13px}
.btn.wide{width:100%}

.eyebrow{
  margin:0 0 10px;
  color:#536176;
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.035em;line-height:1.08}
.lead{color:var(--muted);line-height:1.7}
.muted{color:var(--muted)}
.section{padding:68px 0}
.section.soft{background:var(--page);border-block:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}
.section-head h2{margin:0;font-size:32px}
.section-head p{max-width:620px;margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.65}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 12px rgba(16,24,40,.025)}

/* PRODUCT */
.product-hero{
  padding:66px 0 56px;
  background:linear-gradient(180deg,#fff 0%,#F8FAFC 100%);
  border-bottom:1px solid var(--line);
}
.product-hero-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  align-items:center;
  gap:54px;
}
.product-hero-copy h1{
  margin:0 0 16px;
  max-width:520px;
  font-size:53px;
}
.product-hero-copy .lead{
  max-width:560px;
  margin:0;
  font-size:17px;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.fact-line{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;color:#475467;font-size:12px;font-weight:650}
.fact-line span{display:inline-flex;align-items:center;gap:7px}
.fact-line i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-style:normal;font-size:9px}

.app-frame{
  overflow:hidden;
  background:#fff;
  border:1px solid #CDD6E2;
  border-radius:11px;
  box-shadow:var(--shadow);
}
.app-frame-bar{
  height:35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  background:#F7F9FC;
  border-bottom:1px solid var(--line);
  color:#667085;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dots{display:flex;gap:5px}
.dots i{width:6px;height:6px;border-radius:50%;background:#BBC5D2}
.app-frame img{width:100%;aspect-ratio:16/8.35;object-fit:cover;object-position:top left}

.product-summary-strip{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.summary-strip-grid{
  min-height:86px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
}
.summary-strip-item{
  padding:0 28px;
  border-left:1px solid var(--line);
}
.summary-strip-item:first-child{padding-left:0;border-left:0}
.summary-strip-item strong{display:block;font-size:14px}
.summary-strip-item span{display:block;margin-top:4px;color:var(--muted);font-size:12px}

/* product capabilities */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.cap-card{
  min-height:150px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}
.cap-icon{
  width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:12px;
  font-weight:900;
}
.cap-card h3{margin:13px 0 6px;font-size:15px}
.cap-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}

/* product configurator */
.configurator{
  overflow:hidden;
  display:grid;
  grid-template-columns:230px 1fr 265px;
  min-height:335px;
}
.config-side{
  padding:24px;
  background:#F8FAFC;
  border-right:1px solid var(--line);
}
.control-label{
  margin:0 0 9px;
  color:#667085;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.control-label + .choice-stack{margin-bottom:22px}
.choice-stack{display:grid;gap:6px}
.choice{
  min-height:40px;
  padding:0 11px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:#fff;
  color:#344054;
  text-align:left;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.choice.active{border-color:#94B8FF;background:var(--blue-soft);color:var(--blue)}
.config-main{padding:34px}
.config-main .eyebrow{margin-bottom:8px}
.config-main h3{margin:0 0 9px;font-size:28px}
.config-main>p{max-width:590px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.config-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:27px 0 20px;
  border-block:1px solid var(--line);
}
.config-fact{padding:14px;border-left:1px solid var(--line)}
.config-fact:first-child{border-left:0;padding-left:0}
.config-fact strong{display:block;font-size:11px}
.config-fact span{display:block;margin-top:4px;color:var(--muted);font-size:11px}
.config-note{
  padding:11px 12px;
  border-left:3px solid var(--blue);
  background:#F4F8FF;
  color:#536176;
  font-size:11px;
  line-height:1.55;
}
.config-buy{
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-left:1px solid var(--line);
  background:#FBFCFE;
}
.config-buy .term{color:var(--blue);font-size:11px;font-weight:850}
.price{margin:14px 0 5px;font-size:34px;font-weight:850;letter-spacing:-.045em}
.price-note{color:var(--muted);font-size:11px;line-height:1.5}

/* PLANS */
.plans-hero{
  padding:58px 0 34px;
  text-align:center;
  background:#fff;
}
.plans-hero h1{
  margin:8px auto 12px;
  max-width:760px;
  font-size:46px;
}
.plans-hero .lead{
  max-width:660px;
  margin:0 auto;
  font-size:16px;
}
.term-switch{
  width:fit-content;
  margin:24px auto 0;
  padding:4px;
  display:flex;
  gap:3px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#F2F4F7;
}
.term-switch button{
  min-width:100px;
  min-height:36px;
  padding:0 14px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#667085;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.term-switch button.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(16,24,40,.10)}

.pricing-shell{overflow:hidden}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.plan{
  position:relative;
  min-height:348px;
  padding:27px;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.plan:first-child{border-left:0}
.plan.featured{
  background:linear-gradient(180deg,#F7FAFF 0%,#fff 46%);
  box-shadow:inset 0 3px 0 var(--blue);
}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan h2{margin:0;font-size:25px}
.plan-badge{
  padding:4px 7px;
  border:1px solid #D6E5FF;
  border-radius:6px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:9px;
  font-weight:850;
}
.plan-desc{
  min-height:58px;
  margin:10px 0 19px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
}
.plan-price{display:flex;align-items:flex-end;gap:7px;margin-bottom:5px}
.plan-price strong{font-size:31px;letter-spacing:-.045em}
.plan-price span{padding-bottom:3px;color:var(--muted);font-size:11px}
.plan-sub{color:var(--muted-2);font-size:10.5px}
.plan .btn{width:100%;margin-top:18px}
.plan-list{
  margin:20px 0 0;
  padding:17px 0 0;
  list-style:none;
  border-top:1px solid var(--line);
}
.plan-list li{
  display:flex;
  gap:8px;
  padding:5px 0;
  color:#475467;
  font-size:11.5px;
  line-height:1.5;
}
.plan-list i{
  width:16px;height:16px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-style:normal;
  font-size:9px;
  font-weight:900;
}
.pricing-foot{
  padding:13px 18px;
  border-top:1px solid var(--line);
  background:#FBFCFD;
  color:#667085;
  font-size:10.5px;
  text-align:center;
}

.compare-wrap{overflow:auto}
.compare-table{
  width:100%;
  min-width:780px;
  border-collapse:collapse;
  background:#fff;
  font-size:12px;
}
.compare-table th,.compare-table td{
  padding:13px 15px;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.compare-table th:first-child,.compare-table td:first-child{
  width:36%;
  text-align:left;
}
.compare-table thead th{
  background:#F8FAFC;
  color:#475467;
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.compare-table .group td{
  padding-top:10px;padding-bottom:10px;
  background:#FBFCFD;
  color:#667085;
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:left;
}
.compare-table td:first-child strong{display:block;font-size:11.5px}
.compare-table td:first-child span{display:block;margin-top:3px;color:#98A2B3;font-size:10px}
.plan-data{
  color:#526078;
  font-size:10.5px;
}
.plan-data::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  margin-right:6px;
  border-radius:50%;
  background:var(--blue);
  vertical-align:middle;
}

/* CHECKOUT */
.checkout-body{background:var(--page);min-height:100vh}
.checkout-header{
  height:72px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.checkout-head-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.checkout-head-inner img{height:39px}
.secure{
  display:flex;
  align-items:center;
  gap:8px;
  color:#536176;
  font-size:12px;
  font-weight:700;
}
.secure i{
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-style:normal;
  font-size:10px;
}
.checkout-layout{
  display:grid;
  grid-template-columns:1.1fr .76fr;
  gap:26px;
  align-items:start;
  padding:40px 0 58px;
}
.checkout-form{
  padding:28px;
}
.checkout-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}
.checkout-title h1{margin:0 0 5px;font-size:29px}
.checkout-title p{margin:0;color:var(--muted);font-size:13px}
.checkout-title span{
  color:#667085;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.checkout-section{
  margin:0;
  padding:23px 0;
  border:0;
  border-top:1px solid var(--line);
}
.checkout-section:first-of-type{border-top:0;padding-top:0}
.checkout-section legend{
  width:100%;
  margin-bottom:14px;
  padding:0;
  color:var(--ink);
  font-size:15px;
  font-weight:800;
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.field{display:grid;gap:6px}
.field.wide{grid-column:1/-1}
.field label{color:#475467;font-size:11px;font-weight:750}
.field input,.field select{
  width:100%;
  min-height:43px;
  padding:9px 11px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
.field input::placeholder{color:#A0A9B7}
.field input:focus,.field select:focus{border-color:#8FB6FF;box-shadow:0 0 0 3px rgba(18,103,242,.075)}
.payment{
  overflow:hidden;
  border:1px solid #9DBDFC;
  border-radius:8px;
}
.payment-head{
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:9px;
  background:#F4F8FF;
  border-bottom:1px solid #C7DAFF;
  font-size:12px;
  font-weight:800;
}
.payment-body{padding:14px}
.fake-card{
  display:grid;
  grid-template-columns:1fr 88px 72px;
  gap:8px;
}
.fake-card span{
  min-height:41px;
  padding:0 10px;
  display:flex;
  align-items:center;
  border:1px dashed #C7D2E0;
  border-radius:6px;
  color:#98A2B3;
  font-size:10px;
}
.fake-card span:first-child{grid-column:1/-1}
.payment-note{margin:10px 0 0;color:#667085;font-size:10.5px;line-height:1.5}
.back-link{display:inline-block;margin-top:4px;color:var(--blue);font-size:11px;font-weight:750}

.order-summary{
  position:sticky;
  top:94px;
  overflow:hidden;
}
.order-head{padding:21px 22px;border-bottom:1px solid var(--line)}
.order-head h2{margin:0 0 4px;font-size:19px}
.order-head p{margin:0;color:var(--muted);font-size:11px}
.order-product{padding:20px 22px}
.product-id{display:flex;align-items:center;gap:11px}
.product-id-icon{
  width:39px;height:39px;border:1px solid var(--line);
  border-radius:8px;
  display:grid;place-items:center;
  background:#FBFCFD;
}
.product-id-icon img{width:28px}
.product-id strong{display:block;font-size:12px}
.product-id span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.summary-selects{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.order-lines{padding:0 22px 12px}
.order-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:7px 0;
  color:#526078;
  font-size:11px;
}
.order-line strong{color:#344054}
.order-total{
  margin:0 22px;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-size:15px;
  font-weight:850;
}
.order-total strong{font-size:24px}
.order-action{padding:0 22px 20px}
.order-action .btn{min-height:48px}
.legal{margin:10px 0 0;color:#7B8798;font-size:9.5px;line-height:1.55;text-align:center}
.assurances{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  background:#FBFCFD;
}
.assurances span{
  padding:10px 7px;
  border-left:1px solid var(--line);
  color:#667085;
  font-size:9px;
  font-weight:750;
  text-align:center;
}
.assurances span:first-child{border-left:0}

/* Footer */
.site-footer{
  background:#F5F7FA;
  border-top:1px solid #E2E8F0;
}
.footer-main{
  padding:30px 0 22px;
  display:grid;
  grid-template-columns:1.45fr repeat(3,1fr);
  gap:38px;
}
.footer-brand img{height:35px;width:auto}
.footer-brand p{max-width:300px;margin:11px 0 0;color:#66727E;font-size:11.5px;line-height:1.65}
.footer-col h4{margin:2px 0 11px;color:#2F3A45;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.footer-col a{display:block;margin:7px 0;color:#66727E;font-size:11.5px}
.footer-col a:hover{color:var(--blue)}
.footer-bottom{
  padding:14px 0 18px;
  border-top:1px solid #E2E8F0;
  color:#66727E;
  font-size:10.5px;
}

/* Gallery */
.gallery{padding:56px 0}
.gallery h1{font-size:38px;margin-bottom:9px}
.gallery .lead{font-size:15px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.gallery-card{padding:22px}
.gallery-card .num{color:var(--blue);font-size:10px;font-weight:850;letter-spacing:.08em}
.gallery-card h2{margin:9px 0 7px;font-size:20px}
.gallery-card p{margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.6}

@media(max-width:1000px){
  .nav-links{display:none}
  .product-hero-grid{grid-template-columns:1fr}
  .product-hero-copy h1{max-width:760px}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .configurator{grid-template-columns:210px 1fr}
  .config-buy{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .pricing-grid{grid-template-columns:1fr}
  .plan{min-height:auto;border-left:0;border-bottom:1px solid var(--line)}
  .plan:last-child{border-bottom:0}
  .checkout-layout{grid-template-columns:1fr;max-width:820px;margin-inline:auto}
  .order-summary{position:static}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .gallery-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .site-header{height:68px}
  .brand img{height:34px}
  .nav-actions .login{display:none}
  .product-hero{padding:45px 0 38px}
  .product-hero-copy h1{font-size:38px}
  .product-hero-copy .lead{font-size:15px}
  .summary-strip-grid{grid-template-columns:1fr}
  .summary-strip-item{padding:15px 0;border-left:0;border-top:1px solid var(--line)}
  .summary-strip-item:first-child{border-top:0}
  .section{padding:48px 0}
  .section-head{align-items:flex-start;flex-direction:column}
  .cap-grid{grid-template-columns:1fr}
  .configurator{grid-template-columns:1fr}
  .config-side{border-right:0;border-bottom:1px solid var(--line)}
  .config-main{padding:25px 20px}
  .config-facts{grid-template-columns:1fr}
  .config-fact{padding:11px 0;border-left:0;border-top:1px solid var(--line)}
  .config-fact:first-child{border-top:0}
  .plans-hero{padding:44px 0 26px}
  .plans-hero h1{font-size:36px}
  .term-switch{width:100%}
  .term-switch button{flex:1;min-width:0;padding:0 8px}
  .form-grid{grid-template-columns:1fr}
  .field.wide{grid-column:auto}
  .fake-card{grid-template-columns:1fr}
  .fake-card span:first-child{grid-column:auto}
  .summary-selects{grid-template-columns:1fr}
  .assurances{grid-template-columns:1fr}
  .assurances span{border-left:0;border-top:1px solid var(--line)}
  .assurances span:first-child{border-top:0}
}


/* =========================================================
   v4 — Conventional software product listing
   Familiar structure: billing switch + 3 equal edition cards.
   No custom configurator or unusual product presentation.
   ========================================================= */

.standard-products-hero{
  padding:54px 0 30px;
  text-align:center;
  background:#fff;
}
.standard-products-hero h1{
  margin:8px auto 12px;
  max-width:760px;
  font-size:44px;
  line-height:1.07;
}
.standard-products-hero .lead{
  max-width:670px;
  margin:0 auto;
  font-size:16px;
}
.standard-product-controls{
  padding:0 0 25px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.standard-product-controls .term-switch{
  margin-top:0;
}
.standard-products{
  padding:42px 0 58px;
  background:var(--page);
}
.standard-product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.standard-product-card{
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:25px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 3px 13px rgba(16,24,40,.025);
}
.standard-product-card:hover{
  border-color:#C8D3E0;
  box-shadow:0 8px 24px rgba(16,24,40,.055);
}
.standard-product-card.recommended{
  border-color:#AFC9F8;
  box-shadow:inset 0 3px 0 var(--blue),0 8px 24px rgba(18,103,242,.06);
}
.standard-product-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.standard-product-card h2{
  margin:0;
  font-size:24px;
}
.standard-product-tag{
  padding:4px 7px;
  border:1px solid #D8E5FB;
  border-radius:6px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:9.5px;
  font-weight:850;
}
.standard-product-desc{
  min-height:60px;
  margin:10px 0 18px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.58;
}
.standard-product-price{
  display:flex;
  align-items:flex-end;
  gap:7px;
}
.standard-product-price strong{
  font-size:30px;
  letter-spacing:-.045em;
}
.standard-product-price span{
  padding-bottom:3px;
  color:var(--muted);
  font-size:11px;
}
.standard-product-live{
  margin-top:4px;
  color:#98A2B3;
  font-size:10px;
}
.standard-product-list{
  margin:20px 0 0;
  padding:17px 0 0;
  list-style:none;
  border-top:1px solid var(--line);
}
.standard-product-list li{
  display:flex;
  gap:8px;
  padding:5px 0;
  color:#475467;
  font-size:11.5px;
  line-height:1.5;
}
.standard-product-list i{
  width:16px;
  height:16px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-style:normal;
  font-size:9px;
  font-weight:900;
}
.standard-product-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
  padding-top:21px;
}
.standard-product-actions .btn{
  width:100%;
  padding-inline:10px;
}
.standard-common{
  padding:56px 0;
  background:#fff;
  border-top:1px solid var(--line);
}
.standard-common-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:38px;
  align-items:center;
}
.standard-common-copy h2{
  margin:0 0 12px;
  font-size:31px;
}
.standard-common-copy p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.68;
}
.standard-common-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:20px;
}
.standard-common-point{
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#FBFCFD;
}
.standard-common-point strong{
  display:block;
  font-size:11.5px;
}
.standard-common-point span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.45;
}
.standard-common .app-frame{
  box-shadow:0 14px 38px rgba(16,24,40,.085);
}
@media(max-width:950px){
  .standard-product-grid{grid-template-columns:1fr}
  .standard-product-card{min-height:auto}
  .standard-common-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .standard-products-hero{padding-top:42px}
  .standard-products-hero h1{font-size:35px}
  .standard-product-actions{grid-template-columns:1fr}
  .standard-common-points{grid-template-columns:1fr}
}


/* =========================================================
   v5 — Distinct conventional product-detail page
   Product ≠ Pricing.
   Familiar flow:
   Hero -> product overview -> features -> real screenshot ->
   edition overview -> CTA to pricing.
   ========================================================= */

.pd-hero{
  padding:62px 0 56px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.pd-hero-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:52px;
  align-items:center;
}
.pd-hero-copy h1{
  margin:0 0 15px;
  max-width:560px;
  font-size:50px;
  line-height:1.05;
}
.pd-hero-copy .lead{
  max-width:565px;
  margin:0;
  font-size:16.5px;
}
.pd-kicker-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:20px;
  color:#475467;
  font-size:11.5px;
  font-weight:650;
}
.pd-kicker-line span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.pd-kicker-line i{
  width:15px;height:15px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-style:normal;
  font-size:9px;
}
.pd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.pd-overview{
  padding:36px 0;
  background:var(--page);
  border-bottom:1px solid var(--line);
}
.pd-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.pd-overview-item{
  padding:5px 24px;
  border-left:1px solid var(--line);
}
.pd-overview-item:first-child{border-left:0;padding-left:0}
.pd-overview-item strong{
  display:block;
  font-size:12.5px;
  margin-bottom:4px;
}
.pd-overview-item span{
  display:block;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.5;
}

.pd-feature-section{
  padding:66px 0;
  background:#fff;
}
.pd-feature-row{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:48px;
  align-items:center;
  padding:34px 0;
  border-top:1px solid var(--line);
}
.pd-feature-row:first-of-type{
  border-top:0;
  padding-top:0;
}
.pd-feature-copy h2{
  margin:0 0 10px;
  font-size:29px;
}
.pd-feature-copy p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.7;
}
.pd-bullets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 18px;
  margin-top:18px;
}
.pd-bullets div{
  display:flex;
  gap:8px;
  color:#475467;
  font-size:11.5px;
  line-height:1.45;
}
.pd-bullets i{
  width:16px;height:16px;
  flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-style:normal;
  font-size:9px;
  font-weight:900;
}
.pd-visual-card{
  padding:20px;
  background:#F7F9FC;
  border:1px solid var(--line);
  border-radius:10px;
}
.pd-visual-card .app-frame{box-shadow:0 12px 34px rgba(16,24,40,.08)}

.pd-editions{
  padding:60px 0;
  background:var(--page);
  border-block:1px solid var(--line);
}
.pd-editions-grid{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.pd-edition-row{
  display:grid;
  grid-template-columns:180px 1fr auto;
  gap:24px;
  align-items:center;
  padding:20px 22px;
  border-top:1px solid var(--line);
}
.pd-edition-row:first-child{border-top:0}
.pd-edition-row:hover{background:#FBFCFD}
.pd-edition-name strong{
  display:block;
  font-size:15px;
}
.pd-edition-name span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px;
}
.pd-edition-desc{
  color:#526078;
  font-size:11.5px;
  line-height:1.55;
}
.pd-edition-row .btn{
  min-width:112px;
}
.pd-edition-row.recommended{
  background:linear-gradient(90deg,#fff,#F7FAFF);
}
.pd-edition-row.recommended .pd-edition-name strong{
  color:var(--blue);
}

.pd-cta{
  padding:52px 0;
  background:#fff;
}
.pd-cta-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:28px 30px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#FBFCFE;
}
.pd-cta-box h2{
  margin:0 0 7px;
  font-size:25px;
}
.pd-cta-box p{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
}
.pd-cta-actions{display:flex;gap:9px;flex:none}

@media(max-width:980px){
  .pd-hero-grid,.pd-feature-row{grid-template-columns:1fr}
  .pd-overview-grid{grid-template-columns:1fr 1fr}
  .pd-overview-item:nth-child(3){border-left:0}
  .pd-overview-item{padding:13px 18px}
  .pd-edition-row{grid-template-columns:1fr}
  .pd-edition-row .btn{width:fit-content}
}
@media(max-width:680px){
  .pd-hero{padding:44px 0 36px}
  .pd-hero-copy h1{font-size:36px}
  .pd-overview-grid{grid-template-columns:1fr}
  .pd-overview-item{border-left:0;border-top:1px solid var(--line);padding:14px 0}
  .pd-overview-item:first-child{border-top:0}
  .pd-bullets{grid-template-columns:1fr}
  .pd-cta-box{align-items:flex-start;flex-direction:column}
  .pd-cta-actions{width:100%;display:grid;grid-template-columns:1fr}
}


/* =========================================================
   v6 — Conventional SOFTWARE PRODUCT LANDING PAGE
   Product page contains NO pricing cards, NO edition rows,
   NO billing selector and NO Limited/Pro/Ultimate comparison.
   ========================================================= */

.sp-hero{
  padding:64px 0 58px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.sp-hero-grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:54px;
  align-items:center;
}
.sp-hero h1{
  margin:0 0 16px;
  max-width:555px;
  font-size:52px;
  line-height:1.04;
}
.sp-hero .lead{
  max-width:555px;
  margin:0;
  font-size:16.5px;
}
.sp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.sp-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:20px;
  color:#475467;
  font-size:11.5px;
  font-weight:650;
}
.sp-proof span{display:inline-flex;align-items:center;gap:7px}
.sp-proof i{
  width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-style:normal;
  font-size:9px;
}
.sp-screen{
  overflow:hidden;
  border:1px solid #CDD6E2;
  border-radius:10px;
  background:#fff;
  box-shadow:0 18px 46px rgba(16,24,40,.11);
}
.sp-screen-top{
  height:34px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:#F7F9FC;
  color:#667085;
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.sp-dots{display:flex;gap:5px}
.sp-dots i{width:6px;height:6px;border-radius:50%;background:#BBC5D2}
.sp-screen img{width:100%;display:block}

.sp-intro{
  padding:42px 0;
  background:var(--page);
  border-bottom:1px solid var(--line);
}
.sp-intro-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.sp-intro-item{
  padding:2px 25px;
  border-left:1px solid var(--line);
}
.sp-intro-item:first-child{border-left:0;padding-left:0}
.sp-intro-item strong{display:block;font-size:12.5px}
.sp-intro-item span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10.8px;
  line-height:1.5;
}

.sp-section{
  padding:70px 0;
  background:#fff;
}
.sp-section.alt{
  background:var(--page);
  border-block:1px solid var(--line);
}
.sp-section-title{
  max-width:740px;
  margin-bottom:28px;
}
.sp-section-title h2{
  margin:0 0 10px;
  font-size:32px;
}
.sp-section-title p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.68;
}
.sp-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.sp-feature{
  padding:21px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}
.sp-feature-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:8px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}
.sp-feature h3{margin:13px 0 6px;font-size:15px}
.sp-feature p{margin:0;color:var(--muted);font-size:12px;line-height:1.58}

.sp-story{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:center;
}
.sp-story.reverse{
  grid-template-columns:1.1fr .9fr;
}
.sp-story-copy h2{
  margin:0 0 11px;
  font-size:31px;
}
.sp-story-copy p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.7;
}
.sp-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 18px;
  margin-top:19px;
}
.sp-list div{
  display:flex;
  gap:8px;
  color:#475467;
  font-size:11.5px;
  line-height:1.45;
}
.sp-list i{
  width:16px;height:16px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-style:normal;
  font-size:9px;
  font-weight:900;
}
.sp-image-wrap{
  padding:18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#F7F9FC;
}
.sp-image-wrap .sp-screen{
  box-shadow:0 10px 30px rgba(16,24,40,.075);
}

.sp-workflow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.sp-step{
  padding:23px 21px;
  border-left:1px solid var(--line);
}
.sp-step:first-child{border-left:0}
.sp-step .num{
  color:var(--blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
}
.sp-step h3{
  margin:10px 0 6px;
  font-size:14px;
}
.sp-step p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}

.sp-platform{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:44px;
  align-items:start;
}
.sp-platform h2{
  margin:0 0 11px;
  font-size:31px;
}
.sp-platform p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.7;
}
.sp-platform-table{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}
.sp-platform-row{
  display:grid;
  grid-template-columns:165px 1fr;
  gap:18px;
  padding:14px 16px;
  border-top:1px solid var(--line);
}
.sp-platform-row:first-child{border-top:0}
.sp-platform-row strong{font-size:11.5px}
.sp-platform-row span{color:var(--muted);font-size:11px;line-height:1.5}

.sp-final{
  padding:54px 0;
  background:#fff;
}
.sp-final-box{
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#FBFCFE;
}
.sp-final-box h2{margin:0 0 7px;font-size:27px}
.sp-final-box p{margin:0;color:var(--muted);font-size:12.5px}
.sp-final-actions{display:flex;gap:9px;flex:none}

@media(max-width:980px){
  .sp-hero-grid,.sp-story,.sp-story.reverse,.sp-platform{grid-template-columns:1fr}
  .sp-feature-grid{grid-template-columns:1fr 1fr}
  .sp-workflow{grid-template-columns:1fr 1fr}
  .sp-step:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .sp-step:nth-child(4){border-top:1px solid var(--line)}
  .sp-intro-grid{grid-template-columns:1fr 1fr}
  .sp-intro-item:nth-child(3){border-left:0}
}
@media(max-width:680px){
  .sp-hero{padding:44px 0 38px}
  .sp-hero h1{font-size:36px}
  .sp-intro-grid,.sp-feature-grid,.sp-workflow{grid-template-columns:1fr}
  .sp-intro-item{padding:14px 0;border-left:0;border-top:1px solid var(--line)}
  .sp-intro-item:first-child{border-top:0}
  .sp-step{border-left:0;border-top:1px solid var(--line)}
  .sp-step:first-child{border-top:0}
  .sp-list{grid-template-columns:1fr}
  .sp-platform-row{grid-template-columns:1fr}
  .sp-final-box{align-items:flex-start;flex-direction:column}
  .sp-final-actions{width:100%;display:grid}
}


/* =========================================================
   v7 — Product page polish
   - Reduce vertical length ~15%
   - Strengthen the 4-item benefit strip
   - Refine Platform section visually
   ========================================================= */

.sp-section{
  padding:58px 0;
}
.sp-feature-section{
  padding:58px 0;
}
.sp-feature{
  padding:18px;
}
.sp-feature h3{
  margin-top:11px;
}
.sp-feature p{
  line-height:1.52;
}

.sp-intro{
  padding:34px 0;
}
.sp-intro-item strong{
  font-size:13px;
}
.sp-intro-item span{
  font-size:11.2px;
  color:#596779;
}

.sp-story{
  gap:42px;
}
.sp-story-copy h2{
  font-size:29px;
}
.sp-image-wrap{
  padding:16px;
}

.sp-platform{
  grid-template-columns:.82fr 1.18fr;
  gap:38px;
  align-items:center;
}

.sp-platform-table{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  border:0;
  background:transparent;
  overflow:visible;
}
.sp-platform-row{
  display:block;
  min-height:92px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.sp-platform-row:first-child{
  border-top:1px solid var(--line);
}
.sp-platform-row strong{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
}
.sp-platform-row strong::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px var(--blue-soft);
  flex:none;
}
.sp-platform-row span{
  display:block;
  margin-top:8px;
  padding-left:16px;
  color:#667085;
  font-size:10.8px;
  line-height:1.45;
}

.sp-final{
  padding:44px 0;
}
.sp-final-box{
  padding:26px 28px;
}

@media(max-width:980px){
  .sp-platform-table{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:680px){
  .sp-section,.sp-feature-section{
    padding:46px 0;
  }
  .sp-intro{
    padding:26px 0;
  }
  .sp-platform-table{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   v8 — Interactive Product Showcase
   Replaces repeated product sections with:
   1) one large real screenshot
   2) six product functions
   3) compact capability list below
   ========================================================= */

.product-showcase-section{
  padding:62px 0;
  background:#fff;
}

.product-showcase-head{
  max-width:760px;
  margin-bottom:28px;
}
.product-showcase-head h2{
  margin:0 0 10px;
  font-size:32px;
}
.product-showcase-head p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.68;
}

.product-showcase{
  display:grid;
  grid-template-columns:330px 1fr;
  overflow:hidden;
  min-height:510px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.product-showcase-nav{
  padding:12px;
  border-right:1px solid var(--line);
  background:#F8FAFC;
}

.product-showcase-tab{
  width:100%;
  min-height:74px;
  padding:12px 13px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  align-items:start;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.product-showcase-tab + .product-showcase-tab{
  margin-top:4px;
}
.product-showcase-tab:hover{
  background:#fff;
  border-color:#E6EBF2;
}
.product-showcase-tab.active{
  background:#fff;
  border-color:#BBD1F7;
  box-shadow:0 2px 8px rgba(16,24,40,.045);
}
.product-showcase-tab .tab-icon{
  width:34px;
  height:34px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#EEF5FF;
  color:#1267F2;
  font-size:11px;
  font-weight:900;
}
.product-showcase-tab strong{
  display:block;
  margin-top:1px;
  color:#1F2937;
  font-size:12px;
}
.product-showcase-tab span{
  display:block;
  margin-top:4px;
  color:#667085;
  font-size:10.5px;
  line-height:1.4;
}

.product-showcase-view{
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#fff;
}

.product-showcase-image{
  padding:24px 24px 0;
  background:linear-gradient(180deg,#F7F9FC 0%,#fff 100%);
}
.product-showcase-image .sp-screen{
  box-shadow:0 14px 36px rgba(16,24,40,.09);
}
.product-showcase-image img{
  width:100%;
  aspect-ratio:16/8.55;
  object-fit:cover;
  object-position:top left;
}

.product-showcase-copy{
  padding:22px 26px 24px;
  border-top:1px solid var(--line);
}
.product-showcase-copy .showcase-label{
  margin-bottom:7px;
  color:#1267F2;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.product-showcase-copy h3{
  margin:0 0 7px;
  font-size:22px;
}
.product-showcase-copy p{
  max-width:720px;
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.6;
}

.all-capabilities{
  padding:56px 0;
  background:var(--page);
  border-block:1px solid var(--line);
}
.all-capabilities-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:22px;
}
.all-capabilities-head h2{
  margin:0;
  font-size:29px;
}
.all-capabilities-head p{
  max-width:540px;
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
}

.capability-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.capability-item{
  min-height:94px;
  padding:16px 17px;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}
.capability-item:nth-child(-n+4){
  border-top:0;
}
.capability-item:nth-child(4n+1){
  border-left:0;
}
.capability-item strong{
  display:block;
  color:#273244;
  font-size:11.5px;
}
.capability-item span{
  display:block;
  margin-top:5px;
  color:#667085;
  font-size:10.3px;
  line-height:1.45;
}

@media(max-width:980px){
  .product-showcase{
    grid-template-columns:270px 1fr;
  }
  .capability-list{
    grid-template-columns:repeat(2,1fr);
  }
  .capability-item:nth-child(4n+1){
    border-left:1px solid var(--line);
  }
  .capability-item:nth-child(2n+1){
    border-left:0;
  }
  .capability-item:nth-child(-n+4){
    border-top:1px solid var(--line);
  }
  .capability-item:nth-child(-n+2){
    border-top:0;
  }
}

@media(max-width:720px){
  .product-showcase{
    grid-template-columns:1fr;
  }
  .product-showcase-nav{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .product-showcase-tab{
    min-height:64px;
  }
  .product-showcase-image{
    padding:14px 14px 0;
  }
  .all-capabilities-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .capability-list{
    grid-template-columns:1fr;
  }
  .capability-item{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .capability-item:first-child{
    border-top:0;
  }
}


/* =========================================================
   v9 — Product page:
   Header -> centered brand tagline -> title -> large app image
   -> sticky left product navigation -> changing content
   ========================================================= */

.product-brand-intro{
  padding:44px 0 22px;
  text-align:center;
  background:#fff;
}
.product-brand-line{
  margin:0;
  color:#263244;
  font-size:18px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.product-brand-line::before,
.product-brand-line::after{
  content:"";
  width:42px;
  height:1px;
  margin:0 16px;
  background:linear-gradient(90deg,rgba(10,166,180,0),rgba(10,166,180,.55));
}
.product-brand-line::after{
  background:linear-gradient(90deg,rgba(10,166,180,.55),rgba(10,166,180,0));
}
.product-brand-line .dot{
  color:#0AA6B4;
  padding:0 8px;
}

.product-main-hero{
  padding:8px 0 56px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.product-main-hero-copy{
  text-align:center;
  max-width:860px;
  margin:0 auto 28px;
}
.product-main-hero-copy h1{
  margin:0 auto 12px;
  max-width:820px;
  font-size:43px;
  line-height:1.08;
}
.product-main-hero-copy p{
  margin:0 auto;
  max-width:720px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.product-main-hero-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:21px;
}

.product-main-screen{
  width:min(100%,1040px);
  margin:0 auto;
}
.product-main-screen .sp-screen{
  box-shadow:0 18px 48px rgba(16,24,40,.11);
}
.product-main-screen img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center top;
}

.product-core-strip{
  background:#F7F8FA;
  border-bottom:1px solid var(--line);
}
.product-core-grid{
  min-height:84px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.product-core-item{
  padding:18px 24px;
  border-left:1px solid var(--line);
}
.product-core-item:first-child{
  border-left:0;
}
.product-core-item strong{
  display:block;
  font-size:12.5px;
}
.product-core-item span{
  display:block;
  margin-top:4px;
  color:#667085;
  font-size:10.5px;
  line-height:1.45;
}

.product-explorer{
  padding:62px 0;
  background:#fff;
}
.product-explorer-head{
  max-width:770px;
  margin-bottom:28px;
}
.product-explorer-head h2{
  margin:0 0 9px;
  font-size:31px;
}
.product-explorer-head p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.65;
}

.product-explorer-layout{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:26px;
  align-items:start;
}

.product-side-nav{
  position:sticky;
  top:96px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#F8FAFC;
}
.product-side-nav button{
  width:100%;
  min-height:54px;
  padding:10px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#344054;
  text-align:left;
  cursor:pointer;
}
.product-side-nav button + button{
  margin-top:4px;
}
.product-side-nav button:hover{
  background:#fff;
  border-color:#E2E8F0;
}
.product-side-nav button.active{
  background:#fff;
  border-color:#AFC9F7;
  box-shadow:0 2px 7px rgba(16,24,40,.04);
}
.product-side-nav .nav-num{
  width:28px;
  height:28px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#EEF5FF;
  color:#1267F2;
  font-size:10px;
  font-weight:900;
}
.product-side-nav strong{
  display:block;
  font-size:11.5px;
}
.product-side-nav span{
  display:block;
  margin-top:2px;
  color:#7A8699;
  font-size:9.8px;
}

.product-explorer-content{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.product-explorer-image{
  padding:22px 22px 0;
  background:linear-gradient(180deg,#F7F9FC,#fff);
}
.product-explorer-image .sp-screen{
  box-shadow:0 12px 34px rgba(16,24,40,.085);
}
.product-explorer-image img{
  width:100%;
  aspect-ratio:16/8.6;
  object-fit:cover;
  object-position:top left;
}
.product-explorer-copy{
  padding:22px 24px 24px;
  border-top:1px solid var(--line);
}
.product-explorer-copy .mini{
  margin-bottom:6px;
  color:#1267F2;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.product-explorer-copy h3{
  margin:0 0 7px;
  font-size:23px;
}
.product-explorer-copy p{
  margin:0;
  max-width:760px;
  color:#667085;
  font-size:12.5px;
  line-height:1.62;
}
.product-explorer-points{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 18px;
  margin-top:16px;
}
.product-explorer-points div{
  display:flex;
  gap:8px;
  color:#475467;
  font-size:11px;
}
.product-explorer-points i{
  width:15px;height:15px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:#EAF8F1;
  color:#138A5B;
  font-style:normal;
  font-size:8px;
  font-weight:900;
}

.product-functions{
  padding:56px 0;
  background:#F7F8FA;
  border-block:1px solid var(--line);
}
.product-functions-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:26px;
  margin-bottom:22px;
}
.product-functions-head h2{
  margin:0;
  font-size:29px;
}
.product-functions-head p{
  max-width:510px;
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.6;
}
.product-functions-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.product-function{
  min-height:94px;
  padding:16px 17px;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}
.product-function:nth-child(-n+4){
  border-top:0;
}
.product-function:nth-child(4n+1){
  border-left:0;
}
.product-function strong{
  display:block;
  font-size:11.5px;
}
.product-function span{
  display:block;
  margin-top:5px;
  color:#667085;
  font-size:10.3px;
  line-height:1.45;
}

@media(max-width:980px){
  .product-explorer-layout{
    grid-template-columns:220px 1fr;
  }
  .product-functions-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .product-function:nth-child(4n+1){
    border-left:1px solid var(--line);
  }
  .product-function:nth-child(2n+1){
    border-left:0;
  }
  .product-function:nth-child(-n+4){
    border-top:1px solid var(--line);
  }
  .product-function:nth-child(-n+2){
    border-top:0;
  }
}

@media(max-width:720px){
  .product-brand-line{
    font-size:13px;
    letter-spacing:.10em;
  }
  .product-brand-line::before,
  .product-brand-line::after{
    width:18px;
    margin:0 7px;
  }
  .product-brand-line .dot{
    padding:0 4px;
  }
  .product-main-hero-copy h1{
    font-size:35px;
  }
  .product-main-hero-actions{
    flex-direction:column;
  }
  .product-core-grid{
    grid-template-columns:1fr;
  }
  .product-core-item{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .product-core-item:first-child{
    border-top:0;
  }
  .product-explorer-layout{
    grid-template-columns:1fr;
  }
  .product-side-nav{
    position:static;
  }
  .product-explorer-points{
    grid-template-columns:1fr;
  }
  .product-functions-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .product-functions-grid{
    grid-template-columns:1fr;
  }
  .product-function{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .product-function:first-child{
    border-top:0;
  }
}


/* =========================================================
   v10 — No duplicate functions
   - Left explorer becomes the single source of product functions
   - Removes duplicated "Platform functions" grid
   - Keeps only true platform specifications below
   ========================================================= */

.product-side-nav{
  max-height:calc(100vh - 118px);
  overflow:auto;
  scrollbar-width:thin;
}
.product-side-nav button{
  min-height:50px;
}

.platform-specs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.platform-spec{
  min-height:94px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.platform-spec strong{
  display:block;
  font-size:11.5px;
}
.platform-spec span{
  display:block;
  margin-top:7px;
  color:#667085;
  font-size:10.7px;
  line-height:1.45;
}
.platform-spec strong::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px var(--blue-soft);
  vertical-align:1px;
}

@media(max-width:980px){
  .platform-specs{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .product-side-nav{
    max-height:none;
    overflow:visible;
  }
  .platform-specs{grid-template-columns:1fr}
}


/* =========================================================
   v11 — No sidebar scrollbar + cohesive platform section
   ========================================================= */

/* No internal scrollbar. The page itself handles scrolling. */
.product-side-nav{
  max-height:none !important;
  overflow:visible !important;
  scrollbar-width:auto !important;
  position:sticky;
  top:92px;
  padding:8px;
}

.product-side-nav button{
  min-height:43px !important;
  padding:7px 9px !important;
  gap:8px !important;
}

.product-side-nav button + button{
  margin-top:3px !important;
}

.product-side-nav .nav-num{
  width:25px !important;
  height:25px !important;
  border-radius:6px !important;
  font-size:9px !important;
}

.product-side-nav strong{
  font-size:10.8px !important;
}

.product-side-nav span{
  font-size:9.2px !important;
}

/* Replace the old mixed Platform cards with one coherent environment block */
.environment-section{
  padding:52px 0;
  background:#F7F8FA;
  border-block:1px solid var(--line);
}

.environment-grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:38px;
  align-items:center;
}

.environment-copy h2{
  margin:0 0 10px;
  font-size:29px;
}

.environment-copy p{
  margin:0;
  color:#667085;
  font-size:12.5px;
  line-height:1.65;
}

.environment-panel{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.environment-group{
  padding:20px;
}

.environment-group + .environment-group{
  border-left:1px solid var(--line);
}

.environment-group .group-label{
  margin-bottom:12px;
  color:#667085;
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.environment-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 0;
  border-top:1px solid var(--line);
}

.environment-item:first-of-type{
  border-top:0;
  padding-top:0;
}

.environment-icon{
  width:32px;
  height:32px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid #E6EAF0;
  border-radius:8px;
  background:#fff;
}

.environment-icon img{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}

.environment-item strong{
  display:block;
  font-size:11.5px;
}

.environment-item span{
  display:block;
  margin-top:3px;
  color:#667085;
  font-size:10.4px;
  line-height:1.45;
}

@media(max-width:900px){
  .product-side-nav{
    position:static;
  }
  .environment-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px){
  .environment-panel{
    grid-template-columns:1fr;
  }
  .environment-group + .environment-group{
    border-left:0;
    border-top:1px solid var(--line);
  }
}


/* =========================================================
   v12 — Real user-provided StratTrade screenshots
   ========================================================= */

.product-side-nav{
  position:relative !important;
  top:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.product-side-nav button{
  min-height:45px !important;
}

/* Display each application screenshot at its intrinsic size and only scale it down
   when the available viewport is smaller. Never upscale screenshots to fill the frame. */
.product-explorer-image{
  padding:20px 20px 0 !important;
  text-align:center;
}
.product-explorer-image .sp-screen{
  display:inline-block;
  width:auto;
  max-width:100%;
  margin:0 auto;
  background:#fff;
  text-align:left;
  border:1px solid rgba(148,163,184,.34);
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.product-explorer-image img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:initial !important;
  object-position:initial !important;
  background:transparent;
  display:block;
  margin:0 auto;
}

/* =========================================================
   v58 — Product Explorer / Indicators catalog restore
   Restores the approved AVAILABLE INDICATORS card presentation
   for the complete 40-indicator catalog.
   ========================================================= */

.product-explorer-copy.has-indicator-catalog{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:24px;
  align-items:start;
}

.product-explorer-copy-main{
  min-width:0;
}

.product-indicator-catalog[hidden]{
  display:none !important;
}

.product-indicator-catalog{
  min-width:0;
  padding:16px 18px 18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}

.product-indicator-catalog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:11px;
  margin-bottom:13px;
  border-bottom:1px solid var(--line);
}

.product-indicator-catalog-head span{
  color:#1267F2;
  font-size:10.2px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.product-indicator-catalog-head strong{
  min-width:30px;
  height:25px;
  padding:0 7px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#EEF5FF;
  color:#1267F2;
  font-size:10.6px;
  font-weight:900;
}

.product-indicator-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:16px;
  row-gap:10px;
}

.product-indicator-grid div{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#475467;
  font-size:11px;
  line-height:1.35;
}

.product-indicator-grid i{
  width:5px;
  height:5px;
  flex:none;
  border-radius:50%;
  background:#1267F2;
}

.product-indicator-grid span{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}

/* Stack the explanation and catalog early enough that long indicator names
   stay readable instead of shrinking or colliding. */
@media(max-width:1180px){
  .product-explorer-copy.has-indicator-catalog{
    grid-template-columns:1fr;
    gap:20px;
  }

  .product-indicator-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .product-indicator-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .product-indicator-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   v59 — Simple full-access pricing
   Public pricing is Monthly / Yearly / Lifetime only.
   All terms include the same features.
   ========================================================= */

.v3-simple-pricing .plans-hero{
  padding:58px 0 34px;
}

.v3-simple-pricing .plans-hero h1{
  max-width:800px;
}

.v3-simple-pricing .plans-hero .lead{
  max-width:720px;
}

.v3-simple-pricing .v3-plans-main{
  padding-top:36px;
}

.v3-simple-pricing .pricing-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.v3-simple-pricing .plan{
  min-height:390px;
}

.v3-simple-pricing .plan-desc{
  min-height:60px;
}

.v3-simple-pricing .plan-price{
  min-height:44px;
  align-items:center;
  margin-top:2px;
}

.v3-simple-pricing .plan-price .woocommerce-Price-amount,
.v3-simple-pricing .plan-price bdi{
  color:var(--ink);
  font-size:31px;
  font-weight:850;
  letter-spacing:-.045em;
}

.v3-simple-pricing .plan-price del{
  margin-right:7px;
  color:#98A2B3;
  font-size:18px;
}

.v3-simple-pricing .plan-price ins{
  text-decoration:none;
}

.v3-simple-pricing .plan-sub{
  min-height:17px;
}

.v3-simple-pricing .plan-list{
  margin-top:20px;
}

.v3-simple-pricing .pricing-foot{
  padding:14px 20px;
}

.v3-included-section{
  padding-top:62px;
  padding-bottom:68px;
}

.v3-included-head{
  max-width:820px;
}

.v3-included-panel{
  overflow:hidden;
}

.v3-included-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.v3-included-item{
  min-height:118px;
  padding:22px 24px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.v3-included-item:nth-child(3n){
  border-right:0;
}

.v3-included-item:nth-last-child(-n+3){
  border-bottom:0;
}

.v3-included-item > i{
  width:20px;
  height:20px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green);
  font-size:10px;
  font-style:normal;
  font-weight:900;
}

.v3-included-item strong{
  display:block;
  color:var(--ink);
  font-size:12px;
  line-height:1.4;
}

.v3-included-item span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.55;
}

@media(max-width:980px){
  .v3-simple-pricing .pricing-grid{
    grid-template-columns:1fr;
  }

  .v3-simple-pricing .plan{
    min-height:0;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .v3-simple-pricing .plan:first-child{
    border-top:0;
  }

  .v3-included-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .v3-included-item,
  .v3-included-item:nth-child(3n),
  .v3-included-item:nth-last-child(-n+3){
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .v3-included-item:nth-child(2n){
    border-right:0;
  }

  .v3-included-item:nth-last-child(-n+2){
    border-bottom:0;
  }
}

@media(max-width:620px){
  .v3-simple-pricing .plans-hero{
    padding:44px 0 28px;
  }

  .v3-simple-pricing .plans-hero h1{
    font-size:36px;
  }

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

  .v3-included-item,
  .v3-included-item:nth-child(2n),
  .v3-included-item:nth-child(3n),
  .v3-included-item:nth-last-child(-n+2),
  .v3-included-item:nth-last-child(-n+3){
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .v3-included-item:last-child{
    border-bottom:0;
  }
}


/* =========================================================
   v60 — Pricing cards centered with side breathing room
   Keeps the same 3-card design, but prevents the cards from
   stretching too wide and adds visible left/right space.
   ========================================================= */

.v3-simple-pricing .pricing-shell{
  max-width:1240px;
  margin-inline:auto;
}

.v3-simple-pricing .pricing-grid{
  width:min(1080px, calc(100% - 48px));
  margin-inline:auto;
}

@media(max-width:980px){
  .v3-simple-pricing .pricing-grid{
    width:min(100%, calc(100% - 32px));
  }
}

/* =========================================================
   v61 — Pricing Model 02
   Same visual treatment as the current Yearly card:
   colored top rule + matching soft gradient that fades to white.
   ========================================================= */

/* Monthly — teal / StratTrade family */
.v3-simple-pricing .pricing-grid .plan:nth-child(1){
  background:linear-gradient(
    180deg,
    rgba(16,185,170,.115) 0%,
    rgba(16,185,170,.055) 21%,
    rgba(16,185,170,.018) 36%,
    #fff 50%
  );
  box-shadow:inset 0 3px 0 #10B9AA;
}

/* Yearly — keep the approved blue recommended treatment */
.v3-simple-pricing .pricing-grid .plan:nth-child(2){
  background:linear-gradient(
    180deg,
    rgba(18,103,242,.105) 0%,
    rgba(18,103,242,.050) 21%,
    rgba(18,103,242,.016) 36%,
    #fff 50%
  );
  box-shadow:inset 0 3px 0 var(--blue);
}

/* Lifetime — light cyan */
.v3-simple-pricing .pricing-grid .plan:nth-child(3){
  background:linear-gradient(
    180deg,
    rgba(45,194,216,.115) 0%,
    rgba(45,194,216,.055) 21%,
    rgba(45,194,216,.018) 36%,
    #fff 50%
  );
  box-shadow:inset 0 3px 0 #2DC2D8;
}

/* =========================================================
   v62 — Pricing final polish
   - Softer gradients
   - Clearer Lifetime separation
   - Tighter top vertical rhythm
   ========================================================= */

/* Reduce excess whitespace around the pricing hero */
.v3-simple-pricing .plans-hero{
  padding:46px 0 20px;
}

.v3-simple-pricing .v3-plans-main{
  padding-top:24px;
}

/* Monthly — same teal family, but softer */
.v3-simple-pricing .pricing-grid .plan:nth-child(1){
  background:linear-gradient(
    180deg,
    rgba(16,185,170,.090) 0%,
    rgba(16,185,170,.040) 21%,
    rgba(16,185,170,.012) 36%,
    #fff 48%
  );
  box-shadow:inset 0 3px 0 #10B9AA;
}

/* Yearly — preserve the recommended blue, slightly softer */
.v3-simple-pricing .pricing-grid .plan:nth-child(2){
  background:linear-gradient(
    180deg,
    rgba(18,103,242,.090) 0%,
    rgba(18,103,242,.040) 21%,
    rgba(18,103,242,.012) 36%,
    #fff 48%
  );
  box-shadow:inset 0 3px 0 var(--blue);
}

/* Lifetime — cooler sky-blue so it no longer reads like Monthly */
.v3-simple-pricing .pricing-grid .plan:nth-child(3){
  background:linear-gradient(
    180deg,
    rgba(75,159,214,.090) 0%,
    rgba(75,159,214,.040) 21%,
    rgba(75,159,214,.012) 36%,
    #fff 48%
  );
  box-shadow:inset 0 3px 0 #4B9FD6;
}

@media(max-width:620px){
  .v3-simple-pricing .plans-hero{
    padding:36px 0 20px;
  }

  .v3-simple-pricing .v3-plans-main{
    padding-top:20px;
  }
}