/* X7 — minimalist temporary product pages. Approved homepage design untouched. */
.product-page{max-width:1136px;margin:0 auto;padding:clamp(56px,8vw,110px) clamp(24px,4vw,52px) 95px}
.product-page .product-intro{max-width:950px}
.product-page .eyebrow{color:var(--ink)}
.product-page h1{font-size:clamp(3.25rem,9vw,7.5rem);letter-spacing:-.055em;line-height:1.04;margin:12px 0 22px}
.product-page .product-lead{font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.4;max-width:850px;margin:0 0 23px;font-weight:700}
.product-page .product-description{font-size:1.08rem;line-height:1.75;max-width:840px;margin:0 0 23px}
.product-stage{margin:55px 0 40px;padding:28px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--steel)}
.product-stage h2{font-size:clamp(1.5rem,2.7vw,2.3rem);letter-spacing:0;margin:0 0 12px}
.product-stage p{font-size:1.04rem;line-height:1.7;max-width:800px;margin:0 0 13px}
.product-stage p:last-child{margin-bottom:0}
.product-page-actions{display:flex;flex-wrap:wrap;gap:14px}
.product-page-actions .button{background:var(--ink);color:var(--white);border:2px solid var(--ink);box-shadow:none;transform:none;min-width:240px;justify-content:center;text-align:center}
.product-page-actions .button:hover{background:var(--ink);color:var(--white);border-color:var(--ink);box-shadow:none;transform:none}
.product-other{margin-top:80px;border-top:1px solid var(--steel);padding-top:24px}
.product-other h2{font-size:1.25rem;letter-spacing:0;margin:0 0 18px}
.product-other nav{display:flex;flex-wrap:wrap;gap:18px 30px}
.product-other nav a{font-weight:800;text-decoration:none;border-bottom:1px solid var(--steel);padding-bottom:5px}
.product-other nav a:hover{border-color:var(--gold)}
.product-other nav a[aria-current="page"]{border-color:var(--gold)}
@media(max-width:530px){.product-page{padding:55px 24px 70px}.product-page-actions .button{width:100%}.product-other{margin-top:65px}}

/* X7 heading spacing matches homepage and every public information page. */
.product-page h1,.product-page h2,.product-page h3,
.product-page .product-stage h2,.product-page .product-other h2{
  letter-spacing:.04em;
}


/* X7 Psychology First product pages — existing corporate brand, no product-brand invention.
   Clear audience, differentiation, proposed example and truthful development boundary. */
.product-page{max-width:1160px}
.product-page .product-intro{max-width:970px;margin:0 0 clamp(45px,6vw,76px)}
.product-page .product-intro .eyebrow{color:#202020;letter-spacing:.15em}
.product-page h1{font-size:clamp(3.25rem,9vw,6.25rem);line-height:1.05}
.product-page .product-lead{font-size:clamp(1.5rem,3.1vw,2.35rem);line-height:1.34;max-width:850px;margin:12px 0 25px;font-weight:800}
.product-page .product-description{font-size:1.13rem;line-height:1.82;max-width:815px;margin-bottom:18px}
.product-audience{
  display:inline-block;margin:22px 0 0;max-width:810px;
  padding:14px 0 14px 19px;
  border-left:4px solid var(--gold);
  font-size:1rem;font-weight:700;line-height:1.7;
}
.product-value,.product-use-cases,.product-example{
  margin:0 0 clamp(48px,7vw,82px);
  padding-top:25px;border-top:1px solid #202020;
}
.product-page .product-value h2,
.product-page .product-use-cases h2,
.product-page .product-example h2{
  margin:0 0 17px;font-size:clamp(1.65rem,3vw,2.6rem);
  line-height:1.3;font-weight:850;
}
.product-value>p:last-child,.product-example>p{
  max-width:830px;font-size:1.08rem;line-height:1.8;
}
.product-benefit-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,38px);margin-top:29px;
}
.product-benefit{
  border-top:4px solid #202020;padding:20px 0 6px;
  background:#FFFFFF;min-width:0;
}
.product-benefit-number{
  display:block;color:#786100;font-size:.82rem;
  font-weight:800;letter-spacing:.05em;margin-bottom:17px;
}
.product-benefit h3{
  font-size:clamp(1.12rem,1.7vw,1.38rem);
  line-height:1.4;margin:0 0 13px;font-weight:850;
}
.product-benefit p{margin:0;font-size:1rem;line-height:1.76}
.product-steps{
  counter-reset:step;list-style:none;margin:24px 0 0;
  padding:0;max-width:840px;
}
.product-steps li{
  display:grid;grid-template-columns:36px minmax(0,1fr);
  gap:15px;align-items:start;padding:17px 0;
  border-bottom:1px solid #898B90;line-height:1.7;font-size:1.05rem;
}
.product-steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  color:#756000;font-size:.82rem;font-weight:900;
  line-height:2.2;
}
.product-stage{
  margin:0 0 32px;padding:26px 0;
  border-top:2px solid #202020;border-bottom:1px solid #898B90;
}
.product-stage .eyebrow{color:#756000}
.product-stage h2{font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.4}
.product-stage p{max-width:830px;line-height:1.8;font-size:1.02rem}
.product-page-actions{gap:13px}
.product-page-actions .button{
  min-width:230px;min-height:52px;
  border:2px solid #202020;background:#202020;color:#FFFFFF;
  box-shadow:none;text-align:center;
}
.product-page-actions .button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.product-other{margin-top:clamp(55px,8vw,95px)}
@media(max-width:760px){
  .product-benefit-grid{grid-template-columns:1fr;gap:18px}
  .product-benefit{padding:17px 0;border-top-width:2px}
  .product-page .product-lead{font-size:clamp(1.36rem,5vw,2rem)}
}
@media(max-width:530px){
  .product-page{padding:45px 24px 65px}
  .product-audience{padding-left:14px}
  .product-page-actions .button{width:100%}
  .product-steps li{grid-template-columns:31px minmax(0,1fr);gap:10px}
}

/* Respect users who prefer less motion when following product-page anchors. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The core idea gets the same full-width charcoal treatment as the organisation. */
.product-page .product-value{background:#202020;color:#fff;border:0;padding:clamp(42px,6vw,72px) 0;box-shadow:0 0 0 100vmax #202020;clip-path:inset(0 -100vmax)}
.product-page .product-value .eyebrow{color:#D3B640}
.product-page .product-value>p:not(.eyebrow){max-width:830px;font-size:1.08rem;line-height:1.8;margin:0 0 20px}
.product-page .product-value>p:last-child{margin-bottom:0}

/* Put availability beside the introduction, before readers explore the concept. */
.product-page .product-status{
  max-width:815px;margin:24px 0 0;padding:14px 0;
  border-top:1px solid #898B90;border-bottom:1px solid #898B90;
  font-size:.9rem;line-height:1.7;color:#202020;
}
.product-status a{display:inline-block;margin-left:8px;text-underline-offset:4px}
.product-status a:focus-visible{outline:3px solid #202020;outline-offset:3px}