@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,300&family=DM+Sans:wght@300;400;500;600&display=swap");

    :root {
        --yn-bg: #f5f7ff;
        --yn-surface: #ffffff;
        --yn-text: #0f1c3f;
        --yn-text-muted: #64748b;
        --yn-text-faint: #94a3b8;
        --yn-blue: #293d75;
        --yn-blue-mid: #1e40af;
        --yn-blue-soft: rgba(29, 78, 216, 0.08);
        --yn-gold: #d97706;
        --yn-border: rgba(15, 28, 63, 0.08);
        --yn-border-mid: rgba(15, 28, 63, 0.12);
        --yn-shadow-md: 0 8px 32px rgba(15, 28, 63, 0.1);
    }

    .yn-ph {
        background: var(--yn-surface);
        padding: 80px 0 72px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--yn-border);
        font-family: "DM Sans", sans-serif;
    }

    .yn-ph-mesh {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
                ellipse 60% 80% at 5% 60%,
                rgba(29, 78, 216, 0.05) 0%,
                transparent 55%
        ),
        radial-gradient(
                ellipse 40% 50% at 95% 15%,
                rgba(217, 119, 6, 0.04) 0%,
                transparent 50%
        );
    }

    .yn-ph-grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(var(--yn-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--yn-border) 1px, transparent 1px);
        background-size: 52px 52px;
        mask-image: radial-gradient(
                ellipse 100% 100% at 50% 50%,
                #000 0%,
                transparent 65%
        );
    }

    .yn-ph-inner {
        position: relative;
        z-index: 1;
    }

    .yn-ph-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--yn-gold);
        margin-bottom: 14px;
    }

    .yn-ph-eyebrow::before,
    .yn-ph-eyebrow::after {
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        background: var(--yn-gold);
    }

    .yn-ph-title {
        font-family: "Fraunces", serif;
        font-size: clamp(28px, 3.5vw, 48px);
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -1px;
        color: var(--yn-text);
        margin-bottom: 14px;
    }

    .yn-ph-desc {
        font-size: 15px;
        font-weight: 300;
        line-height: 1.7;
        color: var(--yn-text-muted);
        max-width: 480px;
        margin-bottom: 0;
    }

    .yn-ph-card {
        background: var(--yn-surface);
        border: 1px solid var(--yn-border-mid);
        border-radius: 18px;
        padding: 32px 28px;
        box-shadow: var(--yn-shadow-md);
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .yn-ph-card-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--yn-blue);
        margin-bottom: 12px;
    }

    .yn-ph-card-price {
        font-family: "Fraunces", serif;
        font-size: clamp(36px, 4vw, 52px);
        font-weight: 900;
        line-height: 1;
        color: var(--yn-text);
        margin-bottom: 6px;
    }

    .yn-ph-card-cycle {
        font-size: 13px;
        color: var(--yn-text-muted);
        font-weight: 300;
        margin-bottom: 20px;
    }

    .yn-ph-card-setup {
        font-size: 12px;
        color: var(--yn-text-faint);
        margin-bottom: 20px;
    }

    .yn-ph-card-btn {
        display: block;
        padding: 12px 20px;
        border-radius: 100px;
        font-family: "DM Sans", sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        background: var(--yn-blue);
        color: #fff;
        transition: background 0.18s, box-shadow 0.18s;
    }

    .yn-ph-card-btn:hover {
        background: var(--yn-blue-mid);
        box-shadow: 0 4px 18px rgba(29, 78, 216, 0.3);
        color: #fff;
    }

    .yn-ph-card-btn--out {
        background: var(--yn-bg);
        color: var(--yn-text-faint);
        border: 1px solid var(--yn-border-mid);
        cursor: not-allowed;
    }