/* Scoped aliases keep the showcase on Chip In's existing light/dark theme. */
.nf-theme, .nf-carousel {
    --cp-bg: var(--bs-body-bg, var(--si-body-bg));
    --cp-surface: var(--bs-body-bg, var(--si-body-bg));
    --cp-surface-soft: var(--bs-secondary-bg, var(--si-gray-100));
    --cp-border: var(--bs-border-color, var(--si-border-color));
    --cp-text: var(--bs-heading-color, var(--si-heading-color));
    --cp-text-muted: var(--bs-body-color, var(--si-body-color));
    --cp-accent: var(--bs-primary, var(--si-primary));
    --cp-accent-soft: color-mix(in srgb, var(--cp-accent) 9%, var(--cp-bg));
    --cp-overlay: color-mix(in srgb, var(--cp-text) 70%, transparent);
    color: var(--cp-text);
}
.nf-page { padding: 8.5rem 0 3rem; }
.nf-page p, .nf-home-feature p { color: var(--cp-text-muted); }
.nf-page h1, .nf-page h2, .nf-page h3 { color: var(--cp-text); }
.nf-eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--cp-accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nf-accent { color: var(--cp-accent); }
.nf-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; margin-bottom: 2.5rem; }
.nf-intro-copy, .nf-intro-art { min-width: 0; }
.nf-intro-art { justify-self: end; width: 100%; max-width: 38rem; }
.nf-hero-art { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--si-font-sans-serif, "Manrope", system-ui, sans-serif); }
.nf-hero-art text { user-select: none; }
.nf-flow { animation: nf-flow 1.6s linear infinite; }
.nf-float { transform-box: fill-box; transform-origin: center; }
.nf-float-main { animation: nf-float-main 8s ease-in-out infinite; }
.nf-float-a { animation: nf-float-a 7s ease-in-out infinite; }
.nf-float-b { animation: nf-float-b 9s ease-in-out .8s infinite; }
.nf-float-c { animation: nf-float-c 7.5s ease-in-out 1.6s infinite; }
.nf-pulse { animation: nf-pulse 2.2s ease-in-out infinite; }
@keyframes nf-flow { to { stroke-dashoffset: -24; } }
@keyframes nf-float-main { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-7px); } }
@keyframes nf-float-a { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-9px); } }
@keyframes nf-float-b { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
@keyframes nf-float-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.nf-intro h1 { letter-spacing: -.045em; }
.nf-intro-description { max-width: 42rem; }
.nf-back, .nf-breadcrumb, .nf-related { font-size: .875rem; }
.nf-back { color: var(--cp-text-muted); text-decoration: none; }
.nf-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
.nf-area { display: flex; align-items: center; gap: 1rem; padding: 1.3rem; border: 1px solid var(--cp-border); border-radius: 1rem; color: var(--cp-text); text-decoration: none; transition: border-color .2s, background .2s; }
.nf-area > i:first-child { font-size: 1.75rem; color: var(--cp-accent); }
.nf-area > i:last-child { margin-left: auto; }
.nf-area strong, .nf-area small { display: block; }
.nf-area small { color: var(--cp-text-muted); margin-top: .2rem; }
.nf-area[aria-current="page"], .nf-area:hover { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-text); }
.nf-featured { border: 1px solid var(--cp-border); border-radius: 1.5rem; background: linear-gradient(125deg, var(--cp-accent-soft), var(--cp-surface)); overflow: hidden; }
.nf-carousel-stage { display: grid; }
.nf-carousel-slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .5s ease, visibility .5s; }
.nf-carousel-slide[data-active="true"] { visibility: visible; opacity: 1; pointer-events: auto; }
.nf-carousel-controls { display: flex; align-items: center; justify-content: center; gap: .5rem; position: relative; padding-top: 1rem; padding-bottom: 1.25rem; }
.nf-carousel-selectors { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.nf-control { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border: 1px solid var(--cp-border); border-radius: 50%; background: var(--cp-surface); color: var(--cp-text); font-size: 1.35rem; }
.nf-control:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
.nf-slide-selector, .nf-view-toggle button, .nf-video-choices button { border: 0px solid var(--cp-border); border-radius: 999px; padding: .65rem 1rem; background: var(--cp-surface); color: var(--cp-text-muted); font-size: .8rem; font-weight: 700; min-height: 2.75rem; }
.nf-slide-selector[aria-pressed="true"], .nf-view-toggle button[aria-pressed="true"], .nf-video-choices button[aria-pressed="true"] { color: var(--cp-accent); border-color: transparent; background: var(--cp-accent-soft); }
.nf-theme :is(a, button, summary, video, [tabindex]):focus-visible, .nf-carousel button:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 4px; }
.nf-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.25rem, 4vw, 3.5rem); align-items: center; }
.nf-spotlight-copy h2 { letter-spacing: -.04em; }
.nf-spotlight-copy p { max-width: 36rem; }
.nf-spotlight-art { display: block; position: relative; text-decoration: none; border-radius: 1rem; overflow: hidden; background: var(--cp-surface); }
.nf-spotlight-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.nf-art-caption { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem; color: var(--cp-text); font-size: .85rem; font-weight: 700; }
.nf-library { margin: 4.5rem 0 2rem; }
.nf-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.nf-library-heading p { margin-bottom: 0; }
.nf-view-toggle { display: flex; flex-shrink: 0; gap: .4rem; }
.nf-release-list { gap: 1.5rem; padding: .4rem .25rem 1.25rem; }
.nf-release-list.is-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.nf-release-card { display: block; flex: 0 0 min(29rem, 85%); scroll-snap-align: start; border: 1px solid var(--cp-border); border-radius: 1.25rem; text-decoration: none; color: var(--cp-text); background: var(--cp-surface); overflow: hidden; transition: border-color .2s; }
.nf-release-card:hover { border-color: var(--cp-accent); color: var(--cp-text); }
.nf-release-art { padding: 1rem; background: var(--cp-accent-soft); }
.nf-release-art img { width: 100%; height: 20rem; object-fit: contain; border-radius: .625rem; }
.nf-release-copy { padding: 1.5rem; }
.nf-release-copy h3 { font-size: 1.4rem; }
.nf-text-link { font-size: .9rem; color: var(--cp-accent); font-weight: 700; }
.nf-release-list.is-list { display: grid; }
.is-list .nf-release-card { display: grid; grid-template-columns: 12rem 1fr; align-items: center; }
.is-list .nf-release-art img { height: 10rem; }
.nf-empty { margin: 2rem 0; padding: clamp(2rem, 6vw, 5rem); text-align: center; border: 1px solid var(--cp-border); border-radius: 1.25rem; background: var(--cp-accent-soft); }
.nf-empty .nf-eyebrow { justify-content: center; }
.nf-empty p { max-width: 36rem; margin: 0 auto 1.5rem; }
.nf-empty-icon { font-size: 3rem; color: var(--cp-accent); display: block; margin-bottom: 1.5rem; }
.nf-breadcrumb { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 2rem; }
.nf-breadcrumb a { text-decoration: none; }
.nf-detail-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.nf-release-name { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); font-size: .8rem; font-weight: 700; color: var(--cp-text) !important; }
.nf-detail-hero h1 { letter-spacing: -.05em; line-height: 1.08; }
.nf-detail-hero > div > .fs-lg { max-width: 34rem; }
/* Detail hero stage: framed product shot with marketing overlays. Sizes are in cqw so overlays scale with the stage. */
.nf-detail-stage { container-type: inline-size; position: relative; isolation: isolate; width: 100%; max-width: 36rem; justify-self: end; aspect-ratio: 10 / 8.4; border: 1px solid var(--cp-border); border-radius: 1.75rem; overflow: hidden; background: radial-gradient(110% 85% at 74% 18%, color-mix(in srgb, var(--cp-accent) 30%, var(--cp-surface)), color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)) 62%, var(--cp-surface)); }
.nf-detail-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(color-mix(in srgb, var(--cp-text-muted) 32%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(70% 70% at 55% 45%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 55% 45%, #000, transparent); }
.nf-detail-cover { position: absolute; z-index: 1; top: 9%; right: 6%; width: 46%; aspect-ratio: 9 / 18.5; overflow: hidden; border-radius: 4.4cqw; border: .7cqw solid #161a2c; background: #161a2c; box-shadow: 0 34px 60px -22px rgba(27, 19, 64, .55), 0 0 0 .25cqw rgba(255, 255, 255, .06) inset; text-decoration: none; transition: transform .35s ease; }
.nf-detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 3.6cqw; }
.nf-detail-cover:hover { transform: translateY(-4px); }
.nf-stage-services .nf-detail-cover { top: 10%; right: 5%; width: 55%; aspect-ratio: 542 / 638; border-radius: 2.2cqw; border: 1px solid color-mix(in srgb, var(--cp-email-accent, var(--cp-accent)) 55%, var(--cp-border)); background: var(--cp-surface); padding: 2cqw; }
.nf-stage-services .nf-detail-cover img { border-radius: 1.2cqw; object-fit: contain; }
.nf-stage-pills { position: absolute; z-index: 2; top: 7%; left: 5%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.7cqw; margin: 0; padding: 0; list-style: none; max-width: 46%; }
.nf-stage-pills li { display: inline-flex; align-items: center; gap: 1.3cqw; padding: 1.5cqw 2.4cqw; border: 1px solid var(--cp-border); border-radius: 999px; background: color-mix(in srgb, var(--cp-surface) 84%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 18px -10px rgba(27, 19, 64, .4); color: var(--cp-text); font-size: clamp(.62rem, 2.4cqw, .86rem); font-weight: 700; line-height: 1; white-space: nowrap; }
.nf-stage-pills li i { color: var(--cp-accent); font-size: 1.3em; }
.nf-stage-pills li.is-new { gap: 1.2cqw; padding-inline: 2.2cqw; border-color: transparent; background: var(--cp-accent); color: #fff; font-size: clamp(.55rem, 2cqw, .7rem); letter-spacing: .1em; text-transform: uppercase; }
.nf-stage-pills li.is-new::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: nf-pulse 2.2s ease-in-out infinite; }
.nf-stage-callout { position: absolute; z-index: 3; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2.2cqw; padding: 2.4cqw 2.8cqw; border: 1px solid var(--cp-border); border-radius: 2.8cqw; background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)), color-mix(in srgb, var(--cp-surface) 93%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 44px -18px rgba(27, 19, 64, .5); }
.nf-stage-callout-a { left: 5%; bottom: 7%; width: 60%; }
.nf-stage-callout-b { right: 4%; top: 44%; width: 50%; }
.nf-stage-services .nf-stage-callout-b { top: auto; right: auto; left: 5%; bottom: 6%; width: 40%; }
.nf-stage-services .nf-stage-callout-a { left: auto; right: 4%; bottom: 26%; width: 48%; }
.nf-stage-callout > i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 3.6cqw; }
.nf-stage-callout.tone-amber > i { background: color-mix(in srgb, #f59e0b 18%, var(--cp-surface)); color: #b45309; }
.nf-stage-callout.tone-success > i { background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: #15803d; }
.nf-stage-callout.tone-danger > i { background: color-mix(in srgb, #ef4444 16%, var(--cp-surface)); color: #dc2626; }
.nf-stage-callout small { display: block; margin-bottom: .6cqw; color: var(--cp-text-muted); font-size: clamp(.5rem, 1.7cqw, .66rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nf-stage-callout strong { display: block; color: var(--cp-text); font-size: clamp(.7rem, 2.55cqw, .95rem); line-height: 1.25; }
.nf-stage-callout span { display: block; margin-top: .5cqw; color: var(--cp-text-muted); font-size: clamp(.58rem, 1.95cqw, .78rem); }
.nf-stage-float-a { animation: nf-float-b 9s ease-in-out infinite; }
.nf-stage-float-b { animation: nf-float-a 7.5s ease-in-out 1s infinite; }
.nf-highlights { display: grid; grid-template-columns: repeat(3, 1fr); margin: 3rem 0 4rem; border-block: 1px solid var(--cp-border); padding: 1.5rem 0; gap: 1rem; }
.nf-highlights > div { text-align: center; }
.nf-highlights strong { display: block; font-size: 1.75rem; color: var(--cp-accent); }
.nf-highlights span { display: block; font-size: .875rem; color: var(--cp-text-muted); }
.nf-watch { display: grid; grid-template-columns: .8fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); margin-bottom: 5rem; scroll-margin-top: 7rem; }
.nf-video-wrap { border: 1px solid var(--cp-border); border-radius: 1.5rem; padding: 1rem; background: var(--cp-accent-soft); display: flex; justify-content: center; }
.nf-video-wrap video { width: 100%; height: min(65vh, 36rem); object-fit: contain; border-radius: .625rem; background: var(--cp-surface); }
.nf-video-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.nf-transcript { padding: 1rem 0; border-block: 1px solid var(--cp-border); }
.nf-transcript summary { cursor: pointer; font-weight: 700; }
.nf-transcript li { margin-bottom: .75rem; color: var(--cp-text-muted); }
.nf-gallery { margin-bottom: 4rem; }
.nf-gallery-count { color: var(--cp-accent); font-weight: 700; white-space: nowrap; }
.nf-gallery-stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--cp-border); border-radius: 1.25rem; background: var(--cp-accent-soft); }
.nf-gallery-image { position: relative; border: 0; padding: 0; background: var(--cp-surface); border-radius: .625rem; overflow: hidden; cursor: zoom-in; }
.nf-gallery-image img { width: 100%; height: 30rem; object-fit: contain; display: block; }
.nf-expand { position: absolute; bottom: .8rem; right: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .85rem; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: .8rem; }
.nf-thumbnails { display: flex; gap: .75rem; overflow-x: auto; padding: 1.25rem .25rem; scroll-snap-type: x mandatory; }
.nf-thumbnails button { flex: 0 0 8.5rem; padding: .45rem; text-align: left; background: var(--cp-surface); color: var(--cp-text-muted); border: 1px solid var(--cp-border); border-radius: .625rem; scroll-snap-align: start; }
.nf-thumbnails button[aria-pressed="true"] { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-text); }
.nf-thumbnails img { width: 100%; height: 6rem; object-fit: contain; border-radius: .4rem; }
.nf-thumbnails span { display: block; font-size: .7rem; line-height: 1.35; padding: .5rem .15rem; }
.nf-lightbox { max-width: 94vw; width: max-content; max-height: 94dvh; padding: 1rem; border: 1px solid var(--cp-border); border-radius: 1rem; background: var(--cp-surface); color: var(--cp-text); text-align: center; }
.nf-lightbox::backdrop { background: var(--cp-overlay); }
.nf-lightbox form { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.nf-lightbox img { display: block; max-width: 86vw; max-height: 69dvh; object-fit: contain; margin: auto; }
.nf-lightbox p { margin: .75rem 0 .25rem; }
.nf-lightbox a { font-size: .8rem; }
.nf-setup { margin: 4rem 0; }
.nf-setup ol { counter-reset: steps; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.nf-setup li { counter-increment: steps; padding: 1.5rem; border: 1px solid var(--cp-border); border-radius: 1rem; color: var(--cp-text-muted); }
.nf-setup li::before { content: "0" counter(steps); display: block; color: var(--cp-accent); font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.nf-cta { padding: clamp(2rem, 5vw, 4rem); text-align: center; border-radius: 1.5rem; background: var(--cp-accent-soft); scroll-margin-top: 7rem; }
.nf-cta .nf-eyebrow { justify-content: center; }
.nf-disclaimer { font-size: .75rem; line-height: 1.7; margin-top: 1.5rem; }
.nf-related { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--cp-border); padding: 1.5rem 0; margin-top: 2rem; }
.nf-home-feature { padding: 7.5rem 0 3rem; }
.nf-home-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.nf-home-copy { min-width: 0; max-width: 34rem; }
.nf-home-grid h2 { margin-bottom: 1.25rem; letter-spacing: -.045em; line-height: 1.15; text-wrap: balance; }
.nf-home-copy > p { margin-bottom: 0; line-height: 1.7; }
.nf-home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.75rem 0 1.25rem; }
.nf-home-actions .btn { min-height: 3rem; padding-inline: 1.25rem; }
.nf-home-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; max-width: 40rem; justify-self: end; align-items: stretch; }
.nf-home-card { min-width: 0; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 1.25rem; overflow: hidden; text-decoration: none; box-shadow: 0 1rem 2.5rem -.75rem color-mix(in srgb, var(--cp-accent) 10%, transparent); transition: border-color .2s, box-shadow .2s; }
.nf-home-card:hover { border-color: var(--cp-accent); box-shadow: 0 1rem 2.5rem -.75rem color-mix(in srgb, var(--cp-accent) 20%, transparent); }
.nf-home-card:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 4px; }
.nf-home-card-media { aspect-ratio: 1; background: linear-gradient(145deg, var(--cp-accent-soft), var(--cp-surface)); }
.nf-home-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nf-home-card-label { display: flex; align-items: center; gap: .5rem; min-height: 3.5rem; padding: .85rem 1rem; border-top: 1px solid var(--cp-border); font-weight: 700; font-size: .85rem; color: var(--cp-text); }
.nf-home-card-label > i:first-child { color: var(--cp-accent); }
.nf-home-card-label > i:last-child { margin-left: auto; flex-shrink: 0; color: var(--cp-accent); }
.nf-home-areas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.nf-home-areas a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .45rem .8rem .45rem .45rem; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: .82rem; font-weight: 700; line-height: 1; text-decoration: none; transition: border-color .2s, background .2s, color .2s; }
.nf-home-areas a:hover { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-text); }
.nf-home-areas i { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 1rem; }
.nf-home-areas a:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 3px; }
.nf-home-carousel > .nf-carousel-controls { margin-top: 0; padding-top: .75rem; padding-bottom: .75rem; }
/* Each home hero keeps its natural proportions; JS eases the stage to the selected slide's height. */
.nf-home-carousel .nf-carousel-stage { position: relative; display: block; overflow: hidden; transition: height .4s ease; }
.nf-home-carousel .nf-carousel-slide { position: absolute; inset: 0 0 auto; }
.nf-home-carousel .nf-carousel-slide[data-active="true"] { position: relative; }
#nf-gallery-title { scroll-margin-top: 7rem; }
/* Web releases: browser-framed covers, theme-paired screenshots */
.nf-theme img.dark-mode-img, .nf-carousel img.dark-mode-img { display: none; }
[data-bs-theme="dark"] .nf-theme img.dark-mode-img, [data-bs-theme="dark"] .nf-carousel img.dark-mode-img { display: block; }
[data-bs-theme="dark"] .nf-theme img.light-mode-img, [data-bs-theme="dark"] .nf-carousel img.light-mode-img { display: none; }
.nf-web-cover::before { content: ""; display: block; height: 1.7rem; border: 1px solid var(--cp-border); border-bottom: 0; border-radius: .8rem .8rem 0 0; background: radial-gradient(circle at .85rem 50%, #ef4444 .26rem, transparent .32rem), radial-gradient(circle at 1.55rem 50%, #f59e0b .26rem, transparent .32rem), radial-gradient(circle at 2.25rem 50%, #22c55e .26rem, transparent .32rem), color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.nf-spotlight-art.nf-web-cover { background: transparent; }
.nf-spotlight-art.nf-web-cover img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--cp-border); border-top: 0; border-radius: 0 0 .8rem .8rem; background: var(--cp-surface); }
.nf-release-art.nf-web-cover img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--cp-border); border-top: 0; border-radius: 0 0 .8rem .8rem; background: var(--cp-surface); }
.is-list .nf-release-art.nf-web-cover::before { height: 1rem; border-radius: .5rem .5rem 0 0; background-size: 100% 100%; }
.is-list .nf-release-art.nf-web-cover img { border-radius: 0 0 .5rem .5rem; }
.nf-stage-web .nf-stage-pills { top: 4.5%; left: 5%; right: 5%; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.2cqw; }
.nf-stage-web .nf-stage-pills li { padding: 1.2cqw 1.9cqw; font-size: clamp(.56rem, 2cqw, .74rem); }
.nf-stage-web .nf-stage-pills li.is-new { font-size: clamp(.5rem, 1.7cqw, .64rem); }
.nf-stage-web .nf-detail-cover { top: 24%; bottom: 5%; left: 6%; right: 6%; width: auto; aspect-ratio: auto; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--cp-border); border-radius: 1.6cqw; background: var(--cp-surface); box-shadow: 0 34px 60px -22px rgba(27, 19, 64, .5); }
.nf-stage-web .nf-detail-cover::before { content: ""; flex: none; height: 3.4cqw; border-bottom: 1px solid var(--cp-border); background: radial-gradient(circle at 1.6cqw 50%, #ef4444 .5cqw, transparent .62cqw), radial-gradient(circle at 3cqw 50%, #f59e0b .5cqw, transparent .62cqw), radial-gradient(circle at 4.4cqw 50%, #22c55e .5cqw, transparent .62cqw), color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.nf-stage-web .nf-detail-cover img { flex: 1; min-height: 0; height: auto; object-fit: cover; object-position: top; border-radius: 0; }
.nf-stage-web .nf-stage-callout-a { left: 3%; bottom: 4%; width: 52%; }
.nf-stage-web .nf-stage-callout-b { top: auto; right: 3%; bottom: 22%; width: 44%; }
.nf-gallery-web .nf-gallery-image img { height: auto; max-height: 34rem; }
/* Email frame accents sampled from the supplied email artwork. */
.nf-email-blue { --cp-email-accent: #3568e9; }
.nf-email-amber { --cp-email-accent: #a95303; }
.nf-email-violet { --cp-email-accent: #5d46de; }
.nf-email-cover { padding: 1rem; border: 1px solid color-mix(in srgb, var(--cp-email-accent) 55%, var(--cp-border)); background: linear-gradient(145deg, color-mix(in srgb, var(--cp-email-accent) 16%, var(--cp-surface)), var(--cp-surface)); }
.nf-spotlight-art.nf-email-cover img { height: auto; aspect-ratio: auto; border-radius: 1rem; }
.nf-service-nav { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 3rem; }
.nf-service-nav a { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem; min-height: 2.75rem; border: 1px solid var(--cp-border); border-radius: 999px; color: var(--cp-text); background: var(--cp-surface); text-decoration: none; font-size: .85rem; font-weight: 700; }
.nf-service-nav a:hover { border-color: var(--cp-accent); background: var(--cp-accent-soft); }
.nf-service-nav i { color: var(--cp-accent); font-size: 1.2rem; }
.nf-service-heading { max-width: 48rem; margin-bottom: 2.5rem; }
.nf-service-heading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.035em; }
.nf-email-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 2rem 3rem; }
.nf-email-card { min-width: 0; margin: 0; }
.nf-email-card:nth-child(even) { margin-top: 4rem; }
.nf-email-frame { display: block; padding: clamp(.6rem, 1.6vw, 1.25rem); border: 2px solid color-mix(in srgb, var(--cp-email-accent) 60%, var(--cp-border)); border-radius: 1.5rem; background: linear-gradient(150deg, color-mix(in srgb, var(--cp-email-accent) 18%, var(--cp-surface)), var(--cp-surface)); box-shadow: 0 12px 28px color-mix(in srgb, var(--cp-email-accent) 10%, transparent); }
.nf-email-frame img { display: block; width: 100%; height: auto; border-radius: 1rem; }
.nf-email-card figcaption { position: relative; padding: 1.5rem 0 1rem 3.5rem; }
.nf-email-card figcaption > .nf-service-icon { position: absolute; left: 0; top: 1.5rem; }
.nf-email-card h3 { font-size: 1.15rem; line-height: 1.45; overflow-wrap: anywhere; }
.nf-email-card p { font-size: .9rem; line-height: 1.75; margin-bottom: 0; }
.nf-service-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 1px solid var(--cp-border); border-radius: .75rem; color: var(--cp-accent); background: var(--cp-accent-soft); font-size: 1.35rem; }
.nf-email-card .nf-service-icon { border-color: color-mix(in srgb, var(--cp-email-accent) 50%, var(--cp-border)); background: color-mix(in srgb, var(--cp-email-accent) 12%, var(--cp-surface)); color: var(--cp-text); }
.nf-service-section { margin-top: 5rem; scroll-margin-top: 7rem; }
.nf-service-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.nf-service-capability { border: 1px solid var(--cp-border); border-radius: 1rem; background: var(--cp-surface); padding: 1.5rem; min-width: 0; }
.nf-service-capability h3 { font-size: 1.1rem; margin: 1rem 0 .75rem; }
.nf-service-capability p { margin-bottom: 0; font-size: .95rem; line-height: 1.75; }
.nf-service-capability summary { display: flex; align-items: center; gap: .75rem; cursor: pointer; font-weight: 700; list-style: none; }
.nf-service-capability summary::-webkit-details-marker { display: none; }
.nf-service-capability summary > .bx-chevron-down { margin-left: auto; flex-shrink: 0; }
.nf-service-capability[open] summary > .bx-chevron-down { transform: rotate(180deg); }
.nf-service-capability[open] { background: var(--cp-accent-soft); }
.nf-service-capability[open] p { margin-top: 1rem; }
.nf-service-note { display: flex; gap: 1rem; padding: 1.5rem; margin-top: 3rem; background: var(--cp-accent-soft); border: 1px solid var(--cp-border); border-radius: 1rem; }
.nf-service-note > i { font-size: 1.5rem; color: var(--cp-accent); }
.nf-service-note p { margin: .5rem 0 0; }
@media (max-width: 767.98px) {
    .nf-email-grid, .nf-service-capabilities { grid-template-columns: minmax(0, 1fr); }
    .nf-email-grid { gap: 1.5rem; }
    .nf-email-card:nth-child(even) { margin-top: 0; }
    .nf-service-nav { gap: .5rem; }
    .nf-service-nav a { font-size: .8rem; }
    .nf-service-capability { padding: 1rem; }
}
@media (max-width: 991.98px) {
    .nf-intro { grid-template-columns: 1fr; gap: 1.5rem; }
    .nf-detail-stage { justify-self: center; max-width: 32rem; }
    .nf-intro-art { justify-self: center; max-width: 30rem; }
    .nf-home-feature { padding-block: 7rem 2rem; }
    .nf-home-grid { grid-template-columns: 1fr; gap: 2rem; }
    .nf-home-copy { max-width: 38rem; }
    .nf-home-art { max-width: 34rem; justify-self: start; }
    .nf-spotlight, .nf-detail-hero { gap: 1.5rem; }
    .nf-spotlight h2, .nf-detail-hero h1 { font-size: 2.4rem; }
    .nf-area { gap: .6rem; padding: 1rem; }
    .nf-area > i:last-child { display: none; }
}
@media (max-width: 767.98px) {
    .nf-page { padding-top: 7rem; }
    .nf-areas { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .nf-area { flex-direction: column; align-items: flex-start; padding: .85rem; }
    .nf-area small { font-size: .65rem; }
    .nf-area strong { font-size: .8rem; }
    .nf-spotlight, .nf-detail-hero, .nf-watch, .nf-gallery-stage { grid-template-columns: 1fr; }
    .nf-spotlight-art { max-width: 26rem; width: 100%; margin: auto; }
    .nf-spotlight h2 { font-size: 2.15rem; }
    .nf-detail-stage { aspect-ratio: 1; }
    .nf-stage-web .nf-detail-cover { top: 28%; }
    .nf-stage-callout-b { display: none; }
    .nf-library-heading { flex-wrap: wrap; }
    .nf-highlights { gap: .75rem; }
    .nf-highlights strong { font-size: 1.3rem; }
    .nf-highlights span { font-size: .75rem; }
    .nf-watch { gap: 1.5rem; }
    .nf-video-wrap { max-width: 28rem; width: 100%; margin: auto; }
    .nf-gallery-image img { height: 24rem; }
    .nf-setup ol { grid-template-columns: 1fr; }
    .nf-release-art img { height: 16rem; }
    .is-list .nf-release-card { grid-template-columns: 6.5rem 1fr; }
    .is-list .nf-release-art { padding: .4rem; }
    .is-list .nf-release-art img { height: 6rem; }
    .is-list .nf-release-copy { padding: 1rem; }
    .is-list h3 { font-size: 1.05rem; }
    .nf-carousel-controls { gap: .25rem; }
    .nf-slide-selector { padding: .45rem .65rem; font-size: .7rem; }
    .nf-home-art { gap: .6rem; }
    .nf-home-card { border-radius: .85rem; }
    .nf-home-card-label { gap: .35rem; min-height: 3.25rem; padding: .65rem .6rem; font-size: .7rem; }
    .nf-home-areas { gap: .45rem; }
    .nf-home-areas a { flex: 1 1 0; justify-content: center; padding-right: .45rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .nf-carousel-slide, .nf-area, .nf-release-card, .nf-home-card, .nf-home-carousel .nf-carousel-stage { transition: none; }
    .nf-flow, .nf-float, .nf-pulse { animation: none; }
    .nf-stage-float-a, .nf-stage-float-b, .nf-stage-pills li.is-new::before { animation: none; }
}