.cannakpi-landing {
            --cl-bg: var(--cannakpi-bg, #F6F7F4);
            --cl-surface: var(--cannakpi-surface, #FFFFFF);
            --cl-ink: var(--cannakpi-ink, #1B241E);
            --cl-muted: var(--cannakpi-muted, #6B756A);
            --cl-line: var(--cannakpi-line, #DCE1D8);
            --cl-in-spec: var(--cannakpi-in-spec, #7A9B76);
            --cl-on-target: var(--cannakpi-on-target, #2D5A3D);
            --cl-attention: var(--cannakpi-attention, #C17A3D);
            --cl-attention-bg: var(--cannakpi-attention-bg, #FBF1E8);
            --cl-ink-deep: #12180F;

            font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--cl-ink);
            background: var(--cl-bg);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        .cannakpi-landing * { box-sizing: border-box; }

        .cannakpi-landing h1,
        .cannakpi-landing h2,
        .cannakpi-landing h3 {
            font-family: 'Space Grotesk', sans-serif;
            color: var(--cl-ink);
            margin: 0;
        }

        .cannakpi-landing a {
            text-decoration: none;
            color: inherit;
        }

        /*
        .cl-bleed used to break the theme's content-width container for
        full-bleed sections. Now that this page renders through its own
        standalone template (see marketing-landing.php's comments on
        why), there's no theme padding/container to break out of --
        every section is already a direct child of <body>. Left as a
        no-op (rather than removing the class from the markup) so
        nothing needs editing if a wrapping container is ever
        reintroduced. The old width:100vw + negative-margin version of
        this rule also combined badly with the header's
        position:sticky, visibly throwing its layout off -- another
        reason to drop it now that it isn't needed.
        */
        .cl-bleed {
            width: 100%;
        }

        .cl-inner {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 32px;
        }

        .cl-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 14px;
            padding: 11px 22px;
            border-radius: 4px;
            border: 1.5px solid var(--cl-on-target);
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
            cursor: pointer;
            white-space: nowrap;
        }

        .cl-btn:hover { transform: translateY(-1px); }

        .cl-btn-solid {
            background: var(--cl-on-target);
            color: #fff;
        }

        .cl-btn-solid:hover { background: var(--cl-ink-deep); border-color: var(--cl-ink-deep); }

        .cl-btn-outline {
            background: transparent;
            color: var(--cl-on-target);
        }

        .cl-btn-outline:hover { background: var(--cl-bg); }

        .cl-btn-lg { padding: 14px 26px; font-size: 15px; }

        .cl-btn-on-dark {
            border-color: rgba(255,255,255,0.4);
            color: #fff;
        }
        .cl-btn-on-dark.cl-btn-solid { background: #fff; color: var(--cl-on-target); }
        .cl-btn-on-dark.cl-btn-solid:hover { background: var(--cl-in-spec); color: #fff; }
        .cl-btn-on-dark.cl-btn-outline:hover { background: rgba(255,255,255,0.08); }

        /* ---------- Header ---------- */

        .cl-header {
            background: var(--cl-surface);
            border-bottom: 1px solid var(--cl-line);
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .cl-header-inner {
            max-width: 1280px;
            margin: 0 auto;
            padding: 8px 40px;
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .cl-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: auto;
        }

        .cl-logo-img {
            height: 84px;
            width: auto;
            display: block;
        }

        .cl-logo-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--cl-on-target);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .cl-logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }

        .cl-logo-text strong {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: var(--cl-ink);
        }

        .cl-logo-text small {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 9px;
            letter-spacing: 0.08em;
            color: var(--cl-muted);
            text-transform: uppercase;
        }

        .cl-nav {
            display: flex;
            gap: 20px;
        }

        .cl-nav a {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 500;
            font-size: 14.5px;
            color: var(--cl-ink);
            border-bottom: 2px solid transparent;
            padding-bottom: 3px;
            white-space: nowrap;
        }

        .cl-nav a:hover { border-bottom-color: var(--cl-on-target); }

        .cl-header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cl-menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 22px;
            color: var(--cl-ink);
            cursor: pointer;
        }

        /* ---------- Hero ---------- */

        .cl-hero {
            position: relative;
            background:
                linear-gradient(100deg, rgba(18,24,15,0.78) 0%, rgba(18,24,15,0.62) 32%, rgba(45,90,61,0.38) 58%, rgba(45,90,61,0.14) 78%),
                url('growroom-hero.jpg');
            background-size: cover;
            background-position: center 35%;
            padding: 80px 0 72px;
        }

        .cl-hero-inner {
            position: relative;
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 32px;
            display: grid;
            grid-template-columns: 1.05fr 1fr;
            gap: 56px;
            align-items: center;
        }

        .cl-hero h1 {
            font-size: 44px;
            font-weight: 700;
            line-height: 1.12;
            letter-spacing: -0.015em;
            margin-bottom: 20px;
            color: #fff;
        }

        .cl-hero h1 span { color: var(--cl-in-spec); }

        .cl-hero-copy > p {
            font-size: 16.5px;
            line-height: 1.6;
            color: rgba(255,255,255,0.82);
            max-width: 480px;
            margin-bottom: 30px;
        }

        .cl-hero-ctas {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }

        .cl-hero .cl-btn-outline {
            border-color: rgba(255,255,255,0.55);
            color: #fff;
        }

        .cl-hero .cl-btn-outline:hover {
            background: rgba(255,255,255,0.12);
        }

        .cl-checklist {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 26px;
            flex-wrap: wrap;
        }

        .cl-checklist li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #fff;
        }

        .cl-checklist .cl-check {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--cl-in-spec);
            color: var(--cl-ink-deep);
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* Hero laptop mockup */

        .cl-hero-visual { position: relative; }

        .cl-laptop {
            background: var(--cl-ink-deep);
            border-radius: 14px 14px 4px 4px;
            padding: 12px 12px 20px;
            box-shadow: 0 30px 60px -20px rgba(18,24,15,0.45);
        }

        .cl-laptop-notch {
            width: 60px;
            height: 5px;
            background: #2a352a;
            border-radius: 3px;
            margin: 0 auto 8px;
        }

        .cl-screen {
            background: var(--cl-surface);
            border-radius: 4px;
            overflow: hidden;
            font-family: 'IBM Plex Sans', sans-serif;
        }

        .cl-mock-topbar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-bottom: 1px solid var(--cl-line);
            font-size: 10px;
        }

        .cl-mock-topbar .cl-mock-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--cl-on-target);
        }

        .cl-mock-topbar strong {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
        }

        .cl-mock-topbar span {
            margin-left: auto;
            display: flex;
            gap: 10px;
            color: var(--cl-muted);
            font-size: 9.5px;
        }

        .cl-mock-body { padding: 16px; }

        .cl-mock-body h4 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            margin: 0 0 12px;
        }

        .cl-mock-kpis {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 14px;
        }

        .cl-mock-kpi {
            border: 1px solid var(--cl-line);
            border-left: 3px solid var(--cl-on-target);
            border-radius: 3px;
            padding: 8px 9px;
        }

        .cl-mock-kpi span {
            display: block;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--cl-muted);
            margin-bottom: 5px;
        }

        .cl-mock-kpi strong {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 15px;
        }

        .cl-mock-chart {
            border: 1px solid var(--cl-line);
            border-radius: 3px;
            padding: 10px;
            height: 64px;
        }

        .cl-mock-chart svg { width: 100%; height: 100%; display: block; }

        /* ---------- Section shared ---------- */

        .cl-section { padding: 76px 0; }
        .cl-section h2 {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.01em;
            margin-bottom: 44px;
        }

        /* ---------- Sub-page hero (Why CannaKPI / How It Works) ---------- */

        .cl-page-hero {
            padding: 80px 0 56px;
            text-align: center;
            background:
                radial-gradient(ellipse 900px 460px at 50% -10%, rgba(122,155,118,0.16), transparent 60%),
                linear-gradient(180deg, #EFF3EC 0%, var(--cl-bg) 100%);
        }

        .cl-page-hero .cl-inner { max-width: 760px; }

        .cl-page-h1 {
            font-size: 40px;
            font-weight: 700;
            letter-spacing: -0.015em;
            line-height: 1.15;
            margin-bottom: 18px;
        }

        .cl-page-lede {
            font-size: 17.5px;
            line-height: 1.65;
            color: var(--cl-muted);
            margin: 0 auto;
        }

        /* Photo variant, used on multiple sub-page heroes (currently
           Why CannaKPI and Features) to fill what was an empty
           gradient stretch with real facility photography, same scrim
           approach as the homepage hero. Each page uses a different
           photo via a modifier class below (.cl-hero-photo-why,
           .cl-hero-photo-features, etc.) rather than one shared image,
           so pages one click apart don't show the same photo -- text
           colors and the following-section gap fix are shared here
           since those don't depend on which photo is used. */
        .cl-page-hero-photo {
            padding: 84px 0 56px;
            background-size: cover;
            background-position: center 40%;
        }

        .cl-page-hero-photo.cl-hero-photo-why {
            background-image:
                linear-gradient(180deg, rgba(18,24,15,0.72) 0%, rgba(18,24,15,0.55) 45%, rgba(18,24,15,0.8) 100%),
                url('why-cannakpi-hero.jpg');
        }

        .cl-page-hero-photo.cl-hero-photo-features {
            background-image:
                linear-gradient(180deg, rgba(18,24,15,0.72) 0%, rgba(18,24,15,0.55) 45%, rgba(18,24,15,0.8) 100%),
                url('features-hero.jpg');
        }

        .cl-page-hero-photo.cl-hero-photo-howitworks {
            background-image:
                linear-gradient(180deg, rgba(18,24,15,0.72) 0%, rgba(18,24,15,0.55) 45%, rgba(18,24,15,0.8) 100%),
                url('howitworks-hero.jpg');
        }

        .cl-page-hero-photo .cl-page-h1 {
            color: #fff;
            font-size: 48px;
        }

        .cl-page-hero-photo .cl-page-lede {
            color: rgba(255,255,255,0.85);
            font-size: 19px;
        }

        /* Tighten the gap to whatever section follows a photo hero --
           the standard .cl-section top padding (76px) stacked on top
           of this hero's own bottom padding left a large empty stretch
           before the next heading. */
        .cl-page-hero-photo + .cl-section {
            padding-top: 40px;
        }

        /* ---------- Contact / Request Demo forms ---------- */

        .cl-form-wrap {
            max-width: 560px;
        }

        .cl-form {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .cl-form label {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 13.5px;
            color: var(--cl-ink);
            margin-top: 14px;
        }

        .cl-form label:first-of-type { margin-top: 0; }

        .cl-form input[type="text"],
        .cl-form input[type="email"],
        .cl-form select,
        .cl-form textarea {
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 15px;
            padding: 11px 14px;
            border: 1px solid var(--cl-line);
            border-radius: 5px;
            background: var(--cl-surface);
            color: var(--cl-ink);
            box-sizing: border-box;
            transition: border-color 0.15s ease;
        }

        .cl-form input[type="text"]:focus,
        .cl-form input[type="email"]:focus,
        .cl-form select:focus,
        .cl-form textarea:focus {
            outline: none;
            border-color: var(--cl-on-target);
        }

        .cl-form textarea { resize: vertical; }

        .cl-form button {
            margin-top: 26px;
            align-self: flex-start;
            border: none;
        }

        /* Honeypot: visually hidden but still present/focusable to a
           bot's simple form-fill script, unlike display:none which
           some bots explicitly skip. */
        .cl-form-hp {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .cl-form-success,
        .cl-form-error {
            border-radius: 8px;
            padding: 20px 24px;
            font-size: 14.5px;
        }

        .cl-form-success {
            background: #EEF3EB;
            border: 1px solid #D3E0CC;
        }

        .cl-form-success h3 {
            margin: 0 0 6px;
            font-size: 18px;
        }

        .cl-form-success p { margin: 0; color: var(--cl-muted); }

        .cl-form-error {
            background: var(--cl-attention-bg);
            border: 1px solid var(--cl-attention);
            color: #8A5526;
            margin-bottom: 18px;
        }

        /* ---------- Pricing ---------- */

        .cl-pricing-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
            max-width: 860px;
            margin: 0 auto;
        }

        .cl-pricing-card {
            position: relative;
            background: var(--cl-surface);
            border: 1px solid var(--cl-line);
            border-radius: 10px;
            padding: 40px 36px;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        .cl-pricing-featured {
            border: 2px solid var(--cl-on-target);
            box-shadow: 0 16px 36px -18px rgba(18,24,15,0.28);
        }

        .cl-pricing-badge {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--cl-on-target);
            color: #fff;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 6px 16px;
            border-radius: 999px;
        }

        .cl-pricing-card h3 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--cl-muted);
            margin: 8px 0 18px;
        }

        .cl-pricing-amount {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 44px;
            font-weight: 700;
            color: var(--cl-ink);
            margin-bottom: 6px;
        }

        .cl-pricing-amount span {
            font-size: 17px;
            font-weight: 500;
            color: var(--cl-muted);
        }

        .cl-pricing-sub {
            font-size: 14px;
            color: var(--cl-muted);
            margin: 0 0 28px;
        }

        .cl-pricing-features {
            list-style: none;
            padding: 0;
            margin: 0 0 32px;
            text-align: left;
            flex-grow: 1;
        }

        .cl-pricing-features li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14.5px;
            padding: 8px 0;
            color: var(--cl-ink);
        }

        .cl-pricing-features .cl-check {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--cl-on-target);
            color: #fff;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .cl-pricing-cta {
            width: 100%;
            justify-content: center;
        }

        .cl-pricing-footnote {
            text-align: center;
            color: var(--cl-muted);
            font-size: 14px;
            max-width: 560px;
            margin: 36px auto 0;
        }

        .cl-pricing-audit-cta {
            justify-content: center;
            margin-top: 30px;
        }

        /* ---------- Why CannaKPI / Features grid ---------- */

        .cl-why-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
            max-width: 980px;
            margin: 0 auto;
        }

        /* Wider variant for Features page groups with 3+ items, so
           they don't sit stranded in a lopsided 2-column layout. */
        .cl-why-grid-3 {
            grid-template-columns: repeat(3, 1fr);
            max-width: 1140px;
        }

        .cl-why-item {
            background: var(--cl-surface);
            border: 1px solid var(--cl-line);
            border-left: 3px solid var(--cl-on-target);
            border-radius: 10px;
            padding: 32px;
            box-shadow: 0 1px 3px rgba(18,24,15,0.04);
            transition: box-shadow 0.15s ease, transform 0.15s ease;
        }

        .cl-why-item:hover {
            box-shadow: 0 10px 24px -12px rgba(18,24,15,0.16);
            transform: translateY(-2px);
        }

        .cl-why-item .cl-feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            background: var(--cl-bg);
            border: none;
            margin-bottom: 18px;
        }

        /* "Not X" icon variant (What CannaKPI Isn't section) -- a
           muted clay/amber tint instead of the usual sage, so it
           visually reads as a "this isn't it" marker rather than a
           regular feature icon. */
        .cl-why-item.cl-isnt .cl-feature-icon {
            background: var(--cl-attention-bg);
            color: var(--cl-attention);
        }

        .cl-isnt-statement {
            max-width: 760px;
            margin: 44px auto 0;
            text-align: center;
            padding: 28px 36px;
            border-radius: 10px;
            background: #EEF3EB;
            border: 1px solid #D3E0CC;
        }

        .cl-isnt-statement p {
            margin: 0;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.55;
            color: var(--cl-ink);
        }

        /* ---------- Founder note (Why CannaKPI page) ---------- */

        .cl-founder-note {
            max-width: 680px;
        }

        .cl-founder-note .cl-eyebrow {
            text-align: left;
        }

        .cl-founder-note p:not(.cl-eyebrow) {
            font-size: 16px;
            line-height: 1.7;
            color: var(--cl-ink);
            margin: 0 0 20px;
        }

        .cl-founder-note p:last-child {
            margin-bottom: 0;
            color: var(--cl-muted);
            font-style: italic;
        }

        .cl-why-item h3 {
            font-size: 18px;
            margin: 0 0 10px;
        }

        .cl-why-item p {
            font-size: 14.5px;
            line-height: 1.65;
            color: var(--cl-muted);
            margin: 0;
        }

        /* ---------- How It Works steps ---------- */

        .cl-steps {
            max-width: 740px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .cl-step {
            display: flex;
            gap: 24px;
            align-items: flex-start;
            background: var(--cl-surface);
            border: 1px solid var(--cl-line);
            border-radius: 10px;
            padding: 26px 30px;
            box-shadow: 0 1px 3px rgba(18,24,15,0.04);
            transition: box-shadow 0.15s ease, transform 0.15s ease;
        }

        .cl-step:hover {
            box-shadow: 0 10px 24px -12px rgba(18,24,15,0.16);
            transform: translateY(-2px);
        }

        .cl-step-num {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--cl-on-target);
            color: #fff;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cl-step-body h3 {
            font-size: 18px;
            margin: 2px 0 8px;
        }

        .cl-step-body p {
            font-size: 14.5px;
            line-height: 1.65;
            color: var(--cl-muted);
            margin: 0;
        }

        /* ---------- Comparison ---------- */

        .cl-compare-grid {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 0;
            align-items: stretch;
            max-width: 1120px;
            margin: 0 auto;
        }

        .cl-compare-col {
            border-radius: 8px;
            padding: 36px 40px;
        }

        .cl-compare-bad {
            background: var(--cl-surface);
            border: 1px solid var(--cl-line);
            border-radius: 8px 0 0 8px;
        }

        .cl-compare-good {
            background: #EEF3EB;
            border: 1px solid #D3E0CC;
            border-radius: 0 8px 8px 0;
        }

        .cl-compare-col h3 {
            font-size: 23px;
            margin-bottom: 6px;
        }

        .cl-compare-col > p {
            color: var(--cl-muted);
            font-size: 16px;
            margin: 0 0 22px;
        }

        .cl-compare-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .cl-compare-col li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: 17px;
            padding: 11px 0;
        }

        .cl-mark {
            width: 18px; height: 18px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            margin-top: 1px;
        }

        .cl-compare-bad .cl-mark { background: var(--cl-line); color: #7A8378; }
        .cl-compare-good .cl-mark { background: var(--cl-on-target); color: #fff; }
        .cl-compare-bad li { color: var(--cl-muted); }

        .cl-vs {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--cl-ink-deep);
            color: #fff;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: center;
            margin: 0 -8px;
            position: relative;
            z-index: 2;
            box-shadow: 0 0 0 6px var(--cl-bg);
        }

        /* ---------- See It In Action (real screenshots) ---------- */

        .cl-proof-lede {
            text-align: center;
            color: var(--cl-muted);
            font-size: 16.5px;
            margin: -30px 0 50px;
        }

        .cl-proof-video-wrap {
            max-width: 920px;
            margin: 0 auto 64px;
        }

        .cl-proof-video {
            width: 100%;
            display: block;
            border-radius: 8px;
            border: 1px solid var(--cl-line);
            box-shadow: 0 16px 36px -18px rgba(18,24,15,0.28);
            background: #000;
        }

        .cl-proof-grid {
            display: flex;
            flex-direction: column;
            gap: 72px;
            max-width: 920px;
            margin: 0 auto;
        }

        .cl-proof-item { text-align: center; }

        .cl-proof-img {
            width: 100%;
            display: block;
            border-radius: 8px;
            border: 1px solid var(--cl-line);
            box-shadow: 0 16px 36px -18px rgba(18,24,15,0.28);
            margin-bottom: 26px;
        }

        .cl-proof-item h3 {
            font-size: 21px;
            margin: 0 auto 10px;
            max-width: 640px;
        }

        .cl-proof-item p {
            font-size: 16px;
            line-height: 1.65;
            color: var(--cl-muted);
            margin: 0 auto;
            max-width: 620px;
        }

        /* ---------- Features ---------- */

        .cl-features { background: var(--cl-surface); border-top: 1px solid var(--cl-line); border-bottom: 1px solid var(--cl-line); }

        .cl-features-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 28px;
        }

        .cl-feature { text-align: left; }

        .cl-feature-icon {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            background: var(--cl-bg);
            border: 1px solid var(--cl-line);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            color: var(--cl-on-target);
        }

        .cl-feature h3 {
            font-size: 15px;
            margin-bottom: 6px;
        }

        .cl-feature p {
            font-size: 13.5px;
            color: var(--cl-muted);
            line-height: 1.5;
            margin: 0;
        }

        /* ---------- Testimonial ---------- */

        .cl-testimonial {
            background: linear-gradient(135deg, var(--cl-ink-deep), var(--cl-on-target) 140%);
            color: #fff;
            padding: 60px 0;
        }

        .cl-testimonial-inner {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 32px;
            display: grid;
            grid-template-columns: 2.2fr 1fr 1fr;
            gap: 36px;
            align-items: center;
        }

        .cl-testimonial blockquote {
            margin: 0;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 21px;
            font-weight: 500;
            line-height: 1.45;
            position: relative;
            padding-left: 6px;
        }

        .cl-testimonial-person {
            display: flex;
            align-items: center;
            gap: 12px;
            border-left: 1px solid rgba(255,255,255,0.25);
            padding-left: 28px;
        }

        .cl-avatar {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
        }

        .cl-testimonial-person .cl-role {
            font-size: 12.5px;
            line-height: 1.5;
            opacity: 0.85;
        }

        .cl-testimonial-stats {
            display: flex;
            gap: 22px;
        }

        .cl-stat strong {
            display: block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 26px;
            font-weight: 700;
        }

        .cl-stat span {
            font-size: 12px;
            opacity: 0.85;
        }

        /* ---------- Bottom CTA ---------- */

        .cl-cta-bottom { text-align: center; }

        .cl-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--cl-on-target);
            margin-bottom: 10px;
        }

        .cl-cta-bottom h2 { text-align: center; margin-bottom: 10px; }

        .cl-cta-bottom > p {
            color: var(--cl-muted);
            font-size: 15.5px;
            max-width: 480px;
            margin: 0 auto 28px;
        }

        .cl-cta-bottom .cl-hero-ctas { justify-content: center; margin-bottom: 52px; }

        .cl-benefits-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            text-align: left;
            max-width: 980px;
            margin: 0 auto;
        }

        .cl-benefit { display: flex; gap: 12px; align-items: flex-start; }

        .cl-benefit .cl-feature-icon { margin-bottom: 0; flex-shrink: 0; }

        .cl-benefit h3 { font-size: 14.5px; margin-bottom: 3px; }
        .cl-benefit p { font-size: 13px; color: var(--cl-muted); margin: 0; line-height: 1.45; }

        /* ---------- Footer ---------- */

        .cl-footer {
            background: var(--cl-ink-deep);
            color: rgba(255,255,255,0.75);
            padding: 34px 0;
        }

        .cl-footer-inner {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 32px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
        }

        .cl-footer .cl-logo-text strong { color: #fff; }
        .cl-footer .cl-logo-text small { color: rgba(255,255,255,0.55); }
        .cl-footer .cl-logo-icon { border-color: rgba(255,255,255,0.4); }

        .cl-footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
        .cl-footer-nav a { font-size: 13.5px; }
        .cl-footer-nav a:hover { color: #fff; }

        .cl-footer-social { display: flex; gap: 14px; }
        .cl-footer-social a {
            width: 32px; height: 32px;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }

        .cl-footer-bottom {
            text-align: center;
            font-size: 12px;
            color: rgba(255,255,255,0.45);
            margin-top: 24px;
        }

        /* ---------- Responsive ---------- */

        @media (max-width: 900px) {
            .cl-nav { display: none; }
            .cl-menu-toggle { display: block; }
            .cl-hero-inner { grid-template-columns: 1fr; }
            .cl-hero-visual { order: -1; }
            .cl-compare-grid { grid-template-columns: 1fr; }
            .cl-compare-bad, .cl-compare-good { border-radius: 8px; }
            .cl-vs { margin: -14px auto; }
            .cl-features-grid { grid-template-columns: repeat(2, 1fr); }
            .cl-testimonial-inner { grid-template-columns: 1fr; text-align: center; }
            .cl-testimonial-person { border-left: none; padding-left: 0; justify-content: center; }
            .cl-testimonial-stats { justify-content: center; }
            .cl-benefits-grid { grid-template-columns: 1fr 1fr; }
            .cl-why-grid, .cl-why-grid-3 { grid-template-columns: 1fr 1fr; }
            .cl-page-h1 { font-size: 30px; }
        }

        @media (max-width: 560px) {
            .cl-hero h1 { font-size: 32px; }
            .cl-header-actions .cl-btn-outline { display: none; }
            .cl-logo-img { height: 60px; }
            .cl-features-grid { grid-template-columns: 1fr; }
            .cl-benefits-grid { grid-template-columns: 1fr; }
            .cl-why-grid, .cl-why-grid-3 { grid-template-columns: 1fr; }
            .cl-pricing-grid { grid-template-columns: 1fr; }
            .cl-compare-col { padding: 24px 20px; }
            .cl-step { gap: 14px; }
            .cl-proof-grid { gap: 48px; }
        }