/*
 * Cleverer Landing Page Design System — clvr-lp
 *
 * Design direction: Vision §15 — modern SaaS, premium corporate, clear and calm.
 * Palette:
 *   Dark bg   #0f172a   Hero / CTA card backgrounds
 *   Body bg   #f8fafc   Page background
 *   Text      #1e293b   Body copy
 *   Muted     #64748b   Supporting text
 *   Border    #e2e8f0   Card borders / dividers
 *   Primary   #2563eb   CTA buttons / accent
 *   Risk      #fef3c7   Risk callout background
 *   Risk bd   #d97706   Risk callout border
 *
 * BEM structure:
 *   .clvr-lp                   Root wrapper
 *   .clvr-lp__container        Centred content column (max 960px)
 *   .clvr-lp__hero             Dark full-width opening section
 *   .clvr-lp__hero--lean       Compact hero (MOFU)
 *   .clvr-lp__hero--cta        Hero with inline CTA (BOFU)
 *   .clvr-lp__hero-lead        Large lead paragraph inside hero
 *   .clvr-lp__section          Standard section block
 *   .clvr-lp__section-head     Wrapper div: <div class="clvr-lp__section-head"><h2>…</h2></div>
 *   .clvr-lp__grid-3           Responsive 3-column card grid
 *   .clvr-lp__card             Card unit in grid
 *   .clvr-lp__card-icon        SVG icon area inside card
 *   .clvr-lp__card-title       H3 inside card
 *   .clvr-lp__callout          Highlighted callout block
 *   .clvr-lp__callout--risk    Amber risk callout variant
 *   .clvr-lp__flow             Numbered step flow block
 *   .clvr-lp__steps            <ol> inside flow
 *   .clvr-lp__step             <li> step item
 *   .clvr-lp__step-num         Step number badge
 *   .clvr-lp__btn              Base button — always pair with a modifier
 *   .clvr-lp__btn--primary     Filled blue primary CTA button
 *   .clvr-lp__btn--secondary   Outlined blue secondary button
 *   .clvr-lp__cta              CTA section container (not the button)
 *   .clvr-lp__cta-card         Full-width CTA card
 *   .clvr-lp__cta-card--dark   Dark variant CTA card
 *   .clvr-lp__insight-panel    Grouped idea block — 2–3 bold-label + text pairs, no H2 (TOFU)
 *   .clvr-lp__compact-list     Tighter bullet list (BOFU What You Get)
 *   .clvr-lp__trust            Muted trust/supporting text
 *   .clvr-lp__outcome          BOFU above-the-fold outcome statement
 *
 * Root modifiers:
 *   .clvr-lp--bridge           MOFU bridge page (amber hero accent)
 *   .clvr-lp--offer            BOFU offer page (gradient hero)
 */

/* ─────────────────────────────────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────────────────────────────────── */

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

.clvr-lp {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1e293b;
    line-height: 1.6;
    background: #f8fafc;
}

.clvr-lp p {
    margin: 0 0 0.75rem;
}

.clvr-lp p:last-child {
    margin-bottom: 0;
}

.clvr-lp h1,
.clvr-lp h2,
.clvr-lp h3 {
    margin: 0 0 0.5rem;
    line-height: 1.25;
    font-weight: 700;
    color: #0f172a;
}

.clvr-lp a {
    color: #2563eb;
    text-decoration: none;
}

.clvr-lp a:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────
   CONTAINER
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO — high specificity to beat Breakdance global resets
   ───────────────────────────────────────────────────────────────────── */

/*
 * All hero rules are scoped under body.clvr-funnel-page to ensure
 * specificity (0,2,0) beats Breakdance's generic element resets.
 */

body.clvr-funnel-page .clvr-lp__hero {
    background: #0f172a;
    color: #f1f5f9;
    padding: 56px 0 40px;
    border-bottom: 3px solid #2563eb;
}

body.clvr-funnel-page .clvr-lp__hero--lean {
    padding: 36px 0 28px;
}

body.clvr-funnel-page .clvr-lp__hero--cta {
    padding: 48px 0 36px;
}

body.clvr-funnel-page .clvr-lp__hero h1,
body.clvr-funnel-page .clvr-lp__hero h2 {
    color: #f1f5f9;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

body.clvr-funnel-page .clvr-lp__hero-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #cbd5e1;
    max-width: 720px;
    margin: 0.75rem 0 0;
}

body.clvr-funnel-page .clvr-lp__hero-lead strong {
    color: #f1f5f9;
}

/* Stage hero variants — scoped high */
body.clvr-funnel-page .clvr-lp--bridge .clvr-lp__hero {
    border-bottom: 3px solid #d97706;
}

body.clvr-funnel-page .clvr-lp--offer .clvr-lp__hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-bottom: 3px solid #2563eb;
}

/* ─────────────────────────────────────────────────────────────────────
   SECTIONS
   No borders between sections — padding alone creates rhythm.
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__section {
    padding: 18px 0;
}

/*
 * .clvr-lp__section-head is a wrapper div, NOT applied to <h2> directly.
 * <div class="clvr-lp__section-head"><h2>…</h2><p>Support text</p></div>
 */
.clvr-lp__section-head {
    margin: 0 0 0.625rem;
}

.clvr-lp__section-head h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.clvr-lp__section-head p {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0.25rem 0 0;
    line-height: 1.55;
}

/* Stage-specific section padding */
.clvr-lp--bridge .clvr-lp__section {
    padding: 16px 0;
}

.clvr-lp--offer .clvr-lp__section {
    padding: 14px 0;
}

/* List styling inside sections */
.clvr-lp__section ul,
.clvr-lp__section ol {
    margin: 0.375rem 0 0;
    padding-left: 1.25rem;
}

.clvr-lp__section ul { list-style: disc; }
.clvr-lp__section ol { list-style: decimal; }

.clvr-lp__section ul li,
.clvr-lp__section ol li {
    font-size: 0.9375rem;
    color: #334155;
    line-height: 1.55;
    margin-bottom: 0.375rem;
}

.clvr-lp__section ul li:last-child,
.clvr-lp__section ol li:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   INSIGHT PANEL — grouped block for 2–3 related ideas (TOFU sections 2+3)
   Uses bold inline labels in place of H2 headings.
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__insight-panel {
    background: #f1f5f9;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 6px 6px 0;
    padding: 16px 20px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clvr-lp__insight-panel p {
    margin: 0;
    font-size: 0.9375rem;
    color: #334155;
    line-height: 1.55;
}

.clvr-lp__insight-panel strong {
    color: #0f172a;
    font-weight: 700;
    display: inline;
}

/* Stage accents */
.clvr-lp--bridge .clvr-lp__insight-panel {
    border-left-color: #d97706;
    background: #fffbeb;
}

/* ─────────────────────────────────────────────────────────────────────
   COMPACT LIST — tighter bullets for BOFU "What You Get"
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__compact-list {
    margin: 0.25rem 0 0;
    padding-left: 1.125rem;
    list-style: disc;
}

.clvr-lp__compact-list li {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.45;
    margin-bottom: 0.25rem;
}

.clvr-lp__compact-list li:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   3-COLUMN CARD GRID
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 4px 0;
}

@media (max-width: 600px) {
    .clvr-lp__grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .clvr-lp__grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.clvr-lp__card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.15s ease;
}

.clvr-lp__card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.09);
}

.clvr-lp__card-icon {
    width: 36px;
    height: 36px;
    color: #2563eb;
    flex-shrink: 0;
}

.clvr-lp__card-icon svg {
    width: 36px;
    height: 36px;
}

.clvr-lp__card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.clvr-lp__card p {
    font-size: 0.875rem;
    color: #475569;
    margin: 0;
    line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────────
   CALLOUT
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__callout {
    background: #f0f9ff;
    border-left: 4px solid #2563eb;
    border-radius: 0 6px 6px 0;
    padding: 20px 24px;
    margin: 8px 0;
}

.clvr-lp__callout--risk {
    background: #fef3c7;
    border-left-color: #d97706;
}

.clvr-lp__callout h2,
.clvr-lp__callout .clvr-lp__section-head h2 {
    font-size: 1.0625rem;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.clvr-lp__callout p {
    font-size: 0.9375rem;
    color: #334155;
    margin: 0 0 0.375rem;
}

.clvr-lp__callout p:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   STEP FLOW
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__flow {
    padding: 24px 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
}

.clvr-lp__flow .clvr-lp__section-head {
    margin-bottom: 20px;
}

.clvr-lp__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clvr-lp__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.clvr-lp__step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.clvr-lp__step-body {
    padding-top: 5px;
    font-size: 0.9375rem;
    color: #1e293b;
    line-height: 1.5;
}

.clvr-lp__step-body strong {
    display: block;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   BUTTON SYSTEM
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1rem;
    padding: 13px 26px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    line-height: 1;
    cursor: pointer;
    border: 2px solid transparent;
}

.clvr-lp__btn--primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.clvr-lp__btn--primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    text-decoration: none;
    color: #fff;
}

.clvr-lp__btn--secondary {
    background: transparent;
    color: #2563eb;
    border-color: #2563eb;
}

.clvr-lp__btn--secondary:hover {
    background: #eff6ff;
    text-decoration: none;
    color: #2563eb;
}

/* Larger in hero and CTA card */
body.clvr-funnel-page .clvr-lp__hero .clvr-lp__btn,
.clvr-lp__cta-card .clvr-lp__btn {
    font-size: 1.0625rem;
    padding: 15px 30px;
}

/* ─────────────────────────────────────────────────────────────────────
   CTA CONTAINER & CTA CARD
   ───────────────────────────────────────────────────────────────────── */

/* .clvr-lp__cta is a section-level container, not a button */
.clvr-lp__cta {
    margin: 20px 0;
}

.clvr-lp__cta-card {
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 28px 32px;
    text-align: center;
    margin: 20px 0 32px;
}

.clvr-lp__cta-card--dark {
    background: #0f172a;
    border-color: #1e293b;
    color: #f1f5f9;
}

.clvr-lp__cta-card--dark h2,
.clvr-lp__cta-card--dark .clvr-lp__section-head h2 {
    color: #f1f5f9;
}

.clvr-lp__trust {
    color: #94a3b8;
    font-size: 0.875rem;
    margin: 0 0 16px;
    display: block;
}

.clvr-lp__cta-card--dark p:not(.clvr-lp__trust) {
    color: #94a3b8;
    font-size: 0.9375rem;
    margin: 0 0 16px;
}

/* ─────────────────────────────────────────────────────────────────────
   OUTCOME STATEMENT (BOFU)
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__outcome {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.5;
    color: #0f172a;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   FUNNEL TRANSITION LINK (injected by StageCTAEnforcer)
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp .clvr-funnel-link {
    background: #f1f5f9;
    border-left: 3px solid #94a3b8;
    border-radius: 0 6px 6px 0;
    padding: 14px 18px;
    margin-top: 24px;
}

.clvr-lp .clvr-funnel-link h2 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.2rem;
    line-height: 1.3;
}

.clvr-lp .clvr-funnel-link p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.clvr-lp .clvr-funnel-link p:last-child {
    margin-bottom: 0;
}

.clvr-lp .clvr-funnel-link a {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #2563eb;
    text-decoration: none;
}

.clvr-lp .clvr-funnel-link a:hover {
    text-decoration: underline;
}

/* MOFU: amber left accent on transition link */
.clvr-lp--bridge .clvr-funnel-link {
    border-left-color: #d97706;
}

/* BOFU: blue left accent on transition link */
.clvr-lp--offer .clvr-funnel-link {
    border-left-color: #2563eb;
    background: #eff6ff;
}

/* ─────────────────────────────────────────────────────────────────────
   OFFER BLOCK (injected by StageCTAEnforcer for BOFU)
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp .clvr-offer-block {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 28px 32px;
    text-align: center;
    margin: 20px 0 32px;
}

.clvr-lp .clvr-offer-block h2 {
    color: #f1f5f9;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.clvr-lp .clvr-offer-block p {
    color: #94a3b8;
    font-size: 0.9375rem;
    margin: 0 0 16px;
    line-height: 1.55;
}

.clvr-lp .clvr-offer-block a,
.clvr-lp .clvr-offer-block .clvr-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 1.0625rem;
    padding: 15px 30px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}

.clvr-lp .clvr-offer-block a:hover,
.clvr-lp .clvr-offer-block .clvr-cta:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    text-decoration: none;
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────
   UTILITY
   ───────────────────────────────────────────────────────────────────── */

.clvr-lp__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 8px;
}

.clvr-lp__divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   FULL-PAGE TEMPLATE SHELL
   ───────────────────────────────────────────────────────────────────── */

body.clvr-funnel-page {
    background: #f8fafc;
    margin: 0;
    padding: 0;
}

body.clvr-funnel-page .clvr-lp {
    min-height: 100vh;
}