/* ═══════════════════════════════════════════════════════════════
   SAILS.TO — WHAT IS SAILS PAGE
   Cyberpunk-Vintage · Pastel Neon
   Page-specific styles only — inherits from styles.css
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLE OF CONTENTS BOX ─────────────────────────────────── */
.toc-box {
    background: var(--bg-card);
    border: 2px solid var(--border-strong);
    padding: 32px;
    margin: 32px auto;
    max-width: var(--max-width);
}

.toc-box h2 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--charcoal);
    border-bottom: 2px solid var(--neon-orange);
    padding-bottom: 16px;
}


/* ── TOC GRID ──────────────────────────────────────────────── */
.toc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

.toc-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.toc-item-num {
    background: var(--neon-orange);
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.toc-item-content h3 {
    margin: 0 0 4px 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--charcoal);
}

.toc-item-content p {
    margin: 0;
    color: var(--slate);
    font-size: 0.9rem;
    line-height: 1.6;
}

.toc-item-content a {
    color: var(--neon-purple);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--speed-fast) ease;
}

.toc-item-content a:hover {
    color: var(--neon-orange);
}


/* ── CONTENT SECTIONS ──────────────────────────────────────── */
.content-section {
    background: var(--bg-card);
    padding: 64px 32px;
    border-bottom: 2px solid var(--border);
}

.content-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.content-section h2 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--charcoal);
}

.content-section h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--neon-purple);
    margin-top: 32px;
}

.content-section h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--charcoal);
}


/* ── CALLOUT BOXES ─────────────────────────────────────────── */
.concept-box,
.warning-box,
.success-box {
    padding: 24px;
    margin: 24px 0;
    border: 2px solid var(--border);
}

.concept-box {
    background: var(--bg-surface);
    border-left: 3px solid var(--neon-purple);
}

.warning-box {
    background: rgba(255, 23, 68, 0.04);
    border-left: 3px solid var(--neon-red);
}

.success-box {
    background: rgba(0, 212, 170, 0.04);
    border-left: 3px solid var(--neon-teal);
}

.concept-box h4,
.warning-box h4,
.success-box h4 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--charcoal);
}


/* Mermaid: inherits global styles from styles.css */


/* ── FEE HIGHLIGHT ─────────────────────────────────────────── */
.fee-highlight {
    display: inline-block;
    background: var(--neon-orange);
    color: #fff;
    padding: 2px 10px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}


/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .toc-grid {
        grid-template-columns: 1fr;
    }

    .content-section {
        padding: 40px var(--space-md);
    }
}