/* ==========================================================================
   Homepage Bento Grid — v3.6.0

   Asymmetric grid: hero (2x2) + 5 satellite cells. Each cell is an anchor
   with a background image, dark gradient overlay, and stacked text content.
   Variants ('hero', 'kit', 'prelaunch', 'category', 'new') swap accent colors.

   Layout breakpoints:
   - >= 992px: 3 col × 3 row, hero spans 2x2
   - 600-991:  2 col, hero spans full width
   - <  600:   single column stack
   ========================================================================== */

.pc-bento-section {
    width: 100%;
    /* v3.9.17: full-bleed — no padding around the bento on any side.
       The block sits flush against the header above and the next
       section below; cells reach all the way to the viewport edges. */
    padding: 0;
    background: var(--color-surface);
}

.pc-bento {
    display: grid;
    gap: var(--pc-space-md);
    /* v3.9.17: max-width and horizontal padding removed so the grid
       spans full viewport width. Internal gap between cells kept. */
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 240px 240px 300px;
    grid-template-areas:
        "hero hero tr1"
        "hero hero tr2"
        "b1   b2   b3";
}

.pc-bento--area-hero { grid-area: hero; }
.pc-bento--area-tr1  { grid-area: tr1; }
.pc-bento--area-tr2  { grid-area: tr2; }
.pc-bento--area-b1   { grid-area: b1; }
.pc-bento--area-b2   { grid-area: b2; }
.pc-bento--area-b3   { grid-area: b3; }

/* --- Cell base --- */
.pc-bento-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container, #1a1a1a);
    color: #fff;
    text-decoration: none;
    transition: transform 220ms var(--easing-standard, ease-out),
                box-shadow 220ms var(--easing-standard, ease-out);
    isolation: isolate;
}

.pc-bento-cell:hover,
.pc-bento-cell:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--elevation-3, 0 8px 24px rgba(0,0,0,0.18));
}

.pc-bento-cell:focus-visible {
    outline: 2px solid var(--color-primary, #125e7a);
    outline-offset: 2px;
}

/* --- Layered: image + dark gradient + content --- */
.pc-bento-cell__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 600ms var(--easing-decelerate, ease-out);
}

.pc-bento-cell:hover .pc-bento-cell__bg {
    transform: scale(1.04);
}

.pc-bento-cell__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.15) 75%,
        rgba(0,0,0,0) 100%);
}

.pc-bento-cell__content {
    position: relative;
    z-index: 2;
    padding: var(--pc-space-lg, 24px);
    color: #fff;
}

/* --- Typography --- */
.pc-bento-cell__eyebrow {
    margin: 0 0 8px;
    font-family: var(--pc-font-family, inherit);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
}

.pc-bento-cell__title {
    margin: 0 0 8px;
    font-family: var(--pc-font-display, var(--pc-font-family, sans-serif));
    font-size: 26px;
    font-weight: 700;
    line-height: 1.12;
    color: #fff;
}

.pc-bento--hero .pc-bento-cell__title {
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.pc-bento-cell__desc {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,0.86);
    max-width: 92%;
}

.pc-bento--hero .pc-bento-cell__desc {
    font-size: 16px;
    max-width: 75%;
}

/* --- CTAs --- */
.pc-bento-cell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.pc-bento-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md, 8px);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.pc-bento-cta--filled {
    background: var(--pc-accent, #f59e0b);
    color: var(--pc-accent-on, #1a1a1a);
}

.pc-bento-cell:hover .pc-bento-cta--filled {
    background: var(--pc-accent-hover, #fbbf24);
}

.pc-bento-cta--outlined {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.55);
}

.pc-bento-cell:hover .pc-bento-cta--outlined {
    background: rgba(255,255,255,0.18);
    border-color: #fff;
}

/* --- Variant: kit (cool teal accent on overlay) --- */
.pc-bento--kit .pc-bento-cell__overlay {
    background: linear-gradient(to top,
        rgba(18, 94, 122, 0.92) 0%,
        rgba(18, 94, 122, 0.55) 50%,
        rgba(18, 94, 122, 0.05) 100%);
}

/* --- Variant: prelaunch (warm amber wash — for darker product renders) ---
   Use this when the cell image is naturally darker (e.g. Move Ultralight on
   a black/dark background). For light/white-background images, use the
   `prelaunch-blue` variant instead — the soft amber wash here doesn't
   provide enough contrast for white text over a white photo. */
.pc-bento--prelaunch {
    background: linear-gradient(135deg, #b8770d 0%, #f59e0b 100%);
}

.pc-bento--prelaunch .pc-bento-cell__overlay {
    background: linear-gradient(135deg,
        rgba(184, 119, 13, 0.0) 0%,
        rgba(245, 158, 11, 0.20) 100%);
}

.pc-bento--prelaunch .pc-bento-cell__title,
.pc-bento--prelaunch .pc-bento-cell__eyebrow,
.pc-bento--prelaunch .pc-bento-cell__desc {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* --- Variant: prelaunch-blue (cool brand-teal for HealthyPi 6) ---
   v3.8.4: distinct from amber `prelaunch` so two coming-soon cells are
   visually differentiated. Strong dark-teal bottom gradient guarantees
   readable white text over ANY image background (including the white
   HP6 product render). */
.pc-bento--prelaunch-blue {
    background: linear-gradient(135deg, #0A2933 0%, #2C6E84 100%);
}

.pc-bento--prelaunch-blue .pc-bento-cell__overlay {
    background: linear-gradient(to top,
        rgba(10, 41, 51, 0.88) 0%,         /* deep brand-blue — text-safe */
        rgba(31, 78, 94, 0.55) 38%,
        rgba(44, 110, 132, 0.20) 75%,      /* teal wash mid-up — keeps prelaunch-blue identity */
        rgba(44, 110, 132, 0) 100%);
}

.pc-bento--prelaunch-blue .pc-bento-cell__title,
.pc-bento--prelaunch-blue .pc-bento-cell__eyebrow,
.pc-bento--prelaunch-blue .pc-bento-cell__desc {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* --- Variant: category (deep neutral, image-led) --- */
.pc-bento--category .pc-bento-cell__overlay {
    background: linear-gradient(to top,
        rgba(20, 20, 22, 0.85) 0%,
        rgba(20, 20, 22, 0.4) 60%,
        rgba(20, 20, 22, 0.05) 100%);
}

/* ==========================================================================
   v3.9.9 — Bottom-row "flat-dark" variants (b1, b2, b3)

   The category/prelaunch-blue gradient overlays were replaced for the bottom
   row with three solid-color cells: each gets its own deep brand color, a
   4px top accent stripe, and (for image cells) a top-anchored image with a
   solid opaque text panel underneath. No gradients — every surface is a
   single solid color or one flat rgba tint over an image. This guarantees
   readable white text regardless of the underlying image's brightness
   (the b1 no-image cell was rendering near-white from the M3
   surface-container fallback; the b3 light-background image was bleeding
   through the partial gradient).
   ========================================================================== */

/* Shared base for all flat-dark variants (bottom row + tr1/tr2 in v3.9.14) */
.pc-bento--flat-teal,
.pc-bento--flat-indigo,
.pc-bento--flat-plum,
.pc-bento--flat-slate {
    background-color: var(--pc-flat-bg);
}

/* Hide the legacy multi-stop gradient overlay element */
.pc-bento--flat-teal   .pc-bento-cell__overlay,
.pc-bento--flat-indigo .pc-bento-cell__overlay,
.pc-bento--flat-plum   .pc-bento-cell__overlay,
.pc-bento--flat-slate  .pc-bento-cell__overlay {
    display: none;
}

/* Image fills the whole cell — the opaque content panel below visually
   crops it to whatever sits above the text. (Earlier 55% cap caused the
   panel to overlap the image when content + CTA exceeded the bottom 45%.)
   Top-anchored background-position keeps the subject in the visible band. */
.pc-bento--flat-teal   .pc-bento-cell__bg,
.pc-bento--flat-indigo .pc-bento-cell__bg,
.pc-bento--flat-plum   .pc-bento-cell__bg,
.pc-bento--flat-slate  .pc-bento-cell__bg {
    inset: 0;
    background-position: center top;
}

/* v3.9.17: HealthyPi Move source photo has the watch face vertically
   centered with strap above + below. `center top` cropped to just the
   upper strap; switching this cell to centered anchoring brings the
   watch face into the visible band above the content panel. */
.pc-bento--area-tr2 .pc-bento-cell__bg {
    background-position: center center;
}

.pc-bento--flat-teal   .pc-bento-cell__bg::after,
.pc-bento--flat-indigo .pc-bento-cell__bg::after,
.pc-bento--flat-plum   .pc-bento-cell__bg::after,
.pc-bento--flat-slate  .pc-bento-cell__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--pc-flat-tint);
}

/* Content panel — solid color over the lower portion of the image.
   Footprint tightened (less padding, smaller type, 2-line desc clamp,
   slimmer CTA) so the image stays visible in the top ~half of the cell. */
.pc-bento--flat-teal   .pc-bento-cell__content,
.pc-bento--flat-indigo .pc-bento-cell__content,
.pc-bento--flat-plum   .pc-bento-cell__content,
.pc-bento--flat-slate  .pc-bento-cell__content {
    background-color: var(--pc-flat-bg);
    padding: 12px 16px 14px;
}

.pc-bento--flat-teal   .pc-bento-cell__title,
.pc-bento--flat-indigo .pc-bento-cell__title,
.pc-bento--flat-plum   .pc-bento-cell__title,
.pc-bento--flat-slate  .pc-bento-cell__title {
    font-size: 19px;
    line-height: 1.15;
    margin: 0 0 4px;
}

.pc-bento--flat-teal   .pc-bento-cell__eyebrow,
.pc-bento--flat-indigo .pc-bento-cell__eyebrow,
.pc-bento--flat-plum   .pc-bento-cell__eyebrow,
.pc-bento--flat-slate  .pc-bento-cell__eyebrow {
    margin: 0 0 4px;
    color: var(--pc-flat-accent);
}

.pc-bento--flat-teal   .pc-bento-cell__desc,
.pc-bento--flat-indigo .pc-bento-cell__desc,
.pc-bento--flat-plum   .pc-bento-cell__desc,
.pc-bento--flat-slate  .pc-bento-cell__desc {
    font-size: 12.5px;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-bento--flat-teal   .pc-bento-cta,
.pc-bento--flat-indigo .pc-bento-cta,
.pc-bento--flat-plum   .pc-bento-cta,
.pc-bento--flat-slate  .pc-bento-cta {
    padding: 6px 12px;
    font-size: 12px;
}

.pc-bento--flat-teal   .pc-bento-cell__actions,
.pc-bento--flat-indigo .pc-bento-cell__actions,
.pc-bento--flat-plum   .pc-bento-cell__actions,
.pc-bento--flat-slate  .pc-bento-cell__actions {
    margin-top: 2px;
}

/* 4px top accent stripe via ::before — also applied to the prelaunch hero
   so the whole bento shares a consistent stripe motif while the hero keeps
   its full-bleed amber treatment for campaign drama. */
.pc-bento--flat-teal::before,
.pc-bento--flat-indigo::before,
.pc-bento--flat-plum::before,
.pc-bento--flat-slate::before,
.pc-bento--prelaunch::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background-color: var(--pc-flat-accent, #dc9814);
    z-index: 3;
}

/* --- Per-color tokens --- */
.pc-bento--flat-teal {
    --pc-flat-bg: #0A2933;       /* deep brand teal */
    --pc-flat-accent: #dc9814;   /* brand gold */
    --pc-flat-tint: rgba(10,41,51,0.32);
}

.pc-bento--flat-indigo {
    --pc-flat-bg: #0E1F4D;       /* deep indigo */
    --pc-flat-accent: #5fd0e0;   /* cyan */
    --pc-flat-tint: rgba(14,31,77,0.28);
}

.pc-bento--flat-plum {
    --pc-flat-bg: #2B1638;       /* deep plum (M3 tertiary direction) */
    --pc-flat-accent: #ff8a65;   /* warm coral */
    --pc-flat-tint: rgba(43,22,56,0.30);
}

.pc-bento--flat-slate {
    --pc-flat-bg: #1F2933;       /* deep charcoal/slate */
    --pc-flat-accent: #f7d28a;   /* soft gold */
    --pc-flat-tint: rgba(31,41,51,0.30);
}

/* Filled CTA on indigo prelaunch — cyan chip stands out */
.pc-bento--flat-indigo .pc-bento-cta--filled {
    background: #5fd0e0;
    color: #0E1F4D;
}
.pc-bento--flat-indigo:hover .pc-bento-cta--filled {
    background: #7ddae8;
}

/* --- Variant: new (corner ribbon) --- */
.pc-bento--new::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pc-accent, #f59e0b);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
    z-index: 3;
    animation: pc-bento-pulse 2.5s ease-in-out infinite;
}

@keyframes pc-bento-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05); }
}

/* --- Tablet: hero full-width, 2-col satellites --- */
@media (max-width: 992px) {
    .pc-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 360px 220px 280px 280px;
        grid-template-areas:
            "hero hero"
            "tr1  tr2"
            "b1   b2"
            "b3   b3";
    }

    .pc-bento--hero .pc-bento-cell__title {
        font-size: 36px;
    }
}

/* --- Mobile: single-column stack --- */
@media (max-width: 600px) {
    .pc-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "hero"
            "tr1"
            "tr2"
            "b1"
            "b2"
            "b3";
        gap: var(--pc-space-sm, 12px);
    }

    .pc-bento-cell {
        min-height: 220px;
    }

    .pc-bento--area-hero {
        min-height: 320px;
    }

    .pc-bento--hero .pc-bento-cell__title {
        font-size: 30px;
    }

    .pc-bento--hero .pc-bento-cell__desc {
        max-width: 100%;
    }
}

/* Reduced motion: kill the hover lift and pulse */
@media (prefers-reduced-motion: reduce) {
    .pc-bento-cell,
    .pc-bento-cell__bg,
    .pc-bento--new::after {
        transition: none;
        animation: none;
    }

    .pc-bento-cell:hover {
        transform: none;
    }

    .pc-bento-cell:hover .pc-bento-cell__bg {
        transform: none;
    }
}

/* ==========================================================================
   v3.9.22 — Coming Soon Teaser Banner (temporary, remove after launch)
   ========================================================================== */

.pc-teaser-banner {
    background: linear-gradient(135deg, #0a1628 0%, #0f2d3d 50%, #0a1628 100%);
    color: #fff;
    padding: 64px 24px;
    margin-top: 48px; /* v3.9.23: breathing room below bento grid */
    position: relative;
    overflow: hidden;
}

.pc-teaser-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(77, 168, 212, 0.03) 3px,
        rgba(77, 168, 212, 0.03) 4px
    );
    pointer-events: none;
}

.pc-teaser-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.pc-teaser-banner__badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 100px;
    background: rgba(77, 168, 212, 0.15);
    border: 1px solid rgba(77, 168, 212, 0.3);
    color: #4da8d4;
    font-family: var(--type-ui-sans, 'Jost', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.pc-teaser-banner__headline {
    font-family: var(--type-display, 'Saira', sans-serif);
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pc-teaser-banner__body {
    font-family: var(--type-body, 'Inter', 'Montserrat', sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 8px;
}

.pc-teaser-banner__body--secondary {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin-bottom: 24px;
}

.pc-teaser-banner__cta {
    display: inline-block;
    padding: 10px 24px;
    background: var(--color-accent, #F59E0B);
    color: #0a1628;
    font-family: var(--type-ui-sans, 'Jost', sans-serif);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 200ms ease, transform 150ms ease;
}

.pc-teaser-banner__cta:hover {
    background: #fbbf24;
    transform: translateY(-1px);
}

.pc-teaser-banner__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-teaser-banner__media video {
    width: 100%;
    max-width: 560px;
    border-radius: 12px;
    border: 1px solid rgba(77, 168, 212, 0.2);
    box-shadow: 0 0 60px rgba(77, 168, 212, 0.1);
    display: block;
}

@media (max-width: 768px) {
    .pc-teaser-banner {
        padding: 40px 16px;
    }
    .pc-teaser-banner__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .pc-teaser-banner__media {
        order: -1;
        margin-bottom: 16px;
    }
    .pc-teaser-banner__media video {
        max-width: 100%;
    }
}