/* Site-specific additions on top of phasic.css (the shared brand stylesheet). */

.site-lead { font-size: 1.2rem; }
.site-meta { font-size: 0.9rem; color: var(--pl-cloud-muted); }
.site-section { margin-top: clamp(40px, 6vw, 64px); }
.site-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.site-crumbs { font-size: 0.9rem; color: var(--pl-cloud-muted); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* Home hero */
.site-hero { padding-bottom: clamp(32px, 6vw, 56px); }
.site-hero__logo { width: min(240px, 60vw); margin-bottom: 16px; }

/* Plugin cards and product page */
.site-plugin-card { display: flex; flex-direction: column; }
.site-plugin-card h3 a { color: var(--pl-cloud); text-decoration: none; }
.site-plugin-card .pl-button { align-self: flex-start; margin-top: auto; }

.site-shot {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: var(--pl-radius-small);
    background: var(--pl-dusk-deep);
    color: var(--pl-cloud-muted);
}
.site-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.site-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
@media (max-width: 760px) { .site-product { grid-template-columns: 1fr; } }

.site-buy { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.site-button--disabled { opacity: 0.55; cursor: default; pointer-events: none; }

.site-features { padding-left: 1.2em; }
.site-features li { margin-bottom: 0.4em; }
.site-features li::marker { color: var(--pl-aqua); }

/* Click-to-load YouTube */
.site-figure { margin: 0; }
.site-figure figcaption { margin-top: 8px; font-size: 0.9rem; }
.site-video, .site-figure iframe {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--pl-radius-small);
    background: var(--pl-dusk-deep) center / cover no-repeat;
    cursor: pointer;
}
.site-video__play {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pl-yellow);
    color: var(--pl-dusk);
    font-size: 1.4rem;
}

/* Docs */
.site-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 12px 16px;
    margin-bottom: 32px;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-small);
}
.site-docs h2 { margin-top: 1.6em; scroll-margin-top: 16px; }

/* Forms */
.site-form { max-width: 640px; }
textarea.pl-input { resize: vertical; }
select.pl-input { appearance: auto; }
.site-hp { position: absolute; left: -9999px; }

/* Thanks page */
.site-thanks { margin: 0 auto; max-width: 560px; }
.site-key { display: flex; gap: 8px; margin: 20px 0; }
.site-key .pl-input { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }
.site-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: -3px;
    border: 3px solid var(--pl-line);
    border-top-color: var(--pl-aqua);
    border-radius: 50%;
    animation: site-spin 1s linear infinite;
}
@keyframes site-spin { to { transform: rotate(360deg); } }

.site-centred { text-align: center; padding: 40px 0; }
.site-centred p { margin-left: auto; margin-right: auto; }