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

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: #0a0a0a;
    color: #e8e8e8;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Hook */
.hook {
    padding: 80px 40px 56px;
    max-width: 1300px;
    margin: 0 auto;
}

.hook h1 {
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 20px;
    color: #fff;
}

.kicker {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    color: #888;
    line-height: 1.65;
    max-width: 600px;
}

.kicker strong {
    color: #fff;
    font-weight: 600;
}

/* Two-column layout */
.core {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 0;
    max-width: 1300px;
    margin: 0 auto;
    border-top: 1px solid #222;
}

.col-data {
    padding: 0 40px;
}

.col-stories {
    padding: 24px 32px;
    border-left: 1px solid #222;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.col-stories::-webkit-scrollbar {
    width: 6px;
}

.col-stories::-webkit-scrollbar-track {
    background: transparent;
}

.col-stories::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

.col-stories::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Sections */
.col-data section {
    padding: 44px 0;
}

.col-data section + section {
    border-top: 1px solid #222;
}

h2 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

/* Loss */
.loss ul {
    list-style: none;
}

.loss li {
    padding: 6px 0;
    font-size: 0.92rem;
    color: #ccc;
    border-bottom: 1px solid #1a1a1a;
}

.loss li::before {
    content: '—';
    margin-right: 8px;
    color: #e63232;
}

/* Objections */
.obj {
    padding: 12px 0;
    border-bottom: 1px solid #1a1a1a;
}

.you-say {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 2px;
}

.reality {
    font-size: 0.88rem;
    color: #e63232;
    font-weight: 600;
}

/* Damage */
.damage p {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 10px;
}

.damage p strong {
    color: #fff;
}

/* Protect */
.protect ul {
    list-style: none;
}

.protect li {
    font-size: 0.9rem;
    color: #aaa;
    padding: 6px 0;
}

.protect li strong {
    color: #fff;
}

/* Stories */
.stories-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.story-card {
    border: 2px solid #e63232;
    border-radius: 4px;
    padding: 16px;
}

.story-img {
    width: 100%;
    border-radius: 3px;
    margin-bottom: 12px;
    display: block;
}

.story-text {
    font-size: 0.84rem;
    color: #ccc;
    line-height: 1.55;
    white-space: pre-line;
}

.stories-loading {
    font-size: 0.84rem;
    color: #555;
}

.form-link {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e63232;
    text-decoration: none;
    margin-bottom: 16px;
    border-bottom: 1px solid transparent;
    width: fit-content;
    transition: border-color 0.15s;
}

.form-link:hover {
    border-color: #e63232;
}

/* Footer */
footer {
    max-width: 1300px;
    margin: 0 auto;
    padding: 36px 40px;
    border-top: 1px solid #222;
}

footer p {
    font-size: 0.75rem;
    color: #444;
}

/* Mobile */
@media (max-width: 800px) {
    .core {
        grid-template-columns: 1fr;
    }

    .col-data {
        padding: 0 20px;
    }

    .col-stories {
        position: static;
        max-height: none;
        overflow-y: visible;
        border-left: none;
        border-top: 1px solid #222;
        padding: 32px 20px;
    }

    .hook { padding: 48px 20px 32px; }

    .hook h1 {
        font-size: 1.8rem;
    }

    .kicker {
        font-size: 0.92rem;
    }

    .col-data section { padding: 28px 0; }

    h2 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .loss li { font-size: 0.88rem; }
    .you-say { font-size: 0.88rem; }
    .reality { font-size: 0.84rem; }
    .damage p { font-size: 0.88rem; }
    .protect li { font-size: 0.88rem; }

    .story-card {
        padding: 14px;
    }

    .story-text {
        font-size: 0.82rem;
    }

    .form-link {
        font-size: 0.82rem;
        padding: 8px 0;
    }

    footer { padding: 24px 20px; }
}