/* Shared Figma hero — grid + teal glow with soft edge blend (all pages) */

:root {
    --pyn-figma-hero-bg: #FAFCFB;
    --pyn-figma-hero-grid-line: #E5EAE8;
    --pyn-figma-hero-glow: rgba(0, 167, 157, 0.14);
}

body.pyn-figma-home,
body.pyn-figma-compliance,
body.pyn-figma-products,
body.pyn-figma-travelassist,
body.pyn-figma-contact,
body.pyn-figma-developer,
body.pyn-figma-legal,
body.pyn-figma-about,
body.pyn-figma-platform {
    overflow-x: clip;
}

/* Hero band background — same off-white as Figma home */
body.pyn-figma-home .pyn-hero,
body.pyn-figma-home .pyn-hero-stats,
body.pyn-figma-compliance .pyn-compliance-grid-band,
body.pyn-figma-products .pyn-solutions-grid-band,
body.pyn-figma-travelassist .pyn-ta-figma-hero,
body.pyn-figma-contact .pyn-contact-grid-band,
body.pyn-figma-developer .pyn-dev-grid-band,
body.pyn-figma-legal .pyn-legal-figma-grid-band {
    background: var(--pyn-figma-hero-bg) !important;
}

/* Grid — full viewport width, extends to left/right corners; soft fade top/bottom only */
body.pyn-figma-home .pyn-hero-grid-bg,
body.pyn-figma-compliance .pyn-compliance-grid-bg,
body.pyn-figma-products .pyn-solutions-grid-bg,
body.pyn-figma-travelassist .pyn-ta-hero-bg-grid,
body.pyn-figma-contact .pyn-contact-grid-bg,
body.pyn-figma-developer .pyn-dev-grid-bg,
body.pyn-figma-legal .pyn-legal-figma-grid-bg {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: none !important;
    pointer-events: none;
    z-index: 0;
    background-color: transparent !important;
    background-image:
        linear-gradient(to right, var(--pyn-figma-hero-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pyn-figma-hero-grid-line) 1px, transparent 1px) !important;
    background-size: 80px 80px !important;
    background-position: -1px -1px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 20px, #000 64px, #000 calc(100% - 48px), rgba(0, 0, 0, 0.25) calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 20px, #000 64px, #000 calc(100% - 48px), rgba(0, 0, 0, 0.25) calc(100% - 16px), transparent 100%);
}

body.pyn-figma-home .pyn-hero-grid-bg,
body.pyn-figma-compliance .pyn-compliance-grid-bg,
body.pyn-figma-products .pyn-solutions-grid-bg,
body.pyn-figma-travelassist .pyn-ta-hero-bg-grid,
body.pyn-figma-contact .pyn-contact-grid-bg,
body.pyn-figma-developer .pyn-dev-grid-bg,
body.pyn-figma-legal .pyn-legal-figma-grid-bg,
body.pyn-figma-home .pyn-hero-glow,
body.pyn-figma-home .pyn-hero-glow-right,
body.pyn-figma-compliance .pyn-compliance-hero-glow,
body.pyn-figma-products .pyn-solutions-hero-glow,
body.pyn-figma-travelassist .pyn-ta-hero-bg-vector,
body.pyn-figma-contact .pyn-contact-hero-glow,
body.pyn-figma-developer .pyn-dev-hero-glow,
body.pyn-figma-legal .pyn-legal-figma-hero-glow {
    will-change: transform;
}

/* Band-level heroes: grid spans full section width */
body.pyn-figma-compliance .pyn-compliance-grid-bg,
body.pyn-figma-products .pyn-solutions-grid-bg,
body.pyn-figma-travelassist .pyn-ta-hero-bg-grid,
body.pyn-figma-contact .pyn-contact-grid-bg,
body.pyn-figma-developer .pyn-dev-grid-bg,
body.pyn-figma-legal .pyn-legal-figma-grid-bg {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Home: break grid out of 1280px container to viewport corners */
body.pyn-figma-home .pyn-hero-grid-bg {
    left: calc(50% - 50vw) !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
}

/* Teal glow — top-left (+ home top-right behind dashboard card) */
body.pyn-figma-home .pyn-hero-glow,
body.pyn-figma-compliance .pyn-compliance-hero-glow,
body.pyn-figma-products .pyn-solutions-hero-glow,
body.pyn-figma-travelassist .pyn-ta-hero-bg-vector,
body.pyn-figma-contact .pyn-contact-hero-glow,
body.pyn-figma-developer .pyn-dev-hero-glow,
body.pyn-figma-legal .pyn-legal-figma-hero-glow {
    position: absolute !important;
    width: min(1080px, 92vw) !important;
    height: min(440px, 52vh) !important;
    left: max(20px, 2vw) !important;
    right: auto !important;
    top: max(-180px, -22vh) !important;
    transform: none !important;
    margin: 0 !important;
    background: var(--pyn-figma-hero-glow) !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: blur(140px) !important;
    border-radius: 50% !important;
    pointer-events: none;
    z-index: 0;
}

body.pyn-figma-home .pyn-hero-glow {
    left: calc(50% - 50vw + max(20px, 2vw)) !important;
}

body.pyn-figma-home .pyn-hero-glow-right {
    position: absolute;
    width: min(960px, 72vw);
    height: min(420px, 50vh);
    right: calc(50% - 50vw + max(20px, 2vw));
    left: auto;
    top: max(-140px, -18vh);
    background: var(--pyn-figma-hero-glow);
    filter: blur(140px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Legacy corner overlays caused visible box edges */
body.pyn-figma-compliance .pyn-compliance-hero-gradient {
    display: none !important;
}

/* Do not hard-clip decorative layers (allows glow/grid to feather) */
body.pyn-figma-home .pyn-hero-upper,
body.pyn-figma-compliance .pyn-compliance-grid-band,
body.pyn-figma-products .pyn-solutions-grid-band,
body.pyn-figma-travelassist .pyn-ta-figma-hero,
body.pyn-figma-contact .pyn-contact-grid-band,
body.pyn-figma-developer .pyn-dev-grid-band,
body.pyn-figma-legal .pyn-legal-figma-grid-band {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

body.pyn-figma-home .pyn-hero {
    overflow: hidden;
}

/* Keep content above grid + glow */
body.pyn-figma-home .pyn-hero-grid,
body.pyn-figma-home .pyn-hero-stats,
body.pyn-figma-compliance .pyn-compliance-hero,
body.pyn-figma-products .pyn-solutions-hero,
body.pyn-figma-travelassist .pyn-ta-hero-inner,
body.pyn-figma-contact .pyn-contact-hero,
body.pyn-figma-developer .pyn-dev-hero,
body.pyn-figma-developer .pyn-dev-hero-inner,
body.pyn-figma-legal .pyn-legal-figma-hero,
body.pyn-figma-legal .pyn-legal-figma-hero-shell,
body.pyn-figma-legal .pyn-legal-figma-hero-inner {
    position: relative;
    z-index: 2;
}

body.pyn-figma-compliance .pyn-compliance-workflow-steps {
    overflow-x: clip;
}