/*
Theme Name: FairPlay FC
Theme URI: http://fairplayfc.test
Author: FairPlay FC
Author URI: http://fairplayfc.test
Description: A clean, modern WordPress theme for FairPlay FC mobile app. Mobile-first design built for grassroots football coaches.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fairplayfc
*/

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-green: #34C659;
    --dark-bg: #0F0F0F;
    --white-text: #FFFFFF;
    --grey-text: #A0A0A0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--dark-bg);
    color: var(--white-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--white-text);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

/* Override for Variation 5 - must come after general h2 rule */
.home-variation-5 h2.section-title-v5 {
    font-size: 5rem !important;
}

/* Exception for features section - smaller heading */
.home-variation-5 .features-list-v5 h2.section-title-v5 {
    font-size: 3.5rem !important;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
    color: var(--white-text);
}

a {
    color: var(--primary-green);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-full {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
}

/* Standard page templates: white main column (matches marketing home sections) */
main.site-content.site-content--surface-light {
    background-color: #FFFFFF;
    color: #1a1a1a;
    width: 100%;
}

main.site-content.site-content--surface-light h1,
main.site-content.site-content--surface-light h2,
main.site-content.site-content--surface-light h3,
main.site-content.site-content--surface-light h4,
main.site-content.site-content--surface-light .entry-title {
    color: #1a1a1a;
}

main.site-content.site-content--surface-light p,
main.site-content.site-content--surface-light li {
    color: #4a4a4a;
}

main.site-content.site-content--surface-light .section-title p {
    color: #666666;
}

main.site-content.site-content--surface-light .entry-content a,
main.site-content.site-content--surface-light .post-item h2 a {
    color: var(--primary-green);
}

main.site-content.site-content--surface-light .post-meta {
    color: #666666;
}

main.site-content.site-content--surface-light .post-item {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

main.site-content.site-content--surface-light .post-list .post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

main.site-content.site-content--surface-light .read-more {
    color: var(--primary-green);
    font-weight: 600;
}

main.site-content.site-content--surface-light .pagination .page-numbers:not(.current),
main.site-content.site-content--surface-light .navigation .nav-links a {
    color: var(--primary-green);
}

main.site-content.site-content--surface-light .pagination .page-numbers.current {
    background: var(--primary-green);
    color: #0F0F0F;
}

/* FAQ / pricing cards on light surface */
main.site-content.site-content--surface-light .faq-item {
    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;
}

main.site-content.site-content--surface-light .faq-question {
    color: #1a1a1a;
}

main.site-content.site-content--surface-light .faq-question:hover {
    background-color: #eeeeee;
}

main.site-content.site-content--surface-light .faq-answer {
    color: #4a4a4a;
}

main.site-content.site-content--surface-light .pricing-card {
    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;
}

main.site-content.site-content--surface-light .pricing-features li {
    color: #4a4a4a;
    border-bottom-color: #e0e0e0;
}

/* Contact Form 7 — Contact page */
.fairplayfc-contact-form-wrap {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e8e8e8;
}

.fairplayfc-cf7-form .fairplayfc-cf7-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fairplayfc-cf7-form .fairplayfc-cf7-field-label {
    margin: 0;
}

.fairplayfc-cf7-form .fairplayfc-cf7-field-label label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
}

.fairplayfc-cf7-form .fairplayfc-cf7-field-control {
    margin: 0 0 1.25rem;
}

.fairplayfc-cf7-form .fairplayfc-cf7-quiz-fieldset {
    border: none;
    margin: 0.25rem 0 0;
    padding: 0;
    min-inline-size: 0;
}

.fairplayfc-cf7-form .fairplayfc-cf7-quiz-legend {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
    padding: 0;
    margin-bottom: 0.35rem;
}

.fairplayfc-cf7-form .fairplayfc-cf7-quiz-hint {
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 0.5rem;
}

.fairplayfc-cf7-form .wpcf7-quiz-label {
    display: inline-block;
    font-weight: 500;
    font-size: 0.9375rem;
    color: #1a1a1a;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.fairplayfc-cf7-form .fairplayfc-cf7-field-control .fairplayfc-cf7-input,
.fairplayfc-cf7-form .fairplayfc-cf7-field-control .fairplayfc-cf7-textarea,
.fairplayfc-cf7-form .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
}

.fairplayfc-cf7-form .fairplayfc-cf7-textarea {
    min-height: 160px;
    resize: vertical;
}

.fairplayfc-cf7-form .fairplayfc-cf7-input:focus,
.fairplayfc-cf7-form .fairplayfc-cf7-textarea:focus,
.fairplayfc-cf7-form .wpcf7-form-control:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    border-color: var(--primary-green);
}

.fairplayfc-cf7-form input.fairplayfc-cf7-submit,
.fairplayfc-cf7-form .wpcf7-submit {
    margin-top: 0.5rem;
    cursor: pointer;
    font-weight: 700;
    padding: 0.85rem 1.75rem;
    border-radius: 8px;
    border: none;
    background: var(--primary-green);
    color: #0f0f0f;
}

.fairplayfc-cf7-form input.fairplayfc-cf7-submit:hover,
.fairplayfc-cf7-form .wpcf7-submit:hover {
    opacity: 0.92;
}

.fairplayfc-cf7-form .wpcf7-not-valid-tip {
    font-size: 0.875rem;
    color: #b00020;
    margin-top: 0.35rem;
}

.fairplayfc-cf7-form .wpcf7-response-output {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border-width: 1px;
}

.fairplayfc-cf7-form.wpcf7-mail-sent-ok .wpcf7-response-output {
    border-color: rgba(52, 198, 89, 0.45);
    background: rgba(52, 198, 89, 0.08);
    color: #1a5c14;
}

.fairplayfc-cf7-hp-wrap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fairplayfc-cf7-inactive {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fff8e6;
    border: 1px solid #f0d090;
    border-radius: 8px;
    color: #5c4a00;
}

/* Android Sign Up landing page */
.fairplayfc-android-signup-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.fairplayfc-android-signup-layout {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.fairplayfc-android-signup-eyebrow {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(52, 198, 89, 0.12);
    color: #1a5c14;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fairplayfc-android-signup-title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: #1a1a1a;
}

.fairplayfc-android-signup-intro {
    margin-bottom: 1.5rem;
    color: #4a4a4a;
    font-size: 1.125rem;
    line-height: 1.6;
}

.fairplayfc-android-signup-intro p:last-child {
    margin-bottom: 0;
}

.fairplayfc-android-signup-phone {
    max-width: 350px;
    margin: 0 auto;
}

.fairplayfc-android-signup-phone--mobile {
    display: block;
    margin: 2.5rem 0 0;
    padding: 1rem 0 5rem;
    overflow: hidden;
}

.fairplayfc-android-signup-media {
    display: none;
}

.fairplayfc-android-signup-form-wrap {
    max-width: 520px;
    position: relative;
    z-index: 1;
}

.fairplayfc-android-signup-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fairplayfc-android-signup-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
}

.fairplayfc-android-signup-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
}

.fairplayfc-android-signup-input:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    border-color: var(--primary-green);
}

.fairplayfc-android-signup-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.fairplayfc-android-signup-checkbox {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--primary-green);
    cursor: pointer;
}

.fairplayfc-android-signup-consent-label {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4a4a4a;
    cursor: pointer;
}

.fairplayfc-android-signup-consent-label a {
    color: #1a5c14;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fairplayfc-android-signup-submit {
    width: 100%;
    margin-top: 0.25rem;
}

.fairplayfc-android-signup-privacy {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
}

.fairplayfc-android-signup-notice {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.9375rem;
}

.fairplayfc-android-signup-notice--success {
    border-color: rgba(52, 198, 89, 0.45);
    background: rgba(52, 198, 89, 0.08);
    color: #1a5c14;
}

.fairplayfc-android-signup-notice--error {
    border-color: rgba(176, 0, 32, 0.25);
    background: rgba(176, 0, 32, 0.06);
    color: #8a0018;
}

.fairplayfc-android-signup-hp-wrap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fairplayfc-android-signup-inactive {
    margin-top: 1rem;
    padding: 1rem;
    background: #fff8e6;
    border: 1px solid #f0d090;
    border-radius: 8px;
    color: #5c4a00;
}

@media (min-width: 900px) {
    .fairplayfc-android-signup-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
        gap: 3.5rem;
    }

    .fairplayfc-android-signup-phone--mobile {
        display: none;
    }

    .fairplayfc-android-signup-media {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Block layouts (columns, media+text) — About page content */
main.site-content.site-content--surface-light .entry-content .wp-block-columns.alignwide,
main.site-content.site-content--surface-light .entry-content .wp-block-media-text.alignwide {
    max-width: 100%;
}

main.site-content.site-content--surface-light .entry-content .wp-block-columns {
    margin-bottom: 2.5rem;
}

main.site-content.site-content--surface-light .entry-content .wp-block-media-text {
    margin-bottom: 2.5rem;
}

main.site-content.site-content--surface-light .entry-content .wp-block-media-text .wp-block-heading,
main.site-content.site-content--surface-light .entry-content .wp-block-columns .wp-block-heading {
    color: #1a1a1a;
}

main.site-content.site-content--surface-light .entry-content .wp-block-media-text p,
main.site-content.site-content--surface-light .entry-content .wp-block-columns p {
    color: #4a4a4a;
}

main.site-content.site-content--surface-light .entry-content .wp-block-image img {
    height: auto;
    border-radius: 8px;
}

/*
 * Organic “messy circle” masks for About-style blocks (match home v5 spirit, more varied).
 * Scoped to light content area only — home marketing blocks are on the dark surface.
 */
main.site-content.site-content--surface-light .entry-content .wp-block-image.is-style-organic-blob img {
    border-radius: 46% 54% 58% 42% / 50% 48% 52% 49%;
    transform: rotate(-1deg);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.085);
}

main.site-content.site-content--surface-light .entry-content .wp-block-media-text .wp-block-media-text__media img {
    height: auto;
    border-radius: 43% 57% 52% 48% / 48% 52% 55% 45%;
    transform: rotate(-1.25deg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.09);
}

main.site-content.site-content--surface-light .entry-content .wp-block-media-text + .wp-block-media-text .wp-block-media-text__media img {
    border-radius: 54% 46% 44% 56% / 52% 48% 46% 54%;
    transform: rotate(1.1deg);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
}

main.site-content.site-content--surface-light .entry-content .wp-block-media-text + .wp-block-media-text + .wp-block-media-text .wp-block-media-text__media img {
    border-radius: 48% 52% 61% 39% / 45% 55% 50% 50%;
    transform: rotate(-0.8deg);
}

/* Columns: each column gets a different blob so left/right layouts never mirror perfectly */
main.site-content.site-content--surface-light .entry-content .wp-block-columns .wp-block-column:nth-child(1) .wp-block-image img {
    border-radius: 40% 60% 54% 46% / 46% 54% 50% 50%;
    transform: rotate(-1.65deg);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.085);
}

main.site-content.site-content--surface-light .entry-content .wp-block-columns .wp-block-column:nth-child(2) .wp-block-image img {
    border-radius: 52% 48% 42% 58% / 53% 47% 51% 49%;
    transform: rotate(1.45deg);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.085);
}

main.site-content.site-content--surface-light .entry-content .wp-block-columns .wp-block-column:nth-child(3) .wp-block-image img {
    border-radius: 47% 53% 57% 43% / 51% 49% 46% 54%;
    transform: rotate(0.55deg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    background-color: var(--dark-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    position: relative;
}

.site-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white-text);
    text-align: left;
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-height: 0;
}

.site-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--white-text);
    line-height: 0;
}

.site-logo .custom-logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
}

.site-logo .custom-logo,
.site-logo .custom-logo-link img {
    display: block;
    max-height: 56px;
    width: auto;
    max-width: min(360px, 92vw);
    height: auto;
    /* Some exported SVGs use width/height 100% and report 0×0 intrinsic size in <img> */
    min-height: 36px;
    object-fit: contain;
    object-position: left center;
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: block;
    flex-shrink: 0;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--white-text);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 0;
}

.mobile-menu-toggle__icon {
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    position: relative;
    vertical-align: middle;
}

.mobile-menu-toggle__icon::before,
.mobile-menu-toggle__icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
}

.mobile-menu-toggle__icon::before {
    top: -7px;
}

.mobile-menu-toggle__icon::after {
    bottom: -7px;
}

.main-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--dark-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
}

.main-navigation.active {
    display: block;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-navigation a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--white-text);
    font-weight: 500;
}

.main-navigation a:hover {
    color: var(--primary-green);
    background-color: rgba(52, 198, 89, 0.1);
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_parent > a,
.main-navigation .current_page_ancestor > a {
    color: var(--primary-green);
}

/* Desktop Navigation */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }

    .main-navigation {
        display: block;
        position: static;
        background: none;
        border: none;
        padding: 0;
        flex-shrink: 0;
    }

    .main-navigation ul {
        display: flex;
        gap: 2rem;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .main-navigation li {
        border: none;
    }

    .main-navigation a {
        padding: 0.5rem 0;
    }

    .main-navigation a:hover {
        background: none;
        color: var(--primary-green);
    }

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-parent > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_parent > a,
    .main-navigation .current_page_ancestor > a {
        color: var(--primary-green);
    }
}

/* ============================================
   HERO SECTIONS
   ============================================ */

.hero {
    padding: 4rem 0;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    color: var(--grey-text);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .hero {
        padding: 6rem 0;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .hero-cta {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary-green);
    color: var(--dark-bg);
    font-weight: 700;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 198, 89, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--dark-bg);
    border: 2px solid var(--primary-green);
    font-weight: 700;
}

.btn-secondary:hover {
    background-color: var(--primary-green);
    color: var(--dark-bg);
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */

.content-section {
    padding: 4rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.section-title p {
    color: var(--grey-text);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .content-section {
        padding: 6rem 0;
    }

    .section-title h2 {
        font-size: 2.5rem;
    }
}

/* ============================================
   FEATURE CARDS
   ============================================ */

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.08);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.feature-card p {
    color: var(--grey-text);
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   APP SCREENSHOTS
   ============================================ */

.app-screenshots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
}

.app-screenshot {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .app-screenshots {
        flex-direction: row;
        justify-content: center;
    }

    .app-screenshot {
        max-width: 300px;
    }
}

/* ============================================
   FORMS
   ============================================ */

.contact-form,
.email-signup {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--white-text);
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--white-text);
    font-size: 1rem;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    background-color: rgba(255, 255, 255, 0.15);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--grey-text);
}

/* ============================================
   FAQ
   ============================================ */

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--white-text);
}

.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.faq-answer {
    padding: 0 1.5rem 1.5rem;
    color: var(--grey-text);
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-toggle {
    font-size: 1.5rem;
    color: var(--primary-green);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

/* ============================================
   PRICING
   ============================================ */

.pricing-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.pricing-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-green);
    margin: 1rem 0;
}

.pricing-features {
    list-style: none;
    margin: 2rem 0;
    text-align: left;
}

.pricing-features li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--grey-text);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li:before {
    content: "✓ ";
    color: var(--primary-green);
    font-weight: bold;
    margin-right: 0.5rem;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background-color: var(--dark-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 0 2rem;
    margin-top: 4rem;
}

.footer-content {
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.footer-links a {
    color: var(--white-text);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--primary-green);
}

.footer-copyright {
    color: var(--grey-text);
    font-size: 0.9rem;
}

.footer-copyright .text-grey {
    color: var(--grey-text);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center {
    text-align: center;
}

.text-grey {
    color: var(--grey-text);
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* ============================================
   BLOG/ARCHIVE
   ============================================ */

.post-list {
    max-width: 800px;
    margin: 0 auto;
}

.post-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.post-item h2 {
    margin-bottom: 0.5rem;
}

.post-meta {
    color: var(--grey-text);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.post-excerpt {
    color: var(--grey-text);
    margin-bottom: 1rem;
}

.read-more {
    color: var(--primary-green);
    font-weight: 600;
}

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

/* ============================================
   HOME PAGE SPECIFIC STYLES
   ============================================ */

.home-page {
    width: 100%;
}

/* ============================================
   POGO-STYLE HERO SECTION
   ============================================ */

.hero-section-pogo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    background-color: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

/* Background decorative shapes */
.hero-section-pogo::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(52, 198, 89, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero-section-pogo::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(52, 198, 89, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero-section-pogo .hero-container-pogo {
    position: relative;
    z-index: 1;
}

/* Additional floating shapes */
.hero-section-pogo .floating-shape {
    position: absolute;
    z-index: 0;
    opacity: 0.05;
}

.hero-section-pogo .shape-1 {
    top: 20%;
    left: 10%;
    width: 100px;
    height: 100px;
    background: var(--primary-green);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: float 20s ease-in-out infinite;
}

.hero-section-pogo .shape-2 {
    top: 60%;
    right: 15%;
    width: 150px;
    height: 150px;
    background: var(--primary-green);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: float 25s ease-in-out infinite reverse;
}

.hero-section-pogo .shape-3 {
    bottom: 15%;
    right: 25%;
    width: 80px;
    height: 80px;
    background: var(--primary-green);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: float 18s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

.hero-container-pogo {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-left {
    text-align: left;
}

.hero-tagline {
    font-size: 0.875rem;
    color: var(--grey-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.hero-headline-pogo {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.hero-headline-pogo .text-white {
    color: var(--white-text);
}

.hero-headline-pogo .text-green {
    color: var(--primary-green);
}

.hero-description-pogo {
    font-size: 1.125rem;
    color: var(--grey-text);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 500px;
}

.scroll-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--grey-text);
    font-size: 0.875rem;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background-color: var(--grey-text);
    opacity: 0.5;
}

.hero-center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.phone-container {
    position: relative;
    max-width: 350px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    width: 280px;
    height: 580px;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    border-radius: 40px;
    padding: 12px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    position: relative;
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #0a0a0a;
    border-radius: 0 0 15px 15px;
    z-index: 2;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: var(--white-text);
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.phone-app-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}

.hero-right {
    text-align: left;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white-text);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--grey-text);
    margin-top: 0.5rem;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
}

.hero-right-text {
    color: var(--grey-text);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 400px;
}

.download-section {
    margin-top: 2rem;
}

.download-label {
    font-size: 0.875rem;
    color: var(--white-text);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.download-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.download-btn-app {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    max-width: 250px;
    justify-content: flex-start;
}

.download-btn-app .download-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.download-btn-app .download-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.download-btn-app .download-small {
    font-size: 0.75rem;
    opacity: 0.9;
    line-height: 1.2;
}

.download-btn-app .download-large {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.download-btn-app.btn-primary .download-small,
.download-btn-app.btn-primary .download-large {
    color: var(--dark-bg);
}

.download-btn-app.btn-secondary .download-small,
.download-btn-app.btn-secondary .download-large {
    color: var(--primary-green);
}

.download-btn-app.btn-secondary:hover .download-small,
.download-btn-app.btn-secondary:hover .download-large {
    color: var(--dark-bg);
}

.download-icon {
    font-size: 1.5rem;
}

.download-text {
    display: flex;
    flex-direction: column;
}

.download-small {
    font-size: 0.75rem;
    color: var(--dark-bg);
    opacity: 0.7;
}

.download-large {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-bg);
}

@media (min-width: 1024px) {
    .hero-container-pogo {
        grid-template-columns: 1fr 1.2fr 1fr;
        gap: 4rem;
    }

    .hero-headline-pogo {
        font-size: 4.5rem;
    }

    .download-buttons {
        flex-direction: row;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-container-pogo {
        grid-template-columns: 1fr 1fr;
    }

    .hero-center {
        grid-column: 1 / -1;
        order: -1;
    }

    .phone-container {
        max-width: 300px;
    }
}

@media (max-width: 767px) {
    .hero-headline-pogo {
        font-size: 2.5rem;
    }

    .hero-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stat-divider {
        display: none;
    }

    .phone-container {
        max-width: 250px;
    }
}

.hero-section {
    padding: 4rem 0;
    display: flex;
    align-items: center;
    min-height: 80vh;
}

.hero-content {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}

.hero-headline {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--white-text);
}

.hero-subheadline {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--grey-text);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-image {
    width: 100%;
    margin-top: 2rem;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    max-width: 800px;
    margin: 0 auto;
    display: block;
}

.cta-divider {
    color: var(--grey-text);
    margin: 0 1rem;
    font-size: 0.9rem;
}

.btn-link-secondary {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--grey-text);
    text-decoration: underline;
    font-size: 1rem;
}

.btn-link-secondary:hover {
    color: var(--primary-green);
}

.content-section-full {
    padding: 5rem 0;
    width: 100%;
}

.content-section-full .container-full {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.section-content {
    width: 100%;
    max-width: 800px;
    text-align: left;
}

.section-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--white-text);
}

.section-content p {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--white-text);
}

.highlight-text {
    color: var(--primary-green) !important;
    font-weight: 600;
    font-size: 1.25rem !important;
}

.section-image {
    width: 100%;
    max-width: 800px;
}

.section-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.benefit-list {
    margin: 2rem 0;
}

.benefit-list p {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.benefits-list li {
    padding: 1rem 0;
    padding-left: 2rem;
    position: relative;
    font-size: 1.125rem;
    color: var(--white-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.benefits-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-green);
    font-weight: bold;
    font-size: 1.5rem;
}

.benefits-list li:last-child {
    border-bottom: none;
}

.steps-list {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 2rem 0;
}

.steps-list li {
    counter-increment: step-counter;
    padding: 1.5rem 0;
    padding-left: 3rem;
    position: relative;
    font-size: 1.125rem;
    color: var(--white-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.steps-list li:before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 1.5rem;
    width: 2rem;
    height: 2rem;
    background-color: var(--primary-green);
    color: var(--dark-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.steps-list li:last-child {
    border-bottom: none;
}

.final-cta {
    background-color: rgba(52, 198, 89, 0.05);
    border-radius: 0;
}

@media (min-width: 768px) {
    .hero-section {
        padding: 6rem 0;
    }

    .hero-headline {
        font-size: 4rem;
    }

    .hero-subheadline {
        font-size: 2rem;
    }

    .content-section-full .container-full {
        flex-direction: row;
        gap: 4rem;
    }

    .content-section-full:nth-child(even) .container-full {
        flex-direction: row-reverse;
    }

    .section-content {
        flex: 1;
    }

    .section-image {
        flex: 1;
    }

    .hero-content {
        margin-bottom: 0;
    }

    .hero-image {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.125rem;
    }

    .btn {
        width: 100%;
    }

    .content-section {
        padding: 3rem 0;
    }

    .hero-headline {
        font-size: 2.5rem;
    }

    .hero-subheadline {
        font-size: 1.25rem;
    }

    .hero-description {
        font-size: 1.125rem;
    }

    .section-content h2 {
        font-size: 2rem;
    }

    .content-section-full {
        padding: 3rem 0;
    }

    .hero-cta {
        flex-direction: column;
    }

    .cta-divider {
        margin: 0.5rem 0;
    }
}

/* ============================================
   HOME PAGE VARIATION 2 - CENTERED VERTICAL
   ============================================ */

.hero-section-v2 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
    background-color: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.hero-section-v2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(52, 198, 89, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero-container-v2 {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-phone-v2 {
    margin-bottom: 3rem;
}

.hero-content-v2 {
    text-align: center;
}

.hero-tagline-v2 {
    font-size: 0.875rem;
    color: var(--grey-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.hero-headline-v2 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hero-description-v2 {
    font-size: 1.25rem;
    color: var(--grey-text);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-stats-v2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}

.stat-item-v2 {
    display: flex;
    flex-direction: column;
}

.stat-number-v2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-green);
    line-height: 1;
}

.stat-label-v2 {
    font-size: 0.875rem;
    color: var(--grey-text);
    margin-top: 0.5rem;
}

.stat-divider-v2 {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
}

.hero-cta-v2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin: 2rem 0;
}

.btn-link-secondary-v2 {
    display: inline-block;
    margin-top: 1rem;
    color: var(--grey-text);
    text-decoration: underline;
    font-size: 1rem;
}

.btn-link-secondary-v2:hover {
    color: var(--primary-green);
}

@media (min-width: 768px) {
    .hero-headline-v2 {
        font-size: 4.5rem;
    }

    .hero-cta-v2 {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================
   HOME PAGE VARIATION 3 - SPLIT SCREEN
   ============================================ */

.hero-section-v3 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    background-color: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.hero-section-v3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(52, 198, 89, 0.05) 0%, transparent 50%, rgba(52, 198, 89, 0.05) 100%);
    z-index: 0;
}

.hero-container-v3 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-left-v3 {
    text-align: left;
}

.hero-tagline-v3 {
    font-size: 0.875rem;
    color: var(--grey-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.hero-headline-v3 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.hero-description-v3 {
    font-size: 1.25rem;
    color: var(--grey-text);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.hero-stats-v3 {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}

.stat-item-v3 {
    display: flex;
    flex-direction: column;
}

.stat-number-v3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-green);
    line-height: 1;
}

.stat-label-v3 {
    font-size: 0.875rem;
    color: var(--grey-text);
    margin-top: 0.5rem;
}

.stat-divider-v3 {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
}

.hero-cta-v3 {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.hero-right-v3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-container-v3 {
    max-width: 350px;
    width: 100%;
}

@media (max-width: 1023px) {
    .hero-container-v3 {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-right-v3 {
        order: -1;
    }

    .hero-headline-v3 {
        font-size: 3rem;
    }
}

/* ============================================
   HOME PAGE VARIATION 4 - MINIMALIST
   ============================================ */

.hero-section-v4 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
    background-color: var(--dark-bg);
    position: relative;
}

.hero-container-v4 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.hero-content-v4 {
    margin-bottom: 4rem;
}

.hero-tagline-v4 {
    font-size: 0.875rem;
    color: var(--grey-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.hero-headline-v4 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hero-description-v4 {
    font-size: 1.25rem;
    color: var(--grey-text);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.hero-phone-v4 {
    margin: 4rem 0;
}

.hero-bottom-v4 {
    margin-top: 4rem;
}

.hero-stats-v4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat-item-v4 {
    display: flex;
    flex-direction: column;
}

.stat-number-v4 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white-text);
    line-height: 1;
}

.stat-label-v4 {
    font-size: 0.875rem;
    color: var(--grey-text);
    margin-top: 0.5rem;
}

.stat-divider-v4 {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
}

.hero-cta-v4 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .hero-headline-v4 {
        font-size: 5rem;
    }

    .hero-cta-v4 {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================
   VARIATION 3 CONTENT SECTIONS - CARD BASED
   ============================================ */

/* Consistent spacing system */
:root {
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 5rem;
}

.content-section-v3 {
    padding: var(--spacing-3xl) 0;
    width: 100%;
    background-color: var(--dark-bg);
}

/* Typography Hierarchy */
.content-section-v3 h2 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--white-text);
}

.content-section-v3 h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
    color: var(--white-text);
}

.content-section-v3 p {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    color: var(--white-text);
}

.content-section-v3 .highlight-text {
    color: var(--primary-green);
    font-weight: 600;
}

/* Large Card Layout */
.card-large {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-large:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.card-content h2 {
    margin-bottom: var(--spacing-md);
}

.card-content p {
    margin-bottom: var(--spacing-md);
}

.card-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Section Headers */
.section-header-v3 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-header-v3 h2 {
    margin-bottom: var(--spacing-md);
}

.section-header-v3 p {
    color: var(--grey-text);
    margin-bottom: 0;
}

.section-footer-v3 {
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* Feature Cards Grid */
.feature-cards-grid-v3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.feature-card-v3 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: var(--spacing-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.feature-card-v3:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-green);
}

.card-icon-v3 {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.feature-card-v3 h3 {
    color: var(--primary-green);
    margin-bottom: var(--spacing-sm);
}

.feature-card-v3 p {
    color: var(--grey-text);
    margin-bottom: 0;
}

/* Showcase Section */
.showcase-section {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.showcase-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: center;
}

.showcase-text h2 {
    margin-bottom: var(--spacing-md);
}

.benefits-list-v3 {
    list-style: none;
    padding: 0;
    margin: var(--spacing-lg) 0;
}

.benefits-list-v3 li {
    padding: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    color: var(--white-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
}

.benefits-list-v3 li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-green);
    font-weight: bold;
    font-size: 1.5rem;
}

.benefits-list-v3 li:last-child {
    border-bottom: none;
}

.showcase-image-v3 {
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
    overflow: hidden;
}

.showcase-image-v3 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Highlight Card */
.highlight-card-v3 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.highlight-image-v3 {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.highlight-image-v3 img {
    width: 100%;
    height: auto;
    display: block;
}

.highlight-content-v3 h2 {
    margin-bottom: var(--spacing-md);
}

.highlight-content-v3 p {
    margin-bottom: var(--spacing-md);
}

.highlight-text-large {
    font-size: 1.5rem !important;
    color: var(--primary-green) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-md) !important;
}

/* Steps Grid */
.steps-grid-v3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.step-card-v3 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: var(--spacing-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.step-card-v3:hover {
    transform: translateX(8px);
    border-color: var(--primary-green);
    background-color: rgba(255, 255, 255, 0.08);
}

.step-number-v3 {
    width: 60px;
    height: 60px;
    background-color: var(--primary-green);
    color: var(--dark-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-card-v3 h3 {
    margin-bottom: var(--spacing-sm);
}

.step-card-v3 p {
    color: var(--grey-text);
    margin-bottom: 0;
}

.section-cta-v3 {
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* Stats Section */
.stats-section {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.stats-content-v3 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: center;
}

.stats-text-v3 h2 {
    margin-bottom: var(--spacing-md);
}

.stats-text-v3 p {
    margin-bottom: var(--spacing-md);
}

.insight-points-v3 {
    margin-top: var(--spacing-md);
}

.insight-points-v3 p {
    margin-bottom: var(--spacing-sm);
}

.stats-image-v3 {
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
    overflow: hidden;
}

.stats-image-v3 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Pricing Card */
.pricing-card-v3 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-content-v3 {
    text-align: center;
}

.pricing-content-v3 h2 {
    margin-bottom: var(--spacing-md);
}

.pricing-content-v3 p {
    margin-bottom: var(--spacing-md);
}

.pricing-image-v3 {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.pricing-image-v3 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Final CTA */
.final-cta-v3 {
    background-color: var(--dark-bg);
    border-radius: 0;
    padding: var(--spacing-3xl) var(--spacing-lg);
    margin-top: 0;
}

.final-cta-content-v3 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.final-cta-content-v3 h2 {
    margin-bottom: var(--spacing-md);
}

.final-cta-content-v3 p {
    color: var(--grey-text);
    margin-bottom: var(--spacing-lg);
}

.final-cta-image-v3 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
}

.final-cta-image-v3 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive Design for Variation 3 */
@media (min-width: 768px) {
    .card-large {
        flex-direction: row;
        align-items: center;
    }

    .card-content {
        flex: 1;
    }

    .card-image {
        flex: 1;
    }

    .feature-cards-grid-v3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .showcase-content {
        flex-direction: row;
    }

    .showcase-text {
        flex: 1;
    }

    .showcase-image-v3 {
        flex: 1;
    }

    .highlight-card-v3 {
        flex-direction: row;
        align-items: center;
    }

    .highlight-image-v3 {
        flex: 1;
    }

    .highlight-content-v3 {
        flex: 1;
    }

    .steps-grid-v3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-content-v3 {
        flex-direction: row;
    }

    .stats-text-v3 {
        flex: 1;
    }

    .stats-image-v3 {
        flex: 1;
    }

    .pricing-card-v3 {
        flex-direction: row;
        align-items: center;
    }

    .pricing-content-v3 {
        flex: 1;
        text-align: left;
    }

    .pricing-image-v3 {
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .steps-grid-v3 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   HOME PAGE VARIATION 5 - CLEAN MINIMALIST (ATOMS INSPIRED)
   ============================================ */

/* Background colors for Variation 5 */
.home-variation-5 {
    background-color: #FFFFFF;
    width: 100%;
    max-width: 100%;
}

/* Ensure all sections are full width */
body.home-variation-5 main.home-variation-5,
body:has(.home-variation-5) main.home-variation-5 {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.hero-section-v5,
.problem-section-v5,
.solution-section-v5,
.fairness-section-v5,
.who-section-v5,
.built-by-section-v5,
.how-it-works-v5,
.features-list-v5,
.final-cta-v5 {
    width: 100%;
    max-width: 100%;
}

.home-variation-5 h1,
.home-variation-5 h2,
.home-variation-5 h3,
.home-variation-5 h4,
.home-variation-5 p {
    color: #1a1a1a;
}

.home-variation-5 .btn-primary {
    background-color: var(--primary-green);
    color: var(--dark-bg);
    font-weight: 700;
}

.home-variation-5 .btn-secondary {
    background-color: transparent;
    color: var(--dark-bg);
    border: 2px solid var(--primary-green);
    font-weight: 700;
}

.home-variation-5 .btn-secondary:hover {
    background-color: var(--primary-green);
    color: #FFFFFF;
}

/* Header matches variation-5 content column (.container-v5 / .hero-container-v5) */
body.home-variation-5 .site-header .container,
body:has(.home-variation-5) .site-header .container {
    box-sizing: border-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

html:has(.home-variation-5),
body.home-variation-5 {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure wrapper elements are full width */
body.home-variation-5 .site-wrapper,
body:has(.home-variation-5) .site-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.home-variation-5 .site-content,
body:has(.home-variation-5) .site-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.container-v5 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Consistent spacing system for Variation 5 */
:root {
    --v5-section-padding: 6rem;
    --v5-content-gap: 2rem;
    --v5-title-margin: 3rem;
    --v5-text-margin: 1.5rem;
}

/* Hero Section */
.hero-section-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.hero-container-v5 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    box-sizing: border-box;
}

.hero-content-v5 {
    text-align: center;
    max-width: 700px;
}

.hero-headline-v5 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--v5-text-margin);
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.hero-subtitle-v5 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    color: #666666;
    margin-bottom: var(--v5-text-margin);
}

.hero-description-v5 {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: var(--v5-content-gap);
}

.hero-cta-v5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-cta-v5 .btn {
    text-align: center;
}

.hero-link-v5 {
    color: var(--dark-bg);
    text-decoration: underline;
    text-decoration-color: var(--primary-green);
    text-underline-offset: 4px;
    font-size: 1rem;
    font-weight: 700;
}

.hero-link-v5:hover {
    opacity: 0.8;
}

.hero-image-v5 {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-v5 .phone-container {
    position: relative;
    perspective: 1000px;
    max-width: 350px;
    width: 100%;
}

.hero-image-v5 .phone-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 280 / 580;
    position: relative;
    z-index: 1;
    transform: rotateY(-8deg) rotateX(2deg);
    transition: transform 0.5s ease;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
}

.hero-image-v5 .phone-container::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    background: var(--primary-green);
    opacity: 1;
    border-radius: 50% 50% 40% 60% / 55% 45% 50% 45%;
    bottom: -80px;
    right: -40px;
    transform: rotate(20deg);
    z-index: 0;
}

.hero-image-v5:hover .phone-frame {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 30px 90px rgba(52, 198, 89, 0.25);
}

/* Section Title - Large Left Aligned (Atoms Style) */
.home-variation-5 .section-title-v5 {
    font-size: 5rem;
    font-weight: 700;
    text-align: left;
    margin: 0;
    color: #1a1a1a;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Two Column Section Layout */
.problem-section-v5,
.solution-section-v5,
.fairness-section-v5,
.who-section-v5,
.built-by-section-v5 {
    padding: var(--v5-section-padding) 0;
}

.problem-section-v5,
.fairness-section-v5,
.built-by-section-v5 {
    background-color: #f8f8f8;
}

.solution-section-v5,
.who-section-v5 {
    background-color: #FFFFFF;
}

/* Sections with two-column layout (title left, content right) */
.problem-section-v5 .container-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v5-title-margin);
    align-items: start;
}

.solution-section-v5 .container-v5,
.fairness-section-v5 .container-v5,
.who-section-v5 .container-v5,
.built-by-section-v5 .container-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v5-title-margin);
    align-items: start;
}

/* Full-width sections (title at top, content below) */
.how-it-works-v5 .container-v5,
.features-list-v5 .container-v5,
.final-cta-v5 .container-v5 {
    display: block;
}

.how-it-works-v5 .section-title-v5 {
    margin-bottom: var(--v5-title-margin);
    text-align: center;
}

.features-list-v5 .section-title-v5,
.final-cta-v5 .section-title-v5 {
    margin-bottom: var(--v5-title-margin);
}

/* Problem Section - Shape and Icon Layout */
.problem-image-v5 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--v5-title-margin);
    position: relative;
    min-height: 400px;
    overflow: visible;
    min-width: 0;
}

.problem-shape-v5 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.problem-shape-image-v5 {
    position: relative;
    width: 500px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    transform: rotate(-25deg);
    opacity: 1;
}

.problem-content-wrapper-v5 {
    display: flex;
    flex-direction: column;
    gap: var(--v5-content-gap);
}

.problem-content-wrapper-v5 .section-title-v5 {
    margin-bottom: 0;
}

.problem-content-v5,
.solution-content-v5,
.fairness-content-v5,
.who-content-v5,
.built-by-content-v5 {
    max-width: 700px;
    margin: 0;
    text-align: left;
}

.problem-lead-v5 {
    font-size: 2rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--v5-text-margin);
    line-height: 1.3;
}

.problem-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: var(--v5-text-margin);
}

.problem-note-v5 {
    font-size: 1rem;
    color: #999999;
    font-style: italic;
    margin-top: var(--v5-content-gap);
}


/* Solution Section - Image and Content Layout */
.solution-image-v5 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--v5-title-margin);
}

.solution-image-v5 .phone-container {
    max-width: 100%;
    width: 100%;
    position: relative;
    perspective: 1000px;
}

.solution-image-v5 .phone-container::before {
    content: '';
    position: absolute;
    width: 270px;
    height: 270px;
    background: var(--primary-green);
    opacity: 1;
    border-radius: 60% 40% 50% 50% / 55% 50% 45% 45%;
    bottom: -20px;
    right: -30px;
    z-index: 0;
    transform: rotate(35deg);
}

.solution-image-v5 .phone-frame {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 280 / 580;
    transform: rotateY(-10deg) rotateX(3deg);
    transition: transform 0.5s ease;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.solution-image-v5:hover .phone-frame {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 30px 90px rgba(52, 198, 89, 0.25);
}

.solution-content-wrapper-v5 {
    display: flex;
    flex-direction: column;
    gap: var(--v5-content-gap);
}

.solution-content-wrapper-v5 .section-title-v5 {
    margin-bottom: 0;
}

.solution-lead-v5 {
    font-size: 2rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--v5-text-margin);
    line-height: 1.3;
}

.solution-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: var(--v5-text-margin);
}

.solution-content-v5 strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* How It Works Section */
.how-it-works-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden;
}

.steps-list-v5 {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 2rem 0;
}

/* Zig-zag connecting line */
.steps-list-v5::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, 
        var(--primary-green) 0%, 
        var(--primary-green) 25%, 
        transparent 25%, 
        transparent 50%,
        var(--primary-green) 50%,
        var(--primary-green) 75%,
        transparent 75%,
        transparent 100%);
    background-size: 3px 200px;
    opacity: 0.2;
    transform: translateX(-50%);
    z-index: 0;
}

.step-item-v5 {
    display: flex;
    align-items: flex-start;
    gap: var(--v5-content-gap);
    margin-bottom: 4rem;
    text-align: left;
    position: relative;
    z-index: 1;
    max-width: 45%;
    box-sizing: border-box;
}

.step-item-v5:last-child {
    margin-bottom: 0;
}

/* Left-aligned steps (1, 3) */
.step-item-v5.step-left {
    margin-right: auto;
    margin-left: 0;
}

/* Right-aligned steps (2, 4) */
.step-item-v5.step-right {
    margin-left: auto;
    margin-right: 0;
    flex-direction: row-reverse;
}

.step-right .step-content-v5 {
    text-align: right;
}

.step-number-v5 {
    width: 60px;
    height: 60px;
    background-color: var(--primary-green);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(52, 198, 89, 0.3);
    transition: transform 0.3s ease;
}

.step-item-v5:hover .step-number-v5 {
    transform: scale(1.1);
}

.step-content-v5 {
    flex: 1;
}

.step-content-v5 h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.step-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .steps-list-v5::before {
        display: none;
    }
    
    .step-item-v5 {
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: row !important;
    }
    
    .step-right .step-content-v5 {
        text-align: left;
    }
    
    .step-item-v5 {
        margin-bottom: 3rem;
    }
}


/* Built Around Fairness Section - Image and Content Layout */
.fairness-image-v5 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--v5-title-margin);
}

.fairness-image-v5 .phone-container {
    max-width: 100%;
    width: 100%;
    position: relative;
    perspective: 1000px;
}

.fairness-image-v5 .phone-container::before {
    content: '';
    position: absolute;
    width: 285px;
    height: 285px;
    background: var(--primary-green);
    opacity: 1;
    border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    bottom: -25px;
    left: -35px;
    z-index: 0;
    transform: rotate(45deg);
}

.fairness-image-v5 .phone-frame {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 280 / 580;
    transform: rotateY(-15deg) rotateX(5deg);
    transition: transform 0.5s ease;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.fairness-image-v5:hover .phone-frame {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 30px 90px rgba(52, 198, 89, 0.25);
}

.fairness-content-wrapper-v5 {
    display: flex;
    flex-direction: column;
    gap: var(--v5-content-gap);
}

.fairness-content-wrapper-v5 .section-title-v5 {
    margin-bottom: 0;
}

.fairness-lead-v5 {
    font-size: 2rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--v5-text-margin);
    line-height: 1.3;
}

.fairness-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: var(--v5-text-margin);
}

.fairness-note-v5 {
    font-size: 1rem;
    color: var(--primary-green);
    font-weight: 600;
    margin-top: var(--v5-content-gap);
}

/* Features List Section */
.features-list-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #f8f8f8;
}

.features-list-v5 .section-title-v5 {
    text-align: center;
    margin-bottom: 4rem;
    font-size: 3.5rem;
}

.features-grid-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 100%;
    margin: 0 0 var(--v5-title-margin);
}

.feature-item-simple-v5 {
    padding: 2rem;
    background-color: transparent;
    text-align: center;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
}

.feature-icon-wrapper-v5 {
    position: relative;
    z-index: 1;
}

/* Blob shape background behind icons using pseudo-element */
.feature-icon-wrapper-v5::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: var(--primary-green);
    z-index: -1;
    transition: all 0.3s ease;
}

/* Varying blob shapes for each feature icon */
.feature-item-1 .feature-icon-wrapper-v5::before {
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
}

.feature-item-2 .feature-icon-wrapper-v5::before {
    border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%;
    transform: translate(-50%, -50%) rotate(5deg);
}

.feature-item-3 .feature-icon-wrapper-v5::before {
    border-radius: 50% 50% 45% 55% / 40% 60% 40% 60%;
    transform: translate(-50%, -50%) rotate(-4deg);
}

.feature-item-4 .feature-icon-wrapper-v5::before {
    border-radius: 60% 40% 50% 50% / 55% 50% 45% 45%;
    transform: translate(-50%, -50%) rotate(6deg);
}

.feature-item-5 .feature-icon-wrapper-v5::before {
    border-radius: 45% 55% 50% 50% / 55% 45% 50% 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
}

.feature-item-6 .feature-icon-wrapper-v5::before {
    border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    transform: translate(-50%, -50%) rotate(3deg);
}

.feature-item-simple-v5:hover {
    transform: translateY(-4px);
}

.feature-item-simple-v5:hover .feature-icon-wrapper-v5::before {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.15);
    box-shadow: 0 8px 24px rgba(52, 198, 89, 0.4);
}

.feature-icon-wrapper-v5 {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.feature-icon-wrapper-v5 svg {
    width: 62px;
    height: 62px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.feature-item-simple-v5:hover .feature-icon-wrapper-v5 svg {
    transform: scale(1.1);
}

.feature-item-simple-v5 p {
    font-size: 1.375rem;
    color: #0F0F0F;
    margin: 0;
    font-weight: 500;
    line-height: 1.3;
}

.features-note-v5 {
    text-align: center;
    font-size: 1.25rem;
    color: #666666;
    font-style: italic;
    margin-top: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.coach-guide-link-v5 {
    padding: 3rem 0 0;
    text-align: center;
}

.coach-guide-intro-v5 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    color: #666666;
}

.coach-guide-cta-v5 {
    color: var(--primary-green);
    font-size: 1.25rem;
    font-weight: 700;
}


/* Who It Is For Section - Image and Content Layout */
.who-image-v5 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--v5-title-margin);
}

.who-image-v5 .phone-container {
    max-width: 100%;
    width: 100%;
    position: relative;
    perspective: 1000px;
}

.who-image-v5 .phone-container::before {
    content: '';
    position: absolute;
    width: 330px;
    height: 330px;
    background: var(--primary-green);
    opacity: 1;
    border-radius: 50% 50% 45% 55% / 40% 60% 40% 60%;
    top: 50%;
    left: -50px;
    transform: translateY(-50%) rotate(-15deg);
    z-index: 0;
}

.who-image-v5 .phone-frame {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 280 / 580;
    transform: rotateY(18deg) rotateX(-6deg);
    transition: transform 0.5s ease;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.who-image-v5:hover .phone-frame {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 30px 90px rgba(52, 198, 89, 0.25);
}

.who-content-wrapper-v5 {
    display: flex;
    flex-direction: column;
    gap: var(--v5-content-gap);
}

.who-content-wrapper-v5 .section-title-v5 {
    margin-bottom: 0;
}

.who-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: var(--v5-text-margin);
}

.who-content-v5 strong {
    color: #1a1a1a;
    font-weight: 600;
}


/* Built By Section - Image and Content Layout */
.built-by-image-v5 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--v5-title-margin);
    position: relative;
    min-height: 400px;
    overflow: visible;
    min-width: 0;
}

.built-by-shape-v5 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.built-by-shape-image-v5 {
    position: relative;
    width: 500px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: left center;
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    transform: rotate(15deg);
    opacity: 1;
}

.built-by-content-wrapper-v5 {
    display: flex;
    flex-direction: column;
    gap: var(--v5-content-gap);
}

.built-by-content-wrapper-v5 .section-title-v5 {
    margin-bottom: 0;
}

.built-by-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: var(--v5-text-margin);
}

.built-by-note-v5 {
    font-size: 1rem;
    color: #999999;
    font-style: italic;
    margin-top: var(--v5-content-gap);
}

.principles-grid-v5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v5-content-gap);
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    align-items: start;
}

.principle-card-v5 {
    text-align: center;
    padding: var(--v5-content-gap);
}

.principle-number-v5 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: var(--v5-text-margin);
    line-height: 1;
}

.principle-card-v5 h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0;
}

/* Features Section */
.features-section-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #f8f8f8;
}

.feature-item-v5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--v5-title-margin) var(--v5-content-gap);
    max-width: 600px;
    margin: 0 auto var(--v5-content-gap);
    width: 100%;
    box-sizing: border-box;
}

.feature-content-v5 h3 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: var(--v5-text-margin);
    color: #1a1a1a;
}

.feature-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

.feature-icon-v5 {
    font-size: 4rem;
    margin-bottom: var(--v5-text-margin);
    opacity: 0.8;
}

/* CTA Section */
.cta-section-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #FFFFFF;
    text-align: center;
}

.cta-text-v5 {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #666666;
    margin: 0 auto var(--v5-content-gap);
    max-width: 700px;
    width: 100%;
    box-sizing: border-box;
}

/* Core Features Section */
.core-features-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #FFFFFF;
}

.section-subtitle-v5 {
    font-size: 1.125rem;
    text-align: center;
    color: #666666;
    margin: 0 auto var(--v5-title-margin);
    max-width: 700px;
    width: 100%;
    box-sizing: border-box;
}

.features-showcase-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v5-content-gap);
    margin-top: var(--v5-title-margin);
}

.feature-screenshot-v5 {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.feature-screenshot-v5 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Feature Details */
.feature-details-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #f8f8f8;
}

.feature-detail-v5 {
    max-width: 700px;
    margin: 0 auto var(--v5-title-margin);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.feature-detail-v5:last-child {
    margin-bottom: 0;
}

.feature-detail-v5 h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999999;
    margin-bottom: 0.5rem;
}

.feature-detail-v5 h4 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: var(--v5-text-margin);
    color: #1a1a1a;
}

.feature-detail-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

/* Testimonials Section */
.testimonials-section-v5 {
    padding: var(--v5-section-padding) 0;
    background-color: #FFFFFF;
}

.testimonials-grid-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v5-content-gap);
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    align-items: start;
}

.testimonial-v5 {
    padding: var(--v5-content-gap);
    background-color: #f8f8f8;
    border-radius: 8px;
}

.testimonial-text-v5 {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #1a1a1a;
    margin-bottom: var(--v5-text-margin);
    font-style: italic;
}

.testimonial-author-v5 {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.testimonial-source-v5 {
    font-size: 0.875rem;
    color: #999999;
    margin: 0;
}

/* Final CTA */
.final-cta-v5 {
    padding: calc(var(--v5-section-padding) * 1.5) 0;
    background: linear-gradient(135deg, #f8f8f8 0%, #FFFFFF 100%);
    position: relative;
    overflow: hidden;
}

.final-cta-v5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(52, 198, 89, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.cta-wrapper-v5 {
    position: relative;
    z-index: 1;
}

.cta-content-v5 {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.final-cta-v5 .section-title-v5 {
    text-align: center;
}

.cta-lead-v5 {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.cta-bullets-v5 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 3rem;
    align-items: center;
}

.cta-bullets-v5 p {
    font-size: 1.125rem;
    color: #666666;
    margin: 0;
    font-style: italic;
    position: relative;
    padding-left: 1.5rem;
}

.cta-bullets-v5 p::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-green);
    font-weight: 700;
    font-style: normal;
}

.cta-button-v5 {
    display: inline-block;
    font-size: 1.25rem;
    padding: 1.25rem 3rem;
    box-shadow: 0 4px 16px rgba(52, 198, 89, 0.3);
    transition: all 0.3s ease;
}

.cta-button-v5:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(52, 198, 89, 0.4);
}

/* Responsive Design */
@media (min-width: 768px) {
    .hero-headline-v5 {
        font-size: 4.5rem;
    }

    .hero-container-v5 {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .hero-content-v5 {
        flex: 1;
        text-align: left;
    }

    .hero-image-v5 {
        flex: 1;
        justify-content: flex-end;
    }

    .hero-cta-v5 {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }

    .features-grid-v5 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Two Column Layout for Sections - Equal 50/50 Width */
    .problem-section-v5 .container-v5 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }
    
    .problem-section-v5 .problem-image-v5 {
        padding-right: 2rem;
        overflow: visible;
    }
    
    .problem-section-v5 .problem-content-wrapper-v5 {
        padding-left: 2rem;
    }

    .problem-image-v5 {
        margin-bottom: 0;
        min-height: 500px;
        overflow: visible;
        min-width: 0;
    }

    .problem-shape-image-v5 {
        width: 600px;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .problem-content-wrapper-v5 {
        gap: var(--v5-title-margin);
    }

    .problem-section-v5 .section-title-v5 {
        position: static;
    }

    .solution-section-v5 .container-v5 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .solution-image-v5 {
        margin-bottom: 0;
    }

    .solution-image-v5 .phone-frame {
        max-width: 350px;
    }

    .solution-content-wrapper-v5 {
        gap: var(--v5-title-margin);
    }

    .solution-section-v5 .section-title-v5 {
        position: static;
    }

    .who-section-v5 .container-v5 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .who-image-v5 {
        margin-bottom: 0;
        min-width: 0;
    }

    .who-content-wrapper-v5 {
        min-width: 0;
        gap: var(--v5-title-margin);
    }

    .who-section-v5 .section-title-v5 {
        position: static;
    }

    .fairness-section-v5 .container-v5 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .fairness-image-v5 {
        margin-bottom: 0;
    }

    .fairness-image-v5 .phone-frame {
        max-width: 350px;
    }

    .fairness-content-wrapper-v5 {
        gap: var(--v5-title-margin);
    }

    .fairness-section-v5 .section-title-v5 {
        position: static;
    }

    .built-by-section-v5 .container-v5 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }
    
    .built-by-section-v5 .built-by-image-v5 {
        padding-right: 2rem;
        overflow: visible;
    }
    
    .built-by-section-v5 .built-by-content-wrapper-v5 {
        padding-left: 2rem;
    }

    .built-by-image-v5 {
        margin-bottom: 0;
        min-height: 500px;
        overflow: visible;
        min-width: 0;
    }

    .built-by-shape-image-v5 {
        width: 600px;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .built-by-content-wrapper-v5 {
        gap: var(--v5-title-margin);
    }

    .built-by-section-v5 .section-title-v5 {
        position: static;
    }

    /* Full-width sections stay full width */
    .how-it-works-v5 .container-v5,
    .features-list-v5 .container-v5,
    .final-cta-v5 .container-v5 {
        max-width: 1200px;
    }
}

@media (min-width: 1024px) {
    .hero-headline-v5 {
        font-size: 5rem;
    }

    .home-variation-5 .section-title-v5 {
        font-size: 6rem;
    }

    .home-variation-5 .features-list-v5 h2.section-title-v5 {
        font-size: 4rem !important;
    }

    .problem-lead-v5,
    .solution-lead-v5,
    .fairness-lead-v5 {
        font-size: 2.5rem;
    }

    .features-grid-v5 {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .feature-item-simple-v5 {
        padding: 2.5rem;
    }

    .cta-lead-v5 {
        font-size: 1.75rem;
    }
}

@media (max-width: 767px) {
    .home-variation-5 .section-title-v5,
    .home-variation-5 h2.section-title-v5 {
        font-size: 3rem !important;
    }

    .home-variation-5 .features-list-v5 h2.section-title-v5 {
        font-size: 2.5rem !important;
    }

    .problem-lead-v5,
    .solution-lead-v5,
    .fairness-lead-v5 {
        font-size: 1.5rem;
    }
}

/* -------------------------------------------------------------------------
   Inner pages — Variation 5 shell (match home typography / spacing)
   ------------------------------------------------------------------------- */

.page-hero-v5 {
    padding-bottom: 3rem;
}

.page-hero-v5 .hero-container-v5 {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-hero-v5 .hero-content-v5 {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
    flex: none;
    width: 100%;
}

@media (min-width: 768px) {
    .page-hero-v5 .hero-container-v5 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .page-hero-v5 .hero-content-v5 {
        text-align: center;
        flex: none;
    }
}

.page-prose-block-v5 {
    max-width: 900px;
}

.page-prose-v5 {
    max-width: 760px;
    margin: 0 auto;
}

.page-prose-v5 .entry-content > *:first-child {
    margin-top: 0;
}

.page-prose-v5 .entry-content p,
.page-prose-v5 .entry-content li {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
}

.page-prose-v5 .entry-content h2,
.page-prose-v5 .entry-content .wp-block-heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #1a1a1a;
    margin: 2.5rem 0 1rem;
}

.page-prose-v5 .entry-content a {
    color: var(--primary-green);
    font-weight: 600;
}

.page-content-section-v5 {
    padding-top: 0;
}

.page-features-v5 .feature-card-title-v5 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 1.25rem 0 0.75rem;
    line-height: 1.3;
}

.page-features-v5 .feature-item-simple-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

.home-variation-5 .fairplayfc-android-signup-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.home-variation-5 .fairplayfc-android-signup-intro {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
}

.home-variation-5 .fairplayfc-android-signup-page {
    padding-top: var(--v5-section-padding);
    padding-bottom: var(--v5-section-padding);
}

/* Pricing */
.pricing-section-v5 {
    padding: 0 0 var(--v5-section-padding);
    background:
        radial-gradient(ellipse 80% 50% at 80% 0%, rgba(52, 198, 89, 0.08), transparent 55%),
        #FFFFFF;
}

.pricing-grid-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 980px;
    margin: 0 auto;
    align-items: stretch;
}

.pricing-card-v5 {
    position: relative;
    background-color: #f6f7f6;
    border: 1px solid #e4e7e4;
    border-radius: 28px;
    padding: 2.25rem 1.75rem 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pricing-card-v5--featured {
    background: linear-gradient(180deg, #161616 0%, #0F0F0F 100%);
    border: 1px solid rgba(52, 198, 89, 0.45);
    box-shadow:
        0 24px 48px rgba(15, 15, 15, 0.18),
        0 0 0 1px rgba(52, 198, 89, 0.08);
}

.home-variation-5 .pricing-card-v5--featured h2,
.home-variation-5 .pricing-card-v5--featured .pricing-price-v5,
.home-variation-5 .pricing-card-v5--featured .pricing-kicker-v5,
.home-variation-5 .pricing-card-v5--featured .pricing-yearly-v5,
.home-variation-5 .pricing-card-v5--featured .pricing-card-lead-v5,
.home-variation-5 .pricing-card-v5--featured .pricing-badge-v5 {
    color: inherit;
}

.home-variation-5 .pricing-card-v5--featured h2,
.home-variation-5 .pricing-card-v5--featured .pricing-price-v5 {
    color: #FFFFFF;
}

.home-variation-5 .pricing-card-v5--featured .pricing-kicker-v5 {
    color: var(--primary-green);
}

.home-variation-5 .pricing-card-v5--featured .pricing-yearly-v5,
.home-variation-5 .pricing-card-v5--featured .pricing-card-lead-v5 {
    color: rgba(255, 255, 255, 0.72);
}

.home-variation-5 .pricing-card-v5--featured .pricing-badge-v5 {
    color: #0F0F0F;
}

.pricing-badge-v5 {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background-color: var(--primary-green);
    color: #0F0F0F;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pricing-kicker-v5 {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.pricing-card-v5--featured .pricing-kicker-v5 {
    color: var(--primary-green);
}

.pricing-card-v5 h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #1a1a1a;
}

.pricing-card-v5--featured h2 {
    color: #FFFFFF;
}

.pricing-price-v5 {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
}

.pricing-card-v5--featured .pricing-price-v5 {
    color: #FFFFFF;
}

.pricing-price-v5 span {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #666666;
    letter-spacing: 0;
}

.pricing-card-v5--featured .pricing-price-v5 span {
    color: rgba(255, 255, 255, 0.62);
}

.pricing-yearly-v5 {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.pricing-yearly-v5 strong {
    color: var(--primary-green);
    font-weight: 700;
}

.pricing-card-lead-v5 {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #5c5c5c;
    margin: 0 0 1.5rem;
    max-width: none;
}

.pricing-card-v5--featured .pricing-card-lead-v5 {
    color: rgba(255, 255, 255, 0.72);
}

.pricing-features-v5 {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    width: 100%;
    max-width: none;
    text-align: left;
    flex: 1;
}

.pricing-features-v5 li {
    position: relative;
    padding: 0.7rem 0 0.7rem 2rem;
    border-bottom: 1px solid #e4e7e4;
    font-size: 1rem;
    line-height: 1.5;
    color: #3d3d3d;
}

.pricing-card-v5--featured .pricing-features-v5 li {
    color: rgba(255, 255, 255, 0.86);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.pricing-features-v5 li:last-child {
    border-bottom: none;
}

.pricing-features-v5 li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background-color: rgba(52, 198, 89, 0.18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%230F0F0F' d='M4.6 8.6 2.2 6.2l.9-.9 1.5 1.5L9 2.4l.9.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.7rem;
}

.pricing-card-v5--featured .pricing-features-v5 li::before {
    background-color: var(--primary-green);
}

.pricing-cta-v5 {
    width: 100%;
    margin-top: auto;
    text-align: center;
}

.pricing-card-v5 .btn-secondary {
    background-color: #FFFFFF;
}

.pricing-footnote-v5 {
    max-width: 640px;
    margin: 2.5rem auto 0;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #666666;
}

.pricing-footnote-v5 a {
    color: var(--primary-green);
    font-weight: 600;
}

/* FAQ */
.faq-section-v5 {
    padding: 0 0 var(--v5-section-padding);
    background-color: #FFFFFF;
}

.faq-list-v5 {
    max-width: 820px;
}

.home-variation-5 .faq-item {
    background-color: #f8f8f8;
    border: 1px solid #eeeeee;
    border-radius: 16px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.home-variation-5 .faq-question {
    padding: 1.35rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
}

.home-variation-5 .faq-question:hover {
    background-color: #f0f0f0;
}

.home-variation-5 .faq-answer {
    padding: 0 1.5rem 1.5rem;
    color: #666666;
    font-size: 1.125rem;
    line-height: 1.7;
}

.home-variation-5 .faq-toggle {
    color: var(--primary-green);
}

/* Blog list + article */
.blog-section-v5 {
    padding: 0 0 var(--v5-section-padding);
    background: #FFFFFF;
}

.blog-section-v5 .container-v5 {
    display: block;
    max-width: 1200px;
}

.post-list-v5 {
    max-width: none;
    width: 100%;
    margin: 0;
}

.home-variation-5 .post-list-v5 .post-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    background: transparent;
    border-radius: 0;
    padding: 0 0 2.5rem;
    margin: 0 0 2.5rem;
    border-bottom: 1px solid #eeeeee;
}

.home-variation-5 .post-list-v5 .post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .home-variation-5 .post-list-v5 .post-item {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
        gap: 3rem;
    }
}

.home-variation-5 .post-list-v5 .post-item-body {
    min-width: 0;
}

.home-variation-5 .post-list-v5 h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.home-variation-5 .post-list-v5 h2 a {
    color: #1a1a1a;
    text-decoration: none;
}

.home-variation-5 .post-list-v5 h2 a:hover {
    color: var(--primary-green);
}

.home-variation-5 .post-list-v5 .post-meta {
    color: #666666;
    margin-bottom: 0.75rem;
}

.home-variation-5 .post-list-v5 .post-excerpt,
.home-variation-5 .post-list-v5 .post-excerpt p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
}

.home-variation-5 .post-list-v5 .read-more {
    color: var(--primary-green);
    font-weight: 700;
}

.post-item-category {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-green);
}

.post-item-thumb {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    order: -1;
}

@media (min-width: 768px) {
    .post-item-thumb {
        order: 0;
    }
}

.post-item-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.article-section-v5 {
    padding: 0 0 var(--v5-section-padding);
    background: #FFFFFF;
}

.article-prose-v5 {
    max-width: 720px;
    margin: 0 auto;
}

.article-featured-v5 {
    margin: 0 0 2rem;
}

.article-featured-v5 img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
}

/* Article page titles — 4rem on desktop, scaled for small screens */
body.single-post .page-hero-v5 .hero-headline-v5 {
    font-size: 2.25rem;
    line-height: 1.15;
}

body.single-post .page-hero-v5 .hero-subtitle-v5 {
    font-size: 1.125rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    body.single-post .page-hero-v5 .hero-headline-v5 {
        font-size: 3.25rem;
    }
}

@media (min-width: 1024px) {
    body.single-post .page-hero-v5 .hero-headline-v5 {
        font-size: 4rem;
    }
}

@media (max-width: 767px) {
    body.single-post .page-hero-v5 .hero-headline-v5 {
        font-size: 2rem;
    }
}

/* Beat .page-prose-v5 .wp-block-heading (higher specificity) */
.page-prose-v5.article-prose-v5 .entry-content h2,
.page-prose-v5.article-prose-v5 .entry-content h2.wp-block-heading,
.article-prose-v5 .entry-content h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}

.page-prose-v5.article-prose-v5 .entry-content h3,
.page-prose-v5.article-prose-v5 .entry-content h3.wp-block-heading,
.article-prose-v5 .entry-content h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.3rem);
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 1.75rem 0 0.625rem;
}

.article-prose-v5 .entry-content ul,
.article-prose-v5 .entry-content ol {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    color: #666666;
    font-size: 1.125rem;
    line-height: 1.7;
}

.article-prose-v5 .entry-content li {
    margin-bottom: 0.5rem;
}

.article-footer-v5 {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eeeeee;
}

.article-footer-v5 a {
    color: var(--primary-green);
    font-weight: 700;
}

.article-footer-cta-v5 {
    margin-top: 1rem;
    font-size: 1.125rem;
    color: #666666;
}

.home-variation-5 .page-contact-v5 .wpcf7 {
    margin-top: 2rem;
}

.home-variation-5 .page-contact-v5 input[type="text"],
.home-variation-5 .page-contact-v5 input[type="email"],
.home-variation-5 .page-contact-v5 textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}

/* About page alternating organic rows — side set by DOM order (same as home). */
.about-row-v5 .container-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v5-title-margin);
    align-items: center;
}

.about-row-v5 .solution-content-v5 p,
.about-row-v5 .who-content-v5 p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: var(--v5-text-margin);
}

.about-row-v5 .solution-content-wrapper-v5,
.about-row-v5 .who-content-wrapper-v5 {
    display: flex;
    flex-direction: column;
    gap: var(--v5-content-gap);
}

@media (min-width: 768px) {
    .pricing-grid-v5 {
        grid-template-columns: 1fr 1.08fr;
        align-items: stretch;
        gap: 1.75rem;
    }

    .pricing-card-v5--featured {
        transform: translateY(-8px);
        padding: 2.5rem 2rem 2.15rem;
    }

    .home-variation-5 .fairplayfc-android-signup-title {
        font-size: 4.5rem;
    }

    .about-row-v5 .container-v5 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .about-row-v5 .problem-image-v5,
    .about-row-v5 .built-by-image-v5 {
        margin-bottom: 0;
        min-height: 500px;
    }

    .about-row-v5 .problem-shape-image-v5,
    .about-row-v5 .built-by-shape-image-v5 {
        width: 600px;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .page-hero-v5 .hero-headline-v5 {
        font-size: 2.5rem;
    }

    .home-variation-5 .fairplayfc-android-signup-title {
        font-size: 2.5rem;
    }

    .pricing-price-v5 {
        font-size: 2.75rem;
    }

    .home-variation-5 .faq-question {
        font-size: 1.125rem;
    }
}