/* Feature Panel / Number Badge, Laravel draft. Shared frame inset with Image Carousel. */
/* Height, block padding and type inherit Badge; diameter = its line-height + py-1. */
[data-octopus-number-badge]{box-sizing:border-box;width:calc(1lh + 2 * var(--spacing));flex-shrink:0;padding-inline:0!important;justify-content:center;border-radius:50%!important;font-variant-numeric:tabular-nums}
[data-octopus-number-badge][data-size="lg"]{width:calc(1lh + 3 * var(--spacing))}
/* Opaque strong shade + same-family soft 100; identical geometry in both variants. */
[data-octopus-number-badge][data-number-variant="inverted"]{--number-solid:var(--color-purple-600);--number-soft:var(--color-purple-100)}
/* Important theme-layer declarations outrank Badge's important utility colors. */
@layer theme{[data-octopus-number-badge][data-number-variant="inverted"]{background:var(--number-solid)!important;color:var(--number-soft)!important}}
[data-octopus-number-badge]:is([data-number-tone="neutral"],[data-number-tone="base"]){--number-solid:var(--color-zinc-900);--number-soft:var(--color-zinc-100)}
[data-octopus-number-badge]:is([data-number-tone="action"],[data-number-tone="accent"],[data-number-tone="premium"]){--number-solid:var(--color-orange-800);--number-soft:var(--color-orange-100)}
[data-octopus-number-badge][data-number-tone="success"]{--number-solid:var(--color-green-700);--number-soft:var(--color-green-100)}
[data-octopus-number-badge][data-number-tone="warning"]{--number-solid:var(--color-yellow-700);--number-soft:var(--color-yellow-100)}
[data-octopus-number-badge][data-number-tone="danger"]{--number-solid:var(--color-red-600);--number-soft:var(--color-red-100)}
.octopus-feature-panel-container{container-type:inline-size;min-width:0}
.octopus-feature-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--shape-radius-component);gap:var(--space-component-lg);border-radius:16px;background:var(--color-white);color:var(--color-text-primary);color-scheme:light;min-width:0}
.octopus-feature-panel__content{min-width:0;padding:var(--space-component-xl);display:flex;flex-direction:column;gap:var(--space-component-xl)}
.octopus-feature-panel__identity,.octopus-feature-panel__keywords{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-component-sm)}
.octopus-feature-panel__subbrands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-component-md);min-width:0}
.octopus-feature-panel__subbrand{display:flex;align-items:center;justify-content:center;min-width:0;min-height:5rem;padding:var(--space-component-sm)}
.octopus-feature-panel__subbrand img{display:block;width:auto;height:auto;max-width:100%;max-height:5.4rem;object-fit:contain;object-position:center;filter:brightness(0) invert(5%)}
.octopus-feature-panel [data-octopus-section-header] :is(h1,h2,h3,h4,h5,h6,p),.octopus-feature-panel__text{white-space:pre-line;overflow-wrap:anywhere}
.octopus-feature-panel__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-component-sm);margin:0}
.octopus-feature-panel__metrics[data-metric-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.octopus-feature-panel__metrics>div{display:flex;flex-direction:column;gap:var(--space-component-lg);min-width:0;padding:var(--space-component-md);border-radius:16px;background:var(--color-brand-primary-subtle);color:var(--color-text-primary);overflow-wrap:anywhere}
.octopus-feature-panel__metrics [data-tone=action]{background:var(--color-orange-100);color:var(--color-zinc-900)}
.octopus-feature-panel__metrics [data-tone=neutral],.octopus-feature-panel__metrics [data-tone=base]{background:var(--color-bg-surface)}
.octopus-feature-panel__metrics [data-tone=success]{background:var(--color-feedback-success-surface)}
.octopus-feature-panel__metrics [data-tone=warning]{background:var(--color-feedback-warning-surface)}
.octopus-feature-panel__metrics [data-tone=danger]{background:var(--color-feedback-danger-surface)}
.octopus-feature-panel__metrics [data-tone=accent]{background:var(--color-feedback-info-surface)}
.octopus-feature-panel__metrics [data-tone=premium]{background:var(--color-action-primary-subtle)}
.octopus-feature-panel__metrics dt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-component-sm);font-size:.875rem;line-height:1.4}
.octopus-feature-panel__metrics svg{width:1.25rem;height:1.25rem;flex:none}
.octopus-feature-panel__metrics dd{margin:auto 0 0;border-top:1px solid currentColor;padding-top:var(--space-component-md);font-size:1.75rem;font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums}
.octopus-feature-panel__media{position:relative;min-width:0;min-height:28rem;border-radius:8px;background:var(--color-bg-sunken);overflow:hidden}
.octopus-feature-panel__track{position:absolute;inset:0;overflow:hidden}
.octopus-feature-panel__slide{position:absolute;inset:0;opacity:0;pointer-events:none;display:block}
.octopus-feature-panel__slide.is-active{opacity:1;pointer-events:auto}
.octopus-feature-panel__slide.is-outgoing{opacity:1;z-index:1;pointer-events:none}
.octopus-feature-panel__slide.is-incoming{z-index:2;transition:opacity 900ms var(--motion-ease-standard)}
.octopus-feature-panel__slide>.octopus-feature-panel__image{width:100%;height:100%;object-fit:cover;display:block}
.octopus-feature-panel__slide--branded::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top right,rgba(0,0,0,.34),rgba(0,0,0,.14) 35%,transparent 70%);pointer-events:none}
.octopus-feature-panel__slide-logo{position:absolute;z-index:2;left:var(--space-component-md);bottom:var(--space-component-md);display:block;width:min(18.522%,calc(100% - 160px),113.19px);height:auto;max-height:108px;object-fit:contain;object-position:left bottom;filter:brightness(0) invert(1);pointer-events:none}
.octopus-feature-panel__track{--feature-image-duration:20000ms;--feature-image-scale:1.08}
.octopus-feature-panel__slide:not(:only-child):is(.is-active,.is-outgoing)>.octopus-feature-panel__image{animation:feature-image-zoom var(--feature-image-duration) var(--motion-ease-standard) infinite alternate}
.octopus-feature-panel__slide:only-child>.octopus-feature-panel__image{transition:transform var(--motion-duration-base) var(--motion-ease-standard)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.octopus-feature-panel__slide:only-child:hover>.octopus-feature-panel__image{transform:scale(1.12)}}
@media(prefers-reduced-motion:no-preference){.octopus-feature-panel__slide:only-child:focus-visible>.octopus-feature-panel__image{transform:scale(1.12)}}
.octopus-feature-panel__track.is-motion-paused .octopus-feature-panel__image{animation-play-state:paused}
@keyframes feature-image-zoom{from{transform:scale(1)}to{transform:scale(var(--feature-image-scale))}}
@media(prefers-reduced-motion:reduce){.octopus-feature-panel__image{animation:none!important;transform:none;transition:none!important}}
.octopus-feature-panel__magnifier{position:absolute;z-index:2;inset:0;margin:auto;display:grid;place-items:center;width:48px;height:48px;background:var(--color-white);color:var(--color-zinc-900);border-radius:50%;opacity:0;transform:scale(.9);transition:opacity var(--motion-duration-fast),transform var(--motion-duration-fast);pointer-events:none}
.octopus-feature-panel__magnifier svg{width:24px;height:24px}
.octopus-feature-panel__slide:is(:hover,:focus-visible) .octopus-feature-panel__magnifier{opacity:1;transform:scale(1)}
.octopus-feature-panel__slide:focus-visible{outline-offset:-4px}
.octopus-feature-panel__navigation{position:absolute;z-index:3;bottom:var(--space-component-md);right:var(--space-component-md);display:flex;align-items:center;gap:0;white-space:nowrap}
.octopus-feature-panel__navigation [data-feature-rotation]{position:absolute;left:100%;padding:8px;border:0;border-radius:8px;background:var(--color-white);color:var(--color-zinc-900);opacity:0;pointer-events:none}
.octopus-feature-panel__navigation [data-feature-rotation]:focus-visible{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.octopus-feature-panel__slide.is-incoming,.octopus-feature-panel__magnifier{transition:none}}
.octopus-feature-panel__navigation[hidden]{display:none}
.octopus-feature-panel__video{display:block;position:absolute;inset:0}
.octopus-feature-panel__video img{width:100%;height:100%;object-fit:cover;transition:transform var(--motion-duration-base) var(--motion-ease-standard)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.octopus-feature-panel__video:hover img{transform:scale(1.12)}}
@media(prefers-reduced-motion:no-preference){.octopus-feature-panel__video:focus-visible img{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.octopus-feature-panel__video img{transition:none;transform:none}}
.octopus-feature-panel__play{position:absolute;inset:0;margin:auto;width:3.5rem;height:3.5rem;display:grid;place-items:center;border-radius:50%;background:var(--color-bg-overlay);color:var(--color-text-primary);transition:transform var(--motion-duration-fast)}
.octopus-feature-panel__video:hover .octopus-feature-panel__play{transform:scale(1.08)}
.octopus-feature-panel__play svg{width:1.5rem;height:1.5rem}
.octopus-feature-panel__video:focus-visible{outline-offset:-4px}
.octopus-feature-panel__dialog{margin:auto;width:min(90vw,960px);max-height:90dvh;padding:var(--shape-radius-component);border:0;border-radius:16px;background:var(--color-bg-overlay);color:var(--color-text-primary)}
.octopus-feature-panel__dialog::backdrop{background:color-mix(in srgb,var(--color-zinc-950) 65%,transparent);backdrop-filter:blur(12px)}
.octopus-feature-panel__close{display:flex;justify-content:flex-end;margin-bottom:var(--space-component-sm)}
.octopus-feature-panel__dialog :is(video,iframe){width:100%;aspect-ratio:16/9;border:0;border-radius:8px;display:block}
.octopus-feature-panel__empty{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-component-xl);text-align:center}
@container(max-width:740px){.octopus-feature-panel{grid-template-columns:minmax(0,1fr)}.octopus-feature-panel__media{min-height:0;aspect-ratio:4/3}.octopus-feature-panel__content{padding:var(--space-component-md)}}
@container(max-width:390px){.octopus-feature-panel__metrics,.octopus-feature-panel__metrics[data-metric-count="4"]{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.octopus-feature-panel__play{transition:none}}
.octopus-feature-panel__metrics{--motion-duration-expressive-celebration:500ms;--motion-easing-enter:cubic-bezier(0,0,.2,1)}
.feature-counter{display:inline-flex;align-items:center;overflow:hidden;font-variant-numeric:tabular-nums}
.feature-counter__digit{position:relative;display:inline-flex;height:1.3em;overflow:hidden}
.feature-counter__track{display:flex;flex-direction:column;align-items:center;height:max-content;transform:translateY(0)}
.feature-counter__track>span,.feature-counter__suffix{height:1.3em;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-counter.is-counting .feature-counter__track{transform:translateY(var(--counter-distance));transition:transform var(--motion-duration-expressive-celebration) var(--motion-easing-enter) var(--counter-delay)}
@media(prefers-reduced-motion:reduce){.feature-counter__track{transform:translateY(var(--counter-distance));transition:none!important}}
/* Editorial line breaks are part of the portable Feature Panel contract. */
.octopus-feature-panel .octopus-section-header__title,
.octopus-feature-panel .octopus-section-header__description,
.octopus-feature-panel__metrics dt span,
.octopus-feature-panel__text{white-space:pre-line;overflow-wrap:anywhere}