/* ─── /solutions — programmatic-SEO vertical pages ────────────────────────────
   Loaded per-page via @section Head, the same way templates.css and blog.css are.

   Everything here sits on the tokens in tokens.css and the collapsed type system at the foot
   of marketing.css: three weights, four radii, an 11px floor. No new scales — the July 2026
   rework existed specifically because this file's ancestors kept inventing them.

   The schema block is the reason these pages exist, so it gets the strongest treatment on the
   page: paper-white cards on the tinted section, monospace for anything that came out of the
   database, and the derived-field panel pulled out on the accent because a rollup travelling a
   relationship is the one thing a spreadsheet cannot do.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.sol-hero {
    padding: 72px 0 44px;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    border-bottom: 1px solid var(--line);
}

.sol-crumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 22px;
}
.sol-crumbs a { color: inherit; text-decoration: none; }
.sol-crumbs a:hover { color: var(--ink); text-decoration: underline; }

.sol-hero h1 {
    font-size: clamp(30px, 4.6vw, 50px);
    line-height: 1.08;
    letter-spacing: clamp(-0.022em, -0.02em, -0.014em);
    margin: 0 0 16px;
    max-width: 19ch;
}

.sol-lead {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 62ch;
    margin: 0 0 28px;
}

/* The brief is quoted verbatim and given real prominence: the page's whole claim is that this
   sentence produced the system below, and it is the only claim the reader can verify by
   scrolling. */
.sol-brief {
    margin: 0 0 28px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-deep);
    border-radius: var(--r-md);
    max-width: 66ch;
}
.sol-brief-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 8px;
}
.sol-brief blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.45;
    color: var(--ink);
}

.sol-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sol-free { font-size: 13px; color: var(--text-muted); }

/* ── The captured build ───────────────────────────────────────────────────── */
.sol-schema { padding: 64px 0; background: var(--paper); }
.sol-sub {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 68ch;
    margin: 12px 0 0;
}
.sol-sub strong { color: var(--ink); font-weight: 600; }

.sol-tables {
    display: grid;
    /* auto-fit rather than a fixed column count: a build can now produce up to twenty tables,
       and the grid has to stay sane at both three and twenty. */
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.sol-table {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}
.sol-table header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.sol-table-emoji { font-size: 17px; line-height: 1; }
.sol-table h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    flex: 1 1 auto;
}
.sol-table-count {
    font-size: 11px;
    color: var(--muted-2);
    white-space: nowrap;
}

.sol-fields { list-style: none; margin: 0; padding: 0; }
.sol-fields li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}
.sol-field-name { color: var(--ink); }
.sol-field-type {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-2);
    white-space: nowrap;
}
/* Computed types earn a highlight — they are the point being made. */
.sol-field-type.derived {
    color: var(--accent-ink);
    background: var(--accent-tint-2);
    border-radius: var(--r-sm);
    padding: 1px 6px;
}

.sol-panel {
    margin-top: 22px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.sol-panel h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.sol-panel-sub { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); max-width: 66ch; }

.sol-relations { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sol-relations li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
    padding: 7px 12px;
    background: var(--paper);
    border-radius: var(--r-sm);
}
.sol-rel-from, .sol-rel-to { font-weight: 600; }
.sol-rel-arrow { color: var(--accent-deep); }
.sol-rel-via, .sol-rel-card { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }
.sol-rel-card { margin-left: auto; }

.sol-derived { border-color: var(--accent-deep); background: var(--accent-tint-2); }
.sol-rollups { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sol-rollups li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-radius: var(--r-sm);
    font-size: 13.5px;
}
.sol-rollup-name { font-weight: 600; }
.sol-rollups code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--accent-ink);
    /* Routes can be long and must never push the page sideways. */
    overflow-wrap: anywhere;
}

.sol-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 22px;
}
.sol-extra {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.sol-extra h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; }
.sol-extra p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); overflow-wrap: anywhere; }

/* ── Pain points ──────────────────────────────────────────────────────────── */
.sol-pains { padding: 64px 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.sol-pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 30px;
}
.sol-pain {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
}
.sol-pain-problem {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--ink);
}
.sol-pain-answer {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-muted);
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* ── Suggested automation ─────────────────────────────────────────────────── */
.sol-automation { padding: 44px 0; background: var(--paper); }
.sol-auto-card {
    background: var(--ink-950);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 26px 28px;
}
.sol-auto-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}
.sol-auto-card h2 { margin: 0 0 16px; font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
.sol-auto-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.sol-auto-steps li { font-size: 14px; line-height: 1.6; color: var(--ink-300); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.sol-faq { padding: 64px 0; background: var(--paper-2); border-top: 1px solid var(--line); }

/* ── Related + CTA ────────────────────────────────────────────────────────── */
.sol-related { padding: 56px 0; background: var(--paper); }
.sol-related h2 { font-size: 21px; margin: 0 0 20px; letter-spacing: -0.014em; }
.sol-related-grid, .sol-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.sol-related-card, .sol-index-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.sol-related-card:hover, .sol-index-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sol-related-card h3, .sol-index-card h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.3;
}
.sol-related-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

.sol-index { padding: 56px 0 72px; background: var(--paper); }
.sol-index-brief {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-600);
}
.sol-index-who { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.sol-index-stat {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-ink);
    background: var(--accent-tint-2);
    border-radius: var(--r-sm);
    padding: 3px 8px;
}

.sol-cta { padding: 64px 0 80px; background: var(--ink-950); color: #fff; text-align: center; }
.sol-cta h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; }
.sol-cta p {
    margin: 0 auto 26px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-300);
    max-width: 58ch;
}
.sol-cta .sol-hero-actions { justify-content: center; }
.sol-cta .sol-free { color: var(--ink-400); }

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .sol-hero { padding: 48px 0 32px; }
    .sol-schema, .sol-pains, .sol-faq { padding: 44px 0; }
    .sol-rel-card { margin-left: 0; }
    .sol-auto-card { padding: 22px; }
}

/* Links out to real product pages ("plus the relevant real product page"). Deliberately plain:
   these are a signpost after the argument has been made, not another card to compete with it. */
.sol-elsewhere { padding: 48px 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.sol-elsewhere h2 { font-size: 19px; margin: 0 0 14px; letter-spacing: -0.014em; }
.sol-elsewhere ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sol-elsewhere a { color: var(--ink); font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--accent-deep); }
.sol-elsewhere a:hover { color: var(--accent-ink); }