/* =========================================================
   Core product detail pages — shared page template
   Uses the existing Gelue design tokens from styles.css.
   ========================================================= */
.product-page{
  --journey-chevrons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 2.3 4.4 5 1.6 7.7'/%3E%3Cpath d='M10.1 2.3 12.9 5 10.1 7.7'/%3E%3Cpath d='M18.6 2.3 21.4 5 18.6 7.7'/%3E%3C/g%3E%3C/svg%3E");
  --journey-chevrons-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 26'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.3 1.6 5 4.4 7.7 1.6'/%3E%3Cpath d='M2.3 10.1 5 12.9 7.7 10.1'/%3E%3Cpath d='M2.3 18.6 5 21.4 7.7 18.6'/%3E%3C/g%3E%3C/svg%3E");
  --product-accent:#1769D2;
  --product-accent-2:#4B96F1;
  --product-tint:rgba(23,105,210,.11);
  --product-line:rgba(23,105,210,.18);
  --product-ink:#1257AE;
  --product-title-accent:#1769D2;
  background:
    radial-gradient(860px 520px at 92% 4%,var(--product-tint),transparent 68%),
    radial-gradient(700px 440px at -8% 35%,rgba(255,255,255,.9),transparent 70%),
    linear-gradient(180deg,#f7faff 0%,#edf4fb 100%);
}
.product-page.product-safety{
  --pain-icon-from:#9A4E11;
  --pain-icon-to:#E9A455;
  --pain-icon-shadow:rgba(154,78,17,.55);
  --product-accent:#D98232;
  --product-accent-2:#E8A462;
  --product-tint:rgba(217,130,50,.12);
  --product-line:rgba(217,130,50,.2);
  --product-ink:#B66B28;
  --product-title-accent:#D98232;
}
.product-page.product-hazop-review{
  --product-accent:#1769D2;
  --product-accent-2:#4B96F1;
  --product-tint:rgba(23,105,210,.11);
  --product-line:rgba(23,105,210,.18);
  --product-ink:#1257AE;
  --product-title-accent:#1769D2;
}
.product-page.product-safety-review{
  --pain-icon-from:#9A4E11;
  --pain-icon-to:#E9A455;
  --pain-icon-shadow:rgba(154,78,17,.55);
  --product-accent:#D98232;
  --product-accent-2:#E8A462;
  --product-tint:rgba(217,130,50,.12);
  --product-line:rgba(217,130,50,.2);
  --product-ink:#B66B28;
  --product-title-accent:#D98232;
}
.product-page main{overflow:clip}
.product-page .site-nav-links>li>a:hover,
.product-page .site-nav-links>li>a.active{color:var(--gl-blue)}
.product-page .site-nav-links>li>a::after{background:linear-gradient(90deg,var(--gl-blue),var(--blue-3))}
.product-page .site-submenu-toggle:hover{color:var(--gl-blue);background:rgba(0,92,151,.07)}
.product-page .section{padding-block:clamp(4.75rem,8vw,7.5rem)}
.product-page .product-band{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.44));
  border-block:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
}
.product-page .product-section-head{max-width:min(100%,1120px);margin-bottom:clamp(2.25rem,5vw,3.75rem)}
.product-page .product-section-head.center{margin-inline:auto;text-align:center}
.product-page .product-kicker{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  color:var(--product-ink);font-family:var(--font-mono);font-size:.72rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.product-page .product-kicker::before{content:"";width:24px;height:1px;background:var(--product-accent)}
.product-page .product-section-head.center .product-kicker{justify-content:center}
.product-page .product-section-head h2{
  max-width:none;margin-bottom:1rem;font-size:clamp(1.85rem,3.3vw,3rem);letter-spacing:-.03em;
}
.product-page .product-section-head.center h2{margin-inline:auto}
.product-page .product-section-head p{max-width:none;color:var(--muted-2);font-size:clamp(1rem,1.3vw,1.12rem)}
.product-page .product-section-head.center p{margin-inline:auto}
.product-page .product-cta .cta>p{font-size:clamp(1rem,1.3vw,1.12rem)}
@media(min-width:541px){
  .product-page .product-cta .cta>h2{max-width:none;white-space:nowrap}
  .product-page .product-cta .cta>p{max-width:none;white-space:nowrap;text-wrap:nowrap;font-size:clamp(.56rem,min(1.5vw,2vh),1.06rem);letter-spacing:-.02em}
}
.product-page .product-section-head h2,
.product-page .product-section-head p,
.product-page .pid-capability-copy h2,
.product-page .pid-capability-copy>p,
.product-page .product-value-panel h2{white-space:normal;max-width:100%;text-wrap:balance}

/* Hero */
.product-hero{padding-block:clamp(2.1rem,4vw,3rem) clamp(4.5rem,8vw,7rem)}
.product-hero-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);
  align-items:center;gap:clamp(2.5rem,6vw,5.5rem);
}
.product-hero-copy,.product-hero-visual{min-width:0}
.product-hero .crumb{margin-bottom:1.6rem}
.product-hero .hero-tag{margin-bottom:1.35rem;color:var(--product-ink)}
.product-hero .hero-tag .dot{background:var(--product-accent-2);box-shadow:0 0 0 3px var(--product-tint)}
.product-hero h1{
  max-width:none;margin-bottom:1.25rem;font-size:clamp(2.25rem,4.3vw,4.2rem);
  letter-spacing:-.045em;line-height:1.06;
}
.product-hero h1 span{color:var(--product-title-accent)}
.product-hero h1 .product-hero-name{display:block;white-space:nowrap}
.product-hero h1 .product-hero-title-line{display:block;margin-top:.12em;color:var(--ink);font-size:.67em;letter-spacing:-.03em;white-space:nowrap}
.product-hero .product-lede{max-width:56ch;color:var(--muted-2);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.82}
.product-boundary{
  display:flex;align-items:flex-start;gap:.7rem;max-width:54ch;margin-top:1.15rem;
  padding:.8rem 1rem;border:1px solid var(--product-line);border-radius:14px;
  background:rgba(255,255,255,.58);color:var(--muted-2);font-size:.86rem;line-height:1.65;
}
.product-boundary svg{flex:0 0 auto;margin-top:.15rem;color:var(--product-ink)}
.product-hero .hero-actions{gap:1rem;margin:1.8rem 0 0}
.product-hero .hero-actions .btn{min-height:44px;padding:.7rem 1.25rem;font-size:.92rem}
.product-page .btn-primary{
  background:linear-gradient(135deg,var(--gl-blue),var(--blue-4));
  color:#fff;
  box-shadow:0 14px 34px -14px rgba(0,92,151,.6),inset 0 1px 0 rgba(255,255,255,.25);
}
.product-page .btn-ghost{border-color:rgba(0,92,151,.18);color:var(--gl-blue)}

.product-hero-visual{position:relative;container-type:inline-size;isolation:isolate}
.product-hero-visual::before{
  content:"";position:absolute;inset:-12%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,var(--product-tint),transparent 67%);filter:blur(12px);
}
.product-mockup{
  position:relative;padding:.8rem;border:1px solid rgba(255,255,255,.95);border-radius:28px;
  background:rgba(255,255,255,.54);box-shadow:0 34px 80px -34px color-mix(in srgb,var(--product-accent) 45%,transparent);
  backdrop-filter:blur(18px) saturate(150%);transform:perspective(1100px) rotateY(-2deg) rotateX(1deg);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.product-mockup:hover{transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-3px)}
.product-window{overflow:hidden;border:1px solid rgba(14,27,44,.11);border-radius:20px;background:#fff;box-shadow:0 20px 44px -28px rgba(14,27,44,.42)}
.product-window-bar{
  height:42px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 1rem;border-bottom:1px solid rgba(14,27,44,.08);background:linear-gradient(180deg,#fff,#f5f7fa);
}
.window-controls{display:flex;gap:.34rem}
.window-controls i{width:8px;height:8px;border-radius:50%;background:#d7dee7}
.window-controls i:first-child{background:#f29c8c}.window-controls i:nth-child(2){background:#edc369}.window-controls i:last-child{background:#7ac9a8}
.window-label{overflow:hidden;color:var(--muted);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap}
.window-status{display:inline-flex;align-items:center;gap:.35rem;color:var(--product-ink);font-family:var(--font-mono);font-size:.6rem;white-space:nowrap}
.window-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--product-accent-2)}
.product-screen{display:grid;place-items:center;aspect-ratio:16/9;padding:.35rem;background:linear-gradient(145deg,#eef3f8,#fff)}
.product-screen img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;border-radius:11px}
.product-screen-placeholder{
  align-content:center;
  gap:.65rem;
  border:1px dashed var(--product-line);
  color:color-mix(in srgb,var(--product-accent) 55%,#8796A4);
  background:
    linear-gradient(color-mix(in srgb,var(--product-accent) 5%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--product-accent) 5%,transparent) 1px,transparent 1px),
    linear-gradient(145deg,#F8FBFD,#EEF4F9);
  background-size:24px 24px,24px 24px,auto;
}
.product-screen-placeholder svg{width:42px;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.product-screen-placeholder span{font-size:.72rem;letter-spacing:.04em}
.mockup-note{
  position:absolute;right:-1rem;bottom:-1.2rem;display:flex;align-items:center;gap:.65rem;
  max-width:230px;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.94);border-radius:16px;
  background:rgba(255,255,255,.9);box-shadow:0 18px 38px -22px rgba(14,27,44,.4);backdrop-filter:blur(14px);
}
.mockup-note-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:var(--product-tint);color:var(--product-ink)}
.mockup-note b{display:block;color:var(--ink);font-size:.77rem;line-height:1.35}
.mockup-note span{display:block;color:var(--muted);font-size:.67rem;line-height:1.45}
.mockup-note .mockup-note-icon{display:grid;place-items:center}
.mockup-note-icon svg{display:block;margin:auto}

/* AI-HAZOP hero — two P&ID access modes and recognition-to-analysis handoff */
.hazop-input-modes{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:.7rem;margin-top:1.25rem}
.hazop-input-modes article{display:flex;align-items:flex-start;gap:.75rem;min-width:0;padding:.9rem;border-radius:16px}
.hazop-mode-primary{border:1px solid rgba(23,105,210,.25);background:linear-gradient(135deg,rgba(23,105,210,.13),rgba(255,255,255,.78));box-shadow:0 16px 30px -25px rgba(23,105,210,.75)}
.hazop-mode-secondary{border:1px solid rgba(0,92,151,.12);background:rgba(255,255,255,.68)}
.hazop-mode-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:linear-gradient(135deg,var(--gl-blue),var(--blue-3));color:#fff;box-shadow:0 10px 20px -13px rgba(0,92,151,.72)}
.hazop-mode-secondary .hazop-mode-icon{background:rgba(0,92,151,.08);color:var(--gl-blue);box-shadow:none}
.hazop-mode-icon svg{width:19px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hazop-input-modes small,.hazop-input-modes strong,.hazop-input-modes p{display:block}
.hazop-input-modes small{margin-bottom:.25rem;color:var(--product-ink);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.05em}
.hazop-input-modes strong{color:var(--ink);font-family:var(--font-display);font-size:.83rem;line-height:1.4}
.hazop-input-modes p{margin-top:.28rem;color:var(--muted-2);font-size:.7rem;line-height:1.55}
.hazop-recognition-mockup{padding:.65rem}
.hazop-recognition-mockup .mockup-note{position:static;max-width:300px;margin:.8rem 0 .05rem auto}
.hazop-hero-pid-canvas{--scan-cycle:6s;position:relative;aspect-ratio:16/8.55;overflow:hidden;background:#fff}
.hazop-hero-pid-canvas>img{position:absolute;left:-92.99%;top:-142.67%;width:272.78%;height:auto;max-width:none;filter:contrast(1.04) saturate(.82)}
.hazop-detection{
  --detect:#0F62FE;
  --detect-fill:color-mix(in srgb,var(--detect) 8%,transparent);
  --detect-at:calc(4% + var(--detect-x) * .84);
  position:absolute;z-index:4;left:var(--detect-x);
  border:1.5px dashed var(--detect);border-radius:2px;background:transparent;box-shadow:none;
  opacity:0;animation:hazop-detect-reveal var(--scan-cycle) linear(0 0%,0 var(--detect-at),1 var(--detect-at),1 90%,0 94%,0 100%) infinite;
}
.hazop-detection>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.hazop-detection>svg path,.hazop-detection>svg circle{fill:var(--detect-fill);stroke:var(--detect);stroke-width:1.05;vector-effect:non-scaling-stroke}
@keyframes hazop-detect-reveal{from{opacity:0}to{opacity:1}}
.hazop-detection i{position:absolute;left:-1px;top:-18px;padding:2px 5px;border-radius:2px 2px 2px 0;background:var(--detect);color:#fff;font-family:var(--font-mono);font-size:.5rem;font-style:normal;line-height:14px;white-space:nowrap;box-shadow:0 4px 10px -7px var(--detect)}
.hazop-recognition-status{position:absolute;left:1rem;top:1rem;display:flex;align-items:flex-start;gap:.55rem;padding:.65rem .8rem;border:1px solid rgba(255,255,255,.92);border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 14px 32px -20px rgba(14,27,44,.72);backdrop-filter:blur(8px)}
.hazop-recognition-status>i{width:8px;height:8px;margin-top:.25rem;border-radius:50%;background:var(--gl-blue);box-shadow:0 0 0 4px rgba(23,105,210,.12)}
.hazop-recognition-status b,.hazop-recognition-status small{display:block}.hazop-recognition-status b{color:var(--ink);font-size:.7rem}.hazop-recognition-status small{margin-top:.18rem;color:var(--muted);font-size:.58rem}

.detect-exchanger{--detect-x:51.35%;top:7.77%;width:31.15%;height:13.18%;--detect:#29C218;--detect-fill:rgba(49,218,30,.08);border-radius:0}
.detect-vessel{--detect-x:44.16%;top:36.05%;width:7.50%;height:42.65%;--detect:#0F62FE;--detect-fill:rgba(15,98,254,.08);border-radius:0}
.detect-instrument-1,.detect-instrument-2,.detect-instrument-3,.detect-instrument-4,.detect-instrument-5,.detect-instrument-6{width:5.7%;aspect-ratio:1/1;height:auto;--detect:#FB9648;--detect-fill:rgba(251,150,72,.08)}
.detect-instrument-1>svg,.detect-instrument-2>svg,.detect-instrument-3>svg,.detect-instrument-4>svg,.detect-instrument-5>svg,.detect-instrument-6>svg{inset:-6%;width:112%;height:112%;margin:auto}
.detect-instrument-1{--detect-x:15.17%;top:41.57%}
.detect-instrument-2{--detect-x:20.59%;top:54.25%}
.detect-instrument-3{--detect-x:30.91%;top:49.05%}
.detect-instrument-4{--detect-x:58.13%;top:36.16%}
.detect-instrument-5{--detect-x:85.39%;top:27.14%}
.detect-instrument-6{--detect-x:15.21%;top:72.25%}

.hazop-scan-beam{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--gl-blue);box-shadow:0 0 10px rgba(23,105,210,.85);animation:hazop-scan var(--scan-cycle) linear infinite}
.hazop-scan-beam::before{content:"";position:absolute;inset:0 -30px;background:linear-gradient(90deg,transparent,rgba(23,105,210,.12),transparent)}
@keyframes hazop-scan{
  0%,4%{left:0;opacity:0}
  9%{opacity:1}
  88%,90%{left:100%;opacity:1}
  94%,100%{left:100%;opacity:0}
}
.hazop-hero-handoff{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:.7rem .45rem .55rem;list-style:none;background:linear-gradient(180deg,#fff,#f6fafe)}
.hazop-hero-handoff li{position:relative;display:flex;align-items:center;gap:.38rem;min-width:0;padding:.3rem .45rem;color:var(--muted-2)}
.hazop-hero-handoff li:not(:last-child)::after{content:"";position:absolute;right:-1px;top:50%;width:10px;height:1px;background:var(--product-line)}
.hazop-hero-handoff span{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:var(--product-tint);color:var(--product-ink);font-family:var(--font-mono);font-size:.55rem}
.hazop-hero-handoff b{overflow:hidden;color:var(--ink);font-size:.64rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
/* AI-HAZOP hero composite — product workspace behind, P&ID recognition in front */
.hazop-composite-mockup{padding:.72rem;transform:none}
.hazop-composite-stage{position:relative;min-height:0;aspect-ratio:1.18;isolation:isolate}
.hazop-software-window{position:absolute;z-index:1;top:3%;right:0;width:95%}
.hazop-software-screen{aspect-ratio:3830/1740;overflow:hidden;background:#EEF4F9}
.hazop-software-screen img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.hazop-recognition-card{position:absolute;z-index:3;left:0;bottom:.35%;width:72%;min-width:0;border-color:rgba(23,105,210,.24);box-shadow:0 24px 56px -26px rgba(0,72,140,.58)}
.hazop-recognition-card .product-window-bar{height:38px;padding-inline:.75rem;background:linear-gradient(180deg,#fff,#F0F7FC)}
.hazop-recognition-card .window-label{color:var(--gl-blue);font-weight:600}
.hazop-analysis-bridge{position:absolute;z-index:4;right:1.5%;bottom:8%;width:26%;display:flex;align-items:center;gap:.5rem;padding:.72rem .75rem;border:1px solid rgba(23,105,210,.17);border-radius:13px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 18px 38px -25px rgba(0,72,140,.55);backdrop-filter:blur(12px)}
.hazop-analysis-bridge span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:linear-gradient(135deg,var(--gl-blue),var(--blue-3));color:#fff;font-size:1rem;font-weight:700}
.hazop-analysis-bridge b{font-size:.67rem;line-height:1.45}

/* Keep the handoff note readable while the recognition card scales down. */
@media (max-width:1180px) and (min-width:761px){
  .hazop-recognition-card{width:76%}
  .hazop-analysis-bridge{right:1%;width:27%;padding:.62rem}
  .hazop-analysis-bridge b{font-size:.62rem}
}
.hazop-hero-pid-canvas{aspect-ratio:16/8.55}
.hazop-hero-pid-canvas>img{left:-92.99%;top:-142.67%;width:272.78%;height:auto;max-width:none;object-fit:initial;transform:none;filter:contrast(1.04) saturate(.78);opacity:.96}
.hazop-recognition-card .hazop-recognition-status{left:.65rem;top:.62rem;padding:.5rem .62rem}
.hazop-recognition-card .hazop-recognition-status b{font-size:.62rem}
.hazop-recognition-card .hazop-recognition-status small{font-size:.5rem}

/* AI-HAZOP P&ID recognition — two input paths and structured-data handoff */
.pid-capability-section{padding-block:clamp(4rem,7vw,6.5rem)!important;background:linear-gradient(180deg,rgba(222,239,252,.58),rgba(255,255,255,.5))}
.pid-capability-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pid-capability-copy h2{max-width:none;margin-bottom:1rem;font-size:clamp(1.85rem,3.3vw,3rem)}
.pid-capability-copy>p{color:var(--muted-2);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.8}
.pid-input-paths{display:grid;gap:.75rem;margin:1.25rem 0}
.pid-input-paths article{padding:1rem 1.05rem;border:1px solid rgba(23,105,210,.14);border-radius:15px;background:rgba(255,255,255,.74)}
.pid-input-paths strong{display:block;margin-bottom:.3rem;color:var(--product-ink);font-family:var(--font-display);font-size:.9rem}
.pid-input-paths span{display:block;color:var(--muted-2);font-size:.82rem;line-height:1.65}
.pid-capability-output{padding-left:1rem;border-left:3px solid var(--product-accent)}
.pid-recognition-visual{overflow:hidden;border:1px solid rgba(255,255,255,.95);border-radius:24px;background:#fff;box-shadow:0 28px 65px -34px rgba(0,92,151,.5)}
.pid-recognition-canvas{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff}
.pid-recognition-canvas>img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(.82)}
.pid-rec-box{--box-color:#1769D2;position:absolute;border:3px dashed var(--box-color);border-radius:4px;background:color-mix(in srgb,var(--box-color) 7%,transparent);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.pid-rec-box i{position:absolute;left:-3px;top:-25px;padding:3px 7px;border-radius:4px 4px 4px 0;background:var(--box-color);color:#fff;font-family:var(--font-mono);font-size:.58rem;font-style:normal;white-space:nowrap}
.pid-rec-box.box-exchanger{--box-color:#28A928;left:52%;top:13%;width:30%;height:12%}
.pid-rec-box.box-vessel{left:45%;top:39%;width:7.5%;height:41%;border-radius:14px}
.pid-rec-box.box-instrument-one{--box-color:#FF8A3D;left:17%;top:45%;width:5.5%;height:10.5%}
.pid-rec-box.box-instrument-two{--box-color:#FF8A3D;left:22%;top:57%;width:5.5%;height:10.5%}
.pid-recognition-status{position:absolute;left:1rem;top:1rem;display:flex;align-items:center;gap:.45rem;padding:.55rem .7rem;border-radius:10px;background:rgba(255,255,255,.92);color:var(--product-ink);font-family:var(--font-display);font-size:.72rem;font-weight:600;box-shadow:0 12px 28px -18px rgba(14,27,44,.7)}
.pid-recognition-status i{width:7px;height:7px;border-radius:50%;background:var(--product-accent);box-shadow:0 0 0 4px var(--product-tint)}
.pid-recognition-visual figcaption{padding:.65rem 1rem;color:var(--muted);font-family:var(--font-mono);font-size:.66rem;text-align:right}

/* Pain points */
.pain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:pain}
.pain-item{
  position:relative;display:flex;flex-direction:column;padding:1.6rem;border:1px solid rgba(255,255,255,.95);border-radius:24px;
  background:rgba(255,255,255,.66);box-shadow:0 20px 44px -32px rgba(14,27,44,.38);counter-increment:pain;
}
.pain-item::before{
  content:"0" counter(pain);position:absolute;top:calc(1.6rem + 23px);right:1.6rem;transform:translateY(-50%);
  color:var(--product-accent-2);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;opacity:.75;
}
.pain-icon{
  width:46px;height:46px;display:grid;place-items:center;margin-bottom:1.25rem;flex:0 0 auto;
  border-radius:13px;
  background:linear-gradient(135deg,var(--pain-icon-from,var(--gl-blue)),var(--pain-icon-to,var(--blue-3)));
  color:#fff;box-shadow:0 12px 24px -16px var(--pain-icon-shadow,rgba(0,92,151,.6));
}
.pain-icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pain-item h3{margin-bottom:.6rem;font-size:1.18rem;line-height:1.4}
.pain-item p{margin-top:0;color:var(--muted-2);font-size:.9rem;line-height:1.75;text-wrap:pretty}

/* Scenarios */
.scenario-stack{display:grid;gap:1rem}
.scenario-item{
  display:grid;grid-template-columns:14rem minmax(0,1fr);gap:clamp(1rem,1.8vw,1.5rem);
  align-items:center;padding:clamp(1.3rem,2.2vw,1.6rem) clamp(1.3rem,2.4vw,1.6rem);border:1px solid var(--product-line);border-radius:24px;
  background:linear-gradient(120deg,var(--product-tint),rgba(255,255,255,.72) 42%);
}
.scenario-head{min-width:0;padding-right:.35rem}
.scenario-label{display:flex;align-items:center;gap:.7rem;color:var(--product-ink);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;white-space:nowrap}
.scenario-label i{width:10px;height:10px;border:3px solid var(--product-accent-2);border-radius:50%}
.scenario-item h3{margin:.5rem 0 0;font-size:1.05rem;line-height:1.3;white-space:nowrap}
.scenario-answer{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:1.1rem}
.scenario-answer div{padding-left:.85rem;border-left:1px solid var(--product-line)}
.scenario-answer dt{margin-bottom:.4rem;color:var(--muted);font-size:.76rem;font-weight:600;letter-spacing:.08em}
.scenario-answer dd{color:var(--body);font-size:.78rem;line-height:1.55;white-space:nowrap}

/* Journey */
.journey-shell{
  overflow:hidden;padding:clamp(1.3rem,2.8vw,2rem);border:1px solid rgba(255,255,255,.9);border-radius:30px;
  background:rgba(255,255,255,.64);box-shadow:var(--shadow-glass);backdrop-filter:blur(16px);
}
.journey-list{display:grid;grid-template-columns:repeat(var(--step-count,6),minmax(0,1fr));list-style:none}
.journey-step{position:relative;min-width:0;padding:0 .85rem 1rem}
.journey-step:not(:last-child)::after{
  content:"";position:absolute;z-index:1;top:22px;left:calc(50% + .85rem + 22px);
  width:26px;height:10px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--product-accent) 20%,transparent),color-mix(in srgb,var(--product-accent) 55%,transparent) 45%,var(--product-accent) 100%);
  -webkit-mask:var(--journey-chevrons) center/100% 100% no-repeat;
  mask:var(--journey-chevrons) center/100% 100% no-repeat;
}
.journey-index{
  position:relative;z-index:1;width:44px;height:44px;display:grid;place-items:center;margin-bottom:1.15rem;
  border:1px solid var(--product-line);border-radius:14px;background:#fff;color:var(--product-ink);
  font-family:var(--font-mono);font-size:.7rem;box-shadow:0 10px 22px -16px var(--product-accent);
}
.journey-step h3{min-height:2.55em;margin-bottom:.55rem;font-size:1rem;line-height:1.35}
.journey-step p{min-height:3.4em;color:var(--muted-2);font-size:.82rem;line-height:1.7}
.journey-output{
  display:flex;align-items:center;gap:.8rem;margin-top:1rem;padding:1rem 1.15rem;border-radius:16px;
  background:var(--product-tint);color:var(--product-ink);font-size:.88rem;
}
.journey-output strong{color:var(--ink)}

/* Value */
.product-value-panel{
  position:relative;overflow:hidden;padding:clamp(2rem,5vw,4.25rem);border-radius:32px;
  background:
    radial-gradient(700px 360px at 100% 0%,color-mix(in srgb,var(--product-accent-2) 30%,transparent),transparent 65%),
    linear-gradient(145deg,#0b3453,#0b4a72);color:#fff;box-shadow:0 38px 84px -42px rgba(10,52,83,.72);
}
.product-value-panel .product-kicker{color:rgba(255,255,255,.72)}
.product-value-panel .product-kicker::before{background:rgba(255,255,255,.58)}
.product-value-panel h2{max-width:none;margin-bottom:2.2rem;color:#fff;font-size:clamp(1.85rem,3.3vw,3rem)}
.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}
.value-item{padding:1.25rem;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.value-item span{display:block;margin-bottom:1.1rem;color:rgba(255,255,255,.55);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em}
.value-item h3{margin-bottom:.55rem;color:#fff;font-size:1.02rem}.value-item p{color:rgba(255,255,255,.72);font-size:.84rem;line-height:1.7}

/* Decision information */
.decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.decision-item{
  min-height:235px;display:flex;flex-direction:column;padding:1.55rem;border:1px solid rgba(255,255,255,.95);border-radius:22px;
  background:rgba(255,255,255,.7);box-shadow:0 18px 42px -34px rgba(14,27,44,.42);
}
.decision-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.decision-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:var(--product-tint);color:var(--product-ink)}
.decision-item h3{margin-bottom:.65rem;font-size:1.14rem}.decision-item p{flex:1;color:var(--muted-2);font-size:.9rem;line-height:1.75}
.decision-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.decision-chip,.confirm-chip{
  display:inline-flex;align-items:center;padding:.3rem .6rem;border-radius:999px;
  font-family:var(--font-mono);font-size:.61rem;line-height:1.35;
}
.decision-chip{border:1px solid var(--product-line);background:var(--product-tint);color:var(--product-ink)}
.confirm-chip{border:1px dashed rgba(183,124,19,.42);background:rgba(217,152,42,.1);color:#94620d}

/* FAQ and CTA accents */
.product-page .faq-item[open]{border-color:var(--product-line)}
.product-page .faq-item summary::before{
  width:24px;
  height:21px;
  border-radius:0;
  background:linear-gradient(135deg,var(--gl-blue),var(--blue-3));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M7.5 0h9c1.2 0 1.8.45 2.4 1.5l4.2 7.5c.6 1.05.6 1.95 0 3l-4.2 7.5c-.6 1.05-1.2 1.5-2.4 1.5h-9c-1.2 0-1.8-.45-2.4-1.5L.9 12c-.6-1.05-.6-1.95 0-3l4.2-7.5C5.7.45 6.3 0 7.5 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M7.5 0h9c1.2 0 1.8.45 2.4 1.5l4.2 7.5c.6 1.05.6 1.95 0 3l-4.2 7.5c-.6 1.05-1.2 1.5-2.4 1.5h-9c-1.2 0-1.8-.45-2.4-1.5L.9 12c-.6-1.05-.6-1.95 0-3l4.2-7.5C5.7.45 6.3 0 7.5 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.product-page .faq-item summary::after{color:var(--gl-blue)}
.product-page .faq-item summary::before{-webkit-mask:var(--rounded-hex-mask) center/100% 100% no-repeat;mask:var(--rounded-hex-mask) center/100% 100% no-repeat}
.product-page .faq-item summary:focus-visible,
.product-page a:focus-visible,.product-page button:focus-visible{outline:3px solid rgba(63,165,248,.38);outline-offset:3px}
.product-page .product-cta{margin-top:0}
.product-page .product-cta .cta{
  background:
    radial-gradient(650px 300px at 18% 0%,rgba(63,165,248,.3),transparent 68%),
    radial-gradient(520px 320px at 90% 100%,rgba(45,152,138,.23),transparent 68%),
    linear-gradient(135deg,#0B426C,#075B92);
}
.product-page .product-cta .cta .btn-primary{background:#fff;color:var(--gl-blue);box-shadow:0 14px 34px -14px rgba(0,0,0,.2)}
.product-page .product-cta .cta .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.product-page .footer-grid{grid-template-columns:1.45fr 1.2fr 1fr 1fr}

@container (max-width:560px){
  .mockup-note{position:static;max-width:none;margin:.75rem .25rem .1rem}
}
@media(max-width:1060px){
  .product-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .product-hero-copy{max-width:760px}
  .product-hero h1{max-width:16ch}
  .product-hero-visual{width:min(100%,800px);margin-inline:auto}
  .product-mockup{transform:none}
  .hazop-composite-mockup{width:min(100%,760px);margin-inline:auto}
  .pid-capability-grid{grid-template-columns:1fr}.pid-capability-copy{max-width:760px}.pid-recognition-visual{width:min(100%,820px);margin-inline:auto}
  .journey-list{grid-template-columns:repeat(3,1fr);gap:1.2rem 0}
  .journey-step:nth-child(3n)::after,.journey-step:nth-child(3n)::before{display:none}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .product-page .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1180px) and (min-width:761px){
  .product-hero h1{font-size:clamp(2.25rem,4.1vw,3.45rem)}
  .product-page .product-section-head h2,.pid-capability-copy h2{font-size:clamp(1.85rem,3.2vw,2.65rem)}
  .scenario-item h3,.scenario-answer dd{white-space:normal}
}
@media(max-width:760px){
  .product-page .section{padding-block:clamp(3.75rem,14vw,5rem)}
  .product-hero{padding-block:1.6rem 4.5rem}
  .product-hero h1{font-size:clamp(2.2rem,11.5vw,3.35rem)}
  .pain-grid,.decision-grid{grid-template-columns:1fr}
  .pain-item{min-height:0}.pain-item::before{margin-bottom:1.35rem}
  .scenario-item{grid-template-columns:1fr;gap:1.25rem;align-items:start}
  .scenario-answer{grid-template-columns:1fr}
  .scenario-answer dd{white-space:normal}
  .journey-list{grid-template-columns:1fr;gap:0}
  .journey-step{display:grid;grid-template-columns:48px 1fr;column-gap:1rem;padding:0 0 1.4rem}
  .journey-step:not(:last-child)::after,.journey-step:nth-child(3n):not(:last-child)::after{
    display:block;top:auto;bottom:.5rem;left:22px;right:auto;width:10px;height:26px;transform:translate(-50%,0);
    background:linear-gradient(180deg,color-mix(in srgb,var(--product-accent) 20%,transparent),color-mix(in srgb,var(--product-accent) 55%,transparent) 45%,var(--product-accent) 100%);
    -webkit-mask:var(--journey-chevrons-v) center/100% 100% no-repeat;
    mask:var(--journey-chevrons-v) center/100% 100% no-repeat;
  }
  .journey-index{grid-row:1 / span 2;margin:0}
  .journey-step h3{min-height:0;margin:.2rem 0 .35rem}
  .journey-output{align-items:flex-start}
  .value-grid{grid-template-columns:1fr}
  .product-screen{padding:.2rem}
}
@media(max-width:540px){
  .product-page .section{padding-block:3.6rem}
  .product-hero{padding-block:1.3rem 4rem}
  .product-hero-grid{gap:2rem}
  .product-hero .hero-actions{display:grid;grid-template-columns:1fr}
  .product-hero .btn{width:100%}
  .product-mockup{padding:.45rem;border-radius:20px}
  .product-window{border-radius:15px}.product-window-bar{height:36px;padding-inline:.75rem}
  .window-status{display:none}
  .product-section-head h2{font-size:clamp(1.8rem,9vw,2.35rem)}
  .scenario-answer div{padding-left:.85rem}
  .product-value-panel{border-radius:24px}
  .product-page .faq-item summary::before{width:22px;height:19px}
  .product-page .footer-grid{grid-template-columns:1fr}
  .pid-rec-box i{display:none}.pid-rec-box{border-width:2px}.pid-recognition-status{left:.6rem;top:.6rem}
  .hazop-input-modes{grid-template-columns:1fr}
  .product-hero h1 .product-hero-title-line{font-size:.63em}
    .hazop-detection i{font-size:.42rem}
  .hazop-recognition-status{left:.55rem;top:.55rem;padding:.5rem .6rem}.hazop-recognition-status small{display:none}
  .hazop-hero-handoff{grid-template-columns:repeat(2,1fr);padding:.5rem}.hazop-hero-handoff li:nth-child(2)::after{display:none}
  .hazop-composite-stage{aspect-ratio:1.05}
  .hazop-software-window{top:2%;width:100%}
  .hazop-software-window .product-window-bar{height:34px}
   .hazop-recognition-card{bottom:0;width:78%}
  .hazop-recognition-card .product-window-bar{height:32px}
  .hazop-analysis-bridge{right:1%;bottom:5%;width:26%;padding:.5rem;flex-direction:column;align-items:flex-start}
  .hazop-analysis-bridge span{width:25px;height:25px}
  .hazop-analysis-bridge b{font-size:.55rem}
}
@media(prefers-reduced-motion:reduce){
  .product-mockup,.product-mockup:hover{transform:none}
  .hazop-scan-beam{animation:none;opacity:.6}
  .hazop-detection{animation:none;opacity:1;transform:none}
}

@media(min-width:761px) and (max-height:860px){
  .product-hero h1{font-size:clamp(2.2rem,min(4.1vw,6.4vh),3.2rem)}
  .product-page .product-section-head h2,.pid-capability-copy h2,.product-value-panel h2{font-size:clamp(1.8rem,min(3.2vw,4.9vh),2.5rem)}
}
@media(min-width:1061px) and (max-height:860px){
  .product-hazop .product-hero{display:flex;align-items:center;min-height:calc(100svh - 76px);padding-block:clamp(.9rem,2vh,1.25rem)}
  .product-hazop .product-hero-grid{width:min(100% - 2rem,var(--maxw));gap:clamp(1.6rem,3vw,3rem)}
}
@media(min-width:761px) and (max-height:740px){
  .product-hero h1{font-size:clamp(2.05rem,min(3.7vw,6vh),2.85rem)}
  .product-page .product-section-head h2,.pid-capability-copy h2,.product-value-panel h2{font-size:clamp(1.7rem,min(2.9vw,4.5vh),2.25rem)}
}
@media(min-width:1061px) and (max-height:740px){
  .product-hazop .product-hero{padding-block:.65rem}
  .product-hazop .product-hero-grid{gap:1.6rem}
  .product-hazop .product-hero .crumb{margin-bottom:.55rem;font-size:.68rem}
  .product-hazop .product-hero .hero-tag{margin-bottom:.55rem;padding:.32rem .75rem;font-size:.68rem}
  .product-hazop .product-hero h1{margin-bottom:.55rem}
  .product-page .product-lede,
  .product-page .product-section-head p,
  .product-page .pid-capability-copy>p,
  .product-page .product-cta .cta>p{font-size:.9rem}
  .product-hazop .product-lede{line-height:1.55}
  .product-hazop .hazop-input-modes{gap:.5rem;margin-top:.65rem}
  .product-hazop .hazop-input-modes article{gap:.55rem;padding:.58rem .65rem;border-radius:12px}
  .product-hazop .hazop-mode-icon{width:30px;height:30px;border-radius:9px}
  .product-hazop .hazop-input-modes small{margin-bottom:.1rem;font-size:.5rem}
  .product-hazop .hazop-input-modes strong{font-size:.72rem;line-height:1.25}
  .product-hazop .hazop-input-modes p{margin-top:.1rem;font-size:.61rem;line-height:1.35}
  .product-hazop .product-boundary{margin-top:.6rem;padding:.5rem .7rem;font-size:.75rem;line-height:1.4}
  .product-hazop .product-hero .hero-actions{margin-top:.7rem}
  .product-hazop .product-hero .btn{min-height:44px;padding:.7rem 1.25rem;font-size:.92rem}
  .product-hazop .hazop-composite-mockup{width:min(100%,590px);margin-inline:auto}
}