/*
================================================
Reelify AI - Dark SEO page system (matches the Obsidian homepage)
================================================
Standalone stylesheet for content/landing pages. Does NOT depend on style.css.
Monochrome only: obsidian black, greys, silver, white.
Fonts: DM Serif Display (italic headings), Inter (body), Geist Mono (labels).
All classes are prefixed `sp-` so nothing collides with the main site CSS.

Sections:
 1. Tokens & base
 2. Header
 3. Layout helpers
 4. Hero & buttons
 5. Figures & video
 6. Facts list, steps, lists, tables
 7. FAQ
 8. Link grid & CTA
 9. Footer
10. Responsive & motion
================================================
*/

/* 1. Tokens & base ------------------------------------------------ */
:root {
    --sp-bg: #080808;
    --sp-bg-soft: #0d0d0d;
    --sp-card: rgba(255, 255, 255, 0.025);
    --sp-ink: #ffffff;
    --sp-ink-2: #b4b8bf;
    /* body copy, 9:1 on #080808 */
    --sp-ink-3: #8b9098;
    /* secondary text, 5.6:1 on #080808 */
    --sp-line: rgba(255, 255, 255, 0.08);
    --sp-line-strong: rgba(255, 255, 255, 0.18);
    --sp-silver: #e2e8f0;
    --sp-silver-gradient: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
    --sp-radius: 1rem;
    --sp-radius-lg: 1.5rem;
    --sp-text-w: 720px;
    --sp-wide-w: 1040px;
    --sp-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --sp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sp-mono: 'Geist Mono', 'SF Mono', Monaco, 'Courier New', monospace;
    --sp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    background: var(--sp-bg);
}

body.sp {
    margin: 0;
    background: var(--sp-bg);
    color: var(--sp-ink-2);
    font-family: var(--sp-sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sp h1,
.sp h2 {
    color: var(--sp-ink);
    font-family: var(--sp-serif);
    font-style: italic;
    font-weight: 400;
    margin: 0;
}

.sp h3 {
    color: var(--sp-ink);
    font-family: var(--sp-sans);
    font-style: normal;
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.35;
    margin: 0 0 6px;
}

.sp h1 {
    font-size: clamp(2.5rem, 5.6vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
}

.sp h1 .sp-dim {
    display: block;
    background: linear-gradient(135deg, #b9bec6 0%, #6c727b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sp h2 {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin-bottom: 18px;
}

.sp p {
    margin: 0 0 16px;
}

.sp a {
    color: var(--sp-ink);
    text-decoration-line: underline;
    text-decoration-color: var(--sp-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.sp a:hover {
    text-decoration-color: var(--sp-ink);
}

.sp :focus-visible {
    outline: 2px solid var(--sp-silver);
    outline-offset: 3px;
    border-radius: 6px;
}

.sp strong {
    color: var(--sp-ink);
    font-weight: 500;
}

.sp-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    background: var(--sp-silver);
    color: #000 !important;
    padding: 10px 16px;
    border-radius: 10px;
    z-index: 200;
    text-decoration: none !important;
}

.sp-skip:focus {
    top: 12px;
}

/* 2. Header ------------------------------------------------------- */
.sp-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 8, 8, 0.82);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--sp-line);
}

.sp-header-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sp a.sp-logo {
    font-family: var(--sp-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: var(--sp-silver-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    white-space: nowrap;
}

.sp-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sp-line);
    border-radius: 50px;
}

.sp .sp-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 8px 14px;
    font-family: var(--sp-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 50px;
    white-space: nowrap;
    transition: all 0.3s var(--sp-ease);
}

.sp .sp-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* 3. Layout helpers ---------------------------------------------- */
.sp-wrap {
    max-width: var(--sp-text-w);
    margin: 0 auto;
    padding: 0 24px;
}

.sp-wrap-wide {
    max-width: var(--sp-wide-w);
    margin: 0 auto;
    padding: 0 24px;
}

.sp-section {
    padding: 88px 0;
    border-top: 1px solid var(--sp-line);
}


.sp-muted {
    color: var(--sp-ink-3);
    font-size: 0.9375rem;
}

/* 4. Hero & buttons ---------------------------------------------- */
.sp-hero {
    padding: 88px 0 48px;
    text-align: center;
}

.sp .sp-answer {
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--sp-ink-2);
    margin: 28px auto 36px;
    max-width: 60ch;
}

.sp-hero .sp-wrap {
    max-width: 920px;
}

.sp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-bottom: 20px;
}

.sp-hero .sp-actions {
    justify-content: center;
}

.sp a.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 32px;
    min-height: 46px;
    border-radius: 1rem;
    background: var(--sp-silver-gradient);
    color: #000;
    font-family: var(--sp-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    border: 0;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
    transition: all 0.3s var(--sp-ease);
}

.sp a.sp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.16);
}

.sp a.sp-btn-sm {
    padding: 10px 20px;
    min-height: 38px;
    font-size: 10px;
    letter-spacing: 0.15em;
    border-radius: 9999px;
}

.sp a.sp-link-quiet {
    font-family: var(--sp-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sp-ink-2);
    text-decoration: none;
}

.sp a.sp-link-quiet:hover {
    color: var(--sp-ink);
}

/* 5. Figures & video --------------------------------------------- */
.sp-figure {
    margin: 0;
}

.sp-figure img,
.sp-figure video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-line);
    background: #000;
}

/* Hero media A/B test. The head script sets data-hero="image" or "video" on <html>.
   With no attribute (no JS, or crawlers that skip scripts) visitors get the image. */
.sp-hero-vid {
    display: none;
}

html[data-hero="video"] .sp-hero-img {
    display: none;
}

html[data-hero="video"] .sp-hero-vid {
    display: block;
}

html[data-hero="video"] .sp-demo-lower {
    display: none;
}

.sp-figure figcaption {
    margin-top: 14px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--sp-ink-3);
    text-align: center;
}

/* 6. Facts list, steps, lists, tables ---------------------------- */
.sp-facts {
    margin: 0;
    border-top: 1px solid var(--sp-line);
}

.sp-facts div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sp-line);
}

.sp-facts dt {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--sp-ink-3);
}

.sp-facts dd {
    margin: 0;
    font-size: 0.9688rem;
    color: var(--sp-ink);
}

.sp-criteria {
    list-style: none;
    margin: 28px 0;
    padding: 0;
    border-top: 1px solid var(--sp-line);
}

.sp-criteria li {
    padding: 18px 0;
    border-bottom: 1px solid var(--sp-line);
}

.sp-criteria li strong {
    display: block;
    margin-bottom: 2px;
}

.sp-steps {
    list-style: none;
    counter-reset: sp-step;
    margin: 28px 0 36px;
    padding: 0;
}

.sp-steps li {
    counter-increment: sp-step;
    position: relative;
    padding: 0 0 26px 40px;
}

.sp-steps li::before {
    content: counter(sp-step) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.0625rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--sp-ink-3);
}

.sp-steps li:last-child {
    padding-bottom: 0;
}

.sp-steps h3 {
    margin-bottom: 2px;
}

.sp-steps p {
    margin: 0;
}

.sp-fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 48px;
    margin-top: 28px;
}

.sp-fit>div {
    border-top: 1px solid var(--sp-line-strong);
    padding-top: 18px;
}

.sp-fit h3 {
    font-size: 1.125rem;
}

.sp-fit ul {
    margin: 14px 0 0;
    padding-left: 18px;
}

.sp-fit li {
    margin-bottom: 10px;
    font-size: 0.9688rem;
}

.sp-fit li::marker {
    color: var(--sp-ink-3);
}

.sp-fit li:last-child {
    margin-bottom: 0;
}

.sp-table-wrap {
    overflow-x: auto;
    margin: 28px 0;
    border-top: 1px solid var(--sp-line-strong);
}

.sp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
    min-width: 620px;
}

.sp-table th,
.sp-table td {
    text-align: left;
    vertical-align: top;
    padding: 16px 18px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-table thead th {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--sp-ink-3);
}

.sp-table tbody th {
    font-weight: 500;
    color: var(--sp-ink);
    width: 22%;
}

.sp-table tbody tr:last-child th,
.sp-table tbody tr:last-child td {
    border-bottom: 0;
}

.sp-table .sp-col-us {
    color: var(--sp-ink);
}

.sp-table thead .sp-col-us {
    color: var(--sp-ink);
    font-weight: 500;
}

/* 7. FAQ --------------------------------------------------------- */
.sp-faq {
    border-top: 1px solid var(--sp-line);
    margin-top: 28px;
}

.sp-faq details {
    border-bottom: 1px solid var(--sp-line);
}

.sp-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 40px 20px 0;
    position: relative;
    font-weight: 400;
    color: var(--sp-ink);
    line-height: 1.4;
}

.sp-faq summary::-webkit-details-marker {
    display: none;
}

.sp-faq summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--sp-mono);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--sp-ink-3);
    line-height: 1;
}

.sp-faq details[open] summary::after {
    content: '\2212';
}

.sp-faq .sp-faq-a {
    padding: 0 40px 22px 0;
}

.sp-faq .sp-faq-a p:last-child {
    margin-bottom: 0;
}

/* 8. Link grid & CTA --------------------------------------------- */
.sp-links {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    border-top: 1px solid var(--sp-line);
}

.sp-links li {
    border-bottom: 1px solid var(--sp-line);
}

.sp .sp-links a {
    display: block;
    padding: 18px 0;
    text-decoration: none;
}

.sp-links a span {
    display: block;
    font-weight: 400;
    color: var(--sp-ink);
}

.sp-links a small {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sp-ink-3);
    margin-top: 2px;
}

.sp-links a:hover span {
    text-decoration: underline;
    text-decoration-color: var(--sp-line-strong);
    text-underline-offset: 3px;
}

.sp-cta {
    padding: 104px 0;
    border-top: 1px solid var(--sp-line);
    text-align: center;
}

.sp-cta h2 {
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

.sp-cta p {
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.sp-cta .sp-actions {
    justify-content: center;
    margin-top: 28px;
}

/* 9. Footer ------------------------------------------------------ */
.sp-footer {
    border-top: 1px solid var(--sp-line);
    padding: 64px 0 32px;
    font-size: 0.9063rem;
}

.sp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 32px;
}

.sp-footer h4 {
    margin: 0 0 14px;
    font-size: 0.9063rem;
    font-weight: 500;
    color: var(--sp-ink);
}

.sp-footer-brand p {
    color: var(--sp-ink-3);
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 30ch;
    margin: 14px 0 0;
}

.sp .sp-footer-col a {
    display: block;
    padding: 4px 0;
    color: var(--sp-ink-3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sp .sp-footer-col a:hover {
    color: var(--sp-ink);
}

.sp-footer-bottom {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--sp-line);
    color: var(--sp-ink-3);
    font-size: 0.8125rem;
}

.sp-footer-bottom p {
    margin: 0;
}

/* 10. Responsive & motion ---------------------------------------- */
@media (max-width: 1000px) {
    .sp-nav {
        display: none;
    }
}

@media (max-width: 900px) {
    .sp-footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sp-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    body.sp {
        font-size: 1rem;
    }

    .sp-header-inner {
        padding: 0 20px;
    }

    .sp-hero {
        padding: 56px 0 32px;
    }

    .sp-section {
        padding: 64px 0;
    }

    .sp-cta {
        padding: 72px 0;
    }

    .sp-facts div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .sp-fit,
    .sp-links {
        grid-template-columns: 1fr;
    }

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

    .sp-faq summary {
        padding-right: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}

/* 11. Feature shots, vertical clips, review quotes ---------------- */
/* Used by the /es/ and /pt-br/ pages. Same dark tokens as above. */
.sp-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
    margin-top: 36px;
}

.sp-features h3 {
    margin: 18px 0 6px;
    font-size: 1.125rem;
}

.sp-features p {
    margin: 0;
    font-size: 0.9688rem;
}

.sp-features img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-line);
    background: #000;
}

.sp-clips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    justify-content: center;
    gap: 24px;
    margin: 32px 0 0;
}

.sp-clips video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-line);
    background: #000;
}

.sp-quotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 32px 0 0;
}

.sp-quotes blockquote {
    margin: 0;
    padding: 22px 24px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-card);
}

.sp-quotes blockquote p {
    margin: 0 0 14px;
    font-size: 0.9688rem;
    line-height: 1.6;
    color: var(--sp-ink);
}

.sp-quotes cite {
    font-family: var(--sp-mono);
    font-size: 11px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sp-ink-3);
}

.sp-quotes cite a {
    color: inherit;
}

@media (max-width: 720px) {

    .sp-features,
    .sp-quotes {
        grid-template-columns: 1fr;
    }

    .sp-clips {
        gap: 14px;
    }
}