/* Page-local component. Existing homepage/product/resource styles are unchanged. */
body.hpt-applications-template .hpt-product.hpt-applications { overflow: visible; background: #02050a; }
.hpt-applications { --application-line: rgba(255,255,255,.12); }
.hpt-applications :where(a,button):focus-visible { outline: 2px solid #2997ff; outline-offset: 5px; }
.hpt-applications .application-skip-link { position: fixed; left: 20px; top: -80px; z-index: 100; padding: 12px 20px; background: #0071e3; border-radius: 12px; }
.hpt-applications .application-skip-link:focus { top: 70px; }
.hpt-applications .application-story { position: relative; background: #02050a; }
.hpt-applications.is-animated .application-story { height: 340svh; }
.hpt-applications .application-stage { position: sticky; top: 56px; height: calc(100svh - 56px); min-height: 580px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 72% 46%, #11315b70, transparent 49%), linear-gradient(140deg, #030a16, #02050a 65%); }
.hpt-applications .application-grid { position: absolute; z-index: -1; inset: 0; opacity: .22; background-image: linear-gradient(#a6d8ff20 1px, transparent 1px), linear-gradient(90deg, #a6d8ff20 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 70% 55%, #000, transparent 65%); }
.hpt-applications .application-stage-inner { width: min(1120px, calc(100% - 48px)); height: calc(100% - 106px); margin: auto; display: grid; grid-template-columns: 48% 52%; align-items: center; gap: 0; }
.hpt-applications .application-copy { position: relative; z-index: 4; }
.hpt-applications.is-animated .application-copy { height: 340px; }
.hpt-applications.is-animated .application-chapter { position: absolute; inset: 0; transition: opacity .28s ease, transform .28s ease; }
.hpt-applications .application-chapter:not(.is-active) { display: none; }
.hpt-applications.is-animated .application-chapter:not(.is-active) { display: block; visibility: hidden; opacity: 0; transform: translateY(15px); pointer-events: none; }
.hpt-applications .application-kicker { font-size: 12px; font-weight: 550; letter-spacing: .14em; line-height: 1.6; color: #99d7ff; }
.hpt-applications .application-chapter :where(h1,h2) { margin-top: 22px; font-size: clamp(40px, 4.6vw, 65px); font-weight: 620; line-height: 1.18; letter-spacing: -.045em; }
.hpt-applications .application-chapter :where(h1,h2) span, .hpt-applications .application-section-heading h2 span { color: #a9b8d1; }
.hpt-applications .application-chapter > p:not(.application-kicker) { margin-top: 26px; color: #b6becb; font-size: 17px; line-height: 1.85; }
.hpt-applications .application-text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 14px; color: #d4eaff; }
.hpt-applications .application-chapter > a { margin-top: 30px; }
.hpt-applications .application-text-link:hover { color: #2997ff; }
.hpt-applications :where(.application-text-link,.application-primary) > span { font-family: Arial, sans-serif; font-variant-emoji: text; }
.hpt-applications .application-text-link > span { font-size: 0; }
.hpt-applications .application-text-link > span::after { content: '\2192'; font-size: 16px; }
.hpt-applications .application-visual { --module-opacity: 1; --diagram-opacity: 0; --array-opacity: 0; --module-angle: -8deg; --module-yaw: -24deg; --module-scale: 1; --layer-spread: 0; --layer-cover-spread: 0; --layer-top-spread: 0; --light-strength: 0; --light-travel: 0; --array-spread: 0; --array-tiles: 0; --array-scale: .94; position: relative; height: min(520px, 69svh); min-height: 360px; perspective: 1200px; }
.hpt-applications .application-halo { position: absolute; inset: 8% -10%; background: radial-gradient(ellipse, #318dff2b, #6265d513 45%, transparent 70%); filter: blur(25px); }
.hpt-applications .application-module { position: absolute; inset: 3% 0 10%; display: grid; place-items: center; opacity: var(--module-opacity); perspective: 1100px; pointer-events: none; }
.hpt-applications .application-module-object { position: relative; height: 100%; aspect-ratio: 2/3; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(var(--module-yaw)) rotateZ(var(--module-angle)) scale(var(--module-scale)); will-change: transform; }
.hpt-applications .application-module-face { position: absolute; inset: 0; backface-visibility: hidden; border: 2px solid #7f9fb9; box-shadow: 0 0 22px #5793df25; background: #071628; }
.hpt-applications .application-module-front { transform: translateZ(4px); }
.hpt-applications .application-module-front img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: fill; }
.hpt-applications .application-module-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 20%,#bdceff1c 47%,transparent 58%); pointer-events: none; }
.hpt-applications .application-module-back { transform: rotateY(180deg) translateZ(4px); background: repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 34px),linear-gradient(135deg,#253d5a,#0c1b2e 65%,#312d50); }
.hpt-applications .application-back-spine { position: absolute; top: 12%; bottom: 12%; left: 48%; width: 4%; background: linear-gradient(90deg,#16283e,#6383a4,#16283e); border: 1px solid #85accc55; }
.hpt-applications .application-back-port { position: absolute; width: 18%; height: 8%; top: 45%; left: 41%; border-radius: 5px; border: 1px solid #75a6ca77; background: #091526; box-shadow: 0 0 24px #4068a62b; }
.hpt-applications .application-module-edge { position: absolute; background: linear-gradient(90deg,#172c42,#b5d2ed,#283950); backface-visibility: hidden; }
.hpt-applications .application-module-left { left: -4px; top: 0; width: 8px; height: 100%; transform: rotateY(-90deg); }
.hpt-applications .application-module-right { left: calc(100% - 4px); top: 0; width: 8px; height: 100%; transform: rotateY(90deg); }
.hpt-applications .application-module-top { left: 0; top: -4px; width: 100%; height: 8px; transform: rotateX(90deg); }
.hpt-applications .application-module-bottom { left: 0; top: calc(100% - 4px); width: 100%; height: 8px; transform: rotateX(-90deg); }
.hpt-applications :where(.application-layer-group,.application-array-group) { position: absolute; inset: 0 0 8%; pointer-events: none; perspective: 1100px; }
.hpt-applications .application-layer-group { opacity: var(--diagram-opacity); }
.hpt-applications .application-layer-scene { position: absolute; width: 260px; height: 320px; left: 50%; top: 47%; transform: translate(-50%,-50%) rotateX(53deg) rotateZ(-28deg); transform-style: preserve-3d; }
.hpt-applications .application-layer { position: absolute; inset: 0; border: 1px solid #9dc9f5aa; border-radius: 5px; box-shadow: 0 10px 35px #0005, inset 0 0 18px #8bc5ff15; }
.hpt-applications .application-layer::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg,#c7e4ff13,transparent 55%); }
.hpt-applications .application-layer-base { background: linear-gradient(145deg,#33465d,#101e30); border-color: #7f9cb5; transform: translateZ(calc(-8px - var(--layer-spread) * 80px)); box-shadow: 0 8px 0 #16283b, 0 22px 45px #0007; }
.hpt-applications .application-layer-bottom { background: repeating-linear-gradient(0deg,transparent 0 24px,#9ed5ff40 24px 25px),repeating-linear-gradient(90deg,transparent 0 38px,#9ed5ff40 38px 39px),linear-gradient(145deg,#174f7c,#09233c); transform: translateZ(calc(-4px - var(--layer-spread) * 28px)); box-shadow: 0 4px 0 #071b30, 0 12px 35px #0005; }
.hpt-applications .application-layer-top { overflow: hidden; background: #242044; border-color: #b5a4f3cc; transform: translateZ(calc(var(--layer-top-spread) * 62px)); box-shadow: 0 4px 0 #312450, 0 14px 38px #0006; }
.hpt-applications .application-layer-top img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: fill; }
.hpt-applications .application-layer-cover { background: linear-gradient(125deg,#d5efff18,#85d2ff05 40%,#a8aeff16); border-color: #bce8ffb3; transform: translateZ(calc(4px + var(--layer-top-spread) * 62px + var(--layer-cover-spread) * 75px)); box-shadow: inset 0 0 40px #9abfff0a, 0 0 14px #9cecff18; }
.hpt-applications .application-rays { position: absolute; inset: 0; transform-style: preserve-3d; opacity: var(--light-strength); }
.hpt-applications .application-rays i { position: absolute; top: 34%; left: 26%; width: 2px; height: calc(65px + var(--layer-spread) * 220px); transform-origin: 50% 0; transform: translateZ(calc(60px + var(--layer-spread) * 155px)) rotateX(-90deg); background: linear-gradient(#bfeaffbb,#b5aeff77 47%,#4ca5ff44 85%,transparent); box-shadow: 0 0 12px #7dbaff80; }
.hpt-applications .application-rays i:nth-child(2) { left: 50%; top: 49%; }
.hpt-applications .application-rays i:nth-child(3) { left: 74%; top: 64%; }
.hpt-applications .application-rays i::before { content: ''; position: absolute; left: -2px; width: 6px; height: 30%; top: calc(var(--light-travel) * 65%); background: linear-gradient(transparent,#e0f7ffcc,transparent); box-shadow: 0 0 18px #90caff66; }
.hpt-applications .application-layer-legend { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 24px; color: #aebbce; font-size: 10px; }
.hpt-applications .application-layer-legend span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #b3a2ec; }
.hpt-applications .application-layer-legend span:last-child::before { background: #69b5f1; }
.hpt-applications .application-array-group { opacity: var(--array-opacity); }
.hpt-applications .application-array-glow { position: absolute; inset: 20% 0 2%; background: radial-gradient(ellipse,#5487ff25,transparent 66%); transform: scale(calc(.4 + var(--array-spread) * .6)); }
.hpt-applications .application-array-scene { position: absolute; width: 100px; height: 150px; left: 50%; top: 47%; transform: translate(-50%,-50%) rotateX(50deg) rotateZ(-25deg) scale(calc(var(--array-scale) * (2.2 - var(--array-spread) * 1.2))); transform-style: preserve-3d; }
.hpt-applications .application-array-tile { position: absolute; inset: 0; opacity: var(--array-tiles); transform: translate3d(calc(var(--tile-x) * var(--array-spread) * 116px),calc(var(--tile-y) * var(--array-spread) * 166px),calc((1 - var(--array-spread)) * -45px)); border: 2px solid #92b4ce; border-radius: 3px; background: #0a2037; box-shadow: 0 4px 0 #263a50, 0 14px 28px #0008, 0 0 14px #589dff14; }
.hpt-applications .application-array-tile.is-center { opacity: 1; transform: translateZ(0); }
.hpt-applications .application-array-tile img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: fill; border-radius: 1px; }
.hpt-applications .application-array-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent,#afd8ff15 40%,transparent 65%); }
.hpt-applications .application-visual-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #8e9fb7; font-size: 11px; letter-spacing: .06em; }
.hpt-applications .application-story-bottom { position: absolute; bottom: 28px; left: max(24px, calc((100vw - 1120px)/2)); right: max(24px, calc((100vw - 1120px)/2)); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid var(--application-line); }
.hpt-applications .application-chapters { display: none; gap: 26px; }
.hpt-applications.is-animated .application-chapters { display: flex; }
.hpt-applications .application-chapters button { min-height: 44px; font-size: 12px; color: #77869e; background: none; border: 0; padding: 0; transition: color .2s; }
.hpt-applications .application-chapters button span { font-family: 'Geist Mono', monospace; margin-right: 8px; font-size: 10px; }
.hpt-applications .application-chapters button[aria-current] { color: #cae6ff; }
.hpt-applications .application-scroll-hint { display: inline-flex; align-items: center; gap: 22px; font-size: 11px; color: #9aa8bd; min-height: 44px; }
.hpt-applications .application-story-track { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #fff1; }
.hpt-applications .application-story-track span { display: block; height: 100%; background: linear-gradient(90deg, #2997ff, #9cecff, #8d7cff); transform-origin: left; transform: scaleX(0); }
.hpt-applications .application-scenes { padding: 110px max(24px, calc((100vw - 1120px)/2)) 100px; background: radial-gradient(ellipse at 85% 50%, #4050b514, transparent 48%), #02050a; scroll-margin-top: 85px; }
.hpt-applications .application-section-heading { max-width: 750px; }
.hpt-applications .application-section-heading h2 { margin-top: 20px; font-size: clamp(36px,4.4vw,58px); font-weight: 610; line-height: 1.2; letter-spacing: -.045em; }
.hpt-applications .application-section-heading > p:last-child { color: #a1a9b7; margin-top: 26px; font-size: 16px; line-height: 1.8; }
.hpt-applications .application-card-grid { margin-top: 58px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.hpt-applications .application-card { overflow: hidden; border: 1px solid var(--application-line); border-radius: 24px; background: linear-gradient(150deg, #0a1321, #05090f); }
.hpt-applications .application-card-illustration { height: 230px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, #2b7ac33b, transparent 70%), #071221; border-bottom: 1px solid #fff1; }
.hpt-applications .application-card-illustration > img { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; object-position: center; }
.hpt-applications :is(.application-scene-facade,.application-scene-offgrid) > img { object-position: center top; }
.hpt-applications .application-card-illustration::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 60%,#02071399); pointer-events: none; }
.hpt-applications .application-card-illustration > span { position: absolute; z-index: 1; bottom: 20px; right: 24px; color: #c0d7ef; font: 12px 'Geist Mono', monospace; }
.hpt-applications .application-scene-label { position: absolute; z-index: 1; bottom: 20px; left: 20px; color: #c1d6e9; font-size: 10px; line-height: 1.5; letter-spacing: .06em; }
.hpt-applications .application-card-copy { padding: 28px 26px 30px; }
.hpt-applications .application-card-copy .application-kicker { font-size: 10px; }
.hpt-applications .application-card h3 { margin-top: 16px; font-size: 23px; font-weight: 580; line-height: 1.45; letter-spacing: -.035em; }
.hpt-applications .application-card-copy > p:not(.application-kicker) { margin-top: 18px; color: #9ea9bb; font-size: 13px; line-height: 1.9; min-height: 75px; }
.hpt-applications .application-card-copy a { margin-top: 22px; font-size: 12px; }
.hpt-applications .application-note { margin-top: 28px; color: #8995a8; font-size: 11px; line-height: 1.9; max-width: 920px; }
.hpt-applications .application-next { padding: 110px 24px 120px; text-align: center; background: radial-gradient(ellipse at center, #2346a32b, transparent 62%),#02050a; border-top: 1px solid #ffffff0b; }
.hpt-applications .application-next h2 { margin: 22px auto 36px; font-size: clamp(35px,4.8vw,65px); font-weight: 610; line-height: 1.25; letter-spacing: -.045em; }
.hpt-applications .application-next-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hpt-applications :where(.application-primary,.application-secondary) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 14px; gap: 22px; transition: background .2s, border-color .2s; }
.hpt-applications .application-primary { background: #0071e3; color: #fff; }
.hpt-applications .application-primary:hover { background: #087fe8; }
.hpt-applications .application-secondary { border: 1px solid #a8bfd355; color: #d8e6f7; }
.hpt-applications .application-secondary:hover { border-color: #2997ff; background: #2997ff0a; }
@media (max-width: 1000px) {
  .hpt-applications .application-visual { --array-scale: .8; }
  .hpt-applications .application-layer-scene { width: 235px; height: 290px; }
  .hpt-applications .application-chapter :where(h1,h2) { font-size: 43px; }
  .hpt-applications .application-card-grid { gap: 16px; }
  .hpt-applications .application-card-copy { padding: 24px 20px; }
  .hpt-applications .application-card h3 { font-size: 20px; }
}
@media (max-width: 720px) {
  .hpt-applications.is-animated .application-story { height: 290svh; }
  .hpt-applications .application-stage { min-height: 580px; }
  .hpt-applications .application-stage-inner { width: calc(100% - 40px); height: calc(100% - 100px); display: flex; flex-direction: column; align-items: stretch; padding-top: 30px; }
  .hpt-applications.is-animated .application-copy { height: 220px; flex: 0 0 220px; }
  .hpt-applications .application-chapter :where(h1,h2) { margin-top: 12px; font-size: clamp(30px,7vw,43px); line-height: 1.18; }
  .hpt-applications .application-kicker { font-size: 10px; }
  .hpt-applications .application-chapter > p:not(.application-kicker) { margin-top: 15px; font-size: 13px; line-height: 1.8; }
  .hpt-applications .application-chapter > a { margin-top: 10px; font-size: 12px; min-height: 38px; }
  .hpt-applications .application-primary { padding: 0 18px; }
  .hpt-applications .application-visual { flex: 1 1 auto; height: auto; min-height: 220px; max-height: 410px; }
  .hpt-applications .application-module { inset: 0 0 8%; }
  .hpt-applications .application-visual { --array-scale: .6; }
  .hpt-applications .application-layer-scene { width: 170px; height: 205px; top: 55%; transform: translate(-50%,-50%) rotateX(53deg) rotateZ(-28deg) scale3d(.76,.76,.76); }
  .hpt-applications .application-layer-legend { bottom: 8px; font-size: 9px; gap: 18px; }
  .hpt-applications .application-array-scene { top: 48%; }
  .hpt-applications .application-visual-caption { font-size: 9px; }
  .hpt-applications .application-story-bottom { left: 20px; right: 20px; bottom: 18px; padding-top: 10px; gap: 8px; }
  .hpt-applications .application-chapters { gap: 18px; }
  .hpt-applications .application-chapters button { font-size: 11px; }
  .hpt-applications .application-chapters button span { margin-right: 4px; font-size: 9px; }
  .hpt-applications .application-scroll-hint { gap: 0; }
  .hpt-applications .application-scroll-hint span:first-child { display: none; }
  .hpt-applications .application-scenes { padding: 75px 20px; }
  .hpt-applications .application-section-heading h2 { font-size: 36px; }
  .hpt-applications .application-section-heading > p:last-child { font-size: 14px; }
  .hpt-applications .application-card-grid { grid-template-columns: 1fr; margin-top: 36px; gap: 22px; }
  .hpt-applications .application-card-illustration { height: 215px; }
  .hpt-applications .application-card-copy { padding: 26px; }
  .hpt-applications .application-card h3 { font-size: 24px; }
  .hpt-applications .application-card-copy > p:not(.application-kicker) { min-height: 0; font-size: 14px; }
  .hpt-applications .application-next { padding: 75px 20px 85px; }
  .hpt-applications .application-next h2 { font-size: 35px; }
}
@media (max-width: 720px) and (max-height: 720px) {
  .hpt-applications .application-stage-inner { padding-top: 18px; }
  .hpt-applications.is-animated .application-copy { height: 200px; flex-basis: 200px; }
  .hpt-applications .application-chapter :where(h1,h2) { font-size: 30px; }
  .hpt-applications .application-visual { min-height: 210px; }
  .hpt-applications .application-layer-scene { width: 205px; height: 190px; transform: translate(-50%,-50%) rotateX(53deg) rotateZ(-28deg) scale3d(.54,.54,.54); }
}
@media (prefers-reduced-motion: reduce) {
  .hpt-applications .application-story { height: auto !important; }
  .hpt-applications .application-stage { position: relative; top: 56px; margin-bottom: 56px; }
  .hpt-applications .application-module-object { transform: none; }
  .hpt-applications * { scroll-behavior: auto !important; transition: none !important; }
}