/* ============================================
   G2M PAGE — Greenfield Growth Momentum
   Extends base styles.css
   ============================================ */


/* ============================================
   G2M THESIS — Two-column: Text + Chart
   ============================================ */

.g2m-thesis {
    position: relative;
    background: var(--navy-deep);
    padding: var(--section-pad) 0;
    overflow: hidden;
}

.g2m-thesis-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

/* --- Left column: Text --- */

.g2m-thesis-text {
    max-width: 560px;
}

.g2m-thesis-heading {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 600;
    color: var(--white);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.g2m-thesis-divider {
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-blue), transparent);
    margin-bottom: 32px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.g2m-thesis-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.g2m-thesis-body p {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.75;
}

.g2m-thesis-body p:last-child {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
}

/* Highlight styles */
.g2m-highlight-orange {
    color: #ffffff;
    font-weight: 700;
}

.g2m-highlight-teal {
    color: #ffffff;
    font-weight: 700;
}

.g2m-highlight-italic {
    font-style: italic;
}


/* ============================================
   SURVIVAL RATE CHART — Right column
   ============================================ */

.g2m-chart-card {
    background: #ffffff;
    border-radius: 16px;
    padding: clamp(24px, 3vw, 40px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Dark Glass variant (used on approach page) */
.g2m-chart-card--glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Dark-variant text overrides for glass card */
.g2m-chart-card--glass .g2m-chart-title { color: rgba(255, 255, 255, 0.9); }
.g2m-chart-card--glass .g2m-chart-label-stage { color: rgba(255, 255, 255, 0.8); }
.g2m-chart-card--glass .g2m-chart-label-arr { color: rgba(255, 255, 255, 0.45); }
.g2m-chart-card--glass .g2m-bar-label-above { color: rgba(255, 255, 255, 0.8); }
.g2m-chart-card--glass .g2m-legend-item span { color: rgba(255, 255, 255, 0.55); }
.g2m-chart-card--glass .g2m-chart-legend { border-top-color: rgba(255, 255, 255, 0.1); }
.g2m-chart-card--glass .g2m-legend-arr-line {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.5) 0px,
        rgba(255, 255, 255, 0.5) 6px,
        transparent 6px,
        transparent 10px
    );
}

.g2m-chart-title {
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 650;
    color: var(--navy);
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 36px);
}

/* Chart area — relative container, everything absolutely placed */
.g2m-chart-area {
    position: relative;
    height: 200px;
    margin: 0 24px;
}

/* ARR curve overlay */
.g2m-arr-curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* ---------- BARS ---------- */
.g2m-bar {
    position: absolute;
    bottom: 0;
    background: var(--accent-green);
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    transition: box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 2px 8px rgba(61, 207, 142, 0.15);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g2m-bar:hover {
    box-shadow: 0 6px 24px rgba(61, 207, 142, 0.35);
    filter: brightness(1.08);
}

.g2m-bar.g2m-bar-hovered {
    box-shadow: 0 6px 24px rgba(61, 207, 142, 0.35);
    filter: brightness(1.08);
    transform: scale(1.05);
    z-index: 10;
}

/* Percent label inside bars */
.g2m-bar-label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-top: 8px;
    pointer-events: none;
}

/* 3% bar: label above the bar in navy */
.g2m-bar-label-above {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    pointer-events: none;
}

/* ---------- GAP INDICATORS ---------- */
.g2m-gap-zone {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

/* Horizontal dotted lines at top and bottom of gap */
.g2m-gap-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 0;
    border-top: 2px dotted #ff5100;
}

.g2m-gap-line-top {
    top: 0;
}

.g2m-gap-line-bottom {
    bottom: 0;
}

/* Vertical dotted stem connecting top line to bottom line */
.g2m-gap-stem {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    border-left: 2px dotted rgba(255, 81, 0, 0.35);
}

/* The fail-rate pill, centered in the gap */
.g2m-gap-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #ff5100;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 30px;
    text-align: center;
    z-index: 2;
}

.g2m-gap-pill:hover,
.g2m-gap-pill.g2m-gap-hovered {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 3px 14px rgba(255, 81, 0, 0.45);
}

/* ---------- TOOLTIPS ---------- */
.g2m-tooltip {
    position: absolute;
    padding: 10px 14px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.g2m-tooltip.g2m-tooltip-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Bar tooltip — teal */
.g2m-tooltip-bar {
    background: var(--accent-green);
    color: #fff;
}

.g2m-tooltip-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent-green);
}

/* Gap tooltip — orange, arrow on left pointing to pill */
.g2m-tooltip-gap {
    background: #ff5100;
    color: #fff;
}

.g2m-tooltip-gap::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #ff5100;
}

/* Flipped gap tooltip — arrow on right when it overflows */
.g2m-tooltip-gap-flipped::before {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: #ff5100;
}

.g2m-tooltip-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.g2m-tooltip-sub {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.3;
    margin-top: 2px;
}

/* ---------- X-AXIS LABELS ---------- */
.g2m-chart-labels {
    display: flex;
    justify-content: space-around;
    padding: 14px 0 0;
    margin: 0 24px;
}

.g2m-chart-label {
    text-align: center;
    padding: 0 2px;
    flex: 1;
}

.g2m-chart-label-stage {
    display: block;
    font-size: clamp(8px, 1vw, 13px);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.g2m-chart-label-arr {
    display: block;
    font-size: clamp(7px, 0.85vw, 11px);
    font-weight: 400;
    color: var(--gray-400);
    margin-top: 2px;
}

/* ---------- LEGEND ---------- */
.g2m-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}

.g2m-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.g2m-legend-item span {
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 400;
    color: var(--gray-400);
}

.g2m-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.g2m-legend-cohort {
    background: var(--accent-green);
}

.g2m-legend-stalled {
    background: #ff5100;
}

.g2m-legend-arr-item {
    display: none;
}

.g2m-legend-arr-line {
    width: 28px;
    height: 2px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--navy) 0,
        var(--navy) 6px,
        transparent 6px,
        transparent 10px
    );
}


/* ============================================
   G2M MISSION — Shared emphasis treatments
   ============================================ */

/* Gradient underline — sole emphasis treatment */
.g2m-mission-underline {
    position: relative;
}

.g2m-mission-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
    border-radius: 1px;
    opacity: 0.6;
}

/* Italic — used on "Growth Chasm" only */
.g2m-mission-italic {
    font-style: italic;
}



/* ============================================
   G2M MISSION ALT — Cinematic full-bleed layout
   ============================================ */

.g2m-mission-alt {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Full-bleed photo — not cover-constrained so the peak can bleed off-edge */
.g2m-mission-alt-bg {
    position: absolute;
    inset: -50px;
    /* Zoom height to ~180% so the image is wide enough to fill;
       top-align (0%) so the snowy peak at the top of the photo
       is NOT clipped by the section ceiling */
    background-size: auto 180%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    will-change: transform;
}

/* Gradient: left ~42% is opaque navy (no image behind it);
   fades in from 42% so the mountain emerges from the dark */
.g2m-mission-alt-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 10, 31, 0.97) 0%,
        rgba(0, 10, 31, 0.97) 40%,
        rgba(0, 10, 31, 0.80) 54%,
        rgba(0, 10, 31, 0.40) 68%,
        rgba(0, 10, 31, 0.08) 82%,
        rgba(0, 10, 31, 0.0)  92%
    );
}

/* Subtle film-grain overlay */
.g2m-mission-alt-grain {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
}

/* Text content — left-anchored */
.g2m-mission-alt-inner {
    position: relative;
    z-index: 2;
    max-width: 880px;
    padding-top: clamp(80px, 10vw, 140px);
    padding-bottom: clamp(80px, 10vw, 140px);
    padding-left: clamp(60px, 8vw, 150px);
    padding-right: clamp(32px, 4vw, 60px);
}

/* "THE MISSION" label */
.g2m-mission-alt-tag {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-blue);
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(10px);
}

/* Gradient rule — accent line below the tag */
.g2m-mission-alt-rule {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, rgba(74, 144, 217, 0.65), transparent);
    margin-bottom: 32px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

/* Mission text — larger and left-aligned vs the centered version above */
.g2m-mission-alt-text {
    font-size: clamp(1.55rem, 3.3vw, 2.6rem);
    font-weight: 500;
    color: var(--white);
    line-height: 1.65;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(28px);
}

.g2m-mission-alt-text sup {
    font-size: 0.52em;
    color: inherit;
    font-weight: inherit;
    vertical-align: super;
    line-height: 0;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 769px) {
    .g2m-legend-arr-item {
        display: flex;
    }
}

@media (max-width: 1024px) {
    .g2m-thesis-inner {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    /* Thesis section stacks vertically */
    .g2m-thesis-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .g2m-thesis-text {
        max-width: 100%;
    }

    .g2m-chart-area {
        margin: 0 12px;
    }

    .g2m-arr-curve {
        display: none;
    }

    .g2m-gap-line {
        width: 28px;
    }

    .g2m-chart-labels {
        padding: 12px 0 0;
        margin: 0 12px;
    }

    /* Mission alt — on mobile the gradient shifts to top-to-bottom
       so the photo shows through at the bottom behind the text */
    .g2m-mission-alt {
        min-height: 70vh;
        align-items: flex-end;
    }

    .g2m-mission-alt-veil {
        background: linear-gradient(
            to bottom,
            rgba(0, 10, 31, 0.97) 0%,
            rgba(0, 10, 31, 0.92) 55%,
            rgba(0, 10, 31, 0.60) 80%,
            rgba(0, 10, 31, 0.25) 100%
        );
    }

    .g2m-mission-alt-inner {
        padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 48px) clamp(48px, 8vw, 80px);
        max-width: 100%;
    }

    .g2m-mission-alt-text {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
}

@media (max-width: 480px) {
    .g2m-gap-pill {
        font-size: 9px;
        padding: 1px 6px;
    }

    .g2m-gap-line {
        width: 20px;
    }
}