@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@300;400;500&display=swap');

/* Reset theme defaults for playbook */
body.page-template-gecko-playbook-combined {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-template-gecko-playbook-combined .wp-site-blocks {
    padding: 0 !important;
    margin: 0 !important;
}

body.page-template-gecko-playbook-combined .wp-site-blocks > * {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

body.page-template-gecko-playbook-combined .wp-site-blocks > header,
body.page-template-gecko-playbook-combined .wp-site-blocks > footer {
    display: none !important;
}

body.page-template-gecko-playbook-combined .entry-content,
body.page-template-gecko-playbook-combined .wp-block-shortcode,
body.page-template-gecko-playbook-combined .site-content,
body.page-template-gecko-playbook-combined .content-area,
body.page-template-gecko-playbook-combined main {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The theme's own header and footer are rendered by get_header()/get_footer()
   now, so this template's compact header would sit on top of the site nav —
   two logos and two right-hand links in the same strip. Hide ours, keep the
   theme's. The legacy #masthead/.site-header rules are kept in case another
   theme is ever active. */
body.page-template-gecko-playbook-combined #masthead,
body.page-template-gecko-playbook-combined #site-header,
body.page-template-gecko-playbook-combined .site-header,
body.page-template-gecko-playbook-combined .playbook-header {
    display: none !important;
}

/* The nav is fixed and, on the rest of the site, only takes a surface once the
   page scrolls — that works because those heroes are dark. This hero is light
   green, so a transparent bar leaves the logo and links barely legible and the
   headline collides with them on scroll. Give it the theme's own scrolled
   appearance from the start, so the header reads exactly as it does on the
   homepage: dark surface, white "gecko", emerald "edge", muted links. */
body.page-template-gecko-playbook-combined .site-nav {
    background: rgba(6, 18, 10, 0.82);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line-soft);
}

/* Clear the fixed bar so the badge and headline start below it. */
body.page-template-gecko-playbook-combined .playbook-hero {
    padding-top: var(--nav-h, 74px);
}

.playbook-page {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    min-height: 100vh;
    background: linear-gradient(160deg, #4a9e7e 0%, #5aab8a 30%, #6bb596 50%, #5aa385 70%, #489a7a 100%) !important;
    color: #fff;
    overflow-x: hidden;
}

.playbook-page h1,
.playbook-page h2,
.playbook-page h3,
.playbook-page p,
.playbook-page span,
.playbook-page a,
.playbook-page input,
.playbook-page label,
.playbook-page li {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.playbook-page h1,
.playbook-page .playbook-badge,
.playbook-page .stats-card-title,
.playbook-page .stat-value,
.playbook-page .logo-text,
.playbook-page .hero-heading {
    font-family: 'Montserrat', sans-serif !important;
}

.playbook-page * {
    box-sizing: border-box;
}

/* The theme stylesheet is loaded on this page now (the shared footer needs it),
   and its body{line-height:1.6} was being picked up by the `line-height:
   inherit` below — stretching the hero headline. Pin the page's own line-height
   so the theme cannot reach into it. */
.playbook-page,
.pbi-page {
    line-height: normal;
}

.playbook-page h1,
.playbook-page h2,
.playbook-page h3,
.playbook-page p,
.playbook-page span,
.playbook-page a {
    color: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* Header */
.playbook-page .playbook-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.playbook-header .logo,
.playbook-header .site-url {
    flex-shrink: 0;
}

.playbook-header .logo {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #fff;
}

.playbook-header .logo-icon-img {
    height: 36px;
    width: auto;
}

.playbook-header .logo-text-img {
    height: 18px;
    width: auto;
}

.playbook-header .site-url {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    margin-left: auto;
}

.playbook-header .site-url:hover {
    color: #fff;
}

/* Hero Section */
.playbook-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.hero-left {
    padding-top: 20px;
}

/* Badge */
.playbook-badge {
    display: inline-block;
    background: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 32px;
    color: #3a8a6a;
}

/* Heading */
.hero-heading {
    font-size: clamp(38px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 28px;
    color: #fff;
}

/* Description */
.hero-description {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255,255,255,0.9);
    margin-bottom: 28px;
    max-width: 480px;
}

/* ===== Form Card ===== */
.playbook-form-wrapper {
    margin-bottom: 14px;
	width: 100%;
    max-width: 420px;
}

.playbook-form-wrapper .gecko-kit-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 32px !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.playbook-form-wrapper .gecko-kit-form br {
    display: none !important;
}

.playbook-form-wrapper .gecko-kit-form * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.playbook-form-wrapper .gecko-kit-form-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}

.playbook-form-wrapper .gecko-kit-form-subtitle {
    font-size: 15px !important;
    color: rgba(255,255,255,0.8) !important;
    margin: 0 0 24px !important;
    line-height: 1.4 !important;
}

.playbook-form-wrapper .gecko-kit-form .gecko-kit-inputs {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.playbook-form-wrapper .gecko-kit-form .gecko-kit-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.playbook-form-wrapper .gecko-kit-form .gecko-kit-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.playbook-form-wrapper .gecko-kit-form .gecko-kit-name,
.playbook-form-wrapper .gecko-kit-form input[type="email"] {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    outline: none !important;
    color: #333 !important;
    background: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
    display: block !important;
}

.playbook-form-wrapper .gecko-kit-form .gecko-kit-name:focus,
.playbook-form-wrapper .gecko-kit-form input[type="email"]:focus {
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}

.playbook-form-wrapper .gecko-kit-form .gecko-kit-name::placeholder,
.playbook-form-wrapper .gecko-kit-form input[type="email"]::placeholder {
    color: #aaa;
}

.playbook-form-wrapper .gecko-kit-form button {
    width: 100% !important;
    padding: 16px 28px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #3a8a6a !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.playbook-form-wrapper .gecko-kit-form button:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.playbook-form-wrapper .gecko-kit-form button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.gecko-kit-success {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 0;
}

.gecko-kit-error {
    color: #ffcccc;
    font-size: 14px;
    padding: 8px 0;
}

.form-note {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    margin-top: 0;
}

/* Stats Card */
.hero-right {
    display: flex;
    padding-top: 120px;
	flex-direction: column;
	align-items: center;
}

.stats-card {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 16px;
    padding: 28px 32px;
    width: 100%;
    max-width: 420px;
}

.stats-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 20px;
}

.stat-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    min-width: 140px;
    letter-spacing: -0.5px;
}

.stat-value .unit {
    font-size: 16px;
    font-weight: 600;
}

.stat-label {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 900px) {
    .playbook-hero {
        grid-template-columns: 1fr;
        padding: 30px 24px 60px;
    }

    .playbook-page .playbook-header {
        padding: 16px 24px;
    }

    .hero-right {
        justify-content: center;
        padding-top: 0;
    }

    .stats-card {
        max-width: 100%;
    }

    .hero-heading {
        font-size: clamp(32px, 8vw, 48px);
    }

    .playbook-form-wrapper {
        max-width: 100%;
    }
}