/* === PROGRAMS FEATURES — tabs layout === */

.ps-features {
    padding: 30px 0;
    background: var(--gray-50);
}

/* ── Section header ──────────────────────────────── */

.ps-features-header {
    margin-bottom: 56px;
}

.ps-features-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.ps-features-title {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 0;
}

/* Gold accent line — same pattern as ps-catalog-line elsewhere in theme */
.ps-features-title::after {
    content: '';
    display: block;
    width: 52px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 9999px;
    margin-top: 16px;
    margin-bottom: 20px;
}

.ps-features-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-500);
    max-width: 640px;
}

/* ── Two-column layout ───────────────────────────── */

.ps-features-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

@media (min-width: 768px) {
    .ps-features-layout {
        grid-template-columns: 288px 1fr;
        gap: 24px;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .ps-features-layout {
        grid-template-columns: 320px 1fr;
        gap: 32px;
    }
}

/*
 * Clear the reveal transform once the entry animation is done.
 * A non-none `transform` on this grid parent creates a containing block
 * that disrupts `position: sticky` on the nav rail below.
 */
.ps-features-layout.reveal.is-revealed {
    transform: none;
}

/* ── Nav rail — white card ───────────────────────── */

/*
 * Nav is a deep emerald rail on all breakpoints.
 * Mobile: horizontal scroll.
 * Desktop: vertical stack that stretches to content height.
 */
.ps-features-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 8px;
    /* Signature brand gradient (matches .process-section / .ai-contact-section). */
    background-color: var(--color-blue-dark);
    background-image: radial-gradient(circle at center, #025043 0%, #001F1A 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    scrollbar-width: none;
    counter-reset: tab-num;
}
.ps-features-nav::-webkit-scrollbar { display: none; }

/*
 * Mobile scroll affordance.
 *
 * Problem: on narrow screens the nav overflows horizontally but there's no
 * scrollbar (hidden above) and no visual cue that it can be swiped.
 *
 * Solution: CSS-only "scroll shadows" (Roma Komarov technique). Four layered
 * backgrounds — two dark shadows pinned to the left/right edges of the visible
 * box, and two "eraser" gradients that travel WITH the scrolled content
 * (`background-attachment: local`). When you're at an edge, the eraser
 * covers the shadow on that side; scroll away and the shadow re-emerges,
 * signalling "more content that way".
 *
 * Eraser colour matches the darker rim of the brand radial gradient
 * (≈#001F1A), so it blends into the rail instead of reading as a stripe.
 *
 * Scroll-snap adds a gentle tactile catch on each tab — reinforces the
 * "these are discrete swipable items" mental model without being rigid
 * (`proximity`, not `mandatory`).
 *
 * Desktop (>=768px) resets `background` back to the plain brand gradient.
 */
@media (max-width: 767px) {
    .ps-features-nav {
        background:
            linear-gradient(90deg, #001F1A, transparent) left / 24px 100% no-repeat local,
            linear-gradient(-90deg, #001F1A, transparent) right / 24px 100% no-repeat local,
            linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent) left / 18px 100% no-repeat,
            linear-gradient(-90deg, rgba(0, 0, 0, 0.45), transparent) right / 18px 100% no-repeat,
            radial-gradient(circle at center, #025043 0%, #001F1A 100%) var(--color-blue-dark);
        scroll-snap-type: x proximity;
        scroll-padding-inline: 8px;
    }

    .ps-features-tab {
        scroll-snap-align: start;
    }

    /*
     * `.ps-features-layout` hosts the one-time "swipe for more" pill hint
     * that JS injects on first viewport entry. Needs to be a positioning
     * context so the pill can anchor to it.
     */
    .ps-features-layout {
        position: relative;
    }
}

/*
 * Swipe hint pill — a small toast that appears above the nav on first
 * viewport entry on mobile, briefly explaining the scroll affordance.
 * Built and removed entirely by JS (see block's script.js); this is just
 * the visual treatment. One-shot per session (sessionStorage-gated).
 */
.ps-features-hint {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 8px;
    background: var(--color-primary);
    color: #001F1A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    /* Start slightly higher + invisible; .is-visible slides it down. */
    transform: translate(-50%, -130%);
    transition: opacity 260ms ease, transform 260ms ease;
}

.ps-features-hint.is-visible {
    opacity: 1;
    transform: translate(-50%, -115%);
}

/* Tiny pointer tail connecting the pill to the nav below. */
.ps-features-hint::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    transform: translateX(-50%) rotate(45deg);
    border-bottom-right-radius: 2px;
}

.ps-features-hint-arrow {
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    /* Gentle arrow bounce reinforces the "swipe horizontally" meaning. */
    animation: pfeat-hint-arrow 1.4s ease-in-out infinite;
}

.ps-features-hint-arrow:first-child { animation-delay: 0s; }
.ps-features-hint-arrow:last-child  { animation-delay: 0.2s; }

@keyframes pfeat-hint-arrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-3px); }
}

.ps-features-hint-arrow:last-child {
    animation-name: pfeat-hint-arrow-right;
}

@keyframes pfeat-hint-arrow-right {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-features-hint,
    .ps-features-hint-arrow {
        transition: opacity 160ms ease;
        animation: none;
    }
}

@media (min-width: 768px) {
    .ps-features-nav {
        flex-direction: column;
        overflow-x: visible;
        gap: 2px;
        padding: 10px;
    }
}

/*
 * Sticky nav rail on desktop.
 *
 * Top offset reads from `--sticky-top-offset` (see :root + html.is-header-hidden
 * in theme.css) so the rail hugs the header when it's visible and reclaims the
 * gap the moment the header auto-hides on downscroll — no dead space up top.
 *
 * `top` is transitioned on the same 320ms curve as the header itself, so the
 * rail slides up in lock-step instead of snapping.
 *
 * Stops naturally at the bottom of `.ps-features-layout` — never escapes the
 * section or overlaps the footer. Disabled on <768px where the nav is a
 * horizontal scroll strip. `align-self: start` is defensive; the grid parent
 * already sets `align-items: start`. `max-height` + `overflow-y: auto` is a
 * safety net for tab lists that outgrow the viewport.
 */
@media (min-width: 768px) {
    .ps-features-nav {
        position: sticky;
        top: var(--sticky-top-offset);
        align-self: start;
        max-height: calc(100vh - var(--sticky-top-offset) - 16px);
        overflow-y: auto;
        transition: top 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-features-nav {
        transition: none;
    }
}

/* ── Tab button ──────────────────────────────────── */

/*
 * ::before — CSS counter (01, 02, 03 …) in gold. Free, no PHP.
 * ::after  — chevron › on active tab, signals direction to panel.
 */
.ps-features-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.52);
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
    white-space: nowrap;
    flex-shrink: 0;
    counter-increment: tab-num;
}

@media (min-width: 768px) {
    .ps-features-tab {
        white-space: normal;
        flex-shrink: 1;
        padding: 13px 14px;
    }
}

/* Ordinal badge — small pill with counter number */
.ps-features-tab::before {
    content: counter(tab-num, decimal-leading-zero);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    background: rgba(246, 193, 46, 0.14);
    border-radius: 4px;
    padding: 2px 5px;
    flex-shrink: 0;
    line-height: 1.5;
    letter-spacing: 0.02em;
    transition: background 150ms ease, color 150ms ease;
}

.ps-features-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.10);
}

/* Active: refined highlight within deep emerald rail */
.ps-features-tab.is-active {
    color: var(--white);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Active badge — gold accent, stronger pill */
.ps-features-tab.is-active::before {
    color: var(--color-primary);
    background: rgba(246, 193, 46, 0.22);
}

/* Chevron — directional cue pointing toward the panel */
.ps-features-tab.is-active::after {
    content: '›';
    font-size: 18px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
    opacity: 1;
    margin-left: auto;
    flex-shrink: 0;
}

/* Hide chevron on mobile where it doesn't make directional sense */
@media (max-width: 767px) {
    .ps-features-tab.is-active::after {
        display: none;
    }
}

/* Desktop: gold left-bar indicator on active tab */
@media (min-width: 768px) {
    .ps-features-tab.is-active {
        box-shadow: inset 3px 0 0 var(--color-primary), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        border-color: transparent;
    }
}

.ps-features-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Panels ──────────────────────────────────────── */

.ps-features-panels {
    min-width: 0;
}

.ps-features-panel[hidden] {
    display: none;
}

/* Fade-in when panel becomes active — fires each time a tab is clicked */
@keyframes pfeat-fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ps-features-panel.is-active {
    animation: pfeat-fadein 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .ps-features-panel.is-active { animation: none; }
}

/* ── Card ────────────────────────────────────────── */

.ps-features-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 30px 40px 0px 40px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .ps-features-card {
       padding: 30px 40px 0px 40px;
    }
}

.ps-features-card-title {
    font-size: clamp(18px, 2.2vw, 23px);
    font-weight: 800;
    color: var(--color-secondary);
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}

.ps-features-card-desc {
    font-size: 15px;
    line-height: 1.75;
    color: var(--gray-500);
    margin-bottom: 5px;
    padding-bottom: 5px;
}
.ps-key-f-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-900);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-100);
}
/* ── Custom text insert ──────────────────────────── */

.ps-features-card-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--gray-600);
    margin-bottom: 28px;
    margin-top: 28px;
}

/* Allow basic editor output: paragraphs, lists, bold, links */
.ps-features-card-text p { margin: 0 0 1em; }
.ps-features-card-text p:last-child { margin-bottom: 0; }

.ps-features-card-text ul,
.ps-features-card-text ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.ps-features-card-text li { margin-bottom: 0.35em; }

.ps-features-card-text strong { color: var(--gray-900); font-weight: 700; }

.ps-features-card-text a {
    color: var(--color-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ps-features-card-text a:hover { opacity: 0.75; }

/* When text sits between two sections — give it breathing room above too */
.ps-features-card-text + .ps-features-grid,
.ps-features-card-text + .ps-features-benefits {
    margin-top: 4px;
}

/* ── Features grid — open items, icon as anchor ─── */

.ps-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

@media (min-width: 520px) {
    .ps-features-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
        row-gap: 18px;
    }
}

/* Open layout — no background boxes */
.ps-features-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: transform 160ms ease;
}

.ps-features-item:hover {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .ps-features-item { transition: none; }
}

.ps-features-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(246, 193, 46, 0.14);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    margin-top: 1px;
}

.ps-features-item-icon .ps-features-icon-glyph.material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'wght' 300, 'opsz' 24;
}

.ps-features-item-icon > img.ps-features-icon-glyph,
.ps-features-item-icon > .ps-features-icon-glyph.psoft-mask-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.ps-features-item-body {
    min-width: 0;
}

.ps-features-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
    margin-bottom: 4px;
}

.ps-features-item-desc {
    font-size: 13px;
    color: var(--gray-400);
    line-height: 1.6;
}

/* ── Benefits box ────────────────────────────────── */

.ps-features-benefits {
    background: rgba(2, 80, 67, 0.04);
    border: 1px solid rgba(2, 80, 67, 0.12);
    border-radius: 12px;
    padding: 22px 24px;
}

.ps-features-benefits-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(2, 80, 67, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-features-benefits-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* Single-column list with dividers */
.ps-features-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*
 * CSS grid trick: ::before (checkmark) placed in column 1, spanning
 * both row 1 (label) and row 2 (text) — no HTML wrapper needed.
 */
.ps-features-benefit {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(2, 80, 67, 0.08);
}

.ps-features-benefit:first-child {
    padding-top: 16px;
}

.ps-features-benefit:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Checkmark — spans label and text rows */
.ps-features-benefit::before {
    content: '✓';
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-secondary);
    opacity: 0.55;
    line-height: 1.4;
    padding-top: 1px;
}

.ps-features-benefit-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.3;
}

.ps-features-benefit-label::after {
    content: none;
}

.ps-features-benefit-text {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.55;
}