/* features-page.css: generated once from the owner-approved Codex prototype (outputs/pianoplanner-homepage-feitelijk, features-content.css) and maintained here. Scoped to .pp-public pages; see docs/PUBLIC_PAGES_CHANGE_IMPACT.md. */
.pp-public .public-page{--edward-green-light: #e8f4d9;
            --edward-grey-light: #f5f5f7;
            --edward-grey-medium: #e5e5ea;
            --edward-text-primary: #1d1d1f;
            --edward-text-secondary: #6e6e73;
            --edward-accent: #91BD62;
            --edward-accent-hover: #7DA854;
            --edward-cta: #9362BD;
            --edward-cta-hover: #7D4EA8;
            --white: #ffffff;
            --green: #34c759;
            --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;}
.pp-public .public-page *{box-sizing: border-box; margin: 0; padding: 0;}
.pp-public .public-page{scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce){.pp-public .public-page{scroll-behavior: auto;}}
.pp-public .public-page{font-family: var(--font);
            color: var(--edward-text-primary);
            background: #fbfcfa;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;}
.pp-public .public-page a{color: inherit; text-decoration: none;}
.pp-public .public-page :focus-visible{outline: 3px solid rgba(145, 189, 98, 0.6); outline-offset: 3px; border-radius: 4px;}
.pp-public .public-page :focus:not(:focus-visible){outline: none;}
.pp-public .public-page .logo-piano{width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--edward-green-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--edward-accent);}
.pp-public .public-page .container{max-width: 1080px; margin: 0 auto; padding: 0 24px;}
.pp-public .public-page .hero{padding: 128px 0 56px;
            background: linear-gradient(180deg, #ffffff 0%, #f7faf4 100%);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);}
.pp-public .public-page .hero-grid{display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
            gap: 44px;
            align-items: center;}
.pp-public .public-page .eyebrow{display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border: 1px solid rgba(145, 189, 98, 0.32);
            background: rgba(145, 189, 98, 0.11);
            border-radius: 999px;
            font-size: 13px;
            font-weight: 650;
            color: #4f7f2c;
            margin-bottom: 18px;}
.pp-public .public-page .eyebrow-dot{width: 7px; height: 7px; border-radius: 50%; background: var(--edward-accent);}
.pp-public .public-page h1{font-size: clamp(40px, 6vw, 68px);
            line-height: 1.02;
            letter-spacing: 0;
            max-width: 760px;
            margin-bottom: 18px;}
.pp-public .public-page .hero-sub{color: var(--edward-text-secondary);
            font-size: 19px;
            max-width: 680px;
            margin-bottom: 28px;}
.pp-public .public-page .hero-actions{display: flex; gap: 12px; flex-wrap: wrap;}
.pp-public .public-page .btn{display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 650;
            font-size: 15px;}
.pp-public .public-page .btn-primary{background: linear-gradient(135deg, var(--edward-cta) 0%, var(--edward-cta-hover) 100%); color: #fff;}
.pp-public .public-page .btn-secondary{background: #fff; border: 1px solid var(--edward-grey-medium); color: var(--edward-text-primary);}
.pp-public .public-page .hero-visual{position: relative;
            min-height: 360px;
            border-radius: 8px;
            overflow: hidden;
            background: #eef5e8;
            box-shadow: 0 24px 70px rgba(37, 57, 27, 0.16);}
.pp-public .public-page .hero-visual img{width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block;}
.pp-public .public-page .hero-overlay{position: absolute;
            left: 18px;
            right: 18px;
            bottom: 18px;
            background: rgba(255, 255, 255, 0.86);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 8px;
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;}
.pp-public .public-page .hero-stat strong{display: block; font-size: 20px; line-height: 1.1;}
.pp-public .public-page .hero-stat span{color: var(--edward-text-secondary); font-size: 12px;}
.pp-public .public-page .section{padding: 64px 0;}
.pp-public .public-page .section-head{max-width: 760px; margin-bottom: 30px;}
.pp-public .public-page .section-head.center{text-align: center; margin-left: auto; margin-right: auto;}
.pp-public .public-page .section-kicker{color: var(--edward-accent); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;}
.pp-public .public-page h2{font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: 0; margin-bottom: 12px;}
.pp-public .public-page .section-head p{color: var(--edward-text-secondary); font-size: 17px;}
.pp-public .public-page .quick-grid{display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 12px;}
.pp-public .public-page .quick-card{background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.07);
            border-radius: 8px;
            padding: 16px;
            min-height: 122px;
            display: flex;
            flex-direction: column;
            gap: 10px;}
.pp-public .public-page .quick-card i,.pp-public .public-page .feature-icon i{color: var(--edward-accent);}
.pp-public .public-page .quick-card strong{font-size: 15px;}
.pp-public .public-page .quick-card span{color: var(--edward-text-secondary); font-size: 13px;}
.pp-public .public-page .feature-grid{display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;}
.pp-public .public-page .feature-card{background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.07);
            border-radius: 8px;
            padding: 22px;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            min-width: 0;}
.pp-public .public-page .feature-icon{width: 42px;
            height: 42px;
            border-radius: 8px;
            background: rgba(145, 189, 98, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;}
.pp-public .public-page .feature-card h3{font-size: 20px; margin-bottom: 6px;}
.pp-public .public-page .feature-card p{color: var(--edward-text-secondary); font-size: 14px; margin-bottom: 14px;}
.pp-public .public-page .feature-list{list-style: none; display: grid; gap: 8px;}
.pp-public .public-page .feature-list li{display: flex;
            align-items: flex-start;
            gap: 8px;
            color: #3f3f46;
            font-size: 14px;
            min-width: 0;}
.pp-public .public-page .feature-list li::before{content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--edward-accent);
            margin-top: 8px;
            flex-shrink: 0;}
.pp-public .public-page .feature-label{display: inline-flex;
            margin-bottom: 8px;
            color: var(--edward-accent);
            font-size: 12px;
            font-weight: 750;
            text-transform: uppercase;
            letter-spacing: 0.05em;}
.pp-public .public-page .workflow-grid{display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;}
.pp-public .public-page .workflow-card,.pp-public .public-page .trust-card{background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.07);
            border-radius: 8px;
            padding: 22px;
            min-width: 0;}
.pp-public .public-page .workflow-card h3,.pp-public .public-page .trust-card h3{font-size: 18px; margin-bottom: 8px;}
.pp-public .public-page .workflow-card p,.pp-public .public-page .trust-card p{color: var(--edward-text-secondary); font-size: 14px;}
.pp-public .public-page .support-grid{display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 14px;}
.pp-public .public-page .support-card{background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.07);
            border-radius: 8px;
            padding: 18px;}
.pp-public .public-page .support-card i{color: var(--edward-accent); margin-bottom: 12px;}
.pp-public .public-page .support-card h3{font-size: 16px; margin-bottom: 8px;}
.pp-public .public-page .support-card p{color: var(--edward-text-secondary); font-size: 13px;}
.pp-public .public-page .migration-panel{background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.07);
            border-radius: 8px;
            padding: 28px;
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
            gap: 28px;
            align-items: start;}
.pp-public .public-page .migration-list{list-style: none;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;}
.pp-public .public-page .migration-list li{background: #f7faf4;
            border: 1px solid rgba(145, 189, 98, 0.16);
            border-radius: 8px;
            padding: 14px;
            color: var(--edward-text-primary);
            font-size: 14px;
            font-weight: 600;}
.pp-public .public-page .trust-row{display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;}
.pp-public .public-page .plan-badge{display: inline-flex;
            align-items: center;
            align-self: flex-start;
            margin-top: 16px;
            padding: 5px 9px;
            border-radius: 999px;
            background: #f4f4f5;
            color: #52525b;
            font-size: 12px;
            font-weight: 650;}
.pp-public .public-page .pricing-strip{background: #111827;
            color: #fff;}
.pp-public .public-page .pricing-strip .section-head p{color: rgba(255, 255, 255, 0.72);}
.pp-public .public-page .price-grid{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;}
.pp-public .public-page .price-card{border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; padding: 18px; background: rgba(255, 255, 255, 0.06);}
.pp-public .public-page .price-card h3{font-size: 16px; margin-bottom: 10px;}
.pp-public .public-page .price{font-size: 26px; font-weight: 800; margin-bottom: 6px;}
.pp-public .public-page .price small{font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7);}
.pp-public .public-page .price-card p{color: rgba(255, 255, 255, 0.72); font-size: 13px;}
.pp-public .public-page .faq-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
.pp-public .public-page .faq-item{background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 8px; padding: 18px;}
.pp-public .public-page .faq-item h3{font-size: 16px; margin-bottom: 8px;}
.pp-public .public-page .faq-item p{color: var(--edward-text-secondary); font-size: 14px;}
.pp-public .public-page .cta-band{margin: 34px 0 0;
            background: linear-gradient(135deg, #1d1d1f 0%, #2d2435 100%);
            color: #fff;
            border-radius: 8px;
            padding: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;}
.pp-public .public-page .cta-band p{color: rgba(255,255,255,0.72); margin-top: 6px;}
@media (max-width: 980px){.pp-public .public-page .hero-grid{grid-template-columns: 1fr;}.pp-public .public-page .quick-grid,.pp-public .public-page .price-grid,.pp-public .public-page .support-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}.pp-public .public-page .feature-grid{grid-template-columns: 1fr;}.pp-public .public-page .workflow-grid,.pp-public .public-page .trust-row,.pp-public .public-page .migration-panel{grid-template-columns: 1fr;}}
@media (max-width: 700px){.pp-public .public-page .hero{padding-top: 104px;}.pp-public .public-page .hero-overlay{grid-template-columns: 1fr;}.pp-public .public-page .quick-grid,.pp-public .public-page .price-grid,.pp-public .public-page .faq-grid,.pp-public .public-page .support-grid,.pp-public .public-page .migration-list{grid-template-columns: 1fr;}.pp-public .public-page .feature-card{grid-template-columns: 1fr;}.pp-public .public-page .cta-band{align-items: flex-start; flex-direction: column;}}