/* Clean look for pages that have moved off the editorial skin (CARL website-1003, 2026-11-12).
   Loaded as the LAST element of <body> on pages with <body class="clean">, in the slot the skin used, so it wins
   cascade ties against the page's own inline styles. It brings those pages in line with the homepage
   (assets/site.css): one sans font (green accent words keep the old serif italic), a plain cream or charcoal
   canvas, Deep Forest green as the only accent.
   Colors come from meetcaddy/marketing/brand/PALETTE.md only. Dark values follow the page's html[data-theme]. */

/* One font: Inter for every heading and display line (the page base uses DM Sans 800) */
body.clean h1, body.clean h2, body.clean h3, body.clean h4,
body.clean .nav-brand, body.clean .footer-brand,
body.clean .faq-item summary, body.clean .call-form-head, body.clean .team-name {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.clean h1, body.clean h2, body.clean h3, body.clean h4 { font-weight: 600; letter-spacing: -0.03em; }
body.clean h1 { letter-spacing: -0.04em; line-height: 1.04; }

/* Plain canvas: no grid texture */
body.clean::before { display: none !important; }

/* The accent phrase is plain green, not a gradient */
body.clean .gradient-text {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #2D6A4F;
}
html[data-theme="dark"] body.clean .gradient-text { color: #57B98A; }

/* Green accent words keep the old serif italic (Tucker 2026-11-12: "the words that are green i wanted to keep that
   old cursive writing style"). The same Palatino stack the old skin used: it ships with Mac, iPhone and Windows, so
   nothing downloads; other devices use their own serif. Covers the accent phrase on every clean page, the
   comparison pages' hero and band words, and the AI Map result headline. Everything else stays Inter. */
body.clean .gradient-text,
body.clean .vs-hero h1 em,
body.clean .band em,
body.clean .rhead-band h2 .money {
    font-family: "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-style: italic;
    letter-spacing: -0.015em;
}

/* Questions block (Book a call): same pattern as the About page's FAQ */
.clean-faq { max-width: 760px; margin: 72px auto 0; padding: 0 20px; }
.clean-faq h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; color: var(--text-strong); margin: 0 0 18px; }
.clean-faq details { border-top: 1px solid var(--hairline-soft); padding: 14px 0; }
.clean-faq details:last-child { border-bottom: 1px solid var(--hairline-soft); }
.clean-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; color: var(--text-strong); }
.clean-faq details p { margin: 10px 0 0; color: var(--text); line-height: 1.65; }
.clean-faq summary, body.clean .about-faq summary {
    list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.clean-faq summary::-webkit-details-marker, body.clean .about-faq summary::-webkit-details-marker { display: none; }
.clean-faq summary::after, body.clean .about-faq summary::after {
    content: '+'; flex: none; font-weight: 400; font-size: 20px; line-height: 1; color: var(--green-text, #2D6A4F);
}
.clean-faq details[open] summary::after, body.clean .about-faq details[open] summary::after { content: '\2212'; }

/* Two blocks in one section (Strategic AI Audit: the room and the report) */
.clean-split + .clean-split { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--hairline-soft); }

/* Comparison pages: the "Caddy ACE" label sits on the deep green card in both themes, so it is always pale green
   (it used the page's text green, which is dark green in light mode and unreadable there). */
body.clean .verdict .us h2 { color: #B7D9C4; }

/* Tighter vertical rhythm (Tucker 2026-11-12: too much open space on desktop). Only top and bottom padding change;
   side padding, widths and inline exceptions (style="padding-top:0") stay as each page set them. The first block
   clears the menu bar (bottom edge at 70px) by about 46px on desktop and 30px on phones. */
body.clean .page-header, body.clean .blog-header, body.clean .post-header, body.clean .legal-header { padding-top: 116px; }
body.clean section.hero { padding-top: 124px; }
body.clean .vs-hero-inner { padding-top: 104px; }
body.clean .section { padding-top: 56px; padding-bottom: 56px; }
body.clean .read-next { padding-bottom: 56px; }
body.clean .page-header ~ .post-cta { padding-top: 44px; }
body.clean .booking-section { padding-bottom: 64px; }
@media (max-width: 720px) {
    body.clean .page-header, body.clean .blog-header, body.clean .post-header, body.clean .legal-header { padding-top: 100px; }
    body.clean section.hero { padding-top: 104px; }
    body.clean .vs-hero-inner { padding-top: 92px; }
    body.clean .section { padding-top: 44px; padding-bottom: 44px; }
    body.clean .read-next { padding-bottom: 44px; }
    body.clean .page-header ~ .post-cta { padding-top: 32px; }
}