/* Price explorer: isolated layouts using the site's shared typography and themes. */
.price-page [hidden]{display:none!important}
.price-breadcrumb{display:flex;gap:16px;align-items:center;font-size:12px;line-height:20px;color:var(--muted);padding-top:32px}
.price-breadcrumb a:hover{color:var(--primary-text)}
.price-hero{padding-bottom:0;border-bottom:1px solid var(--line)}
.price-hero-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;padding:64px 0 56px}
.price-hero-layout>.eyebrow,.price-hero .eyebrow{font-size:12px;line-height:20px;color:var(--primary-text)}
.price-hero h1{margin:24px 0}
.price-hero-layout>div>p{font-size:20px;line-height:32px;letter-spacing:-.01em;color:var(--muted);max-width:520px;margin-bottom:32px}
.price-hero-foot{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding:20px 0;font-size:12px;line-height:16px;color:var(--muted)}
.price-explorer{padding-top:72px;padding-bottom:80px;scroll-margin-top:100px}
.price-tools{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:48px;align-items:end;margin-bottom:32px}
.price-tools .eyebrow{font-size:12px;line-height:16px;color:var(--primary-text)}
.price-tools h2{margin-top:16px}
.price-search{min-width:0}
.price-search>label{display:block;font-size:12px;line-height:20px;margin-bottom:12px;font-weight:600}
.price-search>.catalog-search{position:relative;min-height:52px;margin:0}
.price-search svg{flex-shrink:0}
.price-search input{font:400 16px/24px var(--font);padding:0;border-radius:0}
.price-search input::placeholder{color:var(--muted)}
.price-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.price-search button{position:absolute;right:4px;top:calc(50% - 22px);width:44px;height:44px;font-size:24px;line-height:32px;color:var(--muted)}
.price-search>.catalog-search:has(button:not([hidden])) input{padding-right:40px}
.price-search>.catalog-search:has(button:not([hidden]))>.technical{display:none}
.price-search>p{font-size:12px;line-height:20px;color:var(--muted);margin-top:8px}
.price-categories{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:0;margin-bottom:32px}
.price-categories button{display:flex;align-items:center;gap:12px;padding:16px;font-size:12px;line-height:20px;color:var(--muted);min-height:52px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:background .2s,color .2s,border-color .2s}
.price-categories button>span{font-size:12px;line-height:16px;color:var(--muted);font-weight:400}
.price-categories button:hover,.price-categories button[aria-pressed=true]{background:var(--soft);color:var(--primary-text);border-bottom-color:var(--primary)}
.price-workbench{display:grid;grid-template-columns:236px minmax(0,1fr);gap:48px;align-items:start}
.price-product-index{position:sticky;top:112px;min-width:0;border-top:1px solid var(--line)}
.price-product-index>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 12px;font-size:12px;line-height:20px;font-weight:600;border-bottom:1px solid var(--line);cursor:pointer}
.price-product-index>summary::-webkit-details-marker{display:none}
.price-product-index>summary>.technical{font-size:12px;line-height:16px;color:var(--muted);font-weight:400}
.price-product-list{display:flex;flex-direction:column;max-height:calc(100dvh - 190px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:8px 0}
.price-product-button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px;text-align:left;font-size:12px;line-height:20px;color:var(--muted);border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.price-product-button>span:last-child{opacity:0;font-size:16px;line-height:20px;color:var(--primary-text)}
.price-product-button:hover,.price-product-button[aria-pressed=true]{background:var(--soft);color:var(--ink)}
.price-product-button[aria-pressed=true]{font-weight:600}
.price-product-button[aria-pressed=true]>span:last-child{opacity:1}
.price-results{min-width:0}
.price-panel{scroll-margin-top:112px;animation:price-panel-in .35s both}
.price-panel:not([hidden])~.price-panel:not([hidden]){border-top:1px solid var(--line);margin-top:64px;padding-top:40px}
.price-panel-heading{padding:4px 0 28px}
.price-panel-heading>.eyebrow{font-size:12px;line-height:16px;color:var(--primary-text);text-transform:uppercase}
.price-panel-heading h2{margin-top:16px;overflow-wrap:break-word}
.price-panel-links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:16px}
.price-panel-links .text-link{font-size:12px;line-height:20px;gap:16px;color:var(--primary-text)}
.price-table-section{margin-bottom:32px}
.price-table-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.price-table-heading h3{font-size:20px;line-height:28px;letter-spacing:-.015em;font-weight:600}
.price-table-heading>.technical{font-size:12px;line-height:16px;flex-shrink:0;color:var(--muted)}
.price-table-scroll{max-width:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;border-bottom:1px solid var(--line)}
.price-table-scroll:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.price-table-scroll table{width:100%;min-width:540px;border-collapse:collapse;text-align:left;table-layout:auto}
.price-table-scroll thead{background:var(--soft)}
.price-table-scroll th,.price-table-scroll td{padding:16px 12px;border-top:1px solid var(--line);vertical-align:top;font-size:12px;line-height:20px;letter-spacing:0;min-width:88px}
.price-table-scroll thead th{font-weight:600;color:var(--muted);font-size:12px;line-height:20px}
.price-table-scroll tbody th{font-weight:600;min-width:120px}
.price-table-scroll td{color:var(--muted);font-weight:400}
.price-table-scroll tbody tr{transition:background .2s}
.price-table-scroll tbody tr:hover{background:var(--soft)}
.price-table-scroll tbody tr.is-match{background:var(--soft);box-shadow:inset 2px 0 var(--primary)}
.price-table-scroll .price-value{color:var(--ink);font-weight:600;min-width:120px}
.price-cell-line{display:block;margin-top:4px}
.price-cell-line:first-child{margin-top:0}
.price-value .price-cell-line{white-space:nowrap}
.price-value .price-cell-line.price-term-label{font-size:12px;line-height:16px;color:var(--muted);font-weight:400;letter-spacing:.03em}
.price-value del{font-size:12px;line-height:20px;color:var(--muted);font-weight:400;display:block;text-decoration-thickness:1px}
.price-terms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.price-terms button{min-height:44px;font-size:12px;line-height:20px;padding:12px 16px;border:1px solid var(--line);color:var(--muted)}
.price-terms button:hover,.price-terms button[aria-pressed=true]{background:var(--soft);border-color:var(--primary);color:var(--primary-text)}
.price-table-note{font-size:12px;line-height:20px;color:var(--muted);margin:0 0 16px}
.price-scroll-hint{display:none;font-size:12px;line-height:16px;color:var(--muted);margin:0 0 12px}
.price-table-section.is-wide>.price-scroll-hint{display:block}
.price-empty{border-top:1px solid var(--line);padding:40px 0}
.price-empty h3{font-size:28px;line-height:36px;letter-spacing:-.02em}
.price-empty p{font-size:16px;line-height:28px;color:var(--muted);margin:16px 0 24px}
.price-empty .button{font-size:12px;line-height:20px}
.price-source{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:64px;padding-bottom:72px;border-top:1px solid var(--line);background:var(--soft)}
.price-source .eyebrow{font-size:12px;line-height:16px;color:var(--primary-text)}
.price-source h2{margin-top:20px}
.price-source p{font-size:16px;line-height:28px;color:var(--muted);margin-bottom:20px}
.price-source .text-link{font-size:12px;line-height:20px;color:var(--primary-text)}
.price-footer .footer-top p{font-size:12px;line-height:20px}
@keyframes price-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.price-hero-layout{gap:40px}.price-workbench{gap:24px;grid-template-columns:208px minmax(0,1fr)}.price-categories button{padding:16px 12px}}
@media(max-width:960px){.price-hero-layout{grid-template-columns:1fr;padding-top:48px;gap:40px}.price-hero-layout>div>p{font-size:16px;line-height:28px;max-width:560px}.price-tools{grid-template-columns:1fr;gap:24px}.price-search{max-width:560px}.price-workbench{grid-template-columns:1fr;gap:32px}.price-product-index{position:static}.price-product-index>summary{pointer-events:auto;cursor:pointer;padding:16px}.price-product-index>summary:after{content:'+';font-size:20px;line-height:24px;font-weight:400}.price-product-index[open]>summary:after{content:'−'}.price-product-index>summary>.technical{margin-left:auto}.price-product-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-height:300px}.price-product-button{border-bottom:1px solid var(--line);min-height:56px}.price-panel-heading{padding-top:0}.price-table-scroll table{min-width:600px}.price-source{gap:40px}.price-categories{overflow:auto;flex-wrap:nowrap}.price-categories button{white-space:nowrap;flex-shrink:0}}
@media(max-width:700px){.price-breadcrumb{padding-top:24px;font-size:12px;line-height:16px;gap:12px}.price-hero-layout{padding:40px 0 32px;gap:40px}.price-hero .eyebrow{font-size:12px;line-height:16px}.price-hero h1{margin:20px 0}.price-hero-layout>div>p{font-size:16px;line-height:28px;max-width:100%;margin-bottom:24px}.price-hero .button{font-size:12px;line-height:20px;min-height:48px}.price-hero-foot{flex-direction:column;gap:4px;padding:16px 0}.price-explorer{padding-top:48px;padding-bottom:40px}.price-tools{gap:24px;margin-bottom:24px}.price-tools h2{margin-top:12px}.price-search input{font-size:16px;line-height:24px;padding:0}.price-search>p{font-size:12px;line-height:20px}.price-categories{margin-bottom:24px}.price-categories button{padding:16px 12px;gap:8px}.price-product-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:280px}.price-product-button{padding:12px;font-size:12px;line-height:20px;gap:8px}.price-workbench{gap:28px}.price-panel-heading h2{font-size:var(--heading-two-size);line-height:var(--heading-two-leading);letter-spacing:var(--heading-two-tracking)}.price-panel-heading{padding-bottom:24px}.price-panel-links{gap:12px;margin-top:12px}.price-table-heading{padding:16px 0;gap:16px}.price-table-heading h3{font-size:20px;line-height:28px}.price-table-scroll th,.price-table-scroll td{padding:16px 12px;font-size:12px;line-height:20px}.price-table-section{margin-bottom:24px}.price-table-scroll table{min-width:560px}.price-terms{gap:8px}.price-terms button{padding:12px;font-size:12px;line-height:20px}.price-source{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px;gap:24px}.price-source h2{margin-top:16px}.price-source p{font-size:16px;line-height:28px}.price-empty{padding:24px 0}.price-empty h3{font-size:24px;line-height:32px}}
@media(max-width:375px){.price-product-button{padding:12px 8px}.price-terms button{padding:12px 10px}.price-table-heading h3{font-size:16px;line-height:24px}}
@media(max-width:700px){
  .price-panel:not([hidden])~.price-panel:not([hidden]){margin-top:48px;padding-top:32px}
  .price-table-section:not(.price-matrix) .price-table-scroll{overflow:visible}
  .price-table-section:not(.price-matrix) table{min-width:0;display:block}
  .price-table-section:not(.price-matrix) thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .price-table-section:not(.price-matrix) tbody{display:block}
  .price-table-section:not(.price-matrix) tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;border-top:1px solid var(--line);padding:24px 0}
  .price-table-section:not(.price-matrix) tbody th,.price-table-section:not(.price-matrix) tbody td{display:block;min-width:0;padding:0;border:0}
  .price-table-section:not(.price-matrix) tbody th{grid-column:1/-1;font-size:16px;line-height:24px;letter-spacing:-.01em}
  .price-table-section:not(.price-matrix) tbody td:before{content:attr(data-label);display:block;font-size:12px;line-height:16px;letter-spacing:.02em;color:var(--muted);font-weight:400;margin-bottom:8px}
  .price-table-section:not(.price-matrix) .price-value .price-cell-line{white-space:normal;font-size:16px;line-height:24px;overflow-wrap:anywhere}
  .price-table-section:not(.price-matrix) .price-spec:has(.price-order){grid-column:1/-1}
  .price-table-section:not(.price-matrix) .price-spec:has(.price-order):before{display:none}
  .price-matrix .price-table-scroll tbody th,.price-matrix .price-table-scroll thead th:first-child{position:sticky;left:0;background:var(--paper);z-index:1;max-width:120px;min-width:120px;box-shadow:1px 0 var(--line)}
  .price-matrix .price-table-scroll thead th:first-child{background:var(--soft);z-index:2}
}
@media(prefers-reduced-motion:reduce){.price-page *,.price-page *:before,.price-page *:after{animation:none!important;transition:none!important}}
/* Category bar stays under the header across the explorer; the product index stacks below it. */
.price-categories{position:sticky;top:var(--price-header-h,88px);z-index:20;background:var(--paper)}
.price-product-index{top:calc(var(--price-header-h,88px) + var(--price-cats-h,55px) + 24px)}
.price-panel{scroll-margin-top:calc(var(--price-header-h,88px) + var(--price-cats-h,55px) + 24px)}
@media(min-width:961px){.price-product-list{max-height:calc(100dvh - 190px - var(--price-cats-h,55px))}}

/* ───────────── Price hero: “Pilih titik mulai Anda” — three entry points as an isometric scene ─────────────
   Built on the .neo-hardware-scene system (projection, face tones, wiring, neo-assemble entrance) and the
   NEO App MCP scene's motion vocabulary (drop, type, hop, beacon). Each product is a real link; the SVG is
   decorative and mirrors the link's hover, focus and selected state. */
.price-scene{container-type:inline-size;border-top:1px solid var(--line);min-width:0}
.price-scene-heading{display:flex;justify-content:space-between;padding:16px 0;font-size:12px;line-height:16px;color:var(--muted)}
.price-scene-stage{position:relative}
.price-scene-stage .neo-hardware-scene{position:relative}
.price-iso{display:block;width:100%;height:auto;overflow:visible}
.price-hero-layout>.price-scene>p{max-width:none;font-size:12px;line-height:20px;letter-spacing:0;color:var(--muted);padding:16px 0;border-top:1px solid var(--line);margin:0}
/* product links: placed on the scene's level lines */
.price-scene-options{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.price-scene-options>li{position:absolute;left:var(--lx);top:var(--ly);transform:translateY(calc(-100% - 8px));pointer-events:auto}
.price-scene-label{display:grid;grid-template-columns:auto 16px;column-gap:12px;row-gap:2px;align-items:baseline;padding:2px 0 2px 12px;border-left:1px solid var(--line);color:var(--ink);transition:border-color .35s}
.price-scene-label small{grid-column:1/-1;font-size:12px;line-height:16px;letter-spacing:.06em;color:var(--muted)}
.price-scene-label strong{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em;transition:color .25s}
.price-scene-label span{grid-column:1;display:flex;align-items:baseline;gap:6px;font-size:12px;line-height:16px;color:var(--muted)}
.price-scene-label span b{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.price-scene-label i{grid-column:2;grid-row:2;font-style:normal;font-size:16px;line-height:24px;color:var(--primary-text);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.price-scene-label:hover strong,.price-scene-label:focus-visible strong{color:var(--primary-text)}
.price-scene-label:hover,.price-scene-label:focus-visible{border-left-color:var(--primary)}
.price-scene-label:hover i,.price-scene-label:focus-visible i{transform:translate(3px,-3px)}
.price-scene-label[aria-current=true]{border-left:2px solid var(--primary);padding-left:11px}
/* illustration parts that the shared scene system does not already style */
.price-app-screen{fill:#101C15;stroke:#43775E;stroke-width:.7}
.price-app-dot{fill:#43775E}
.price-app-cta{fill:#E6F5EE}
.price-lid{fill:none;stroke:#7DE1BB;stroke-width:.8;opacity:.8}
:root body .price-chip-label{font-size:11px}
:root body .price-nvme-label{font-size:9px;letter-spacing:.08em}
.price-packet{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 100;stroke-dashoffset:8;opacity:0}
.price-level-line{fill:none;stroke:var(--muted);stroke-width:.8;opacity:.5;transition:stroke .35s,opacity .35s}
.price-level-ring{opacity:0;transform-box:fill-box;transform-origin:center}
.price-module{cursor:pointer}
.price-module-object{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.price-module .neo-part-base>.box-top{transition:stroke .35s,stroke-width .35s}
/* emphasis: hovered/focused product rises, the others step back (the NEO Lite Pro layer pattern) */
.price-scene-stage[data-active] .price-module:not(.is-active){opacity:.48}
.price-module.is-active .price-module-object{transform:translateY(-6px)}
.price-module:is(.is-active,.is-selected) .neo-part-base>.box-top{stroke:var(--primary);stroke-width:2}
.price-level:is(.is-active,.is-selected) .price-level-line{stroke:var(--primary);opacity:1}
.price-level.is-active .price-level-ring{animation:mcp-beacon 2.4s ease-out infinite}
/* one pass when the scene first enters view: app screen, container, servers, drives, then a hop along the network */
.price-unit,.price-nvme,.price-container{transform-box:fill-box}
.price-app-bar{transform-box:fill-box;transform-origin:left center}
.price-scene-stage.is-playing .price-app-bar{animation:mcp-type .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--b) * .12s + .25s)}
.price-scene-stage.is-playing .price-container{animation:mcp-drop .6s cubic-bezier(.22,1,.36,1) .35s both}
.price-scene-stage.is-playing [data-product=neo-lite] .price-unit{animation:mcp-drop .7s cubic-bezier(.22,1,.36,1) .6s both}
.price-scene-stage.is-playing [data-product=neo-lite-pro] .price-unit{animation:mcp-drop .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--u) * .2s + .85s)}
.price-scene-stage.is-playing .price-nvme{animation:mcp-drop .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--n) * .12s + 1.3s)}
.price-scene-stage.is-playing .price-packet{animation:mcp-hop 1.1s cubic-bezier(.65,0,.35,1) 1.75s both}
@media(prefers-reduced-motion:reduce){
  .price-scene *{animation:none!important;transition:none!important}
  .price-module.is-active .price-module-object{transform:none}
}
/* compact containers (narrow column, phones): the scene stays as a picture; the products become a list under it */
@container (max-width:479px){
  .price-scene-options{position:static;pointer-events:auto;border-top:1px solid var(--line);margin-top:8px}
  .price-scene-options>li{position:static;transform:none}
  .price-scene-options>li+li{border-top:1px solid var(--line)}
  .price-scene-label{grid-template-columns:minmax(0,1fr) auto 16px;column-gap:12px;align-items:center;padding:16px 0;border-left:0}
  .price-scene-label small{grid-column:1;grid-row:1}
  .price-scene-label strong{grid-column:1;grid-row:2}
  .price-scene-label span{grid-column:2;grid-row:1/3;justify-content:flex-end}
  .price-scene-label i{grid-column:3;grid-row:1/3;align-self:center}
  .price-scene-label[aria-current=true]{border-left:0;padding-left:0}
  .price-level{display:none}
  .price-scene-stage{overflow:hidden}
  .price-scene-stage .price-iso{width:140%;max-width:none;margin:-9% 0 -2% -54%}
  .price-scene-options{position:relative}
}