.pd{--pd-dur: 5s;--pd-slide: .7s;--pd-plot: 120px;--pd-r: 14px;position: relative;width: 100%;max-width: 620px;margin-inline: auto}.page-hero--navy .hbi-proof,.page-hero--navy .prd-proof{color: var(--on-dark-soft)}.pd__card{container: pd / inline-size;position: relative;z-index: 2;overflow: hidden;border-radius: var(--r-panel);background: var(--white);color: var(--ink);box-shadow: var(--shadow-product);outline: 1px solid color-mix(in srgb,var(--white) 12%,transparent);animation: rise .8s var(--ease) .1s both}.pd__band{display: flex;align-items: center;flex-wrap: wrap;gap: 6px 14px;padding: 8px 10px 8px 16px;background: radial-gradient(260px 120px at 100% 0%,color-mix(in srgb,var(--cyan) 18%,transparent),transparent 70%),linear-gradient(120deg,var(--navy-900) 0%,var(--navy-700) 55%,var(--sky-600) 100%);color: var(--white)}.pd__brand{display: inline-flex;align-items: center;gap: 10px;min-width: 0}.pd__brand img{flex: none;width: 28px;height: 28px}.pd__brand b{font-size: 15px;font-weight: 800;letter-spacing: -0.01em;white-space: nowrap}.pd__tabs{display: flex;margin-left: auto;padding: 0 4px;border-radius: var(--r-pill);background: color-mix(in srgb,var(--night) 42%,transparent)}.pd__tab{position: relative;isolation: isolate;height: 44px;padding: 0 14px;border: 0;background: transparent;color: var(--white);font: inherit;font-size: 13px;font-weight: 700;white-space: nowrap;cursor: pointer}.pd__tab::before{content: "";position: absolute;inset: 6px 0;z-index: -1;border-radius: var(--r-pill);transition: background-color var(--dur-fast)}.pd__tab:hover::before{background: color-mix(in srgb,var(--white) 12%,transparent)}.pd__tab[aria-selected="true"]{color: var(--navy-900)}.pd__tab[aria-selected="true"]::before{background: var(--white)}.pd__tab:focus-visible{outline: 2px solid var(--cyan);outline-offset: -4px;border-radius: var(--r-pill)}.pd__bar{position: absolute;left: 14px;right: 14px;bottom: 9px;height: 2px;border-radius: 2px;background: var(--sky);transform: scaleX(0);transform-origin: left}.pd:not([data-pd-ready]) .pd__bar{display: none}.pd__tab[aria-selected="true"] .pd__bar{animation: pdTick var(--pd-dur) linear both}.pd:hover .pd__bar,.pd:has(:focus-visible) .pd__bar,.pd.is-off .pd__bar{animation-play-state: paused}.pd.is-stopped .pd__bar{animation: none;visibility: hidden}.pd.is-stopped .pd__float{animation-play-state: running,paused}@keyframes pdTick{to{transform: scaleX(1)}}.pd__viewport{overflow: hidden;background: var(--paper)}.pd__track{display: flex;align-items: stretch;transition: transform var(--pd-slide) var(--ease)}.pd__slide{flex: 0 0 100%;min-width: 0;display: flex;flex-direction: column;gap: 10px;padding: 12px 14px 14px}.pd__meta{display: flex;align-items: center;gap: 10px;min-width: 0;font-size: 12px;line-height: 1.3;color: var(--slate)}.pd__meta>span:last-child{min-width: 0}.pd__filter{flex: none;display: inline-flex;align-items: center;gap: 6px;height: 24px;padding: 0 10px;border: 1px solid var(--line-2);border-radius: var(--r-pill);background: var(--white);color: var(--ink);font-weight: 700}.pd__filter::after{content: "";width: 5px;height: 5px;margin-top: -3px;border: solid var(--slate);border-width: 0 1.5px 1.5px 0;transform: rotate(45deg)}.pd-kpis{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 8px}.pd-kpis--4{grid-template-columns: repeat(4,minmax(0,1fr))}.pd-kpi{position: relative;overflow: hidden;display: flex;flex-direction: column;gap: 1px;min-width: 0;padding: 10px 11px 9px;border: 1px solid var(--line);border-radius: var(--pd-r);background: var(--white)}.pd-kpi::before{content: "";position: absolute;inset: 0 0 auto;height: 3px;background: linear-gradient(90deg,var(--navy-700),var(--sky))}.pd-kpi span{font-size: 12px;line-height: 1.3;color: var(--slate)}.pd-kpi b{font-size: clamp(17px,3.7cqi,22px);font-weight: 800;line-height: 1.25;letter-spacing: -0.02em;white-space: nowrap}.pd-kpi small{font-size: 12px;line-height: 1.35;color: var(--slate)}.pd-good,.pd-bad,.pd-flat{font-style: normal;font-weight: 700;white-space: nowrap}.pd-good{color: var(--positive)}.pd-bad{color: var(--negative)}.pd-flat{color: var(--ink)}.pd-grid{flex: 1;display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px}.pd-grid--one{grid-template-columns: minmax(0,1fr)}.pd-grid--lead{grid-template-columns: minmax(0,1.25fr) minmax(0,1fr)}.pd-panel{display: flex;flex-direction: column;gap: 8px;min-width: 0;padding: 11px 13px 10px;border: 1px solid var(--line);border-radius: var(--pd-r);background: var(--white)}.pd-panel__head{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: 2px 10px}.pd-panel__head>b{font-size: 13px;font-weight: 800;letter-spacing: -0.01em}.pd-panel__fig{flex: 1;display: flex;flex-direction: column;justify-content: flex-end;gap: 4px;min-width: 0}.pd-legend{display: inline-flex;flex-wrap: wrap;align-items: center;gap: 2px 10px;font-size: 12px;color: var(--slate)}.pd-legend>span{display: inline-flex;align-items: center;gap: 5px}.pd-legend>b{color: var(--ink);font-weight: 800}.pd-legend em{font-style: normal}.pd-key{flex: none;display: inline-block;width: 9px;height: 9px;border-radius: 2px}.pd-key--a{background: linear-gradient(180deg,var(--navy-700),var(--navy-900))}.pd-key--line{width: 14px;height: 0;border-radius: 2px;border-top: 2.5px solid var(--sky-600)}.pd-key--b{background: var(--mist)}.pd-key--ly{width: 14px;height: 0;border-radius: 0;border-top: 2px dashed var(--ly-line)}.pd-key--stly,.pd-key--tick{width: 3px;height: 12px;border-radius: 2px;background: var(--navy-900)}.pd-key--fly{width: 3px;height: 12px;border-radius: 2px;background: var(--sky-600)}.pd-plot{position: relative;height: var(--pd-plot);border-bottom: 1px solid var(--line-2)}.pd-grid--one .pd-plot{flex: 1;height: auto;min-height: var(--pd-plot)}.pd-grid--one .pd-heat{flex: 1}.pd-grid--one .pd-heat__row:not(.pd-heat__row--head){flex: 1}.pd-grid--one .pd-heat__row>i{height: 100%;min-height: 16px}.pd-gridline{position: absolute;left: 0;right: 0;top: calc(100% - var(--y));border-top: 1px dashed var(--line)}.pd-x{position: relative;height: 17px;font-size: 12px;line-height: 17px;color: var(--slate)}.pd-x span{position: absolute;left: var(--x);transform: translateX(-50%);white-space: nowrap}.pd-x--line .is-start{transform: none}.pd-x--thin span:nth-child(even){visibility: hidden}.pd-x--line .is-end{transform: translateX(-100%)}.pd-cols--dense + .pd-x>span:first-child{transform: none}.pd-cols--dense + .pd-x>span:last-child{transform: translateX(-100%)}.pd-cols{display: flex;align-items: flex-end}.pd-cols__g{position: relative;flex: 1;height: 100%;display: flex;align-items: flex-end;justify-content: center;gap: 2px}.pd-cols__g i{width: min(13px,40%);height: var(--v);border-radius: 3px 3px 1px 1px;transform-origin: bottom}.pd-cols--single .pd-cols__g i{width: min(20px,62%)}.pd-cols--dense .pd-cols__g{gap: 0}.pd-cols--dense .pd-cols__g i{width: 64%;border-radius: 2px 2px 1px 1px}.pd-a{background: linear-gradient(180deg,var(--navy-700),var(--navy-900))}.pd-b{background: var(--mist)}.is-hi .pd-a{background: linear-gradient(180deg,var(--sky),var(--sky-600))}.pd-pill{position: absolute;z-index: 1;left: var(--x);bottom: calc(var(--y) + 6px);transform: translateX(-50%);padding: 2px 9px;border-radius: var(--r-pill);background: var(--navy-900);color: var(--white);font-size: 12px;font-weight: 700;line-height: 18px;white-space: nowrap}.pd-pill--start{transform: translateX(-14px)}.pd-pill--end{transform: translateX(calc(-100% + 14px))}.pd-line svg{position: absolute;inset: 0;width: 100%;height: 100%;overflow: visible}.pd-line path{fill: none;vector-effect: non-scaling-stroke;stroke-linecap: round;stroke-linejoin: round}.pd-line__a{stroke: var(--sky-600);stroke-width: 2.5px}.pd-line__b{stroke: var(--ly-line);stroke-width: 2px;stroke-dasharray: 5 5}.pd-line .pd-line__area{stroke: none}.pd-stop-area{stop-color: var(--sky);stop-opacity: .26}.pd-stop-area--0{stop-opacity: 0}.pd-dot{position: absolute;left: var(--x);top: var(--y);width: 10px;height: 10px;margin: -5px 0 0 -5px;border-radius: 50%;background: var(--white);border: 2.5px solid var(--sky-600);box-shadow: 0 0 0 5px color-mix(in srgb,var(--sky) 18%,transparent)}.pd-hbars{display: flex;flex-direction: column;justify-content: center;gap: 9px;flex: 1}.pd-hbar{display: grid;grid-template-columns: minmax(0,7.6em) minmax(0,1fr) 3.6em;align-items: center;gap: 10px;font-size: 12px;line-height: 1.3}.pd-hbar>span{white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.pd-hbar>b{font-weight: 800;text-align: right;white-space: nowrap}.pd-track{position: relative;display: block;height: 10px;border-radius: 5px;background: var(--pale)}.pd-track>i{position: absolute;left: 0;top: 0;bottom: 0;width: var(--v);border-radius: 5px;background: linear-gradient(90deg,var(--navy-700),var(--sky));transform-origin: left}.pd-hbar:first-child .pd-track>i{background: linear-gradient(90deg,var(--navy-900),var(--sky-600))}.pd-hbars--div .pd-hbar{grid-template-columns: minmax(0,6.6em) minmax(0,1fr) 3.6em}.pd-track--div{background: var(--paper)}.pd-track--div::before{content: "";position: absolute;left: 50%;top: -3px;bottom: -3px;width: 1px;background: var(--line-2)}.pd-track--div>i.is-pos{left: 50%;background: var(--positive-fill)}.pd-track--div>i.is-neg{left: auto;right: 50%;background: var(--negative);transform-origin: right}.pd-hbar:first-child .pd-track--div>i.is-pos{background: var(--positive-fill)}.pd-hbars--pace{gap: 16px}.pd-hbars--pace .pd-hbar{grid-template-columns: 2.4em minmax(0,1fr) 2.8em}.pd-track--pace{height: 12px;border-radius: 6px}.pd-track>.pd-tick{left: var(--t);top: -4px;bottom: -4px;width: 3px;margin-left: -1.5px;border-radius: 2px;box-shadow: 0 0 0 1.5px var(--white)}.pd-track>.pd-tick--stly{background: var(--navy-900)}.pd-track>.pd-tick--fly{background: var(--sky-600)}.pd-donut-wrap{flex: 1;display: grid;grid-template-columns: 104px minmax(0,1fr);align-items: center;gap: 14px}.pd-donut{position: relative;width: 104px;height: 104px}.pd-donut svg{width: 100%;height: 100%}.pd-donut circle{fill: none;stroke-width: 14}.pd-donut__track{stroke: var(--pale)}.pd-donut__arc{stroke-linecap: round}.pd-donut>b{position: absolute;inset: 0;display: grid;place-items: center;font-size: 19px;font-weight: 800;letter-spacing: -0.02em}.pd-stop-a{stop-color: var(--navy-700)}.pd-stop-b{stop-color: var(--sky)}.pd-legend-list{display: flex;flex-direction: column;gap: 7px;font-size: 12px;line-height: 1.3}.pd-legend-list li{display: grid;grid-template-columns: 14px minmax(0,1fr) auto;align-items: center;gap: 6px}.pd-legend-list span{color: var(--slate);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.pd-legend-list b{font-weight: 800}.pd-gauge{position: relative;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: flex-end}.pd-gauge svg{width: min(100%,200px);height: auto;overflow: visible}.pd-gauge path{fill: none;stroke-width: 12;stroke-linecap: round}.pd-gauge__track{stroke: var(--pale)}.pd-gauge__bud{stroke: var(--navy-900);stroke-width: 3;stroke-linecap: round}.pd-gauge>b{margin-top: -46px;font-size: 22px;font-weight: 800;letter-spacing: -0.02em;line-height: 1.2}.pd-gauge>small{margin-top: 16px;font-size: 12px;color: var(--slate);text-align: center}.pd-heat{display: flex;flex-direction: column;gap: 3px}.pd-heat__row{display: grid;grid-template-columns: 2.6em repeat(13,minmax(0,1fr));gap: 3px;align-items: center}.pd-heat__row>span{font-size: 12px;line-height: 16px;color: var(--slate)}.pd-heat__row--head>span{text-align: center}.pd-heat__row>i{height: 16px;border-radius: 3px}.pd-h1{background: color-mix(in srgb,var(--sky) 30%,var(--pale))}.pd-h2{background: color-mix(in srgb,var(--sky) 62%,var(--pale))}.pd-h3{background: var(--sky)}.pd-h4{background: color-mix(in srgb,var(--navy-700) 55%,var(--sky))}.pd-h5{background: var(--navy-700)}.pd-h6{background: var(--navy-900)}.pd-heat-key{display: inline-flex;align-items: center;gap: 6px}.pd-heat-key i{width: 44px;height: 8px;border-radius: 4px;background: linear-gradient(90deg,var(--pale),var(--sky),var(--navy-900))}.pd__float{left: -28px;bottom: -50px;animation: rise .6s var(--ease) .9s both,float 7s ease-in-out 1.5s infinite}.pd__float--flat .float-card__icon{background: var(--pale);color: var(--sky-600)}.pd:hover .pd__float,.pd:has(:focus-visible) .pd__float{animation-play-state: running,paused}.pd.is-off .pd__float{animation-play-state: paused}.pd-kpis--fl .pd-kpi{padding: 12px 13px 11px;border-color: transparent;border-radius: 16px;box-shadow: 0 2px 8px color-mix(in srgb,var(--fl-navy) 8%,transparent),0 0 0 1px color-mix(in srgb,var(--fl-navy) 4%,transparent)}.pd-kpis--fl .pd-kpi::before{content: none}.pd-kpis--fl .pd-kpi>span:first-child{display: flex;align-items: flex-start;gap: 6px}.pd-kpi__i{flex: none;width: 13px;height: 13px;margin-top: 2px;fill: none;stroke: var(--sky-600);stroke-width: 2.2;stroke-linecap: round;stroke-linejoin: round}.pd-kpis--fl.pd-kpis--4 .pd-kpi{padding-inline: 11px}.pd-kpis--fl.pd-kpis--4 .pd-kpi__i{display: none}@container pd (max-width: 540px){.pd__tabs{order: 3;flex: 1 0 100%;margin-left: 0}.pd__tab{flex: 1;padding-inline: 6px}.pd__bar{left: 12px;right: 12px}.pd__band{padding: 8px 10px 4px 14px}.pd__brand{min-height: 36px}.pd-kpis--4{grid-template-columns: repeat(2,minmax(0,1fr))}.pd-grid,.pd-grid--lead{grid-template-columns: minmax(0,1fr)}.pd-kpi b{font-size: 18px}.pd-kpis--fl.pd-kpis--4 .pd-kpi__i{display: block}}@container pd (max-width: 400px){.pd__slide{padding: 10px 10px 12px;gap: 8px}.pd-kpis{gap: 6px}.pd-kpi{padding: 9px 9px 8px}.pd-kpi b{font-size: 17px}.pd-kpis--fl .pd-kpi{padding: 10px 9px 9px}.pd-kpis--fl .pd-kpi>span:first-child{gap: 5px}.pd-heat__row{grid-template-columns: 2.4em repeat(13,minmax(0,1fr));gap: 2px}.pd-heat__row--head>span:nth-child(odd){visibility: hidden}}@keyframes pdRise{from{opacity: 0;transform: translateY(8px)}}@keyframes pdGrow{from{transform: scaleY(0)}}@keyframes pdFillX{from{transform: scaleX(0)}}@keyframes pdReveal{from{clip-path: inset(0 100% 0 0)}to{clip-path: inset(0 0 0 0)}}@keyframes pdFade{from{opacity: 0}}@keyframes pdDonut{from{stroke-dasharray: 0 289}}@keyframes pdGauge{from{stroke-dasharray: 0 151}}.pd__slide[aria-hidden="true"] *,.pd__slide[aria-hidden="true"] *::before{animation: none !important}.pd-kpi{animation: pdRise .5s var(--ease) both}.pd-kpi:nth-child(2){animation-delay: .06s}.pd-kpi:nth-child(3){animation-delay: .12s}.pd-kpi:nth-child(4){animation-delay: .18s}.pd-cols__g i{animation: pdGrow .7s var(--ease) both;animation-delay: calc(var(--i) * 45ms + .15s)}.pd-cols--dense .pd-cols__g i{animation-delay: calc(var(--i) * 18ms + .15s)}.pd-track>i:not(.pd-tick){animation: pdFillX .9s var(--ease) both;animation-delay: calc(var(--i) * 90ms + .2s)}.pd-tick{animation: pdFade .4s ease-out both;animation-delay: calc(var(--i) * 90ms + .9s)}.pd-line svg{animation: pdReveal 1.3s var(--ease) .2s both}.pd-dot{animation: pdFade .4s ease-out 1.3s both}.pd-pill{animation: pdFade .5s ease-out 1.1s both}.pd-donut__arc{animation: pdDonut 1.1s var(--ease) .2s both}.pd-gauge__arc{animation: pdGauge 1.1s var(--ease) .2s both}.pd-gauge__bud,.pd-donut>b,.pd-gauge>b{animation: pdFade .5s ease-out 1s both}.pd-heat__row{animation: pdFade .45s ease-out both;animation-delay: calc(var(--i) * 70ms + .15s)}.pd-heat__row--head{animation: none}@media (prefers-reduced-motion: reduce){.pd__bar{display: none}.pd__track{transition: none}}
