.pi-page { max-width: 660px; margin: 1.5rem auto; padding: 0 1rem; }

.pi-header {
    font-size: 18px; font-weight: 500; color: #1a3a5c;
    margin-bottom: 1.25rem; padding-bottom: 0.75rem;
    border-bottom: 2px solid #1a6fc4;
}

.pi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pi-card {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; text-decoration: none;
    background: #f8fafc; border: 1px solid #e2eaf3;
    border-radius: 12px; padding: 1.25rem 0.75rem;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}
.pi-card:hover {
    background: #eef5ff; border-color: #9ec5f5;
}
.pi-card-icon { font-size: 28px; margin-bottom: 8px; }
.pi-card-title { font-size: 13px; font-weight: 500; color: #1a3a5c; line-height: 1.4; margin-bottom: 4px; }
.pi-card-sub { font-size: 11px; color: #8a9bb0; }

.pi-card-web { grid-column: 1 / -1; flex-direction: row; gap: 14px; padding: 1rem 1.5rem; text-align: left; }
.pi-card-web .pi-card-icon { font-size: 24px; margin-bottom: 0; flex-shrink: 0; }
.pi-card-web .pi-card-title { font-size: 14px; }
.pi-card-web .pi-card-sub { color: #1a6fc4; }

@media (max-width: 480px) {
    .pi-grid { grid-template-columns: repeat(2, 1fr); }
    .pi-card-web { grid-column: 1 / -1; }
}