/* NavTech products spotlight v2 — tabbed hero (Figma redesign, node 71:328).
   Sits right below the living-demo showcase: one product at a time — a
   category badge, a one-paragraph pitch, and two CTAs — beside a pastel
   gradient panel holding a product screenshot. The pill rail at the bottom
   switches products; each product tints the panel with its own gradient.
   v2: 16/17px type, full-height section, and a switch that glides — the
   rail's active pill is a single sliding element, not a per-tab background. */

/* Registered so the gradient pair can crossfade on tab switch; browsers
   without @property simply swap colors instantly. */
@property --p2-g1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #c9d9ff;
}
@property --p2-g2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #ebd3ff;
}

.products[data-products-archive][hidden] {
    display: none !important;
}

.products2[data-showcase-v2] {
    --p2-g1: #c9d9ff;
    --p2-g2: #ebd3ff;
    /* One easing shared by every moving part, so the pane, the gradient and
       the rail glider all decelerate on the same curve. */
    --p2-ease: cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2.5rem, 4.6vw, 4.5rem);
    padding: clamp(4.5rem, 7vw, 6.5rem) var(--page-edge, clamp(2rem, 7vw, 8rem)) clamp(2.75rem, 5vw, 4rem);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--bg-primary, #ffffff);
    transition: --p2-g1 0.7s var(--p2-ease), --p2-g2 0.7s var(--p2-ease);
}
.products2[data-active-product="prism"]  { --p2-g1: #c9eaff; --p2-g2: #d6d3ff; }
.products2[data-active-product="studio"] { --p2-g1: #ffe3c9; --p2-g2: #ffd3e0; }
.products2[data-active-product="flow"]   { --p2-g1: #cdf5d6; --p2-g2: #c9e6ff; }
.products2[data-active-product="grid"]   { --p2-g1: #d9d3ff; --p2-g2: #c9e3ff; }
.products2[data-active-product="speech"] { --p2-g1: #ffd3d6; --p2-g2: #ecd3ff; }
.products2[data-active-product="hr"]     { --p2-g1: #fff0c9; --p2-g2: #ffd6c9; }

/* The hero grows so the rail settles near the bottom, as in the design. */
.p2-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(16rem, 25rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5.8vw, 6.25rem);
    align-items: center;
    align-content: center;
    width: 100%;
    min-height: 0;
}

.products2[data-showcase-v2] .prod-head {
    width: 100%;
    /* A little more separation between the section introduction and the
       product spotlight below it. */
    margin: 0 0 clamp(0.75rem, 1.4vw, 1.25rem);
}

/* Left: copy panes stacked in one grid cell so the column keeps the height
   of the tallest pane and switching never shifts the layout. */
.p2-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.p2-panes {
    display: grid;
    width: 100%;
}
/* The pane itself only gates hit-testing and visibility — the fade and rise
   live on its children so badge and text can arrive one after the other.
   visibility lingers until the outgoing fade finishes. */
.p2-pane {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.26s;
}
.p2-pane.is-active {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.p2-pane > * {
    /* leaving: a quick, shallow sink so it clears before the next one rises */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}
.p2-pane.is-active > * {
    /* arriving: slower, eased, and staggered */
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.62s var(--p2-ease);
}
.p2-pane.is-active .p2-badge { transition-delay: 0.06s; }
.p2-pane.is-active .p2-desc { transition-delay: 0.13s; }

.p2-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.7rem 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    font-size: 0.9375rem;     /* 15px */
    line-height: 1.1;
    color: var(--text-body, #000000);
}
.p2-desc {
    font-size: 1.0625rem;     /* 17px */
    font-weight: 300 !important;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--text-body, #000000);
    max-width: 32em;
}

.p2-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.p2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-y, 10px) var(--button-padding-x, 20px);
    border-radius: 9999px;
    font-size: 1rem;          /* 16px */
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--p2-ease);
}
.p2-btn:active { transform: scale(0.97); }
.p2-btn-primary {
    background: var(--btn-primary-bg, #111111);
    color: var(--btn-primary-text, #ffffff);
}
.p2-btn-primary:hover { background: var(--btn-primary-hover, #333333); }
.p2-btn-ghost {
    border: 1px solid #cfcfcf;
    color: #111111;
}
.p2-btn-ghost:hover { border-color: #9c9ca1; }

/* Right: the tinted panel with the product screenshot. */
.p2-visual {
    border-radius: 6px;
    padding: clamp(2rem, 3.9vw, 4.2rem) clamp(1.6rem, 3.1vw, 3.4rem);
    background: linear-gradient(235deg, var(--p2-g1) 1%, var(--p2-g2) 99%);
}
.products2[data-showcase-v2] .prod-visual {
    height: clamp(29rem, 43vw, 36rem);
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}
.products2[data-showcase-v2] .q-frame {
    --q-r-frame: 12px;
    padding: 0;
    background: none;
    box-shadow: none;
}
.products2[data-showcase-v2] .q-app {
    border-radius: var(--q-r-frame);
}
.p2-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.p2-shot.is-swapping img {
    animation: p2-swap 0.62s var(--p2-ease);
}
@keyframes p2-swap {
    from { opacity: 0.35; transform: scale(0.985) translateY(7px); }
    to   { opacity: 1; transform: none; }
}

/* Bottom: the product rail. Every pill carries the same padding so the row
   never reflows on switch; the active one is marked by .p2-glider sliding
   behind it. Without JS the glider is absent and .is-active paints its own
   background instead. */
.p2-tabs {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 0.3125rem;
    border-radius: 10px;
    background: var(--bg-card, #f5f5f7);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.p2-tabs::-webkit-scrollbar { display: none; }
.p2-glider {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 10px;
    background: var(--text-primary, #1d1d1f);
    transform: translateX(0);
    transition: transform 0.16s var(--p2-ease), width 0.16s var(--p2-ease);
    pointer-events: none;
}
/* Armed only after the first measurement, so it doesn't fly in from x=0. */
.p2-glider:not(.is-armed) { transition: none; }
.p2-tab {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 0.85rem 1.15rem;
    border: 0;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    font-size: 1rem;          /* 16px */
    line-height: 1;
    letter-spacing: 0px;
    color: var(--text-body, #000000);
    white-space: nowrap;
    cursor: pointer;
    /* Keep the colour handoff quicker than conscious perception; the moving
       glider remains the only animation the user should notice. */
    transition: color 0.06s linear, opacity 0.16s ease;
}
.p2-tab:hover { opacity: 0.6; }
.p2-tab.is-active {
    background: var(--text-primary, #1d1d1f);
    color: #ffffff;
    opacity: 1;
    cursor: default;
    transition: color 0.06s linear;
}
.p2-tabs.has-glider .p2-tab.is-active { background: none; }
.p2-tab:focus-visible,
.p2-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #111827);
    outline-offset: 2px;
}

@media (max-width: 960px) {
    .products2 {
        min-height: auto;
        gap: 2rem;
    }
    .p2-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .products2[data-showcase-v2] .prod-head { margin-bottom: 0.5rem; }
    .p2-visual { width: 100%; }
}

/* Landscape phones: 100svh would squeeze the hero into a sliver. */
@media (max-height: 620px) {
    .products2 { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .products2 { transition: none; }
    .p2-pane > *,
    .p2-pane.is-active > * {
        transform: none;
        transition: opacity 0.2s ease;
        transition-delay: 0s;
    }
    .p2-glider { transition: none; }
    .p2-shot.is-swapping img { animation: none; }
    .p2-btn,
    .p2-tab,
    .p2-tab.is-active { transition: none; }
}